feat: add auto menu

2025-02-07 16:09:32 +01:00
parent c97a015a71
commit 56c67dd564
11 changed files with 60 additions and 15 deletions
--- 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',
--- 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>
--- 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=="
    }
  }
 }
--- 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",
--- a/src/actions.md
+++ b/src/actions.md
@@ -1,5 +1,6 @@
 ---
 title: Actions
+nav_order: 1
 ---

 # Action locale (quartier Abbaye)
--- a/src/assets/css/helpers.css
+++ b/src/assets/css/helpers.css
@@ -0,0 +1,5 @@
+.hidden {
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
--- a/src/blog.md
+++ b/src/blog.md
@@ -1,5 +1,6 @@
 ---
 title: Blog
+nav_order: 5
 ---

 #Blog
--- 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 !
--- 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 :
--- 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)
--- 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”)