💄Generic Theme #792

AntoLC · 2025-03-21T17:01:44Z

Purpose

The DSFR theme has some elements not compatible with the open source usage, like the Marianne Font, La Gauffre, the Marianne Logo, the footer.

Proposal

We change the theme to be more generic
We removed all the elements linked to the "design system de l'état" (dsfr)
The footer is configured from a json to be easily overwritable
The legal pages are removed from the codebase, for our instances they will be stored directly in Docs, as a doc.

✨(frontend) create generic theme
🔧(backend) add FRONTEND_PATH_JSON_FOOTER env var
🏗️(frontend) Footer configurable
🔥(frontend) remove legal pages

New settings

New settings about the footer are now available:

# Feature flag on the footer 
FRONTEND_FOOTER_FEATURE_ENABLED=[boolean]  
# URL  to build your footer thanks to a json at runtime
FRONTEND_URL_JSON_FOOTER=http://localhost:3000/contents/footer-demo.json 
# Json cache duration
FRONTEND_FOOTER_VIEW_CACHE_TIMEOUT=[INT:Seconds]

📝 See the documentation: https://github.com/suitenumerique/docs/blob/8f3939cf9eb1072fd39fcf47c69dd05cf6483edc/docs/theming.md#footer-configuration-

Demo

lunika · 2025-03-27T13:53:46Z

This should be documented, the same way I suggest on the css PR.

virgile-dev

Great job!

By default Docs will not be on the dsfr theme but on the generic theme. La Gaufre is part of the dsfr theme and is removed from the generic theme. Same for the "beta" keyword and the "proconnect" buttons.

The content of the footer is now configurable via a JSON file. The JSON file is loaded from the FRONTEND_PATH_JSON_FOOTER environment variable. It is probably not the final solution, but it is a first step to make the footer configurable. In the future, we will probably have a backend service to manage the footer content.

Legal pages are not needed anymore in the application. In the dsfr instances, the legal pages will be displayed on a Docs pages. We let the users of Docs managing the legal pages on their own instances.

We want to desaturate the images system in the generic theme to make them less colorful and more in line with the overall theme. We added a special class to the images that need to be desaturated. Other property then desaturated can be apply depending on the theme.

The favicons were still with the dsfr color. We added the generic favicon in the assets folder. The favicon can be a url loaded from the theme, so when Drive will be running, we will be able to store the dsfr favicons there, and remove them from the repo.

rvveber · 2025-04-16T11:16:06Z

env.d/development/common.dist

@@ -63,6 +63,5 @@ COLLABORATION_SERVER_SECRET=my-secret
 COLLABORATION_WS_URL=ws://localhost:4444/collaboration/ws/

 # Frontend
-FRONTEND_THEME=default
 FRONTEND_FOOTER_FEATURE_ENABLED=True
 FRONTEND_URL_JSON_FOOTER=http://frontend:3000/contents/footer-demo.json


FRONTEND_URL_JSON_FOOTER=http://frontend:3000...
Should be localhost not frontend - right?

Ah.. so the issue is that the backend container now needs to address the frontend container with the internal hostname. Because

by default we put test-jsons in the frontend assets

the backend makes the request to the json here (not recommended)

Problems:

Developing on localhost without the frontend-container is not possible.

Confusing when configuring. The perspective suddenly is different.

It adds complexity that is hard to maintain -> not scalable

I would advise keeping it simple stupid and make the requests from the frontend for now.
Configuring the components via Django Admin should be concern of:
#842

rvveber · 2025-04-16T11:34:36Z

src/frontend/apps/impress/src/features/footer/Footer.tsx

