From 6cac8feab52e8105bc7be0f1b3a0f37a313635b4 Mon Sep 17 00:00:00 2001 From: Quentin Dufour Date: Wed, 1 Mar 2023 15:38:36 +0100 Subject: [PATCH] rework menu logic part 1 --- content/prise_en_main/_index.md | 2 - content/prise_en_main/avec-un-générateur.md | 2 +- content/prise_en_main/aws-cli.md | 2 +- content/prise_en_main/compte.md | 2 +- content/prise_en_main/creer-du-contenu.md | 2 +- content/prise_en_main/cryptpad.md | 2 +- content/prise_en_main/drive_garage.md | 2 +- content/prise_en_main/emails.md | 2 +- .../prise_en_main/initialiser-votre-accès.md | 2 +- content/prise_en_main/jitsi.md | 2 +- content/prise_en_main/matrix.md | 2 +- content/prise_en_main/mettre-place-DNS.md | 2 +- content/prise_en_main/plume.md | 2 +- content/prise_en_main/publier-le-contenu.md | 2 +- content/prise_en_main/rclone.md | 2 +- content/prise_en_main/rclone_mount.md | 2 +- content/prise_en_main/statique-comment-ça.md | 2 +- content/prise_en_main/stockage.md | 4 +- content/prise_en_main/web.md | 2 +- content/prise_en_main/winscp.md | 2 +- content/prise_en_main/à-la-main.md | 2 +- templates/_nav.html | 219 +++++++----------- templates/index.html | 4 +- 23 files changed, 108 insertions(+), 159 deletions(-) diff --git a/content/prise_en_main/_index.md b/content/prise_en_main/_index.md index 7687c80..635e2d7 100644 --- a/content/prise_en_main/_index.md +++ b/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. diff --git a/content/prise_en_main/avec-un-générateur.md b/content/prise_en_main/avec-un-générateur.md index c6da234..24a5efd 100644 --- a/content/prise_en_main/avec-un-générateur.md +++ b/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) diff --git a/content/prise_en_main/aws-cli.md b/content/prise_en_main/aws-cli.md index da17249..c801b5a 100644 --- a/content/prise_en_main/aws-cli.md +++ b/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/)». diff --git a/content/prise_en_main/compte.md b/content/prise_en_main/compte.md index 941d0fc..c9f18cb 100644 --- a/content/prise_en_main/compte.md +++ b/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. diff --git a/content/prise_en_main/creer-du-contenu.md b/content/prise_en_main/creer-du-contenu.md index 67f63d9..149d74c 100644 --- a/content/prise_en_main/creer-du-contenu.md +++ b/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 ! diff --git a/content/prise_en_main/cryptpad.md b/content/prise_en_main/cryptpad.md index bde163f..610c07f 100644 --- a/content/prise_en_main/cryptpad.md +++ b/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 diff --git a/content/prise_en_main/drive_garage.md b/content/prise_en_main/drive_garage.md index 9694894..cde90b4 100644 --- a/content/prise_en_main/drive_garage.md +++ b/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. diff --git a/content/prise_en_main/emails.md b/content/prise_en_main/emails.md index f28986d..acdddb4 100644 --- a/content/prise_en_main/emails.md +++ b/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. diff --git a/content/prise_en_main/initialiser-votre-accès.md b/content/prise_en_main/initialiser-votre-accès.md index ca05908..5782306 100644 --- a/content/prise_en_main/initialiser-votre-accès.md +++ b/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. diff --git a/content/prise_en_main/jitsi.md b/content/prise_en_main/jitsi.md index 2ca99b6..2117037 100644 --- a/content/prise_en_main/jitsi.md +++ b/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 diff --git a/content/prise_en_main/matrix.md b/content/prise_en_main/matrix.md index 55cb71b..40ccc0d 100644 --- a/content/prise_en_main/matrix.md +++ b/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 diff --git a/content/prise_en_main/mettre-place-DNS.md b/content/prise_en_main/mettre-place-DNS.md index 846b86f..5e396a2 100644 --- a/content/prise_en_main/mettre-place-DNS.md +++ b/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 diff --git a/content/prise_en_main/plume.md b/content/prise_en_main/plume.md index ce3a78a..2e85eb5 100644 --- a/content/prise_en_main/plume.md +++ b/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 diff --git a/content/prise_en_main/publier-le-contenu.md b/content/prise_en_main/publier-le-contenu.md index 2c5e53b..48d1416 100644 --- a/content/prise_en_main/publier-le-contenu.md +++ b/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/)». diff --git a/content/prise_en_main/rclone.md b/content/prise_en_main/rclone.md index 881ee36..34bb825 100644 --- a/content/prise_en_main/rclone.md +++ b/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" --- diff --git a/content/prise_en_main/rclone_mount.md b/content/prise_en_main/rclone_mount.md index 82c14e3..7884687 100644 --- a/content/prise_en_main/rclone_mount.md +++ b/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 : diff --git a/content/prise_en_main/statique-comment-ça.md b/content/prise_en_main/statique-comment-ça.md index b65163d..14e2b96 100644 --- a/content/prise_en_main/statique-comment-ça.md +++ b/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. diff --git a/content/prise_en_main/stockage.md b/content/prise_en_main/stockage.md index 0ab8129..96b39c0 100644 --- a/content/prise_en_main/stockage.md +++ b/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é**. diff --git a/content/prise_en_main/web.md b/content/prise_en_main/web.md index c0b6de5..ecac65c 100644 --- a/content/prise_en_main/web.md +++ b/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 ! diff --git a/content/prise_en_main/winscp.md b/content/prise_en_main/winscp.md index 9457869..6528836 100644 --- a/content/prise_en_main/winscp.md +++ b/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' --- diff --git a/content/prise_en_main/à-la-main.md b/content/prise_en_main/à-la-main.md index 06d32a8..ee1eb45 100644 --- a/content/prise_en_main/à-la-main.md +++ b/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. diff --git a/templates/_nav.html b/templates/_nav.html index b05e472..b183a57 100644 --- a/templates/_nav.html +++ b/templates/_nav.html @@ -1,147 +1,98 @@ -{% macro navsection(hierarchy, level, current) %} - {% set sec = hierarchy | nth(n=level) %} - {% set sec = get_section(path=sec) %} - {% set maxlevel = hierarchy | length %} +{# (Public) Entrypoint to be used by zola "pages" #} +{% macro page(target) %} + {% set root = get_section(path=target.ancestors | last) %} + {{ 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 %} +{# -------------------------- #} - - {# Si toutes les sous-sections et pages ont une variable weight_custom, #} - {# on classe selon elle. Sinon, on utilise la méthode classique. #} - {% if temoin %} - {% 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 %} -
- {% if p.subsections or p.pages %} - {% if p.path == current.path %} - ‣ {{ p.title }} - {% elif hierarchy is containing(y) %} - ‣ {{ p.title }} - {% else %} - ‣ {{ p.title }} - {% endif %} - {% if hierarchy is containing(y) or current.path == p.path %} - {% if level + 1 < maxlevel %} -
- {{ nav::navsection(hierarchy=hierarchy,level=level + 1,current=current) }} -
- {% endif %} - {% endif %} - {% else %} - {% if p.path == current.path %} - {{ p.title }} - {% else %} - {{ p.title }} - {% endif %} - {% endif %} -
- {% endif %} - {% endfor %} - {% endif %} - {% if sec.pages %} - {% for p in sec.pages %} - {% if p.extra.weight_custom == x %} -
- {% if p.path == current.path %} - {{ p.title }} - {% else %} - {{ p.title }} - {% endif %} -
- {% endif %} - {% endfor %} - {% endif %} - {% endfor %} - {% else %} - {% if sec.subsections %} - {% for s in sec.subsections %} - {% set p = get_section(path=s) %} -
- {% if p.subsections or p.pages %} - {% if p.path == current.path %} - ‣ {{ p.title }} - {% elif hierarchy is containing(s) %} - ‣ {{ p.title }} - {% else %} - ‣ {{ p.title }} - {% endif %} - {% if hierarchy is containing(s) or current.path == p.path %} - {% if level + 1 < maxlevel %} -
- {{ nav::navsection(hierarchy=hierarchy,level=level + 1,current=current) }} -
- {% endif %} - {% endif %} - {% else %} - {% if p.path == current.path %} - {{ p.title }} - {% else %} - {{ p.title }} - {% endif %} - {% endif %} -
- {% endfor %} - {% endif %} +{# (Private) Shared+root logic to build the menu #} +{% macro inner_nav(root, current) %} + {{ nav::hamburger(root=root) }} - {% if sec.pages %} - {% for p in sec.pages %} -
- {% if p.path == current.path %} - {{ p.title }} - {% else %} - {{ p.title }} - {% endif %} -
- {% endfor %} - {% endif %} - {% endif %} -{% endmacro navsection %} + {# Section title #} +
+ {{ root.title }} +
-{% macro navmenu(current) %} - {% if current.ancestors %} - {% set hierarchy = current.ancestors | slice(start=1) | concat(with=current.relative_path) %} + {# Choose between "tree" (has extra.parent) and "list" (default) collections #} + {% set root_tree = root.pages | group_by(attribute="extra.parent") %} + {% if root.relative_path in root_tree %} + {% set tree_breadcrumb = nav::breadcrumb(corpus=root.pages, root=root.relative_path, target=current)|split(pat=":")|slice(start=1) %} + {{ nav::tree( + tree=root_tree, + cursor=root.relative_path, + selected=current, + crumb=tree_breadcrumb) }} {% else %} - {% set hierarchy = [current.relative_path] %} - {% endif %} - - {% set root_path = hierarchy | nth(n=0) %} - {% set root = get_section(path=root_path) %} + {{ nav::list(list=root.pages, selected=current) }} + {% endif %} +{% endmacro %} +{# On small screens, like a smartphone, hide the menu behind an hamburger icon #} +{% macro hamburger(root) %} - -
- {{ root.title }} -
- {{ 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 %} +
+ {{ nav::link(page=page, is_selected=is_selected, is_parent=false) }} +
+ {% 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 %} +
+ + {# 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 %} +
+ {% 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 %} +
+ {% endif %} + + {# SIMPLE LINK #} + {% else %} + {{ nav::link(page=page, is_selected=is_selected, is_parent=false) }} + {% endif %} +
+ {% endfor %} +{% endmacro %} + +{% macro subsection() %} + +{% endmacro %} + +{% macro link(page, is_selected, is_parent) %} + + {% if is_selected %}{% endif %} + {% if is_parent %}‣ {% endif %} + {{ page.title }} + {% if is_selected %}{% endif %} + +{% endmacro %} + diff --git a/templates/index.html b/templates/index.html index fd4e9bf..085a81a 100644 --- a/templates/index.html +++ b/templates/index.html @@ -29,9 +29,9 @@
{% if page %} - {{ nav::navmenu(current=page) }} + {{ nav::page(target=page) }} {% else %} - {{ nav::navmenu(current=section) }} + {{ nav::section(target=section) }} {% endif %}