Fix burger, RSS, pagination and lot of cosmetic stuff

.gitignore

@@ -1,2 +1,3 @@
 resources
 public
+.hugo_build.lock

README.md

@@ -24,9 +24,4 @@ For development, run `hugo server --watch` to watch for config/content changes,
 
 ## Using the theme
 
-TODO 😄
+TODO 😄
-
-## TODO
-
-* RSS feeds
-* Make burger menu work on mobiles

config.yaml

@@ -7,7 +7,8 @@ footnoteReturnLinkContents: ↩
 languageCode: fr-fr
 languageName: Français
 watch: true
-paginate: 6
+paginate: 9
+title: Billets à la mer
 
 permalinks:
   # All pages under posts section will have this link structure
@@ -53,4 +54,5 @@ params:
   gitea: https://git.chosto.me
   mail: mailto:quentinduchemin@tuta.io
   funkwhale: https://music.chosto.me/@Chosto/
-  rss: https://blog.chosto.me/posts/index.xml
+  rss: https://blog.chosto.me/index.xml
+  peertube: https://tube.chosto.me

content/about.md

@@ -1,6 +1,7 @@
 ---
 title: À propos
 notoc: true
+noheader: true
 menu: end
 ---
 
@@ -12,22 +13,22 @@ Avant, j'avais les cheveux longs.
 
 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 m'appelle Quentin, j'ai 24 ans et j'ai fait des études d'informatique. L'informatique m'a fasciné étant 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. Le [capitalisme de surveillance, le technosolutionnisme et la gouvernance algorithmique](https://tube.picasoft.net/videos/watch/d3476d5d-2314-40e9-a971-88b4a71ba306) me donnent 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.
+Je m'appelle Quentin, j'ai 26 ans et j'ai fait des études d'informatique. L'informatique m'a fascinée étant petit. Elle me fascine toujours, mais dans la mesure où elle aide à construire des Communs émancipateurs. Car de l'eau a coulé sous les ponts, et [le capitalisme de surveillance, le technosolutionnisme et la gouvernance algorithmique](https://tube.picasoft.net/videos/watch/d3476d5d-2314-40e9-a971-88b4a71ba306) me donnent 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 beaucoup la musique et je joue du piano. Il m'arrive d'essayer de jouer et composer des trucs que je mets sur [ma chaîne Funkwhale](https://music.chosto.me/@Chosto/) et mon [instance PeerTube](https://tube.chosto.me/).
 
 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, allez, pourquoi pas...?
+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, et bien, pourquoi pas...?
 
 ## 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.
+Pour la mise en page, j'ai utilisé [Bulma](https://bulma.io) . 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.
+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 (sauf pour ouvrir le menu sur mobile : ami·e·s développeur·ses, aidez moi), 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.
+J'ai encore du travail sur l'accessibilité et sur les flux RSS.

themes/chosto/layouts/_default/_markup/render-heading.html

@@ -0,0 +1,3 @@
+
+
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}">¶</a></h{{ .Level }}>

themes/chosto/layouts/_default/list.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-<div class="section">
+<div class="section pt-5">
   <div class="container is-max-widescreen">
     <main>
       {{ with .Content }}
@@ -11,7 +11,14 @@
       {{ end }}
       <div class="columns is-multiline">
         <!-- Custom paginator with only blog posts -->
-        {{ $paginator := .Paginate (where .Site.RegularPages "FirstSection.Section" "posts") }}
+        <!-- Annoying hackish stuff to only select pages belonging to the current section -->
+        {{ $articlesInSection := slice }}
+        {{ range .Site.RegularPages }}
+          {{ if $.IsAncestor . }}
+            {{ $articlesInSection = $articlesInSection | append . }}
+          {{ end }}
+        {{ end }}
+        {{ $paginator := .Paginate $articlesInSection }}
         {{ range $paginator.Pages }}
         {{ if (eq .FirstSection.Section "posts")}}
         <div class="column is-variable is-one-third">