+  const { data: footerJson } = useFooter();
+
+  useEffect(() => {
+    if (!footerJson) {


footerJson was not available for me when i tested.
I set FRONTEND_URL_JSON_FOOTER.

An error message should be added:

useEffect(() => { if (!footerJson) { console.error('Error: Footer JSON is not available'); return; }

rvveber · 2025-04-16T11:40:46Z

src/frontend/apps/impress/src/features/footer/api/useFooter.tsx

+import { FooterType } from '../types';
+
+export const getFooter = async (): Promise<FooterType> => {
+  const response = await fetchAPI(`footer/`);


The extra backend api for the footer is not necessary.

It will get messy and hard to maintain if we do this for multiple components.

Caching on the backend is not that useful because a request still has to be made.

Better to cache the json on the client and remove the backend endpoint to keep it simple

We can add an universal config validation later with the admin form to configure components

I would advise to remove it and cache the json on the client instead

rvveber

Okay, you know what?

I'm working on a PoC to improve how componets are configured anyways.
I'll be using the Footer as the PoC example and i can fix all the changes i requested myself.

Lets merge it for now, because this MR is really big and it will be a PITA to get conflicts resolved later.

soyouzpanda · 2025-04-22T08:36:12Z

I've deployed this theme on my server, and after using it, I think it lacks of colours...
It's kinda depressing... Can't we have something more cheerful?

virgile-dev · 2025-04-22T11:00:25Z

I guess @soyouzpanda is right. Maybe using the blue as primary color on buttons not just on hoover? what do you think @rl-83 ?

AntoLC added the wip label Mar 21, 2025

AntoLC self-assigned this Mar 21, 2025

AntoLC marked this pull request as draft March 21, 2025 17:01

AntoLC mentioned this pull request Mar 24, 2025

✨Process overriding Docs #799

Open

9 tasks

AntoLC force-pushed the feature/theme-europe branch 4 times, most recently from c51d9da to edfbe9f Compare March 25, 2025 14:56

AntoLC changed the title ~~theme europe~~ 💄Theme Europe Mar 25, 2025

AntoLC added frontend feature backend and removed wip labels Mar 25, 2025

AntoLC force-pushed the feature/theme-europe branch 3 times, most recently from 734e834 to 106a5e5 Compare March 25, 2025 16:13

AntoLC marked this pull request as ready for review March 26, 2025 20:02

virgile-dev self-requested a review March 27, 2025 10:51

AntoLC requested review from lunika, NathanVss and rl-83 March 27, 2025 11:50

virgile-dev changed the title ~~💄Theme Europe~~ 💄Generic Theme Apr 2, 2025

AntoLC removed request for lunika, NathanVss, virgile-dev and rl-83 April 2, 2025 09:46

AntoLC force-pushed the feature/theme-europe branch from 106a5e5 to 84b5e2f Compare April 4, 2025 14:22

AntoLC linked an issue Apr 4, 2025 that may be closed by this pull request

Handle legal pages as docs #793

Closed

AntoLC force-pushed the feature/theme-europe branch from 84b5e2f to 3492ea2 Compare April 8, 2025 07:33

AntoLC force-pushed the feature/theme-europe branch 4 times, most recently from 33c7b01 to 6eb903f Compare April 8, 2025 15:02

AntoLC requested review from lunika, virgile-dev and rvveber April 8, 2025 15:09

AntoLC force-pushed the feature/theme-europe branch from 6eb903f to 0982285 Compare April 10, 2025 11:43

virgile-dev approved these changes Apr 11, 2025

View reviewed changes

AntoLC force-pushed the feature/theme-europe branch from 0982285 to 2e34dba Compare April 11, 2025 15:14

AntoLC added 6 commits April 11, 2025 22:06

✨(frontend) create generic theme

0f84ff8

By default Docs will not be on the dsfr theme but on the generic theme. La Gaufre is part of the dsfr theme and is removed from the generic theme. Same for the "beta" keyword and the "proconnect" buttons.

🔥(frontend) remove legal pages

b5330fa

Legal pages are not needed anymore in the application. In the dsfr instances, the legal pages will be displayed on a Docs pages. We let the users of Docs managing the legal pages on their own instances.

test-staging

d150e4d

AntoLC force-pushed the feature/theme-europe branch from 2e34dba to d150e4d Compare April 11, 2025 20:06

rvveber suggested changes Apr 16, 2025

View reviewed changes

rvveber approved these changes Apr 16, 2025

View reviewed changes

soyouzpanda mentioned this pull request Apr 25, 2025

nixos/lasuite-docs: init NixOS/nixpkgs#401798

Draft

13 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

💄Generic Theme #792

💄Generic Theme #792

AntoLC commented Mar 21, 2025 •

edited

Loading

lunika commented Mar 27, 2025 •

edited

Loading

virgile-dev left a comment

rvveber Apr 16, 2025 •

edited

Loading

rvveber Apr 16, 2025 •

edited

Loading

rvveber Apr 16, 2025

rvveber Apr 16, 2025

rvveber left a comment

soyouzpanda commented Apr 22, 2025

virgile-dev commented Apr 22, 2025

💄Generic Theme #792

Are you sure you want to change the base?

💄Generic Theme #792

Conversation

AntoLC commented Mar 21, 2025 • edited Loading

Purpose

Proposal

New settings

Demo

lunika commented Mar 27, 2025 • edited Loading

virgile-dev left a comment

Choose a reason for hiding this comment

rvveber Apr 16, 2025 • edited Loading

Choose a reason for hiding this comment

rvveber Apr 16, 2025 • edited Loading

Choose a reason for hiding this comment

rvveber Apr 16, 2025

Choose a reason for hiding this comment

rvveber Apr 16, 2025

Choose a reason for hiding this comment

rvveber left a comment

Choose a reason for hiding this comment

soyouzpanda commented Apr 22, 2025

virgile-dev commented Apr 22, 2025

AntoLC commented Mar 21, 2025 •

edited

Loading

lunika commented Mar 27, 2025 •

edited

Loading

rvveber Apr 16, 2025 •

edited

Loading

rvveber Apr 16, 2025 •

edited

Loading