Merge branch 'dev'

Author: sneko

.github/workflows/ci.yml

@@ -64,6 +64,15 @@ jobs:
       - name: Test unit
         run: make test-unit
 
+      - uses: actions/cache@v3
+        name: Setup assets cache
+        with:
+          path: apps/docs/tmp/
+          # The `raw` DSFR is scrapped with a fixed URL so you have to delete the CI/CD cache if you want a new version of it
+          key: ${{ runner.os }}-assets-${{ hashFiles('apps/docs/scripts/assets.ts') }}
+          restore-keys: |
+            ${{ runner.os }}-assets-
+
       - name: Prepare building
         run: make build-prepare
 

apps/docs/scripts/assets.ts

@@ -0,0 +1,10 @@
+// All assets to download are into this file to ease caching into the CI/CD based on source links
+// (scraping and downloading them are consuming)
+
+export const assetsUrls = {
+  raw: 'https://main--ds-gouv.netlify.app/example/',
+  bootstrapV5: 'https://github.com/twbs/bootstrap/archive/refs/tags/v5.3.0-alpha3.zip',
+  infimaV1: 'https://github.com/facebookincubator/infima/archive/refs/tags/v0.2.0-alpha.43.zip',
+  muiV5: 'https://github.com/mui/material-ui/archive/refs/tags/v5.13.4.zip',
+  vuetifyV3: 'https://github.com/vuetifyjs/vuetify/archive/refs/tags/v3.3.1.zip',
+};

apps/docs/scripts/bootstrap-v5/actions.ts

@@ -4,18 +4,21 @@ import { glob } from 'glob';
 import handlebars from 'handlebars';
 import path from 'path';
 
+import { assetsUrls } from '@dsfrc/docs/scripts/assets';
 import { getFrameworkFolderPath } from '@dsfrc/docs/utils';
 import { downloadFile } from '@dsfrc/docs/utils';
 
 const framework: string = path.basename(__dirname);
