Add root pages, better footer and case header, automatic start/end navbar

README.md

@@ -4,13 +4,13 @@ My blog built with Hugo (static website generator) and Bulma (tiny yet powerful
 
 ## Content and choices
 
-It contains a theme coded specifically for the blog, with example taken from Hugo documentation. The purpose of not taking a great existing theme is to learn new webthings (because I really suck at web development). Also I wanted to learn a bit about Bulma, a tiny CSS framework without a line of JavaScript.
+It contains a theme coded specifically for the blog, with examples taken from Hugo documentation. The purpose of not taking a great existing theme is to learn new webthings (because I really suck at web development). Also I wanted to learn a bit about Bulma, a tiny CSS framework without a line of JavaScript.
 
 Hugo is really powerful yet pretty light and really fast. I do like the way templating is used to achieve very elegant tricks. In the past we would have used databases and dynamic languages like PHP for the same result.
 
 I think that using Wordpress for a little static blog is no longer relevant and I am really enthousiastic about projects like Hugo. Additionnally, the community seems very friendly. Other static CMS such as Ghost have an economic model that I don't like (eg you have to pay for plugins) and Grav is great but not so artisanal. The learning curve is pretty high and you're encouraged to use an existing theme with the PHP admin interface.
 
-With Hugo, I really have the sensation of minimizing the ressources I use while totally understanding what I am doing (even if I am doing it badly). Only exception would be the pagination which uses an obscure internal template for ease.
+With Hugo, I really have the sensation of minimizing the ressources I use while totally understanding what I am doing (even if I am doing it badly).
 
 ## Building
 
@@ -19,3 +19,7 @@ Just run `hugo` and serve the `public` directory.
 Remember to delete existing `public` directory before rebuilding blog.
 
 For development, run `hugo server --watch` to watch for config/content changes, rebuild site and serve it on localhost.
+
+## Using the theme
+
+TODO 😄

config.yaml

@@ -10,9 +10,11 @@ watch: true
 paginate: 5
 summaryLength: 50
 
-# All pages under posts section will have this link structure
 permalinks:
+  # All pages under posts section will have this link structure
   posts: /:sections/:title/
+  # For root section, just use title
+  /: :title
 
 # Disable all privacy unfriendly stuff
 privacy:

content/about.md

@@ -0,0 +1,4 @@
+---
+title: À propos
+menu: end
+---

themes/chosto/layouts/_default/list.html

@@ -1,8 +1,10 @@
 {{ define "main" }}
 <main>
   {{ with .Content }}
-  <article>
+  <article class="message mt-5 mb-2 is-medium">
+    <div class="message-body">
     {{ . }}
+    </div>
   </article>
   {{ end }}
   <div class="columns is-multiline is-mobile">

themes/chosto/layouts/page/single.html

@@ -1,9 +1,10 @@
 {{ define "main" }}
 <div class="columns mt-5 is-variable is-mobile is-8">
   <!--
-  If the current blog post belongs to a case, we will add a side menu
+  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 "posts"))}}
   {{ with .CurrentSection }}
   <aside class="menu box column is-3 is-align-self-flex-start is-fixed-top" style="position: sticky; top: 10%;">
     <p class="menu-label">
@@ -18,6 +19,7 @@
     </div>
   </aside>
   {{ end }}
+  {{ end }}
   <section class="column is-8">
     <div>
       <article>
@@ -41,8 +43,10 @@
       </div>
     </aside>
   </section>
+  {{ if (and .IsPage (eq .FirstSection "posts"))}}
   <aside class="box column is-2 is-align-self-flex-start" style="position: sticky; top: 10%;">
     {{- partial "about.html" . -}}
   </aside>
+  {{ end }}
 </div>
 {{ end }}

themes/chosto/layouts/partials/footer.html

@@ -1,15 +1,9 @@
 <footer class="footer">
-  <div class="level">
+  <div class="has-text-centered">
-    <div class="level-left">
-      <div class="level-item">
     Conçu avec&nbsp;<a href="https://gohugo.io/">Hugo</a>&nbsp;et&nbsp;<a href="https://bulma.io">Bulma</a>.
-      </div>
+    Les sources sont disponibles <a href="https://git.chosto.me/Chosto/blog">ici</a>.
-      <div class="level-item">
-      <a href="https://git.chosto.me/Chosto/blog">Sources du blog</a>.
-      </div>
-    </div>
-    <div class="level-right">
     Tout le contenu du blog est disponible sous licence&nbsp;<a href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution ShareAlike 4.0.</a>
