Merge branch 'main' into gh-pages

codegouvfr · Jan 12, 2024 · bfbfe2a · bfbfe2a
2 parents f2984f1 + 95bdebe
commit bfbfe2a
Show file tree

Hide file tree

Showing 11 changed files with 33 additions and 109 deletions.
diff --git a/_includes/components/add_to_calendar.njk b/_includes/components/add_to_calendar.njk
@@ -1,3 +1,3 @@
-<a class="fr-btn" href="/calendar/{{ title | slugify }}-{{ date | htmlDateString }}.ics">
+<a class="fr-btn" href="/calendar/{{ collections.events | findBySlug(page.fileSlug) | slugifyEvent }}.ics">
   {{ "add_to_calendar" | i18n }}
 </a>
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
@@ -29,6 +29,8 @@
   <title>{{ title or metadata.title }}</title>
 </head>
 <body id="top">
+{% getBundle "js", "top" %}
+
 {% include "templates/header.njk" %}
 
 <main id="content">
@@ -42,6 +44,18 @@
 
 <!-- Current page: {{ page.url | htmlBaseUrl }} -->
 
+{% js "top" %}
+  <script>
+      // Fix FOUC in dark mode
+      setDarkBeforeRender = () => {
+          const localScheme = localStorage.getItem('scheme')
+          if (localScheme === 'dark' || (localScheme === 'system' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+              document.documentElement.setAttribute('data-fr-theme', 'dark');
+          }
+      }
+      setDarkBeforeRender();
+  </script>
+{% endjs %}
 {% js "body" %}
   <script>
       const SEARCH_RESULTS_URL = "{{ "/search-results/" | locale_url(page.lang) | htmlBaseUrl }}";

diff --git a/content/calendar/calendar.njk b/content/calendar/calendar.njk
@@ -1,29 +1,4 @@
 ---
 permalink: /calendar.ics
 ---
-{% set events %}
-  [
-  {% for event in collections.event %}
-    {% set year = event.data.date | getYear %}
-    {% set month = event.data.date | getMonth %}
-    {% set day = event.data.date | getDay %}
-    {% set hour = event.data.date | getHour %}
-    {% set minute = event.data.date | getMinute %}
-    {
-    {% if hour == 0 and minute == 0 %}
-      "start": [ {{ year }}, {{ month }}, {{ day }} ],
-      "end": [ {{ year }}, {{ month }}, {{ day + 1 }} ],
-    {% else %}
-      "start": [ {{ year }}, {{ month }}, {{ day }}, {{ hour }}, {{ minute }} ],
-      "duration": { "minutes": {{ event.data.duration or 60 }} },
-    {% endif %}
-    "title": "{{ event.data.title }}",
-    "description": "{{ event.data.description }}",
-    "location": "{{ event.data.location }}",
-    "organizer": { "name": "{{ metadata.author.name }}", "email": "{{ metadata.author.email }}" }
-    }
-    {% if not loop.last %},{% endif %}
-  {% endfor %}
-  ]
-{% endset %}
-{{ events | createEvents }}
+{{ collections.events | toCalendar }}
diff --git a/content/calendar/event.njk b/content/calendar/event.njk
@@ -1,25 +1,7 @@
 ---
 pagination:
-  data: collections.event
+  data: collections.events
   size: 1
-permalink: "calendar/{{ pagination.items[0].data.title | slugify }}-{{ pagination.items[0].data.date | htmlDateString }}.ics"
+permalink: "calendar/{{ pagination.items[0] | slugifyEvent }}.ics"
 ---
-{% set event %}
-  {% set currentEvent = pagination.items[0] %}
-  {% set year = currentEvent.data.date | getYear %}
-  {% set month = currentEvent.data.date | getMonth %}
-  {% set day = currentEvent.data.date | getDay %}
-  {% set hour = currentEvent.data.date | getHour %}
-  {% set minute = currentEvent.data.date | getMinute %}
-  {
-  "start": [
-  {{ year }}, {{ month }}, {{ day }}, {{ hour }}, {{ minute }}
-  ],
-  "duration": { "minutes": {{ currentEvent.data.duration or 0 }} },
-  "title": "{{ currentEvent.data.title }}",
-  "description": "{{ currentEvent.data.description }}",
-  "location": "{{ currentEvent.data.location }}",
-  "organizer": { "name": "{{ metadata.author.name }}", "email": "{{ metadata.author.email }}" }
-  }
-{% endset %}
-{{ event | createEvent }}
+{% set currentEvent = pagination.items[0] %}{{ currentEvent | toCalendarEvent }}
diff --git a/content/fr/blog/posts/calendrier.md b/content/fr/blog/posts/calendrier.md
diff --git a/content/fr/blog/posts/evenement.md b/content/fr/blog/posts/evenement.md
@@ -1,25 +1,17 @@
 ---
 title: Événement exemple
 description: Comment ajouter un événement au calendrier ?
-date: 2023-09-10T09:00:00.0Z
-duration: 50
-location: online
+date: git Last Modified
 tags:
-- event
+  - events
+  - fonctionnalité
+start: 2023-09-10
 ---
 Voici un exemple d'événement qui sera ajouté au calendrier global accessible à l'adresse [/calendar.ics](/calendar.ics), et dont on peut télécharger l'événement de calendrier correspondant à l'adresse [/calendar/evenement-exemple-2023-09-10.ics](/calendar/evenement-exemple-2023-09-10.ics).
 
-## Variables du template
+Ce calendrier est généré via le plugin `eleventy-plugin-calendar`.
 
-```json
-{
-  "title": "string",
-  "description": "string",
-  "date": "date", // ex. 2001-12-15T02:59:43.1Z
-  "duration": "number",
-  "location": "string"
-}
-```
+[Voir la documentation du plugin](https://github.com/codegouvfr/eleventy-plugin-calendar){.fr-link .fr-fi-arrow-right-line .fr-link--icon-right}
 
 ## Exemple d'utilisation du composant bouton `add_to_calendar`
 
@@ -33,5 +25,3 @@ Voici un exemple d'événement qui sera ajouté au calendrier global accessible
 <p>
     {% include "components/add_to_calendar.njk" %}
 </p>
-
-[Voir la section sur la fonctionnalité de calendrier](/fr/blog/fonctionnalités/#calendrier){.fr-link .fr-fi-arrow-right-line .fr-link--icon-right}
diff --git a/content/fr/blog/posts/navigation.md b/content/fr/blog/posts/navigation.md
@@ -8,7 +8,7 @@ tags:
 
 `eleventy-dsfr` utilise le [système de navigation d'Eleventy](https://www.11ty.dev/docs/plugins/navigation/).
 
-## Mise en place d'une navigation de niveau 2
+## Navigation de niveau 2
 
 Pour mettre en place une navigation de niveau 2, positionner la variable `parent` avec la valeur de la `key` du parent.
 Par exemple, dans le fichier [`content/fr/about/index.md`](https://github.com/codegouvfr/eleventy-dsfr/tree/main/content/fr/about/index.md) :

diff --git a/eleventy-dsfr.png b/eleventy-dsfr.png
diff --git a/eleventy.config.calendar.js b/eleventy.config.calendar.js
diff --git a/eleventy.config.js b/eleventy.config.js
@@ -10,6 +10,7 @@ const pluginNavigation = require("@11ty/eleventy-navigation");
 const {EleventyHtmlBasePlugin} = require("@11ty/eleventy");
 const {EleventyI18nPlugin} = require("@11ty/eleventy");
 const i18n = require("@codegouvfr/eleventy-plugin-i18n");
+const pluginCalendar = require("@codegouvfr/eleventy-plugin-calendar");
 
 const customMarkdownContainers = require("./markdown-custom-containers");
 
@@ -37,7 +38,6 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.addWatchTarget("content/**/*.{svg,webp,png,jpeg}");
 
     // App plugins
-    eleventyConfig.addPlugin(require("./eleventy.config.calendar.js"));
     eleventyConfig.addPlugin(require("./eleventy.config.drafts.js"));
     eleventyConfig.addPlugin(require("./eleventy.config.i18n.js"));
     eleventyConfig.addPlugin(require("./eleventy.config.images.js"));
@@ -61,6 +61,7 @@ module.exports = function (eleventyConfig) {
             "en": "fr"
         }
     });
+    eleventyConfig.addPlugin(pluginCalendar);
 
     // Custom collections
     eleventyConfig.addCollection("allSortedByPathAsc", function(collectionApi) {
@@ -134,6 +135,10 @@ module.exports = function (eleventyConfig) {
             .indexOf(tag) === -1);
     });
 
+    eleventyConfig.addFilter("findBySlug", function find(collection = [], slug = "") {
+        return collection.find(post => post.fileSlug === slug);
+    });
+
     // Customize Markdown library settings:
     eleventyConfig.amendLibrary("md", mdLib => {
         mdLib.use(markdownItAnchor, {

diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "@11ty/eleventy-plugin-bundle": "^1.0.4",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
+    "@codegouvfr/eleventy-plugin-calendar": "^3.0.4",
     "@codegouvfr/eleventy-plugin-i18n": "^0.1.3",
     "@gouvfr/dsfr": "^1.9.3",
     "chalk": "^4.1.2",