feat: add auto menu

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',

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>
+      {{#each collections.nav}}
-      <a href="/actions">Actions</a>
+        <a href="{{ this.path }}">{{ this.title }}</a>
-      <a href="/contact">Contact</a>
+      {{/each}}
-      <a href="/faq">FAQ</a>
-      <a href="/ressources">Ressources</a>
-      <a href="/blog">Blog</a>
     </nav>
     <button id="theme-toggle" class="theme-toggle">🌙</button>
   </header>
   <main>
-    <h1>{{ title }}</h1>
+    <h1 class="hidden">{{ title }}</h1>
     {{{ contents }}}
     {{!-- {{#if postlist}}
     <ul>

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=="
     }
   }
 }

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",

src/actions.md

@@ -1,5 +1,6 @@
 ---
 title: Actions
+nav_order: 1
 ---
 
 # Action locale (quartier Abbaye)

src/assets/css/helpers.css

@@ -0,0 +1,5 @@
+.hidden {
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}

src/blog.md

@@ -1,5 +1,6 @@
 ---
 title: Blog
+nav_order: 5
 ---
 
 #Blog

src/contact.md

@@ -1,5 +1,6 @@
 ---
 title: Contact
+nav_order: 2
 ---
 
 Vous souhaitez rentrer en contact avec nous ? Ecrivez-nous !

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 :

src/index.md

@@ -1,5 +1,6 @@
 ---
 title: Accueil
+nav_order: 0
 ---
 
 ![Photo de l'équipe ?](/assets/images/team.jpg)

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”)