-    </div>
+    <br /><br />
+    Prenez soin de vous. ❤️
   </div>
 </footer>

themes/chosto/layouts/partials/header.html

@@ -1,9 +1,9 @@
 <header>
   <section class="hero is-primary is-medium">
     <div class="hero-body has-text-centered">
-      <p class="title">{{ .Title }}</p>
+      <p class="title is-1 is-uppercase">{{ .Title }}</p>
       {{ with .Params.subtitle }}
-        <p class="subtitle">{{ . }}</p>
+        <p class="subtitle is-2">{{ . }}</p>
       {{ end }}
       {{ with .Params.categories }}
       <div class="tags colums is-centered is-rounded">
@@ -12,7 +12,8 @@
         {{ end }}
       </div>
       {{ end }}
-      {{ if .IsPage }}
+      <!-- Words and date stuff makes sens only for blog posts, not other pages -->
+      {{ if (and .IsPage (eq .FirstSection "posts"))}}
       <aside>
         <div>
           <section>

themes/chosto/layouts/partials/navbar.html

@@ -8,9 +8,10 @@
       <span aria-hidden="true"></span>
       <span aria-hidden="true"></span>
     </a>
-
+  </div>
   <div id="navbar" class="navbar-menu">
-      <div class="navbar-start">
+    <!-- In case of another navbar-start right after -->
+    <div class="navbar-start mr-0">
       <a class="navbar-item {{ if eq .Permalink .Site.Home.Permalink }}is-active is-tab{{ end }}" href="{{ .Site.Home.Permalink }}">Accueil</a>
       <div class="navbar-item has-dropdown is-hoverable">
         <a class="navbar-link">
@@ -39,28 +40,34 @@
           {{ end }}
         </div>
       </div>
+    </div>
+    <!-- start/end menu shares the exact same code, just not the same position, factorize with a loop -->
     {{ $currentPage := . }}
-        {{ range .Site.Menus.main }}
+    {{ range (slice "start" "end")}}
+    {{ $menu_name := . }}
+    <div class="navbar-{{ . }} mr-2">
+      <!-- now get the menu if it exists -->
+      {{ with index $.Site.Menus $menu_name }}
+      <!-- and range over its pages -->
+      {{ range . }}
       {{ if .HasChildren }}
-        <div class="navbar-item has-dropdown is-hoverable {{ if $currentPage.HasMenuCurrent "main" . }}is-active is-tab{{ end }}">
+      <div class="navbar-item has-dropdown is-hoverable {{ if $currentPage.HasMenuCurrent $menu_name . }}is-active is-tab{{ end }}">
         <a class="navbar-link">
           {{ .Pre }}
           <span>{{ .Name }}</span>
         </a>
         <div class="navbar-dropdown">
           {{ range .Children }}
-            <a class="navbar-item {{ if $currentPage.IsMenuCurrent "main" . }}is-active is-tab{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
+          <a class="navbar-item {{ if $currentPage.IsMenuCurrent $menu_name . }}is-active is-tab{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
           {{ end }}
         </div>
       </div>
       {{ else }}
-        <a class="navbar-item {{ if $currentPage.IsMenuCurrent "main" . }}is-active is-tab{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
+      <a class="navbar-item {{ if $currentPage.IsMenuCurrent $menu_name . }}is-active is-tab{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
+      {{ end }}
       {{ end }}
     {{ end }}
   </div>
-      <div class="navbar-end">
+    {{ end }}
-        <!-- See later to differentiate -->
-      </div>
-    </div>
   </div>
 </nav>

themes/chosto/layouts/partials/pagination.html

@@ -1,6 +1,6 @@
 {{ $pag := $.Paginator }}
 {{ if gt $pag.TotalPages 1 -}}
-<nav class="pagination is-centered" role="navigation" aria-label="pagination">
+<nav class="my-5 pagination is-centered" role="navigation" aria-label="pagination">
   {{ with $pag.First -}}
   <ul class="pagination-list">
   {{ end -}}
@@ -20,7 +20,7 @@
   {{- end -}}
   {{- if $showNumber }}
   <li>
-    <a class="pagination-link{{ if eq . $pag }} is-current{{ end }}" href="{{ .URL }}" aria-label="Page {{ .PageNumber }}">{{ .PageNumber }}</a>
+    <a class="mx-1 pagination-link{{ if eq . $pag }} is-current{{ end }}" href="{{ .URL }}" aria-label="Page {{ .PageNumber }}">{{ .PageNumber }}</a>
   </li>
   {{- else if $shouldEllipse }}
   <li>