About page with same layout than others even if no case

config.yaml

@@ -12,8 +12,8 @@ paginate: 6
 permalinks:
   # All pages under posts section will have this link structure
   posts: /:sections/:title/
-  # For root section, just use title
-  /: :title
+  # For about section, just use title
+  about: /:title
 
 # Disable all privacy unfriendly stuff
 privacy:

content/about.md

@@ -5,3 +5,29 @@ menu: end
 ---
 
 ## À propos de moi
+
+Avant, j'avais les cheveux longs.
+
+{{< figure src="/me.jpg" width="450px" caption="Moi en plein ménage et en pleine forme" >}}
+
+Depuis que les golfes me gagnent, je les ai coupé et je ressemble à quelqu'un qui va pitcher une application basée sur la blockchain. Je trouverai une photo un jour.
+
+Je m'appelle Quentin, j'ai 24 ans et j'ai fait des études d'informatique. L'informatique me fascine depuis que je suis petit. Comme pas mal de monde, j'ai découvert la programmation sur le site du zéro. Depuis, je trouve toujours un certain plaisir esthétique à utiliser des outils ingénieux et à fabriquer des Communs. Par contre, le capitalisme de surveillance et le fantasme du technosolutionnisme me donnent parfois furieusement envie de changer de métier. En attendant, j'essaye de travailler sur des projets qui permettent aux gens de gagner en autonomie et de redécentraliser/reterritorialiser le numérique.
+
+J'ai beaucoup traîné chez [Picasoft](https://picasoft.net/), une association d'éducation populaire qui sensibilise les citoyen·ne·s aux enjeux du numérique et qui héberge des services web libres. N'hésitez pas à les contacter, iels sont chouettes. 😄
+
+J'aime beaucoup la musique et je joue du piano. Il m'arrive d'essayer de composer des trucs que je mets sur [ma chaîne Funkwhale](https://music.chosto.me/@Chosto/).
+
+J'aime la fête et les câlins consentis.
+
+Je voulais avoir un blog depuis longtemps mais je ne me sentais pas légitime. Mais comme on est sur le web et que je ne vole de temps à personne, je me suis lancé.
+
+## Côté technique
+
+Je suis très mauvais en développement web, mais je voulais essayer de bricoler quelque chose sans utiliser un thème tout fait. Ce blog a donc été construit en utilisant [Hugo](https://gohugo.io/), un générateur de site web statique dont j'aime la syntaxe et la documentation. Le système de template est très élégant et permet de se passer des langages dynamiques, inutiles pour un blog. Je crois que pas mal de monde préfère Zola à Hugo, et c'est possible que ce soit moins alambiqué.
+
+Pour la mise en page, j'ai utilisé [Bulma](https://bulma.io) dans sa version de base. Merci aux copain·e·s de [42l](https://42l.fr) de me l'avoir fait découvrir. C'est un framework CSS léger et sans une ligne de JavaScript, qui tire profit des flexbox. Son utilisation est extrêmement simple et je suis content du résultat.
+
+Le site est hébergé sur un VPS loué chez Scaleway. Aucun cookie n'est déposé, aucune ligne de JavaScript n'est utilisée et les adresses IP des visiteur·se·s ne sont pas conservées.
+
+J'ai encore du travail sur l'accessibilité, les flux RSS et l'optimisation des images. C'est une toute première version.

themes/chosto/layouts/_default/single.html

@@ -3,12 +3,13 @@
   <div class="container content">
     <div class="columns mt-5 is-variable is-8">
       <!--
-    If the current page is a blog post and belongs to a case, we will add a side menu
-    with all other blog posts belonging to that case, emphasis to the current.
-    -->
-      {{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
-      {{ with .CurrentSection }}
+      If the current page is a blog post and belongs to a case, we will add a side menu
+      with all other blog posts belonging to that case, emphasis to the current.
+      Still use empty container if nothing to show for homogeneous layout
+      -->
       <aside class="menu column is-3 mt-2 is-align-self-flex-start">
+        {{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
+        {{ with .CurrentSection }}
         <p class="menu-label">
           Dans le dossier « <a href="{{ .Permalink }}">{{ .Params.Title }} »</a>...
         </p>
@@ -19,10 +20,10 @@
           <a {{ if eq $.Title .Title }} class="is-active" {{ end }} href="{{ .Permalink }}">{{ .Title }}</a>
           {{ end }}
         </div>
+        {{ end }}
+        {{ end }}
       </aside>
-      {{ end }}
-      {{ end }}
-      <section class="column is-7">
+      <section class="column">
         <div>
           <article>
             <!-- First thing is a legend for the hero image, if it exists -->
@@ -38,8 +39,8 @@
             {{ . }}
             <br /><br />
             {{ end }}
-            <!-- Then, ToC if text has more than 400 words and not explicitly asked not to -->
-            {{ if (or (not .Params.notoc) (gt .WordCount 400)) }}
+            <!-- Then, ToC if text has more than 600 words and not explicitly asked not to -->
+            {{ if (or (not .Params.notoc) (gt .WordCount 600)) }}
             <div class="message is-info">
               <div class="message-header">Sommaire</div>
               <!-- Appreciate this horrible trick, even a 2000's HTML generator won't generate such code -->
@@ -67,6 +68,9 @@
           </div>
         </aside>
       </section>
+      <!-- So the middle column is sized automatically, useful in pages that are not blog posts -->
+      <div class="column is-2">
+      </div>
     </div>
   </div>
 </div>