From 799a362f8950459b082405e6fb47b95bb0d4b7fb Mon Sep 17 00:00:00 2001
From: Emmanuel Pelletier <manu@habite.la>
Date: Thu, 27 Feb 2025 14:51:31 +0100
Subject: [PATCH] gaufre: better handle the marianne font subsetting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

this should be easier to handle if the one doing it is not… me. Still
not that great but better than nothing!
---
 website/.env.example                          |   1 +
 website/README.md                             |  17 +++++++
 website/bin/gaufre-glyphhanger-cmd.mjs        |  43 +++++++++++++++++
 website/package.json                          |   1 +
 .../fonts/Marianne-Regular-subset-1.woff2     | Bin 0 -> 4580 bytes
 .../fonts/Marianne-Regular-subset.woff2       | Bin 4476 -> 0 bytes
 website/public/fonts/readme.md                |  18 -------
 website/src/components/GaufrePage.astro       |  44 ++++++++++++------
 8 files changed, 93 insertions(+), 31 deletions(-)
 create mode 100644 website/bin/gaufre-glyphhanger-cmd.mjs
 create mode 100644 website/public/fonts/Marianne-Regular-subset-1.woff2
 delete mode 100644 website/public/fonts/Marianne-Regular-subset.woff2
 delete mode 100644 website/public/fonts/readme.md

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 0000000000000000000000000000000000000000..81609726fb764ce570c0f5265b2d713d5b5c0dc1
GIT binary patch
literal 4580
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
O8u}gcn%pMv0002JKD6-w

literal 0
HcmV?d00001

diff --git a/website/public/fonts/Marianne-Regular-subset.woff2 b/website/public/fonts/Marianne-Regular-subset.woff2
deleted file mode 100644
index 47825af8ed9d8b7d972376a77fcf72c281f3b078..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4476
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
OFyisDRmIn&0ssJ@n_*A@

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"
 ---
 
 <!doctype html>
@@ -18,16 +20,27 @@ const { services } = Astro.props
   </head>
   <body>
     <div class="lagaufre">
+      {useSubsettedFont ? (
+        <style is:inline>
+          @font-face {
+            font-family: "La Gaufre";
+            src: url("/fonts/Marianne-Regular-subset-1.woff2") format("woff2");
+            unicode-range: U+20,U+27-29,U+44,U+46,U+47,U+50,U+52-54,U+56,U+57,U+61-66,U+68,U+69,U+6C-70,U+72-76,U+C9,U+E9,U+2715;
+            font-weight: 400;
+            font-display: swap;
+          }
+        </style>
+      ) : (
+        <style is:inline>
+          @font-face {
+            font-family: "La Gaufre";
+            src: url("/fonts/Marianne-Regular.woff2") format("woff2");
+            font-weight: 400;
+            font-display: swap;
+          }
+        </style>
+      )}
       <style is:inline>
-        @font-face {
-          font-family: "La Gaufre";
-          src: url("/fonts/Marianne-Regular.woff2") format("woff2");
-          unicode-range: U+20, U+27, U+43, U+44, U+46, U+47, U+4E, U+50, U+52-54, U+56, U+57,
-            U+61-66, U+68, U+69, U+6C-70, U+72-76, U+A0, U+C9, U+E9, U+2715;
-          font-weight: 400;
-          font-display: swap;
-        }
-
         @font-face {
           font-family: "La Gaufre fallback";
           src: local("Arial");
@@ -51,8 +64,9 @@ const { services } = Astro.props
           height: 100% !important;
           width: 100% !important;
           font-size: 100% !important;
-          font-family: "La Gaufre", "La Gaufre fallback", BlinkMacSystemFont, "Segoe UI",
-            "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
+          font-family:
+            "La Gaufre", "La Gaufre fallback", BlinkMacSystemFont, "Segoe UI", "Noto Sans",
+            Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
           margin: 0 0 8px !important;
           border: 2px solid var(--lagaufre-border-color) !important;
           background-color: var(--lagaufre-bg-color) !important;
@@ -265,7 +279,7 @@ const { services } = Astro.props
                 logos[`/src/assets/logos/${id}.svg`] ||
                 logos[`/src/assets/logos/${id}.jpg`] ||
                 logos[`/src/assets/logos/${id}.png`]
-              const ariaLabel = `${name} ${!!beta ? '(bêta)' : ''} - nouvelle fenêtre`
+              const ariaLabel = `${name} ${!!beta ? "(bêta)" : ""} - nouvelle fenêtre`
               return (
                 <li>
                   <div class="lagaufre-service lagaufre-enlarge-link">
@@ -273,7 +287,11 @@ const { services } = Astro.props
                       {!!logo ? (
                         <Image src={logo()} width="40" height="40" alt="" loading="eager" />
                       ) : null}
-                      {!!beta ? <span class="lagaufre-service__beta" aria-hidden="true">beta</span> : null}
+                      {!!beta ? (
+                        <span class="lagaufre-service__beta" aria-hidden="true">
+                          beta
+                        </span>
+                      ) : null}
                     </div>
                     <a
                       target="_blank"