Fix burger, RSS, pagination and lot of cosmetic stuff

README.md

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

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,5 +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
 ---
 

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

@@ -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;
-}
+}