From 56c67dd5648d865563f566a51e89ce56e2dddba3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 7 Feb 2025 16:09:32 +0100
Subject: [PATCH] feat: add auto menu

---
 index.js                   | 15 +++++++--------
 layouts/default.hbs        | 13 ++++++-------
 package-lock.json          | 35 +++++++++++++++++++++++++++++++++++
 package.json               |  1 +
 src/actions.md             |  1 +
 src/assets/css/helpers.css |  5 +++++
 src/blog.md                |  1 +
 src/contact.md             |  1 +
 src/faq.md                 |  1 +
 src/index.md               |  1 +
 src/ressources.md          |  1 +
 11 files changed, 60 insertions(+), 15 deletions(-)
 create mode 100644 src/assets/css/helpers.css

diff --git a/index.js b/index.js
index 902a510..59b3a35 100644
--- a/index.js
+++ b/index.js
@@ -4,6 +4,7 @@ import Metalsmith from 'metalsmith'
 import layouts from '@metalsmith/layouts'
 import markdown from '@metalsmith/markdown'
 import permalinks from '@metalsmith/permalinks'
+import collections from '@metalsmith/collections'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 const t1 = performance.now()
@@ -17,14 +18,6 @@ const sitedata = {
     contact: 'contact@lowtechlabgrenoble.org',
     address: '48 Ave. Washington, 38100 Grenoble'
   },
-  nav: [
-    { path: 'index.html', label: 'Accueil' },
-    { path: 'actions.html', label: 'Actions' },
-    { path: 'contact.html', label: 'Contact' },
-    { path: 'faq.html', label: 'FAQ' },
-    { path: 'ressources.html', label: 'Ressources' },
-    { path: 'blog.html', label: 'Blog' }
-  ],
   socials: {
     twitter: 'https://twitter.com/johndoe',
     facebook: 'https://facebook.com/johndoe',
@@ -44,6 +37,12 @@ Metalsmith(__dirname)
   })
   .metadata(sitedata)
   .use(markdown())
