diff --git a/website/.env.example b/website/.env.example index b5ac43e..359cb4c 100644 --- a/website/.env.example +++ b/website/.env.example @@ -1 +1,2 @@ PUBLIC_LASUITE_API_URL=https://integration.lasuite.numerique.gouv.fr +PUBLIC_USE_GAUFRE_SUBSETTED_FONT=1 diff --git a/website/README.md b/website/README.md index e391947..7bb2850 100644 --- a/website/README.md +++ b/website/README.md @@ -39,3 +39,20 @@ Source images are not tracked in the repo. To build images, you must: backgrounds in `public/api/backgrounds`. Depending on the offset passed, or the current week of the month, the service gets a different background. This is meant to be run in a cronjob to generate different backgrounds a few times a month. + +### La Gaufre font + +For the Gaufre content, we use a subset of Marianne font because we know we use just a few +characters for our list. This shrinks the font file size noticeably! + +When you change the Gaufre content (the services shown), use the `npm run gaufre-glyphhanger-cmd` +helper. It will show you the [glyphhanger](https://github.com/zachleat/glyphhanger) command you need +to run locally to generate the new font file before pushing your changes. + +:warning: It will also tell you what to do to update the code accordingly, don't miss it :) + +If for any reason, you want the Gaufre to use a non-subsetted font, set the env var +`PUBLIC_USE_GAUFRE_SUBSETTED_FONT` to `0` on the machine building the website. + +_This is not really streamlined and a bit error-prone, because Astro kinda gets in a way in that +specific case. Any contribution on this is welcome._ diff --git a/website/bin/gaufre-glyphhanger-cmd.mjs b/website/bin/gaufre-glyphhanger-cmd.mjs new file mode 100644 index 0000000..61d1137 --- /dev/null +++ b/website/bin/gaufre-glyphhanger-cmd.mjs @@ -0,0 +1,43 @@ +import path from "path" +import { execSync } from "child_process" +import pc from "picocolors" +import services from "../src/data/services.json" with { type: "json" } + +const glyphhangerIsInstalled = `glyphhanger --version` + +try { + execSync(glyphhangerIsInstalled, { encoding: "utf8", stdio: ["pipe", "pipe", "pipe"] }) +} catch (error) { + console.log(pc.yellow("Warning: it seems glyphhanger is not installed.")) + console.log("Please see https://github.com/zachleat/glyphhanger for installation instructions.\n") +} + +const enabledServices = services.filter((service) => service.enabled) + +const originalFontPath = path.join( + import.meta.dirname, + "..", + "public", + "fonts", + "Marianne-Regular.woff2", +) +const outputDir = path.join(import.meta.dirname, "..", "public", "fonts") + +const whitelist = [...enabledServices.map(({ name }) => name.replace(/ /g, "")), " ✕beta"].join("") + +console.log(`Run this command to generate the new subsetted gaufre font:`) +console.log(` +glyphhanger --formats=woff2 \\ + --subset="${originalFontPath}" \\ + --whitelist="${Array.from(whitelist).join("")}" \\ + --output="${outputDir}"`) + +console.log( + pc.yellow(` +Warning: after running the glyphhanger command, don't forget to: + - update the unicode-range of the subsetted font-family in the GaufrePage.astro component. The new unicode-range is outputed in the console when running glyphhanger. + - rename the newly generated \`Marianne-Regular-subset.woff2\` file to add a cachebusting number, that is superior to the one in the previous filename already existing in the folder. + - update the subsetted font-face src url in the GaufrePage.astro component to use the newly named filename. + - delete the previously existing subsetted font file in the \`public/fonts\` directory. + - commit and push the changes.`), +) diff --git a/website/package.json b/website/package.json index 0c7787f..8cc22a3 100644 --- a/website/package.json +++ b/website/package.json @@ -10,6 +10,7 @@ "dev": "astro dev", "start": "node ./server.mjs", "build-backgrounds": "node ./bin/build-services-backgrounds.mjs", + "gaufre-glyphhanger-cmd": "node ./bin/gaufre-font-cmd.mjs", "build": "astro check && npm run build-backgrounds && astro build", "preview": "astro preview", "astro": "astro" diff --git a/website/public/fonts/Marianne-Regular-subset-1.woff2 b/website/public/fonts/Marianne-Regular-subset-1.woff2 new file mode 100644 index 0000000..8160972 Binary files /dev/null and b/website/public/fonts/Marianne-Regular-subset-1.woff2 differ diff --git a/website/public/fonts/Marianne-Regular-subset.woff2 b/website/public/fonts/Marianne-Regular-subset.woff2 deleted file mode 100644 index 47825af..0000000 Binary files a/website/public/fonts/Marianne-Regular-subset.woff2 and /dev/null differ diff --git a/website/public/fonts/readme.md b/website/public/fonts/readme.md deleted file mode 100644 index 1dcd765..0000000 --- a/website/public/fonts/readme.md +++ /dev/null @@ -1,18 +0,0 @@ -We use a subset of Marianne font because we know we use just a few characters for our list. This -shrinks the font file size noticeably! - -Example command to use to generate the subset with glyphhanger: - -``` -glyphhanger \ - --subset="./Marianne-Regular.woff2" \ - --formats=woff2 \ - --whitelist="DeskLaSuiteNumériqueMessagerieTchapResanaFranceTransfertContactsGristLePadWebConférencedel'ÉtatWebinaire  " -``` - -## ⚠ - -Make sure to also update the `unicode-range` on the `@font-face` CSS rule. You can get it on the -glyphhanger command output. - -Assuming you have the Marianne-Regular.woff2 file (you can take it from the DSFR). diff --git a/website/src/components/GaufrePage.astro b/website/src/components/GaufrePage.astro index 52bdf04..1f5f26c 100644 --- a/website/src/components/GaufrePage.astro +++ b/website/src/components/GaufrePage.astro @@ -8,6 +8,8 @@ import { Image } from "astro:assets" const logos = import.meta.glob<{ default: ImageMetadata }>("/src/assets/logos/*.{svg,png,jpg}") const { services } = Astro.props + +const useSubsettedFont = import.meta.env.PUBLIC_USE_GAUFRE_SUBSETTED_FONT !== "0" --- @@ -18,16 +20,27 @@ const { services } = Astro.props
+ {useSubsettedFont ? ( + + ) : ( + + )}