studio/docs
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨(frontend) add custom css style

Browse Source 
From the config, we can add custom css style
to the app.
This commit is contained in:
Anthony LC
2025-03-26 16:42:22 +01:00
committed by Anthony LC
parent 725cae5470
commit 65e450c6cc
4 changed files with 39 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -21,6 +21,7 @@ and this project adheres to
## Added ## Added
- 📄(legal) Require contributors to sign a DCO #779 - 📄(legal) Require contributors to sign a DCO #779
- ✨(frontend) add custom css style #771
## Changed ## Changed

24
src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts
View File

@@ -174,6 +174,30 @@ test.describe('Config', () => {
page.locator('#crisp-chatbox').getByText('Invalid website'), page.locator('#crisp-chatbox').getByText('Invalid website'),
).toBeVisible(); ).toBeVisible();
}); });
test('it checks FRONTEND_CSS_URL config', async ({ page }) => {
await page.route('**/api/v1.0/config/', async (route) => {
const request = route.request();
if (request.method().includes('GET')) {
await route.fulfill({
json: {
...config,
FRONTEND_CSS_URL: 'http://localhost:123465/css/style.css',
},
});
} else {
await route.continue();
}
});
await page.goto('/');
await expect(
page
.locator('head link[href="http://localhost:123465/css/style.css"]')
.first(),
).toBeAttached();
});
}); });
test.describe('Config: Not loggued', () => { test.describe('Config: Not loggued', () => {

18
src/frontend/apps/impress/src/core/config/ConfigProvider.tsx
View File

@@ -1,4 +1,5 @@
import { Loader } from '@openfun/cunningham-react'; import { Loader } from '@openfun/cunningham-react';
import Head from 'next/head';
import { PropsWithChildren, useEffect } from 'react'; import { PropsWithChildren, useEffect } from 'react';
import { Box } from '@/components'; import { Box } from '@/components';
@@ -54,10 +55,17 @@ export const ConfigProvider = ({ children }: PropsWithChildren) => {
} }
return ( return (
<AnalyticsProvider> <>
<CrispProvider websiteId={conf?.CRISP_WEBSITE_ID}> {conf?.FRONTEND_CSS_URL && (
{children} <Head>
</CrispProvider> <link rel="stylesheet" href={conf?.FRONTEND_CSS_URL} />
</AnalyticsProvider> </Head>
)}
<AnalyticsProvider>
<CrispProvider websiteId={conf?.CRISP_WEBSITE_ID}>
{children}
</CrispProvider>
</AnalyticsProvider>
</>
); );
}; };

1
src/frontend/apps/impress/src/core/config/api/useConfig.tsx
View File

@@ -11,6 +11,7 @@ interface ConfigResponse {
COLLABORATION_WS_URL?: string; COLLABORATION_WS_URL?: string;
CRISP_WEBSITE_ID?: string; CRISP_WEBSITE_ID?: string;
FRONTEND_THEME?: Theme; FRONTEND_THEME?: Theme;
FRONTEND_CSS_URL?: string;
MEDIA_BASE_URL?: string; MEDIA_BASE_URL?: string;
POSTHOG_KEY?: PostHogConf; POSTHOG_KEY?: PostHogConf;
SENTRY_DSN?: string; SENTRY_DSN?: string;