+  .use(collections({
+    nav: {
+      pattern: '**/*.html',
+      sortBy: 'nav_order'
+    }
+  }))
   .use(permalinks())
   .use(layouts({
     directory: 'layouts',
diff --git a/layouts/default.hbs b/layouts/default.hbs
index 7e5505f..ab70cf9 100644
--- a/layouts/default.hbs
+++ b/layouts/default.hbs
@@ -8,6 +8,7 @@
   <title>{{ site.subject }} &mdash; {{ title }}</title>
   <link rel="preload" href="/assets/css/reset.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <link rel="preload" href="/assets/css/theme.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <link rel="preload" href="/assets/css/helpers.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <link rel="stylesheet" href="/assets/css/main.css">
   <link rel="stylesheet" href="/assets/css/typography.css">
   <link rel="stylesheet" href="/assets/css/header.css">
@@ -15,6 +16,7 @@
   <noscript>
     <link rel="stylesheet" href="/assets/css/reset.css">
     <link rel="stylesheet" href="/assets/css/theme.css">
+    <link rel="stylesheet" href="/assets/css/helpers.css">
   </noscript>
 </head>
 
@@ -22,17 +24,14 @@
   <header>
     <img src="/assets/images/brand.jpg" alt="Logo du {{ site.subject }}" />
     <nav>
-      <a href="/">Accueil</a>
-      <a href="/actions">Actions</a>
-      <a href="/contact">Contact</a>
-      <a href="/faq">FAQ</a>
-      <a href="/ressources">Ressources</a>
-      <a href="/blog">Blog</a>
+      {{#each collections.nav}}
+        <a href="{{ this.path }}">{{ this.title }}</a>
+      {{/each}}
     </nav>
     <button id="theme-toggle" class="theme-toggle">🌙</button>
   </header>
   <main>
-    <h1>{{ title }}</h1>
+    <h1 class="hidden">{{ title }}</h1>
     {{{ contents }}}
     {{!-- {{#if postlist}}
     <ul>
diff --git a/package-lock.json b/package-lock.json
index 7160d22..5521c6b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,7 @@
     "": {
       "name": "ltg-grenoble",
       "dependencies": {
+        "@metalsmith/collections": "^1.3.1",
         "@metalsmith/layouts": "^2.7.0",
         "@metalsmith/markdown": "^1.10.0",
         "@metalsmith/permalinks": "^3.2.0",
@@ -16,6 +17,21 @@
         "serve": "^14.2.4"
       }
     },
+    "node_modules/@metalsmith/collections": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@metalsmith/collections/-/collections-1.3.1.tgz",
+      "integrity": "sha512-u2Y3P7lJMtBchxVZZKU4hbVDtq7hqebZoYwk6e/VSvl84Uc9W7D4i47Cwo54bmrCxXalDe+A2Rf0BZr1jnYvKg==",
+      "dependencies": {
+        "lodash.get": "^4.4.2",
+        "read-metadata": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "metalsmith": "^2.5.0"
+      }
+    },
     "node_modules/@metalsmith/layouts": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/@metalsmith/layouts/-/layouts-2.7.0.tgz",
@@ -911,6 +927,12 @@
       "resolved": "https://registry.npmjs.org/lodash.clonedeepwith/-/lodash.clonedeepwith-4.5.0.tgz",
       "integrity": "sha512-QRBRSxhbtsX1nc0baxSkkK5WlVTTm/s48DSukcGcWZwIyI8Zz+lB+kFiELJXtzfH4Aj6kMWQ1VWW4U5uUDgZMA=="
     },
+    "node_modules/lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
+      "deprecated": "This package is deprecated. Use the optional chaining (?.) operator instead."
+    },
     "node_modules/marked": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
@@ -1158,6 +1180,14 @@
         "rc": "cli.js"
       }
     },
+    "node_modules/read-metadata": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-metadata/-/read-metadata-1.0.0.tgz",
+      "integrity": "sha512-XJdiOrkzOlIac9vXNvgp/4I8qj9EPuHlbf/eoX2rusLFjdKjp0TQ82V3cj+AFjXBzzoZ1TaqAtHnGsR3UdO1Gw==",
+      "dependencies": {
+        "yaml-js": "0.0.8"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -1548,6 +1578,11 @@
       "dependencies": {
         "co": "3.1.0"
       }
+    },
+    "node_modules/yaml-js": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/yaml-js/-/yaml-js-0.0.8.tgz",
+      "integrity": "sha512-XCqDFUhDO3yhT+Rb/inT3uiC8ekx2lXHDgDeXY8V0Lgkx4yEhzhxraYQxtuajydIrx8L8KmF9OeKCDlyCjvnMQ=="
     }
   }
 }
diff --git a/package.json b/package.json
index 5841f95..98514bc 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "start": "serve build"
   },
   "dependencies": {
+    "@metalsmith/collections": "^1.3.1",
     "@metalsmith/layouts": "^2.7.0",
     "@metalsmith/markdown": "^1.10.0",
     "@metalsmith/permalinks": "^3.2.0",
diff --git a/src/actions.md b/src/actions.md
index fb6e210..56c97f4 100644
--- a/src/actions.md
+++ b/src/actions.md
@@ -1,5 +1,6 @@
 ---
 title: Actions
+nav_order: 1
 ---
 
 # Action locale (quartier Abbaye)
diff --git a/src/assets/css/helpers.css b/src/assets/css/helpers.css
new file mode 100644
index 0000000..43379c1
--- /dev/null
+++ b/src/assets/css/helpers.css
@@ -0,0 +1,5 @@
+.hidden {
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
\ No newline at end of file
diff --git a/src/blog.md b/src/blog.md
index d49d82f..3c0c16d 100644
--- a/src/blog.md
+++ b/src/blog.md
@@ -1,5 +1,6 @@
 ---
 title: Blog
+nav_order: 5
 ---
 
 #Blog
\ No newline at end of file
diff --git a/src/contact.md b/src/contact.md
index 9179e92..0ed1d44 100644
--- a/src/contact.md
+++ b/src/contact.md
@@ -1,5 +1,6 @@
 ---
 title: Contact
+nav_order: 2
 ---
 
 Vous souhaitez rentrer en contact avec nous ? Ecrivez-nous !
diff --git a/src/faq.md b/src/faq.md
index 2b042e1..3e0eceb 100644
--- a/src/faq.md
+++ b/src/faq.md
@@ -1,5 +1,6 @@
 ---
 title: FAQ
+nav_order: 4
 ---
 
 Pas sûr qu’on en ait besoin, mais peut servir à éclarcir qqs questions récurrentes comme :
diff --git a/src/index.md b/src/index.md
index 0bfce63..8b864ec 100644
--- a/src/index.md
+++ b/src/index.md
@@ -1,5 +1,6 @@
 ---
 title: Accueil
+nav_order: 0
 ---
 
 ![Photo de l'équipe ?](/assets/images/team.jpg)
diff --git a/src/ressources.md b/src/ressources.md
index 6926db5..ec3365e 100644
--- a/src/ressources.md
+++ b/src/ressources.md
@@ -1,5 +1,6 @@
 ---
 title: Ressources
+nav_order: 3
 ---
 
 # Présentation des LT disponibles en prêt à prix libre & de la procédure (Si pas dans “Actions de l’asso”)