rework menu logic part 1

This commit is contained in:
Quentin 2023-03-01 15:38:36 +01:00
parent 75a62c5789
commit 6cac8feab5
Signed by: quentin
GPG key ID: E9602264D639FF68
23 changed files with 108 additions and 159 deletions

View file

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

View file

@ -5,7 +5,7 @@ sort_by: "weight"
date: 2022-09-01 date: 2022-09-01
weight: 2 weight: 2
extra: 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) 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)

View file

@ -4,7 +4,7 @@ description: "Publier avec aws-cli"
date: 2022-09-01 date: 2022-09-01
weight: 1 weight: 1
extra: 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/)». 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/)».

View file

@ -3,7 +3,7 @@ title: "Compte unique"
description: "Compte unique pour tous les services" description: "Compte unique pour tous les services"
weight: 10 weight: 10
extra: 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. Vous bénéficier d'un compte unique pour accéder à (presque) tous les services de Deuxfleurs.

View file

@ -5,7 +5,7 @@ sort_by: "weight"
weight: 0 weight: 0
date: 2022-09-01 date: 2022-09-01
extra: 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 ! Votre site est désormais complètement configuré. Avant de publier du contenu, il faut écrire celui-ci !

View file

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

View file

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

View file

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

View file

@ -4,7 +4,7 @@ description: "Initialiser le stockage objet sur Garage"
date: 2022-09-01 date: 2022-09-01
weight: 0 weight: 0
extra: 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. 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.

View file

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

View file

@ -5,7 +5,7 @@ date: "2022-03-09T19:13:51.671Z"
dateCreated: "2021-11-09T12:13:36.265Z" dateCreated: "2021-11-09T12:13:36.265Z"
weight: 30 weight: 30
extra: 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 Matrix est un réseau de communication instantanée que vous pouvez utiliser pour rester en contact

View file

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

View file

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

View file

@ -5,7 +5,7 @@ date: 2022-09-01
weight: 0 weight: 0
sort_by: "weight" sort_by: "weight"
extra: 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/)». 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/)».

View file

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

View file

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

View file

@ -4,7 +4,7 @@ description: "Clarification sur le contenu statique"
date: 2022-09-01 date: 2022-09-01
weight: 0 weight: 0
extra: 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. 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.

View file

@ -2,9 +2,9 @@
title: "Stockage de fichiers" title: "Stockage de fichiers"
description: "Stocker ses fichiers chez Deuxfleurs" description: "Stocker ses fichiers chez Deuxfleurs"
sort_by: "weight" sort_by: "weight"
weight: 10 weight: 99
extra: 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é**. 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é**.

View file

@ -4,7 +4,7 @@ description: "Héberger un site web"
sort_by: "weight" sort_by: "weight"
weight: 10 weight: 10
extra: 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 ! 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 !

View file

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

View file

@ -5,7 +5,7 @@ sort_by: "weight"
date: 2022-09-01 date: 2022-09-01
weight: 1 weight: 1
extra: 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. 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.

View file

@ -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 #}
{# Si toutes les sous-sections et pages ont une variable weight_custom, #} {% macro inner_nav(root, current) %}
{# on classe selon elle. Sinon, on utilise la méthode classique. #} {{ nav::hamburger(root=root) }}
{% 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 %}
<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 %} {# Section title #}
{% for p in sec.pages %} <div class="toc-item toc-section">
<div class="toc-item"> <a class="subtext" href="{{root.permalink | safe}}">{{ root.title }}</a>
{% if p.path == current.path %} </div>
<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>
{% endfor %}
{% endif %}
{% endif %}
{% endmacro navsection %}
{% macro navmenu(current) %} {# Choose between "tree" (has extra.parent) and "list" (default) collections #}
{% if current.ancestors %} {% set root_tree = root.pages | group_by(attribute="extra.parent") %}
{% set hierarchy = current.ancestors | slice(start=1) | concat(with=current.relative_path) %} {% 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 %} {% else %}
{% set hierarchy = [current.relative_path] %} {{ nav::list(list=root.pages, selected=current) }}
{% endif %} {% endif %}
{% endmacro %}
{% 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" /> <input id="menu-toggle" type="checkbox" />
<label class='menu-button-container' for="menu-toggle"> <label class='menu-button-container' for="menu-toggle">
<div class="menu-button"></div> <div class="menu-button"></div>
<div class="toc-item toc-menu-title subtext">{{ root.title }}</div> <div class="toc-item toc-menu-title subtext">{{ root.title }}</div>
</label> </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 %} {% 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 %}

View file

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