chore: basic setup with metalsmith

2025-02-07 11:59:07 +01:00
parent 5adbca06fa
commit c97a015a71
21 changed files with 2155 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -91,6 +91,9 @@ out
 .nuxt
 dist

+# Metalsmith build output
+build
+
 # Gatsby files
 .cache/
 # Comment in the public line in if your project uses Gatsby and not Next.js
@@ -128,3 +131,6 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
+# MacOS
+.DS_Store
--- a/index.js
+++ b/index.js
@@ -0,0 +1,56 @@
+import { fileURLToPath } from 'node:url'
+import { dirname } from 'node:path'
+import Metalsmith from 'metalsmith'
+import layouts from '@metalsmith/layouts'
+import markdown from '@metalsmith/markdown'
+import permalinks from '@metalsmith/permalinks'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const t1 = performance.now()
+const prod = process.env.NODE_ENV === 'production';
+
+const sitedata = {
+  site: {
+    base: !prod ? 'http://localhost:3000' : 'https://lowtech-lab-grenoble.fr',
+    subject: 'Low-tech Lab - Grenoble',
+    author: '© Low-tech Lab - Grenoble',
+    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',
+    github: 'https://github.com/johndoe'
+  }
+};
+
+Metalsmith(__dirname)
+  .clean(true)
+  .watch( prod ? false : [ 'src', 'layouts' ] )
+  .source('./src')
+  .destination('./build')
+  .env({
+    DEBUG: process.env.DEBUG,
+    NODE_ENV: process.env.NODE_ENV,
+    TZ: 'Europe/Paris',
+  })
+  .metadata(sitedata)
+  .use(markdown())
+  .use(permalinks())
+  .use(layouts({
+    directory: 'layouts',
+    default: 'default.hbs',
+    pattern: '**/*.html'
+  }))
+  .build(function (err) {
+    if (err) throw err
+    console.log(`Build success in ${((performance.now() - t1) / 1000).toFixed(1)}s`)
+  })
--- a/layouts/default.hbs
+++ b/layouts/default.hbs
@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="fr">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="description" content="{{ description }}">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <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="stylesheet" href="/assets/css/main.css">
+  <link rel="stylesheet" href="/assets/css/typography.css">
+  <link rel="stylesheet" href="/assets/css/header.css">
+  <link rel="stylesheet" href="/assets/css/footer.css">
+  <noscript>
+    <link rel="stylesheet" href="/assets/css/reset.css">
+    <link rel="stylesheet" href="/assets/css/theme.css">
+  </noscript>
+</head>
+
+<body id="top">
+  <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>
+    </nav>
+    <button id="theme-toggle" class="theme-toggle">🌙</button>
+  </header>
+  <main>
+    <h1>{{ title }}</h1>
+    {{{ contents }}}
+    {{!-- {{#if postlist}}
+    <ul>
+      {{#each posts}}
+      <li>
+        <a href="/{{ path }}">{{ title }}</a>
+      </li>
+      {{/each}}
+    </ul>
+    {{/if}} --}}
+  </main>
+
+  <footer>
+    <div>
+        <div>
+          <h3>Hébergement</h3>
+          <p>Ce site est hébergé par <a href="https://www.gresille.org/" target="_blank">Grésille</a></p>
+        </div>
+        <div>
+          <h3>Contact</h3>
+          <address>{{ site.address }}</address>
+          <a href="mailto:{{ site.contact }}">{{ site.contact }}</a>
+        </div>
+        <div>
+          <h3>Adhésion</h3>
+          <a href="https://www.helloasso.com/associations/low-tech-lab-grenoble/adhesions/formulaire-d-adhesion-2025-low-tech-lab-grenoble" target="_blank">Formulaire d'adhésion</a>
+        </div>
+    </div>
+    <div>
+      <span id="page-size"></span>
+      <span>{{ site.author }} | Generated with <a href="https://metalsmith.io/" target="_blank" title="Metalsmith - static site generator">Metalsmith.io</a></span>
+      <nav id="back-to-top">
+        <a
+          href="#top"
+          title="Retour en haut"
+          aria-label="Retour en haut de page"
+        >
+          ↑
+        </a>
+      </nav>
+    </div>
+  </footer>
+
+  <script src="/assets/scripts/theme-toggle.js" async defer ></script>
+  <script src="/assets/scripts/page-size.js" async defer ></script>
+</body>
+
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "ltg-grenoble",
+  "private": false,
+  "type": "module",
+  "scripts": {
+    "build": "node index.js",
+    "start": "serve build"
+  },
+  "dependencies": {
+    "@metalsmith/layouts": "^2.7.0",
+    "@metalsmith/markdown": "^1.10.0",
+    "@metalsmith/permalinks": "^3.2.0",
+    "jstransformer-handlebars": "^1.2.0",
+    "metalsmith": "^2.6.3"
+  },
+  "devDependencies": {
+    "serve": "^14.2.4"
+  },
+  "packageManager": "yarn@2.4.1+sha512.718af6769585d530db979f95ed3c8b0008759cee56eaf174fc6344dad2d041780aec8cf86a52d3829085d3b9bbbbbb1de7d806ad94637defbb5064aa864ea053"
+}
--- a/src/actions.md
+++ b/src/actions.md
@@ -0,0 +1,26 @@
+---
+title: Actions
+---
+
+# Action locale (quartier Abbaye)
+
+Texte à venir ...
+
+# Solaire à concentration
+
+Depuis quelques années, l’association investit le champ du solaire à concentration pour des pratiques de production artisanale. Convaincu du potentiel énergétique et de la résilience écologique de ces technologies, nous proposons des formations à l’auto-construction de concentrateurs solaires auprès d’artisans ou d’entreprises travaillant dans l’alimentaire (boulangeries, restaurants, brasseries, …). Nous construisons également de toutes pièces ces concentrateurs solaires.
+Inspiré.e.s des travaux de [Lytefire](https://lytefire.com/fr), [Néoloco](https://neoloco.fr/), [Hélie](https://microbrasseriehelie.odoo.com/) et du [Présage](https://lepresage.fr/), nous sommes persuadé.e.s que d’autres modèles d’entreprises peuvent émerger sur ce modèle de sobriété énergétique. Nous souhaitons accompagner les personnes et les structures souhaitant utiliser ces nouvelles initiatives solaires.
+
+En parallèle, l’association poursuit des axes de R&D pour continuer d’étoffer les low-tech autour du solaire à concentration : automatisation de concentrateur, four alimentaire bi-énergie (bois-solaire), nouveaux design de concentrateur, procédés thermiques, … Le tout dans une démarche libre et ouverte.
+
+[*Photos du lytefire de l’asso, des scouts et de Violaine*]()
+
+# Enseignement
+
+Présentation des prestations/événements de l’asso (conférences, ateliers d’utilisation de LT, ateliers de formation de LT)
+L’association peut réaliser divers types de prestations autour des low-tech et de la démarche Low-tech.
+
+Nous pouvons participer à des conférences ou des tables rondes pour apporter un point de vue sur la Low-tech, le techno-discernement ou les actions dans lesquelles nous sommes impliqué.e.s.
+
+Nous proposons également des ateliers d’utilisation ou de fabrication de low-tech.
+
--- a/src/assets/css/footer.css
+++ b/src/assets/css/footer.css
@@ -0,0 +1,45 @@
+footer {  
+  border-top: 2px solid var(--border-color);
+}
+
+footer > div {
+  display: grid;
+  
+}
+
+footer > div:first-of-type {
+  place-items: start center;
+  background: var(--footer-background);
+  grid-template-columns: repeat(3, 1fr);
+  color: var(--text-color);
+  padding: 1.5rem 2rem;
+}
+
+footer > div:last-of-type {
+  place-items: center;
+  grid-template-columns: 1fr auto 1fr;
+  border-top: 2px dotted var(--border-color);
+  padding: 0 1rem;
+}
+
+#page-size {
+  place-self: center flex-start;
+  color: var(--text-muted);
+}
+
+#back-to-top {
+  place-self: center flex-end;
+  color: var(--primary-color);
+}
+
+#back-to-top a {
+  font-size: 1.5rem;
+  text-decoration: none;
+  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
+}
+
+#back-to-top:hover,
+#back-to-top:focus {
+  color: var(--hover-color);
+  transform: scale(1.2);
+}
--- a/src/assets/css/header.css
+++ b/src/assets/css/header.css
@@ -0,0 +1,34 @@
+header {
+  display: grid;
+  grid-template-columns: minmax(auto, 140px) 1fr auto;
+  place-items: center;
+  padding: 1rem 2rem;
+  background: linear-gradient(135deg, #fff, var( --primary-color));
+  box-shadow: 0 4px 6px color-mix(in srgb, var(--border-color) 40%, transparent);
+}
+
+/* Dark Mode */
+[data-theme="dark"] header {
+  background: linear-gradient(135deg, var(--background-dark), var(--secondary-color)); 
+  box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
+}
+
+header img {
+  max-width: 100%;
+  height: auto;
+  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.3));
+}
+
+header nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+}
+
+header nav a {
+  text-decoration: none;
+  color:  var(--text-color);
+  border-radius: 8px;
+  transition: 0.3s ease-in-out;
+  position: relative;
+}
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -0,0 +1,21 @@
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  font-family: 'Inter', Arial, sans-serif;
+  color: var(--text-color);
+  background-color: var(--body-background);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+main {
+  width: 90%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
--- a/src/assets/css/reset.css
+++ b/src/assets/css/reset.css
@@ -0,0 +1,66 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+ul, ol {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+button {
+  all: unset;
+  cursor: pointer;
+}
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 1rem;
+  line-height: 1.6;
+  background-color: #fff;
+  color: #333;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: bold;
+  line-height: 1.2;
+}
+
+input, textarea, select {
+  border: none;
+  background: none;
+  font: inherit;
+  outline: none;
+}
+
+img, video, canvas, iframe {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+/* :focus {
+  outline: 2px solid var(--primary-color, #007bff);
+  outline-offset: 2px;
+} */
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+    transition: none !important;
+  }
+}
--- a/src/assets/css/theme.css
+++ b/src/assets/css/theme.css
@@ -0,0 +1,38 @@
+/* Light Mode (default) */
+:root {
+  --primary-color: #B68E00;
+  --secondary-color: #6B1E1E;
+  --text-color: #1E3C3C;
+  --text-muted: #8A8A8A;
+  --hover-color: #B68E00;
+  --link-color: #6B1E1E;
+  --background-light: #F5F5F5;
+  --background-dark: #2C3E50;
+  --border-color: #B68E00;
+  --footer-background: #FFF;
+  --body-background: #FFF;
+}
+
+/* Dark Mode */
+[data-theme="dark"] {
+  --primary-color: #B68E00;
+  --secondary-color: #6B1E1E;
+  --text-color: #E0E0E0;
+  --text-muted: #A0A0A0;
+  --hover-color: #E5B900;
+  --link-color: #F3D9A1;
+  --background-light: #2C3E3E;
+  --background-dark: #1E2A2A;
+  --border-color: #B68E00;
+  --footer-background: #1E3C3C;
+  --body-background: #182828;
+}
+
+.theme-toggle {
+  font-size: 1.5rem;
+  transition: transform 0.3s ease-in-out;
+}
+
+.theme-toggle:hover {
+  transform: rotate(15deg);
+}
--- a/src/assets/css/typography.css
+++ b/src/assets/css/typography.css
@@ -0,0 +1,19 @@
+h1, h2, h3, h4, h5, h6 {
+  color: var(--primary-color);
+  margin-bottom: 0.5em;
+}
+
+p {
+  margin-bottom: 1rem;
+}
+
+a {
+  color: var(--link-color);
+  text-decoration: none;
+  transition: color 0.2s ease-in-out;
+}
+
+a:hover, a:focus {
+  color: var(--hover-color);
+  text-decoration: underline;
+}
--- a/src/assets/images/brand.jpg
+++ b/src/assets/images/brand.jpg
--- a/src/assets/images/team.jpg
+++ b/src/assets/images/team.jpg
--- a/src/assets/scripts/page-size.js
+++ b/src/assets/scripts/page-size.js
@@ -0,0 +1,23 @@
+const formatBytesIntl = (bytes, decimals = 2, locale = "en-US") => {
+  if (bytes === 0) return "0 B";
+
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB", "TB", "PB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  // Format number with Intl API (localized thousands separator)
+  const formattedNumber = new Intl.NumberFormat(locale, {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals
+  }).format(bytes / Math.pow(k, i));
+
+  return `${formattedNumber} ${sizes[i]}`;
+}
+
+// Get page size
+window.onload = function () {
+  let resource = performance.getEntriesByType("navigation")[0];
+  let transferSize = formatBytesIntl(resource.transferSize);
+
+  document.getElementById('page-size').innerText = transferSize + ' (compressed)'
+};
--- a/src/assets/scripts/theme-toggle.js
+++ b/src/assets/scripts/theme-toggle.js
@@ -0,0 +1,27 @@
+const toggleTheme = () => {
+  const currentTheme = document.documentElement.getAttribute('data-theme');
+  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+  // Set the new theme to the root element
+  document.documentElement.setAttribute('data-theme', newTheme);
+
+  // Store the theme preference in localStorage
+  localStorage.setItem('theme', newTheme);
+
+  // Update the button icon
+  document.getElementById('theme-toggle').textContent = newTheme === 'dark' ? '🌙' : '🌞';
+};
+
+// Check for saved theme preference in localStorage
+const savedTheme = localStorage.getItem('theme');
+if (savedTheme) {
+  document.documentElement.setAttribute('data-theme', savedTheme);
+  document.getElementById('theme-toggle').textContent = savedTheme === 'dark' ? '🌙' : '🌞';
+} else {
+  // Default to light theme if no preference is saved
+  document.documentElement.setAttribute('data-theme', 'light');
+  document.getElementById('theme-toggle').textContent = '🌞';
+}
+
+// Add event listener for the theme toggle button
+document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
--- a/src/blog.md
+++ b/src/blog.md
@@ -0,0 +1,5 @@
+---
+title: Blog
+---
+
+#Blog
--- a/src/contact.md
+++ b/src/contact.md
@@ -0,0 +1,23 @@
+---
+title: Contact
+---
+
+Vous souhaitez rentrer en contact avec nous ? Ecrivez-nous !
+[contact@lowtechlabgrenoble.org](mailto:contact@lowtechlabgrenoble.org)
+
+Présentation du CA
+Présentation des salarié.es + VSC ?
+
+**Kévin Loeslé**
+
+> Présentation à venir
+
+**Félicie Beth**
+
+> Présentation à venir
+
+**Grégoire Pourcelot**
+
+> Salarié, coordinateur de projet de l’association. Issu de (dé)formation ingénieur énergie, je m’intéresse particulièrement aux applications du solaire à concentration et à l’application des outils low-tech dans une économie régénératrice. Toujours motivé pour lancer de nouveaux projets dans l’asso !
+
+Adresse de l’asso avec plan ? (pour situer la position sur le square Barbara)
--- a/src/faq.md
+++ b/src/faq.md
@@ -0,0 +1,17 @@
+---
+title: FAQ
+---
+
+Pas sûr qu’on en ait besoin, mais peut servir à éclarcir qqs questions récurrentes comme :
+
+**Est-ce que l’on recrute ?**
+
+> A ce jour, nous ne recrutons pas de poste permanent. Il est revanche possible d’effectuer un stage ou un service civique au sein de l’association. Merci de nous contacter à l’adresse [contact@lowtechlabgrenoble.org](contact@lowtechlabgrenoble.org)
+
+**Est-ce que l’on récupère du matériel ?**
+
+> Réponse à venir
+
+**Est-ce que l’on organise des formations ?**
+
+> Réponse à venir
--- a/src/index.md
+++ b/src/index.md
@@ -0,0 +1,69 @@
+---
+title: Accueil
+---
+
+![Photo de l'équipe ?](/assets/images/team.jpg)
+
+# Présentation de l'asso
+
+Le Low-tech Lab Grenoble est une association loi 1901 reconnue d'intérêt général.
+Fondée en 2019, l'association promeut la démarche Low-tech et les systèmes low-tech (technologies et savoirs répondant aux critères utile, durable et accessible). Elle représente l'antenne grenobloise du large archipèle des Low-tech Labs.
+
+**Objet de l'association :**
+développer la résilience locale et collective, diffuser savoirs et techniques simples et accessibles aux citoyens, promouvoir et rechercher des solutions qui répondent à des problématiques d'habitat, d'autonomie en eau, énergie, alimentation ou matériaux, pour un meilleur respect de la nature, des cultures et des ressources propres à chaque territoire.
+
+# Comment nous rejoindre ?
+Vous avez envie de nous rendre visite ? Vous êtes curieux.se des low-tech ? Vous voulez en savoir plus sur l'association ? Venez aux forums de l'association ! C'est tous les premiers mercredis du mois au local de l'asso (18h). On y parle low-tech, transition, écologie, projets personnels, … Et on cuisine au cuiseur bois pour celleux qui sont là ! Bref de bons moments conviviaux pour échanger toustes ensemble !
+
+Pour les adhérents de l'association, on propose un temps collectif tous les 3e mercredis du mois au local (18h).
+C'est un temps collectif de partage (débat, cercle de parole, savoir-faire, bricolage, …)
+
+Pour les bénévoles investis dans la CA, les 2e mercredi du mois nous organisons la réunion de gouvernance partagé au local (18h). On parle des projets de l'association, des stratégies de l'association, des sujets de gouvernance, des prises de décision, … Le tout de manière partagée et ouverte !
+
+# Ils nous soutiennent !
+
+**Institutions**
+
+- [Ville de Grenoble](#)
+- [Métro](#)
+- [Département](#)
+- [Etat](#)
+- [Union Européenne (Erasmus+)](#)
+
+**Partenaires**
+
+- [Fondation GEG](#)
+- [Enerdata](#)
+
+# Nous travaillons ensemble !
+
+- [Actis](#)
+- [Mairies sur le projet Abbaye](#)
+- [SolarFire](#)
+- [Kerlotec](#)
+- [ENSAM](#)
+- [Parc régional des Monts d'Ardèche](#)
+- [Scouts et Guides de France](#)
+- [INRAE](#)
+- [La Ligue de l'Enseignement 38](#)
+- [Bar Radis](#)
+- [Au Local](#)
+- [Laboratoire PACTE](#)
+- [IUGA](#)
+- [UGA](#)
+- [ENSE3 et Grenoble-INP](#)
+- [Au Grès du Soleil](#)
+
+# Devenez mécène !
+
+Vous souhaitez faire du mécénat avec l'association ? C'est possible !
+Savez-vous qu'il existe 3 types de mécénat ?
+- Le mécénat financier, le plus connu.
+- Le mécénat en nature, il s'agit de donner du matériel ou prêter des biens (local, outillages, matériaux, …)
+- Le mécénat de compétences, il s'agit de mettre à disposition pour l'association du temps de travail d'un employé d'une entreprise (et de la fonction publique aussi !). Plein de compétences peuvent être valorisées à travers le mécénat de compétence : comptabilité, développement web, communication, juridique, ingénierie, artisanat, coup de main, …
+
+Ces 3 types de mécénat sont défiscalisables sur vos impôts (particulier et entreprise). Si vous êtes intéressé.e, contactez-nous !
+
+[Agenda](/agenda)
+[Inscription à l'infolettre](/infolettre)
+ <a href="https://lowtechlab.org/fr" target="_blank">Low-tech Lab national</a>
--- a/src/ressources.md
+++ b/src/ressources.md
@@ -0,0 +1,24 @@
+---
+title: Ressources
+---
+
+# Présentation des LT disponibles en prêt à prix libre & de la procédure (Si pas dans “Actions de l’asso”)
+
+L’association dispose d’un petit pannel de low-tech empruntable à prix libre. Pour les emprunter, il suffit de contacter l’association via le mail [contact@lowtechlabgrenoble.org](mailto:contact@lowtechlabgrenoble.org) et de demander à emprunter les low-tech. Une formation par un membre de l’association de 10/15 minutes est obligatoire. Ceci permet de bien comprendre et de bien utiliser les low-tech. L’emprunt se fait à prix libre.
+
+Liste des low-tech :
+- Lampe solaire
+- Fours solaires (plusieurs types)
+- Marmite norvégienne
+- Machine à coudre mécanique
+- Cuiseurs bois collectif (poêle à paëlla, wok, billig)
+- Smoocyclette
+- Vélo générateur
+- BommBike (vélo amplificateur de son pour mettre de la musique ou animer des conférences)
+
+# Liens utiles
+
+- Les tutos du LTLGrenoble & de ses membres sur le wiki national : [Wiki LTLNational](https://wiki.lowtechlab.org)
+- D'autres liens utiles sur la LT (CF site national) : [Agenda national](https://lowtechlab.org/fr/les-outils/agenda), [Annuaire national](https://lowtechlab.org/fr/les-outils/annuaire)
+- [Solar Low-tech Magazine](https://solar.lowtechmagazine.com/fr)
+- *Les articles sur le blog du LTLNational (si pas hébergés chez nous) : [https://lowtechlab.org/fr/actualites-blog](https://lowtechlab.org/fr/actualites-blog)*