Actualiser layouts/shortcodes/kombucha_en_fut.html

README.md

@@ -8,6 +8,29 @@ Il utilise un générateur de site statique ([Hugo](https://gohugo.io/)) permett
 
 Pour la mise à jour vous, devez vous connecter sur la [forge logiciel](https://git.resilien.fr) de RésiLien. Puis éditer les fichiers en ligne.
 
+### Les dossiers
+
+- Pour modifier [les pages](./content/) et donc le référencement des moteurs de recherche et le nom du menu
+- Pour modifier [le contenu des pages](./layouts/shortcodes/)
+- Pour ajouter [des images](./static/images/)
+
+### Menu
+
+Le menu est gérer directement dans chaque page et son ordre est gérer par un poid _weight_.
+
+### Balise HTML
+
+- Pour créer un paragraphe : `<p> Ceci est un paragraphe </p>`
+- Pour créer un texte en gras : `Ceci est <strong>en gras</strong>`
+- Pour une liste : `<ul><li>un élement</li><li>un second élement</li></ul>`
+
+### Les images
+
+- pour les produits les images sont en 100px par 300px
+- Pour les autres photos en 1024px par 768px ou inversement
+
+Enregirstrer les images directement en webp.
+
 ## Les environnements
 
 Actuellement il y a 3 environnements :

assets/javascripts/main.js

@@ -0,0 +1,23 @@
+const cachecaches = document.getElementsByClassName("cachecache");
+for (const element of cachecaches) {
+  const link = document.createElement("a");
+  const separators = element.dataset.separators;
+  const protocol = element.dataset.param1.split("").reverse().join("");
+  let url = protocol;
+  for (let i = 0; i < separators.length; i++) {
+    url += separators[i] + element.dataset["param" + (i+2)].split("").reverse().join("");
+  }
+  let text = element.dataset.param2.split("").reverse().join("");
+  for (let i = 1; i < separators.length; i++) {
+    text += separators[i] + element.dataset["param" + (i+2)].split("").reverse().join("");
+  }
+  if (!element.dataset.noinner) {
+    link.innerText = url.replace(new RegExp(element.dataset.regex, 'i'), element.dataset.replace);
+  } else {
+    link.innerHTML = element.innerHTML;
+  }
+  link.href = url;
+  link.rel = "nofollow";
+  element.parentElement.insertBefore(link, element);
+}
+while (cachecaches.length > 0) cachecaches[0].remove();

assets/styles/footer.scss

@@ -11,8 +11,12 @@
         font-weight: normal;
         font-style: normal;
 
-        div a {
+        div {
-            margin-left: .5rem;
+            text-align: center;
+            a {
+                margin-left: .5rem;
+                white-space: nowrap;
+            }
         }
     }
 
@@ -28,10 +32,16 @@
 
 @media screen and (max-width: 1024px) {
     .footer .container {
+        margin: 1rem .2rem;
         flex-direction: column-reverse;
 
+        div a {
+            margin-left: .2rem;
+        }
+
         p {
             margin-top: .5rem;
+            text-align: center;
         }
     }
 }

assets/styles/header.scss

@@ -62,6 +62,7 @@
         margin: .6rem;
         padding: .6rem;
         font-size: 1rem;
+        box-shadow: 1px 1px var(--color-red3),-1px -1px var(--color-red3),1px -1px var(--color-red3),-1px 1px var(--color-red3);
     }
 
     h1 {
@@ -72,6 +73,7 @@
 
     a.active {
         text-decoration: underline;
+        box-shadow: 1px 1px var(--color-yellow2),-1px -1px var(--color-yellow2),1px -1px var(--color-yellow2),-1px 1px var(--color-yellow2);
     }
 }
 

assets/styles/main.scss

@@ -2,3 +2,4 @@
 @import "style.scss";
 @import "header.scss";
 @import "footer.scss";
+@import "obfuscates.scss";

assets/styles/obfuscates.scss

@@ -0,0 +1,4 @@
+.cachecache:not([data-noinner="true"]) {
+  unicode-bidi: bidi-override;
+  direction: rtl;
+}

assets/styles/style.scss

@@ -173,6 +173,24 @@ body {
     display: flex;
     align-items: center;
     max-width: 500px;
+
+    &:hover img {
+        animation: tiltBottle 1s 1 linear;
+    }
+    @keyframes tiltBottle{
+        20%{
+            transform: rotate(2deg);
+        }
+        40%{
+            transform: rotate(-2deg);
+        }
+        60%{
+            transform: rotate(2deg);
+        }
+        80%{
+            transform: rotate(-2deg);
+        }
+    }
 }
 .gamme img { 
     width: var(--bottle-width); 

content/_index.md

@@ -2,9 +2,16 @@
 # SEO : pour les moteurs de recherche
 title: Takubeh - Kombucha
 description: "Takubeh Kombucha, cette boisson fermentée à base de thé, peu sucrée, subtilement acidulée et naturellement pétillante, est produite de façon artisanale et écoresponsable dans un atelier dans le Pilat. Une gamme variée: Thé vert ou thé noir, chai rooibos chanvre eucalyptus citronnelle hibiscus vanille"
+# Gestion du menu
+menus:
+  main:
+    name: On boit quoi ?
+weight: 1
 ---
 
+<main>
 {{< takubeh_kombucha >}}
 {{< gamme >}}
 {{< kombucha_en_fut >}}
 <!-- instagram -->
+</main>

content/a-propos.md

@@ -7,6 +7,8 @@ menus: main
 weight: 30
 ---
 
+<main>
 {{< fondateurs >}}
 <!-- histoire -->
 {{< identite >}}
+</main>

content/engagements.md

@@ -7,6 +7,8 @@ menus: main
 weight: 20
 ---
 
+<main>
 {{< philosophie >}}
 {{< engagement >}}
-<!-- consigne -->
+{{< consigne >}}
+</main>

content/ou-nous-trouver.md

@@ -8,5 +8,7 @@ menus: main
 weight: 10
 ---
 
+<main>
 <!-- {{< reseau >}} -->
 {{< points_de_vente >}}
+</main>

layouts/_default/_markup/render-link.html

@@ -23,13 +23,16 @@
   {{ end }}
   {{- $params = $params | append (string $string) -}}
   <span
-    class="obfuscate{{ if $isMailtoLink }} at{{ end }}"
+    class="cachecache{{ if $isMailtoLink }} at{{ end }}"
     data-separators="{{ $separators }}"
     {{ range $param_index, $param_value := $params }}
       data-param{{add $param_index 1}}="{{ range $index := seq (sub (len $param_value) 1) 0}}{{ substr $param_value $index 1}}{{ end }}"
     {{ end }}
     data-regex="{{ $regex }}"
     data-replace="{{ $replace }}"
-  >
+  >{{ if $isMailtoLink }}
+    {{ $mail := index (split .Destination ":") 1 }}
+    {{ range $index := seq (sub (len $mail) 1) 0}}{{ substr $mail $index 1}}{{ end }}
+  {{ end }}
   </span>
 {{- end -}}

layouts/partials/javascripts.html

@@ -1,4 +1,4 @@
-{{ $js := resources.Get "js/main.js" }}
+{{ $js := resources.Get "javascripts/main.js" }}
 {{ with $js }}
     {{ $secureJS := . | js.Build }}
     {{ if not $.Site.Params.debug }}

layouts/partials/menu.html

@@ -1,7 +0,0 @@
-{{ with site.Menus.main }}
-  <nav class="box container menu color -blue3">
-    {{- range . -}}
-        <a{{ if $.IsMenuCurrent .Menu . }} class="active" aria-current="page"{{ end }} href="{{ .URL }}">{{ .Name }}</a>
-    {{- end -}}
-  </nav>
-{{ end }}

layouts/partials/pied_de_page.html

@@ -3,7 +3,7 @@
         <p>Lieu dit Le Clapeau, 42100 Rochetaillée</p>
         <p>{{ now.Format "2006" }} © Takubeh - <a href="/mentions-legales/">Mentions légales</a></p>
         <div>
-            <a href="mailto:murielle@takubeh.fr" title="E-mail"><img src="/images/tabler/mail-heart.svg"><span> E-mail</span></a>
+            <span class="cachecache at" data-noinner="true" data-separators=":@." data-param1="otliam" data-param2="ahcubmok" data-param3="hebukat" data-param4="rf" data-regex="[a-z]*:(.*)" data-replace="$1"><img src='/images/tabler/mail-heart.svg'> <span>E-mail</span></span>
             <a href="https://www.instagram.com/takubehkombucha/" title="Instagram"><img src="/images/tabler/brand-instagram.svg"><span> Instagram</span></a>
             <a href="https://www.facebook.com/profile.php?id=100076292530719" title="Facebook"><img src="/images/tabler/brand-facebook.svg"><span> Facebook</span></a>
         </div>

layouts/shortcodes/consigne.html

@@ -1,6 +1,6 @@
 <div class="container -c2">
     <div class="picture">
-        <img src="/images/avion.webp" alt="">
+        <img src="/images/image-consigne-PAYSAGE3.webp" alt="">
     </div>
     <div class="content color -orange3">
         <h2 id="la-consigne">La consigne</h2>

layouts/shortcodes/engagement.html

@@ -1,4 +1,3 @@
-<!-- Une production locale & engagée -->
 <div class="container -c2">
     <div class="content color -yellow1">
         <h2>Une production locale & engagée</h2>
@@ -18,7 +17,7 @@
             </li>
             <li>
                 Un conditionnement durable : consigne sur les bouteilles, étiquettes
-                issues de matières minérales, caisses de transport réutilisables
+                issues de matières minérales, caisses de transport réutilisables
             </li>
             <li>
                 Une empreinte énergétique contrôlée : machines entièrement
@@ -37,6 +36,11 @@
         </blockquote>
     </div>
     <div class="picture">
-        <img src="/images/takubeh-engagement.jpg" alt="">
+        <img
+            srcset="/images/3bouteilles-bleu-portrait.webp 768w, /images/3bouteilles-bleu-paysage.webp 1024w"
+            sizes="(max-width: 768px) 100vw, 45vw"
+            src="/images/3bouteilles-bleu-portrait.webp"
+            alt="Murielle & Grégory"
+        >
     </div>
 </div>

layouts/shortcodes/fondateurs.html

@@ -2,7 +2,7 @@
     <div class="picture">
         <img
             srcset="/images/fondateurs-portrait.webp 768w, /images/fondateurs-paysage.webp 1024w"
-            sizes="(max-width: 1400px) 768px, 1024px"
+            sizes="(max-width: 768px) 100vw, 45vw"
             src="/images/fondateurs-portrait.webp"
             alt="Murielle & Grégory"
         >

layouts/shortcodes/gamme.html

@@ -1,4 +1,3 @@
-<!-- Notre gamme -->
 <div class="container gamme">
     <div class="content color -white">
         <h2>Notre gamme</h2>
@@ -13,7 +12,7 @@
                     <p>
                         Kombucha aux sérieux accents de fruit de la
                         passion, suivit d’une légère amertume. Aucune
-                        importation de fruits exotiques. A base de
+                        importation de fruits exotiques. À base de
                         plantes cultivées localement.
                     </p>
                 </div>
@@ -27,15 +26,15 @@
                     </div>
                     <p>
                         Ce kombucha au chanvre est une invitation
-                        à la détente et au laché prise. Cette plante à
+                        à la détente et au lâché prise. Cette plante
-                        la réputation mystique possède un parfum
+                        à la réputation mystique possède un parfum
                         atypique et enivrant.
                     </p>
                 </div>
             </div>
             <br>
             <div class="box">
-                <img src="/images/bouteilles/pu_erh.webp" alt="" width="100" height="300">
+                <img src="/images/bouteilles/original.webp" alt="" width="100" height="300">
                 <div class="detail">
                     <div class="title">
                         <h3 class="tag color -green5">L'Original</h3>
@@ -43,9 +42,9 @@
                     </div>
                     <p>
                         Issu de théiers anciens, sauvages et
-                        originels, le thé vert Pu’Erh** est apprécié
+                        originels, le thé vert Pu’Erh** est 
-                        pour ses vertus désaltérante et ses
+                        apprécié pour sa vertu désaltérante 
-                        parfums frais et subtils.
+                        et ses parfums frais et subtils.
                         Sa très faible teneur en théine
                         permet de consommer ce kombucha tout
                         au long de la journée.
@@ -83,7 +82,6 @@
                     </p>
                 </div>
             </div>
-            <br>
             <div class="box">
                 <img src="/images/bouteilles/chai_rooibos.webp" alt="" width="100" height="300">
                 <div class="detail">

layouts/shortcodes/hempalicious.html

@@ -1,4 +1,3 @@
-<!-- Takubeh x Hempalicious -->
 <div class="container -c2">
     <div class="picture">
         <img src="/images/kombucha-cbd.webp" alt="">

layouts/shortcodes/identite.html

@@ -1,4 +1,3 @@
-<!-- L'identité de Takubeh -->
 <div class="container -c2">
     <div class="content color -blue2">
         <h2>L'identité de Takubeh</h2>

layouts/shortcodes/kombucha_en_fut.html

@@ -1,30 +1,32 @@
 <div class="container -c2">
     <div class="picture">
         <img
-            srcset="/images/avion-portrait.webp 768w, /images/avion-paysage.webp 1024w"
+            srcset="/images/tireuse-portrait.webp 768w, /images/tireuse-paysage.webp 1024w"
-            sizes="(max-width: 1400px) 768px, 1024px"
+            sizes="(max-width: 768px) 100vw, 45vw"
-            src="/images/avion-portrait.webp"
+            src="/images/tireuse-portrait.webp"
-            alt="Murielle boit du Kombucha de Takubeh devant un avion"
+            alt="matériel pour tirer les fûts de kombucha"
         >
     </div>
     <div class="content color -orange1">
         <h2>Du kombucha en fût</h2>
         <p>
-            Notre ambition de servir du kombucha en festivals, concerts, foires et autres
+            Les développeurs/euses de festival et autres évènements festifs ou culturels, sont sans cesse en recherche de nouveauté pour
-événements culturels ne nous a finalement jamais quitté.
+            émerveiller leur public. Le choix des artistes et des intervenants constitue l’ADN de ces événements. 
+            L’offre de restauration et boisson fait aussi partie des fondamentaux.
         </p>
         <p>
-            C’est grâce au soutien de notre communauté, qui a répondu présente à la campagne
+            Se reposant sur notre longue carrière de festivaliers, nous avons remarqué
-de crowdfunding, que nous avons pu financer le matériel necessaire au démarrage de
+            que l’offre en bières et autres boissons alcoolisées artisanales est grandissante,
-la distribution en fûts de 20L de notre production.
+            ce qui est réjouissant.
         </p>
         <p>
-            Nous mêmes consommateurs de manifestations culturelles en tout genre, nous
+            En revanche, l’offre en soft drinks est souvent pauvre, ou constituée de jus de fruits ou sodas
-apportons de cette manière notre contribution à la tenue d’évènements plus
+ particulièrement sucrés, ou ne correspondant pas ou plus aux habitudes de consommation des festivaliers. 
-écologiques. De cette facon, il est possible de profiter d’une boisson bien travaillée,
+ Cette offre peut largement être améliorée selon nous.</p>
-fraichement tirée du fût, qui a bien d’autres qualités :
+<p> <strong>Choisir le kombucha Takubeh, c'est profiter d’une boisson bien travaillée, fraichement tirée du fût, 
+    qui a bien d’autres qualités</strong> :
         </p>
-        <ul>
+        <ul class="flower">
             <li>Soft drink</li>
             <li>Fermentée et festive</li>
             <li>Pétillant naturel</li>
@@ -32,10 +34,10 @@ fraichement tirée du fût, qui a bien d’autres qualités :
             <li>Bio</li>
             <li>Peu sucrée</li>
             <li>Fraîche et désaltérante</li>
-            <li>Zéro emballage pour une <b>empreinte carbone réduite</b></li>
+            <li>Zéro emballage pour une <strong>empreinte carbone réduite</strong></li>
         </ul>
         <blockquote>
-            Les enjeux planetaires sont immenses,<br>
+            Les enjeux planétaires sont immenses,<br>
             alors chaque geste compte.
         </blockquote>
     </div>

layouts/shortcodes/philosophie.html

@@ -1,9 +1,8 @@
-<!-- Notre philosophie -->
 <div class="container -c2">
     <div class="picture">
         <img
             srcset="/images/avion-portrait.webp 768w, /images/avion-paysage.webp 1024w"
-            sizes="(max-width: 1400px) 768px, 1024px"
+            sizes="(max-width: 768px) 100vw, 45vw"
             src="/images/avion-portrait.webp"
             alt="Murielle boit du Kombucha de Takubeh devant un avion"
         >

layouts/shortcodes/takubeh_kombucha.html

@@ -1,4 +1,3 @@
-<!-- Takubeh Kombucha ? -->
 <div class="container -c2">
     <div class="content color -green3">
         <h2>Boisson alternative</h2>