rework menu logic part 1

content/prise_en_main/_index.md

@@ -3,8 +3,6 @@ title: "Prise en main"
 description: "Prise en main"
 weight: 10
 sort_by: "weight"
-extra:
-  parent: null
 ---
 
 Ce manuel vous accompagne dans la découverte de nos outils.

content/prise_en_main/avec-un-générateur.md

@@ -5,7 +5,7 @@ sort_by: "weight"
 date: 2022-09-01
 weight: 2
 extra:
-  parent: créer-du-contenu
+  parent: "prise_en_main/creer-du-contenu.md"
 ---
 
 Si vous souhaitez par exemple écrire un blog, vous allez probablement avoir une page par post. À la longue, on peut sans problème arriver à des dizaines de pages... Si on les écrit à la main, il va falloir copier/coller une bonne partie du code HTML, mais pas tout. Pour éviter ce travail rébarbatif, il existe ce qu'on appelle des générateurs de sites statiques. Ils vous permettent d'écrire dans une syntaxe très simple (Markdown) vos contenus, sans vous soucier du HTML ou du CSS, car ils emballeront eux-mêmes vos écrits dans des modèles prévus à cet effet. [Le guide que vous êtes en train de lire en ce moment même utilise un tel outil !](https://git.deuxfleurs.fr/Deuxfleurs/guide.deuxfleurs.fr)

content/prise_en_main/aws-cli.md

@@ -4,7 +4,7 @@ description: "Publier avec aws-cli"
 date: 2022-09-01
 weight: 1
 extra: 
-  parent: publier-le-contenu
+  parent: "prise_en_main/publier-le-contenu.md"
 ---
 
 Nous allons désormais verser votre site sur Garage, ce dernier le servira à toutes les personnes qui voudront le voir. Vous aurez besoin de l'identifiant de votre clé d'accès et de la clé d'accès secrète, obtenus dans la partie «[Initialiser votre accès](../initialiser-votre-acces/)».

content/prise_en_main/compte.md

@@ -3,7 +3,7 @@ title: "Compte unique"
 description: "Compte unique pour tous les services"
 weight: 10
 extra:
-  parent: null
+  parent: "prise_en_main/_index.md"
 ---
 
 Vous bénéficier d'un compte unique pour accéder à (presque) tous les services de Deuxfleurs.

content/prise_en_main/creer-du-contenu.md

@@ -5,7 +5,7 @@ sort_by: "weight"
 weight: 0
 date: 2022-09-01
 extra:
-  parent: publier-le-contenu
+  parent: "prise_en_main/web.md"
 ---
 
 Votre site est désormais complètement configuré. Avant de publier du contenu, il faut écrire celui-ci !

content/prise_en_main/cryptpad.md

@@ -3,7 +3,7 @@ title: "Cryptpad"
 description: "Cryptpad"
 weight: 50
 extra:
-  parent: null
+  parent: 'prise_en_main/_index.md'
 ---
 
 # Accès à Cryptpad

content/prise_en_main/drive_garage.md

@@ -3,7 +3,7 @@ title: "Sous Linux (avancé)"
 description: "Drive Garage avec Rclone (guide avancé)"
 weight: 10
 extra:
-  parent: 'stockage'
+  parent: 'prise_en_main/stockage.md'
 ---
 
 **Public visé:** des utilisateurs sous Linux n'ayant pas peur de la ligne de commande.

content/prise_en_main/emails.md

@@ -3,7 +3,7 @@ title: "Emails"
 description: "Emails"
 weight: 20
 extra:
-  parent: null
+  parent: 'prise_en_main/_index.md'
 ---
 
 **ATTENTION**. Le service email est actuellement en phase de test.

content/prise_en_main/initialiser-votre-accès.md

@@ -4,7 +4,7 @@ description: "Initialiser le stockage objet sur Garage"
 date: 2022-09-01
 weight: 0
 extra:
-  parent: web
+  parent: "prise_en_main/web.md"
 ---
 
 De par l'utilisation de son logiciel Garage, Deuxfleurs conserve et sert les sites web en recourant au stockage objet. Pour chaque site, on a un bucket (seau en français), partageant le même nom que lui. On peut voir un bucket comme un récipient dans lequel on va mettre tout nos fichiers à publier. Pour des raisons de sécurité, l'initialisation de ce dispositif et des identifiants d'accès ne peut être faite que par un administrateur du stockage de Deuxfleurs. Une fois tout ceci mis en place, vous pourrez gérer votre site seul·e.

content/prise_en_main/jitsi.md

@@ -3,7 +3,7 @@ title: "Jitsi"
 description: "Visioconférence avec Jitsi"
 weight: 40
 extra:
-  parent: null
+  parent: 'prise_en_main/_index.md'
 ---
 
 # Accéder à Jitsi

content/prise_en_main/matrix.md

@@ -5,7 +5,7 @@ date: "2022-03-09T19:13:51.671Z"
 dateCreated: "2021-11-09T12:13:36.265Z"
 weight: 30
 extra:
-  parent: null
+  parent: 'prise_en_main/_index.md'
 ---
 
 Matrix est un réseau de communication instantanée que vous pouvez utiliser pour rester en contact

content/prise_en_main/mettre-place-DNS.md

@@ -4,7 +4,7 @@ description: "Mise en place du nom de domaine"
 date: 2022-09-01
 weight: 0
 extra:
-  parent: web
+  parent: "prise_en_main/web.md"
 ---
 
 # Louer son nom de domaine 

content/prise_en_main/plume.md

@@ -3,7 +3,7 @@ title: Plume
 description: Plume
 weight: 60
 extra:
-  parent: null
+  parent: 'prise_en_main/_index.md'
 ---
 # Accéder à Plume
 

content/prise_en_main/publier-le-contenu.md

@@ -5,7 +5,7 @@ date: 2022-09-01
 weight: 0
 sort_by: "weight"
 extra:
-  parent: web
+  parent: "prise_en_main/web.md"
 ---
 
 Nous allons désormais verser votre site sur Garage, et ce dernier le servira à toutes les personnes qui voudront le voir. Vous aurez besoin de l'identifiant de votre clé d'accès et de la clé d'accès secrète, obtenus dans la partie «[Initialiser votre accès](../initialiser-votre-acces/)».

content/prise_en_main/rclone.md

@@ -5,7 +5,7 @@ weight: 2
 date: 2021-11-25T14:31:35.570Z
 dateCreated: 2021-11-25T14:02:30.997Z
 extra:
-  parent: publier-le-contenu
+  parent: "prise_en_main/publier-le-contenu.md"
 ---
 
 

content/prise_en_main/rclone_mount.md

@@ -5,7 +5,7 @@ weight: 20
 date: "2022-03-28T09:28:19.870Z"
 dateCreated: "2022-02-01T16:23:58.635Z"
 extra:
-  parent: 'stockage'
+  parent: 'prise_en_main/stockage.md'
 ---
 
 Nous aurons besoin de télécharger 3 programmes :

content/prise_en_main/statique-comment-ça.md

@@ -4,7 +4,7 @@ description: "Clarification sur le contenu statique"
 date: 2022-09-01
 weight: 0
 extra:
-  parent: web
+  parent: "prise_en_main/web.md"
 ---
 
 Au commencement du web (au début des années 90), le contenu présent en ligne était statique : quand un client veut un fichier ou une page, il spécifie le chemin via un URL, et le serveur répond tout le temps la même chose. Dès le milieu des années 90 ont apparu au sein du web des pages dynamiques, avec [CGI](https://fr.wikipedia.org/wiki/Common_Gateway_Interface) et [PHP](https://fr.wikipedia.org/wiki/PHP). Pour une même page, le serveur peut répondre un contenu différent, variant selon des paramètres rajoutés en fin de chemin URL, selon des données dans la mémoire du serveur, ou selon n'importe quel facteur qui passe par la tête du développeur.

content/prise_en_main/stockage.md

@@ -2,9 +2,9 @@
 title: "Stockage de fichiers"
 description: "Stocker ses fichiers chez Deuxfleurs"
 sort_by: "weight"
-weight: 10
+weight: 99
 extra:
-  parent: null
+  parent: 'prise_en_main/_index.md'
 ---
 
 Dans cette section, vous trouverez plusieurs tutoriels expliquant comment stocker vos fichiers chez Deuxfleurs sur Garage. Malheureusement, nous n'avons pas encore d'interface facile pour accéder à cette fonctionnalité: **les guides dans cette section sont donc à destination d'un public avancé**.

content/prise_en_main/web.md

@@ -4,7 +4,7 @@ description: "Héberger un site web"
 sort_by: "weight"
 weight: 10
 extra:
-  parent: null
+  parent: 'prise_en_main/_index.md'
 ---
 
 Vous en avez marre de faire toute votre communication associative via Facebook ? Vous voulez créer votre propre site pour raconter vos dernières vacances ou publier vos poèmes ? Bref, publier en indépendance ? Deuxfleurs peut vous aider en vous fournissant l'hébergement. Suivez le guide !

content/prise_en_main/winscp.md

@@ -3,7 +3,7 @@ title: "WinSCP"
 description: "Publier avec WinSCP"
 weight: 3
 extra:
-  parent: publier-le-contenu
+  parent: 'prise_en_main/publier-le-contenu.md'
 ---
 
 

content/prise_en_main/à-la-main.md

@@ -5,7 +5,7 @@ sort_by: "weight"
 date: 2022-09-01
 weight: 1
 extra:
-  parent: créer-du-contenu
+  parent: "prise_en_main/creer-du-contenu.md"
 ---
 
 Garage, comme tout serveur web, va se contenter ici de servir des fichiers `.html`. Ces fichiers sont tout à fait lisibles et écrivables par un humain. Ainsi, si vous n'avez pas prévu d'avoir un site avec beaucoup de pages, il est souvent intéressant de façonner chacune d'entre elles à la main.

templates/_nav.html

@@ -1,147 +1,98 @@
-{% macro navsection(hierarchy, level, current) %}
+{# (Public) Entrypoint to be used by zola "pages" #}
-  {% set sec = hierarchy | nth(n=level) %}
+{% macro page(target) %}
-  {% set sec = get_section(path=sec) %}
+  {% set root = get_section(path=target.ancestors | last) %}
-  {% set maxlevel = hierarchy | length %}
+  {{ nav::inner_nav(root=root, current=target) }}
+{% endmacro %}
 
+{# (Public) Entrypoint to be used by zola "sections" #}
+{% macro section(target) %}
+  {{ nav::inner_nav(root=target, current=target) }}
+{% endmacro %}
 
-  {# Ici on regarde si toutes les sous-sections et pages contenues ont #}
+{# -------------------------- #}
-  {# une variable weight_custom. Au passage on note ces poids.         #}
-  {% set temoin = true %}
-  {% set liste = [] %}
-  {% if sec.subsections %}
-    {% for s in sec.subsections %}
-      {% set s_temp = get_section(path=s) %}
-      {% if not s_temp.extra.weight_custom %}
-        {% set_global temoin = false %}
-      {% else %}
-        {% set_global liste = liste | concat(with=s_temp.extra.weight_custom) %}
-      {% endif %}
-    {% endfor %}
-  {% endif %}
-  {% if sec.pages %}
-    {% for p in sec.pages %}
-      {% if not p.extra.weight_custom %}
-        {% set_global temoin = false %}
-      {% else %}
-        {% set_global liste = liste | concat(with=p.extra.weight_custom) %}
-      {% endif %}
-    {% endfor %}
-  {% endif %}
 
+{# (Private) Shared+root logic to build the menu #}
+{% macro inner_nav(root, current) %}
+  {{ nav::hamburger(root=root) }}
   
-  {# Si toutes les sous-sections et pages ont une variable weight_custom, #}
+  {# Section title #}
-  {# on classe selon elle. Sinon, on utilise la méthode classique.        #}
+  <div class="toc-item toc-section">
-  {% if temoin %}
+    <a class="subtext" href="{{root.permalink | safe}}">{{ root.title }}</a>
-    {% set_global liste = liste | sort %}
-    {% for x in liste %}
-      {% if sec.subsections %}
-        {% for y in sec.subsections %}
-          {% set p = get_section(path=y) %}
-          {% if p.extra.weight_custom == x %}
-            <div class="toc-item">
-              {% if p.subsections or p.pages %}
-                {% if p.path == current.path %}
-                  <a class="subtext" href="{{ p.permalink | safe}}">‣ <b>{{ p.title }}</b></a>
-                {% elif hierarchy is containing(y) %}
-                  <a class="subtext" href="{{ p.permalink | safe}}">‣ {{ p.title }}</a>
-                {% else %}
-                  <a class="subtext" href="{{ p.permalink | safe}}">‣ {{ p.title }}</a>
-                {% endif %}
-                {% if hierarchy is containing(y) or current.path == p.path %}
-                  {% if level + 1 < maxlevel %}
-                    <div class="nav-subsection">
-                      {{ nav::navsection(hierarchy=hierarchy,level=level + 1,current=current) }}
   </div>
-                  {% endif %}
-                {% endif %}
-              {% else %}
-                {% if p.path == current.path %}
-                <a class="subtext" href="{{p.permalink | safe}}"><b>{{ p.title }}</b></a>
-                {% else %}
-                  <a class="subtext" href="{{p.permalink | safe}}">{{ p.title }}</a>
-                {% endif %}
-              {% endif %}
-            </div>
-          {% endif %}
-        {% endfor %}
-      {% endif %}
-      {% if sec.pages %}
-        {% for p in sec.pages %}
-          {% if p.extra.weight_custom == x %}
-            <div class="toc-item">
-              {% if p.path == current.path %}
-              <a class="subtext" href="{{p.permalink | safe}}"><b>{{ p.title }}</b></a>
-              {% else %}
-                <a class="subtext" href="{{p.permalink | safe}}">{{ p.title }}</a>
-              {% endif %}
-            </div>
-          {% endif %}
-        {% endfor %}
-      {% endif %}	  
-    {% endfor %}
-  {% else %}
-    {% if sec.subsections %}
-      {% for s in sec.subsections %}
-        {% set p = get_section(path=s) %}
-        <div class="toc-item">
-          {% if p.subsections or p.pages %}
-            {% if p.path == current.path %}
-              <a class="subtext" href="{{ p.permalink | safe}}">‣ <b>{{ p.title }}</b></a>
-            {% elif hierarchy is containing(s) %}
-              <a class="subtext" href="{{ p.permalink | safe}}">‣ {{ p.title }}</a>
-            {% else %}
-              <a class="subtext" href="{{ p.permalink | safe}}">‣ {{ p.title }}</a>
-            {% endif %}
-            {% if hierarchy is containing(s) or current.path == p.path %}
-              {% if level + 1 < maxlevel %}
-                <div class="nav-subsection">
-                  {{ nav::navsection(hierarchy=hierarchy,level=level + 1,current=current) }}
-                </div>
-              {% endif %}
-            {% endif %}
-          {% else %}
-            {% if p.path == current.path %}
-            <a class="subtext" href="{{p.permalink | safe}}"><b>{{ p.title }}</b></a>
-            {% else %}
-              <a class="subtext" href="{{p.permalink | safe}}">{{ p.title }}</a>
-            {% endif %}
-          {% endif %}
-        </div>
-        {% endfor %}
-    {% endif %}
 
-    {% if sec.pages %}
+  {# Choose between "tree" (has extra.parent) and "list" (default) collections #}
-      {% for p in sec.pages %}
+  {% set root_tree = root.pages | group_by(attribute="extra.parent") %}
-        <div class="toc-item">
+  {% if root.relative_path in root_tree %}
-          {% if p.path == current.path %}
+    {% set tree_breadcrumb = nav::breadcrumb(corpus=root.pages, root=root.relative_path, target=current)|split(pat=":")|slice(start=1) %}
-          <a class="subtext" href="{{p.permalink | safe}}"><b>{{ p.title }}</b></a>
+    {{ nav::tree(
+         tree=root_tree, 
+         cursor=root.relative_path, 
+         selected=current, 
+         crumb=tree_breadcrumb) }}
   {% else %}
-            <a class="subtext" href="{{p.permalink | safe}}">{{ p.title }}</a>
+    {{ nav::list(list=root.pages, selected=current) }}
   {% endif %}   
-        </div>
+{% endmacro %}
-      {% endfor %}
-    {% endif %}
-  {% endif %}	
-{% endmacro navsection %}
-
-{% macro navmenu(current) %}
-  {% if current.ancestors %}
-    {% set hierarchy = current.ancestors | slice(start=1) | concat(with=current.relative_path) %}
-  {% else %}
-    {% set hierarchy = [current.relative_path] %}
-  {% endif %}
-
-  {% set root_path = hierarchy | nth(n=0) %}
-  {% set root = get_section(path=root_path) %}
 
+{# On small screens, like a smartphone, hide the menu behind an hamburger icon #}
+{% macro hamburger(root) %}
   <input id="menu-toggle" type="checkbox" />
   <label class='menu-button-container' for="menu-toggle">
     <div class="menu-button"></div>
     <div class="toc-item toc-menu-title subtext">{{ root.title }}</div>
   </label>
-  
-  <div class="toc-item toc-section">
-    <a class="subtext" href="{{root.permalink | safe}}">{{ root.title }}</a>
-  </div>
-  {{ nav::navsection(hierarchy=hierarchy,level=0,current=current) }}
 {% endmacro %}
+
+{# Build a breadcrumb for the page #}
+{# It's ugly because this is the hacky part of the project #}
+{% macro breadcrumb(corpus, root, target) %}{% if 'parent' in target.extra and target.extra.parent != root %}{% set new_target = get_page(path=target.extra.parent) %}{{ nav::breadcrumb(corpus=corpus, root=root, target=new_target) }}:{{ new_target.relative_path }}{% endif %}{% endmacro %}
+
+{% macro list(list, selected) %}
+  {% for page in list %}
+    {% set is_selected = page.relative_path == selected.relative_path %}
+    <div class="toc-item">
+      {{ nav::link(page=page, is_selected=is_selected, is_parent=false) }}
+    </div>
+  {% endfor %}
+{% endmacro %}
+
+{# Tree menu rendering #}
+{% macro tree(tree, cursor, selected, crumb) %}
+  {% for page in tree | get(key=cursor) %}
+  {% set is_selected = page.relative_path == selected.relative_path %}
+  <div class="toc-item">
+
+    {# LINK WITH SUBSECTION #}
+    {% if page.relative_path in tree %}
+      {{ nav::link(page=page, is_selected=is_selected, is_parent=true) }} 
+      {% if page.relative_path in crumb or is_selected %}
+        <div class="nav-subsection">
+          {% set ncrumb = crumb | slice(start=1) %}
+          {% set ncursor = page.relative_path %}
+          {% if ncursor in tree %}
+            {{ nav::tree(tree=tree, cursor=ncursor, selected=selected, crumb=ncrumb) }}
+          {% endif %}
+        </div>
+      {% endif %}
+
+    {# SIMPLE LINK #}
+    {% else %}
+      {{ nav::link(page=page, is_selected=is_selected, is_parent=false) }}
+    {% endif %}
+  </div>
+  {% endfor %}
+{% endmacro %}
+
+{% macro subsection() %}
+
+{% endmacro %}
+
+{% macro link(page, is_selected, is_parent) %}
+  <a class="subtext" href="{{page.permalink | safe}}">
+      {% if is_selected %}<b>{% endif %}
+      {% if is_parent %}‣ {% endif %}
+      {{ page.title }}
+      {% if is_selected %}</b>{% endif %}
+  </a>
+{% endmacro %}
+

templates/index.html

@@ -29,9 +29,9 @@
             <div class="toc {% if page.ancestors or section.ancestors %}{% else %}toc-homepage{% endif %}">
                 <div class="toc-sticky">
                     {% if page %}
-                    {{ nav::navmenu(current=page) }}
+                        {{ nav::page(target=page) }}
                     {% else %}
-                    {{ nav::navmenu(current=section) }}
+                        {{ nav::section(target=section) }}
                     {% endif %}
                 </div>
             </div>