themes/chosto/layouts/_default/single.html

@@ -8,7 +8,7 @@
   {{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
   {{ with .CurrentSection }}
   {{ if .Params.Title }}
-  <div class="container content">
+  <div class="container">
     <div class="columns mt-5 is-variable">
       <aside class="menu column is-3 mt-2 is-align-self-flex-start">
         <p class="menu-label">
@@ -29,7 +29,7 @@
       {{ else }}
       <div class="container content is-max-desktop">
       {{ end }}
-      <section class="column">
+      <section class="column content">
         <div>
           <article class="mx-6">
             <!-- First thing is a legend for the hero image, if it exists -->

themes/chosto/layouts/partials/head.html

@@ -5,6 +5,11 @@
   {{ $styleCustom := resources.Get "css/custom.css" }}
   <link rel="stylesheet" href="{{ $styleBulma.Permalink }}">
   <link rel="stylesheet" href="{{ $styleCustom.Permalink }}">
+  <!-- RSS feed -->
+  {{ range .AlternativeOutputFormats -}}
+    {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
+  {{ end -}}
+
   <!-- tbh I am too lazy to extend Bulma, so put dirty CSS directives here to be able to use Hugo templating system -->
   <style>
     /* Default to home image */
@@ -27,5 +32,5 @@
   <link rel="icon" sizes="196x196" href="/favicon-196.png" type="image/png">
   <meta name="msapplication-TileImage" content="favicon-144.png">
   <meta name="msapplication-TileColor" content="#FFFFFF">
-  <title>Billets à la mer</title>
+  <title>{{ .Site.Title }}</title>
 </head>

themes/chosto/layouts/partials/header.html

@@ -1,5 +1,9 @@
+<!-- Allow to skip heading, for example in an about page -->
+{{ if not .Params.noheader }}
+<!-- Display background only for regular pages, or home -->
+{{ $background := in "page home" .Kind }}
 <header>
-  <section class="hero has-bg-img is-info has-text-centered is-large">
+  <section class='hero has-text-centered {{ if $background }}is-large has-bg-img is-info {{ end }}'>
     <div class="hero-head mx-5">
       <div class="level subtitle is-5">
         <div class="level-left">
@@ -23,7 +27,7 @@
       </div>
 
     </div>
-    <div class="hero-body content">
+    <div class="hero-body {{ if not $background }}pb-0{{ end }} content has-text-centered">
       <p class="title is-1 is-uppercase">{{ .Title }}</p>
       {{ with .Params.subtitle }}
       <p class="subtitle is-2">{{ . }}</p>
@@ -54,3 +58,4 @@
     {{ end }}
   </section>
 </header>
+{{ end }}

themes/chosto/layouts/partials/navbar.html

@@ -81,7 +81,7 @@
         <div class="level-left">
           <div class="level-item">
             <!-- Each item should have a corresponding assets/img/x.png and link in config.yaml -->
-            {{ range (slice "rss" "mastodon" "funkwhale" "gitea" "github" "mail" )}}
+            {{ range (slice "rss" "mastodon" "peertube" "funkwhale" "gitea" "github" "mail" )}}
             {{ $imageName := . }}
             <!-- Get image and resize to logo size -->
             {{ $imagePath := printf "img/%s.png" $imageName }}
@@ -98,3 +98,26 @@
     </div>
   </div>
 </nav>
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+
+// Get all "navbar-burger" elements
+const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+// Add a click event on each of them
+$navbarBurgers.forEach( el => {
+  el.addEventListener('click', () => {
+
+    // Get the target from the "data-target" attribute
+    const target = el.dataset.target;
+    const $target = document.getElementById(target);
+
+    // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+    el.classList.toggle('is-active');
+    $target.classList.toggle('is-active');
+
+  });
+});
+
+});
+</script>

themes/chosto/static/css/custom.css

@@ -6,4 +6,4 @@
 
 .content {
   text-align: justify;
-}
+}