-const zipUrl = 'https://github.com/twbs/bootstrap/archive/refs/tags/v5.3.0-alpha3.zip';
+const zipUrl = assetsUrls.bootstrapV5;
 
 export async function downloadAndExtract() {
   const zipDestination = path.resolve(__dirname, `../../tmp/${framework}.zip`);
   const extractionFolderPath = path.resolve(__dirname, `../../tmp/${framework}`);
 
   if (!(await fs.pathExists(zipDestination))) {
     await downloadFile(zipUrl, zipDestination);
+  } else {
+    console.warn(`${framework} assets downloads skipped since present locally`);
   }
 
   const zip = new AdmZip(zipDestination);

apps/docs/scripts/infima-v1/actions.ts

@@ -4,18 +4,21 @@ import { glob } from 'glob';
 import handlebars from 'handlebars';
 import path from 'path';
 
+import { assetsUrls } from '@dsfrc/docs/scripts/assets';
 import { getFrameworkFolderPath } from '@dsfrc/docs/utils';
 import { downloadFile } from '@dsfrc/docs/utils';
 
 const framework: string = path.basename(__dirname);
-const zipUrl = 'https://github.com/facebookincubator/infima/archive/refs/tags/v0.2.0-alpha.43.zip';
+const zipUrl = assetsUrls.infimaV1;
 
 export async function downloadAndExtract() {
   const zipDestination = path.resolve(__dirname, `../../tmp/${framework}.zip`);
   const extractionFolderPath = path.resolve(__dirname, `../../tmp/${framework}`);
 
   if (!(await fs.pathExists(zipDestination))) {
     await downloadFile(zipUrl, zipDestination);
+  } else {
+    console.warn(`${framework} assets downloads skipped since present locally`);
   }
 
   const zip = new AdmZip(zipDestination);

apps/docs/scripts/mui-v5/actions.ts

@@ -4,18 +4,21 @@ import { glob } from 'glob';
 import handlebars from 'handlebars';
 import path from 'path';
 
+import { assetsUrls } from '@dsfrc/docs/scripts/assets';
 import { getFrameworkFolderPath } from '@dsfrc/docs/utils';
 import { downloadFile } from '@dsfrc/docs/utils';
 
 const framework: string = path.basename(__dirname);
-const zipUrl = 'https://github.com/mui/material-ui/archive/refs/tags/v5.13.4.zip';
+const zipUrl = assetsUrls.muiV5;
 
 export async function downloadAndExtract() {
   const zipDestination = path.resolve(__dirname, `../../tmp/${framework}.zip`);
   const extractionFolderPath = path.resolve(__dirname, `../../tmp/${framework}`);
 
   if (!(await fs.pathExists(zipDestination))) {
     await downloadFile(zipUrl, zipDestination);
+  } else {
+    console.warn(`${framework} assets downloads skipped since present locally`);
   }
 
   const zip = new AdmZip(zipDestination);

apps/docs/scripts/raw/actions.ts

@@ -7,16 +7,22 @@ import { JSDOM } from 'jsdom';
 import path from 'path';
 import urlToolkit from 'url-toolkit';
 
+import { assetsUrls } from '@dsfrc/docs/scripts/assets';
+
 const framework: string = path.basename(__dirname);
 
-const mainPageUrl = new URL('https://main--ds-gouv.netlify.app/example/');
+const mainPageUrl = new URL(assetsUrls.raw);
 const baseUrl = mainPageUrl.toString();
 const outputFolder = path.resolve(__dirname, `../../tmp/${framework}`);
 const visitedUrls = new Set();
 
 export async function downloadAndExtract() {
-  // We do our own crawling because there is no good library to do recursive lookup simply
-  await startCrawling();
+  if (!(await fs.pathExists(outputFolder))) {
+    // We do our own crawling because there is no good library to do recursive lookup simply
+    await startCrawling();
+  } else {
+    console.warn(`${framework} assets downloads skipped since present locally`);
+  }
 }
 
 export async function build() {

apps/docs/scripts/vuetify-v3/actions.ts

@@ -4,18 +4,21 @@ import { glob } from 'glob';
 import handlebars from 'handlebars';
 import path from 'path';
 
+import { assetsUrls } from '@dsfrc/docs/scripts/assets';
 import { getFrameworkFolderPath } from '@dsfrc/docs/utils';
 import { downloadFile } from '@dsfrc/docs/utils';
 
 const framework: string = path.basename(__dirname);
-const zipUrl = 'https://github.com/vuetifyjs/vuetify/archive/refs/tags/v3.3.1.zip';
+const zipUrl = assetsUrls.vuetifyV3;
 
 export async function downloadAndExtract() {
   const zipDestination = path.resolve(__dirname, `../../tmp/${framework}.zip`);
   const extractionFolderPath = path.resolve(__dirname, `../../tmp/${framework}`);
 
   if (!(await fs.pathExists(zipDestination))) {
     await downloadFile(zipUrl, zipDestination);
+  } else {
+    console.warn(`${framework} assets downloads skipped since present locally`);
   }
 
   const zip = new AdmZip(zipDestination);

apps/docs/stories/usage/mastodon-v4.mdx

@@ -25,9 +25,11 @@ Si vous avez une instance [Mastodon](https://github.com/mastodon/mastodon) nous
 
 ## Prérequis communs
 
+### Les polices
+
 Comme indiqué dans [les prérequis généraux](/?path=/docs/dsfr-connect-prérequis--docs) il peut être bon de mettre les assets d'un thème sur "votre propre serveur". En l'occurence du fait de la génération particulière du thème Mastodon, vous êtes obligés de le faire car sinon les polices officielles du DSFR ne seront pas chargées.
 
-Pour commencer, Si vous ne les avez pas déjà téléchargez les polices [sur le site du DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/fondamentaux-de-l-identite-de-l-etat/typographie/).
+Pour commencer, si vous ne les avez pas déjà téléchargez les polices [sur le site du DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/fondamentaux-de-l-identite-de-l-etat/typographie/).
 
 Ensuite, allez sur l'instance Mastodon et créez le dossier `/public/assets/fonts/` pour y mettre toutes les polices. Vous devriez avoir au final :
 
@@ -54,6 +56,13 @@ Ensuite, allez sur l'instance Mastodon et créez le dossier `/public/assets/font
 /public/assets/fonts/Spectral-Regular.woff2
 ```
 
+### Les images
+
+Suivant les besoins vous pouvez :
+
+- Changer le `favicon` par défaut de Mastodon, en téléchargeant [https://unpkg.com/@gouvfr/dsfr@latest/dist/favicon/favicon.ico](https://unpkg.com/@gouvfr/dsfr@latest/dist/favicon/favicon.ico) pour remplacer l'icône Mastodon située à `/public/favicon.ico`
+- Ajouter un logo depuis l'interface d'administration, en choisissant un fond blanc pour le logo pour qu'il soit lisible aussi bien en `light` que `dark` mode
+
 ## Méthodes d'installation du thème
 
 ### Installation avec les privilèges administrateur **(recommandée)**
@@ -77,18 +86,18 @@ _À noter qu'une fois configuré entièrement vous pourriez a priori supprimer `
 Maintenant il faut recompiler les assets Mastodon pour que l'indexation se fasse :
 `RAILS_ENV=production OTP_SECRET=precompile_placeholder SECRET_KEY_BASE=precompile_placeholder bundle exec rails assets:precompile`
 
-La dernière étape est d'appliquer ce thème à tous les utilisateurs du site. Allez dans `Préférences > Administration > Paramètres serveur > Apparence` (ou directement via https://mon-instance-mastodon-xxxxx.com/admin/settings/appearance) puis configurer `Thème du site` sur la valeur `dsfr`.
+La dernière étape est d'appliquer ce thème à tous les utilisateurs du site. Allez dans `Préférences > Administration > Paramètres serveur > Apparence` (ou directement via https://mon-instance-mastodon-xxxxx.com/admin/settings/appearance) puis configurez `Thème du site` sur la valeur `dsfr`.
 
 _Si votre instance ne liste pas le thème nommé `dsfr`, n'hésitez pas à redémarrer l'instance comme vous le faites d'habitude (cela varie en fonction de votre installation initiale)._
 
 ### Installation sans privilège **(déconseillée)**
 
-Si vous n'avez pas la possibilité d'exécuter des commandes sur instance Mastodon, il est toujours possible de s'approcher d'une configuration complète en configurant un style CSS via l'interface. Mais il faut garder à l'esprit que c'est comme faire un "patch" par-dessus le thème actuel :
+Si vous n'avez pas la possibilité d'exécuter des commandes sur votre instance Mastodon, il est toujours possible de s'approcher d'une configuration complète en configurant un style CSS via l'interface. Mais il faut garder à l'esprit que c'est comme faire un "patch" par-dessus le thème actuel :
 
 - Il peut y avoir des conflits de style avec le thème utilisé par votre instance Mastodon
 - Cela peut diminuer les performances et temps de chargement comparé à l'autre méthode
 
 Tout d'abord allez dans `Préférences > Administration > Paramètres serveur > Apparence` (ou directement via https://mon-instance-mastodon-xxxxx.com/admin/settings/appearance), puis :
 
-1. Veuillez à configurer le thème par défaut sur `Mastodon (Dark)` _(le thème DSFR est basé sur celui-ci, donc en "patchant" celui-ci nous évitons de potentiels conflits avec le style des autres thèmes)_
+1. Veuillez configurer le thème par défaut sur `Mastodon (Dark)` _(le thème DSFR est basé sur celui-ci, donc en "patchant" celui-ci nous évitons de potentiels conflits avec le style des autres thèmes)_
 2. Dans le champ `CSS personnalisé` veuillez y copier-coller le contenu du fichier https://unpkg.com/dsfr-connect@latest/dist/mastodon-v4/index.css

packages/dsfr-connect/package.json

@@ -15,7 +15,7 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {
-    "postinstall": "ts-node -r tsconfig-paths/register ./scripts/setup.ts",
+    "prepare": "ts-node -r tsconfig-paths/register ./scripts/setup.ts",
     "build": "pnpm run build:script && pnpm run build:json && pnpm run build:style",
     "build:script": "tsup",
     "build:style": "ts-node -r tsconfig-paths/register ./compile-style-files.ts",

packages/dsfr-connect/src/mastodon-v4/README.md

@@ -12,10 +12,10 @@ _It should have been easy by customizing main variables in a few hours... But Ma
 
 ### Get the official theme
 
-Since our theme is based on the official one, we need to get it. We made the fetching automatic when you install dependencies of this repository. But if needed you can run it a new time from `/packages/dsfr-connect` with:
-`pnpm run postinstall`
+Since our theme is based on the official one, we need to get it. We made the fetching automatic when you install dependencies of this repository (only when developing, not when installing the package from the NPM registry). But if needed you can run it a new time from `/packages/dsfr-connect` with:
+`pnpm run prepare`
 
-_Note: if you want to upgrade the official Mastodon theme, modify the version into `/packages/dsfr-connect/src/mastodon-v4/settings.ts`, delete the folder `/packages/dsfr-connect/src/mastodon-v4/mastodon/` and run again the `postinstall` command._
+_Note: if you want to upgrade the official Mastodon theme, modify the version into `/packages/dsfr-connect/src/mastodon-v4/settings.ts`, delete the folder `/packages/dsfr-connect/src/mastodon-v4/mastodon/` and run again the `prepare` command._
 
 ### Launch