Replace HTML comments with Hugo comments

So they are not listed, but are shown in the thematic case's navigation menu to get an idea of what's coming next

themes/chosto/archetypes/section.md

@@ -4,4 +4,4 @@ subtitle:
 code:
 draft: true
 ---
-<!-- We use sections to define "cases", i.e. serie of articles about a topic -->
+{{/* We use sections to define "cases", i.e. serie of articles about a topic */}}

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

@@ -1,2 +1,2 @@
-<!-- Overwrite default title rendering to add anchor -->
+{{/* Overwrite default title rendering to add anchor */}}
 <h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}">¶</a></h{{ .Level }}>

themes/chosto/layouts/_default/list.html

@@ -1,20 +1,23 @@
 {{ define "main" }}
-<!-- Default list used for homepage and taxonomy pages (e.g. tags),
-  but not for sections (see section.html template) -->
+{{/* Default list used for homepage and taxonomy pages (e.g. tags),
+  but not for sections (see section.html template) */}}
 <div class="section pt-5">
   <div class="container is-max-widescreen">
     <main>
       <div class="columns is-multiline">
-        <!-- Custom paginator with only blog posts (e.g. avoid "À propos"),
-          ordered from newest to oldest -->
-        {{ $paginator := .Paginator }}
+        {{/* Custom paginator with only blog posts (e.g. avoid "À propos") which
+          are already written (avoid "incoming" posts of thematic series),
+          ordered from newest to oldest */}}
+        {{ $paginator := .Paginate 
+          (where
+            (where site.RegularPages ".Type" "in" site.Params.mainSections) 
+          ".Params.incoming" "!=" true) 
+        }}
         {{ range $paginator.Pages }}
-        {{ if (eq .FirstSection.Section "posts")}}
         <div class="column is-variable is-one-third">
           {{ .Render "summary" }}
         </div>
         {{ end }}
-        {{ end }}
       </div>
       {{- partial "pagination.html" $paginator -}}
     </main>

themes/chosto/layouts/_default/section.html

@@ -2,7 +2,7 @@
 <div class="section">
   <div class="container is-max-widescreen">
     <main>
-      <!-- A section _index.md may have a content, describing its theme -->
+      {{/* A section _index.md may have a content, describing its theme */}}
       {{ with .Content }}
       <article class="message mt-5 mb-2">
         <div class="message-body content">
@@ -10,9 +10,9 @@
         </div>
       </article>
       {{ end }}
-      <!-- Then simply show posts belonging to the section,
+      {{/* Then simply show posts belonging to the section,
         but contrary to index and taxonomy, show oldest to newest,
-        to keep a sense of progression -->
+        to keep a sense of progression */}}
       <div class="columns is-multiline">
         {{ $paginator := .Paginate .RegularPagesRecursive.ByDate }}
         {{ range $paginator.Pages }}

themes/chosto/layouts/_default/single.html

@@ -1,15 +1,15 @@
 {{ define "main" }}
 <div class="section">
-  <!--
-  If the current page is a blog post and belongs to a thematic serie, we will add a side menu
+  {{/*
+  If the current page is a blog post and belongs to a thematic serie, 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
-  -->
-  <!-- is-desktop stacks vertically columns for tablets and mobiles. is-8 is a
-  maximum gap of 2rem between columns -->
+  */}}
+  {{/* is-desktop stacks vertically columns for tablets and mobiles. is-8 is a
+  maximum gap of 2rem between columns */}}
   <div class="columns is-variable is-desktop is-8">
-    <!-- To ease reading, the content is a bit wider for small screens
-    but not too wide for big screens -->
+    {{/* To ease reading, the content is a bit wider for small screens
+    but not too wide for big screens */}}
     <aside class="menu column mt-2 is-one-fifth-desktop is-one-fifth-fullhd is-full-tablet is-full-mobile">
       {{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
       {{ with .CurrentSection }}
@@ -18,11 +18,21 @@
         <a href="{{ .Permalink }}">{{ .Params.Title }}</a>
       </p>
       <div class="menu-list">
+        {{/* Get all posts belonging to the current thematic serie, sorted by date */}}
         {{ $posts := (where $.Site.RegularPages "CurrentSection.Params.Code" "==" $.CurrentSection.Params.Code )}}
         {{ $postsSorted := (sort $posts "Date" )}}
         {{ range $postsSorted }}
+        {{/* Show titles for incoming posts, but do not make them clickable. Note
+             that they will still be accessible by crafting the URL by hand. This 
+             is **not** a security, just a nice way to tease stuff. To really hide
+             something it should be marked as "draft: true" so the page is not built. */}}
+        {{ if eq .Params.incoming true }}
+        <a class="disabled">{{ .Title }} <i class="has-text-grey">(à venir)</i></a>
+        {{ else }}
+        {{/* Otherwise link to the posts, highlightning the current one */}}
         <a {{ if eq $.Title .Title }} class="is-active" {{ end }} href="{{ .Permalink }}">{{ .Title }}</a>
         {{ end }}
+        {{ end }}
       </div>
       {{ end }}
       {{ end }}
@@ -31,7 +41,7 @@
     <section class="column content is-three-fifths-desktop is-three-fifths-fullhd is-full-tablet is-full-mobile">
       <div>
         <article>
-          <!-- If this is part of a thematic serie, remind it so it is clear -->
+          {{/* If this is part of a thematic serie, remind it so it is clear */}}
           {{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
           {{ with .CurrentSection }}
           {{ if .Params.Title }}
@@ -44,7 +54,7 @@
           {{ end }}
           {{ end }}
           {{ end }}
-          <!-- First thing is a legend for the hero image, if it exists -->
+          {{/* First thing is a legend for the hero image, if it exists */}}
           {{ with .Params.imgExplanation }}
           <div class="message">
             <div class="message-body content is-italic">
@@ -52,7 +62,7 @@
             </div>
           </div>
           {{ end }}
-          <!-- Second, an introductive message before ToC, if it exists -->
+          {{/* Second, an introductive message before ToC, if it exists */}}
           {{ with .Params.intro | markdownify | safeHTML }}
           <div class="message is-dark">
             <div class="message-body">
@@ -60,16 +70,16 @@
             </div>
           </div>
           {{ end }}
-          <!-- Then, ToC if text has more than 600 words and not explicitly asked not to -->
+          {{/* Then, ToC if text has more than 600 words and not explicitly asked not to */}}
           {{ if (and (not .Params.notoc) (gt .WordCount 600)) }}
           <div class="message is-link">
             <div class="message-header">Sommaire</div>
-            <!-- Appreciate this horrible trick, even a 2000's HTML generator won't generate such code -->
+            {{/* Appreciate this horrible trick, even a 2000's HTML generator won't generate such code */}}
             <div class="message-body has-text-left pt-1">
               {{ .TableOfContents | replaceRE "<a" "<a style='text-decoration:none;'" | safeHTML }}</div>
           </div>
           {{ end }}
-          <!-- Finally, content! -->
+          {{/* Finally, content! */}}
           {{ .Content }}
         </article>
       </div>

themes/chosto/layouts/_default/summary.html

@@ -12,7 +12,7 @@
   <div class="card-content" style="height:100%;">
     <div class="has-text-centered">
       <a class="title is-4" href="{{.Permalink}}">
-        <!--
+        {{/*
       Well, I am a beginner with Hugo so this is probably like crushing a banana with a rocket.
       When a post belongs to a "case" (i.e. a section with a code, I'd like to have [INDEX/TOTAL] printed in title.
       An when a post is on its own, don't print anything.
@@ -20,7 +20,7 @@
       But I don't wan't to write it manually because it could break when adding a blog post in between two existing blog posts.
       So, iterate over the blog posts with same section as current blog post, order them by date and save the index of current blog post.
       Maybe there is an easier way to get the same result...
-      -->
+      */}}
         {{ $currentPost := . }}
         {{ $currentPostIndex := 1 }}
         {{ $posts := (where $.Site.RegularPages "CurrentSection.Params.Code" "==" $.CurrentSection.Params.Code )}}
@@ -37,8 +37,8 @@
       </a>
     </div>
     <hr style="margin: 1rem 0;">
-    <!-- If a special summary (before ToC) have been defined,
-      prefer using it because it has more chances to be a better summary -->
+    {{/* If a special summary (before ToC) have been defined,
+      prefer using it because it has more chances to be a better summary */}}
     {{ if (isset .Params "summary" )}}
     {{ .Params.summary }}
     {{ else }}

themes/chosto/layouts/partials/head.html

@@ -5,26 +5,26 @@
   {{ $styleCustom := resources.Get "css/custom.css" }}
   <link rel="stylesheet" href="{{ $styleBulma.Permalink }}">
   <link rel="stylesheet" href="{{ $styleCustom.Permalink }}">
-  <!-- RSS feed -->
+  {{/* RSS feed */}}
   {{ range .AlternativeOutputFormats -}}
   {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
   {{ end -}}
-  <!-- Default to home image -->
+  {{/* Default to home image */}}
   {{ $image := resources.Get "img/home.jpg" }}
-  <!-- If header image exists in current context, use it instead -->
+  {{/* If header image exists in current context, use it instead */}}
   {{ with .Resources.GetMatch "top.jpg" }}
   {{ $image = . }}
   {{ end }}
   {{ $image = $image.Resize "3000x" }}
   {{ $image := $image | images.Filter (images.GaussianBlur 7) }}
-  <!-- tbh I am too lazy to extend Bulma, so put dirty CSS directives here to be able to use Hugo templating system -->
+  {{/* tbh I am too lazy to extend Bulma, so put dirty CSS directives here to be able to use Hugo templating system */}}
   <style>
     .has-bg-img {
       background: url('{{ $image.Permalink }}')center center;
       background-size: cover;
     }
   </style>
-  <!-- Favico -->
+  {{/* Favico */}}
   <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
   <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon.png">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">

themes/chosto/layouts/partials/header.html

@@ -1,6 +1,6 @@
-<!-- Allow to skip heading, for example in an about page -->
+{{/* Allow to skip heading, for example in an about page */}}
 {{ if not .Params.noheader }}
-<!-- Display background only for regular pages, or home -->
+{{/* Display background only for regular pages, or home */}}
 {{ $background := in "page home" .Kind }}
 {{ $page := eq "page" .Kind }}
 {{ $home := eq "home" .Kind }}
@@ -37,7 +37,7 @@
           {{ end }}
         </div>
       </div>
-      <!-- Words and date stuff makes sens only for blog posts, not other pages -->
+      {{/* Words and date stuff makes sens only for blog posts, not other pages */}}
       {{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
       <div class="hero-foot mb-5 mx-5 content">
         <div class="level">

themes/chosto/layouts/partials/navbar.html

@@ -17,7 +17,7 @@
     </a>
   </div>
   <div id="navbar" class="navbar-menu">
-    <!-- In case of another navbar-start right after -->
+    {{/* In case of another navbar-start right after */}}
     <div class="navbar-start mr-0">
       <div class="navbar-item has-dropdown is-hoverable">
         <a class="navbar-link">
@@ -47,14 +47,14 @@
         </div>
       </div>
     </div>
-    <!-- start/end menu shares the exact same code, just not the same position, factorize with a loop -->
+    {{/* start/end menu shares the exact same code, just not the same position, factorize with a loop */}}
     {{ $currentPage := . }}
     {{ range (slice "start" "end")}}
     {{ $menuName := . }}
     <div class="navbar-{{ . }} mr-2">
-      <!-- now get the menu if it exists -->
+      {{/* now get the menu if it exists */}}
       {{ with index $.Site.Menus $menuName }}
-      <!-- and range over its pages -->
+      {{/* and range over its pages */}}
       {{ range . }}
       {{ if .HasChildren }}
       <div class="navbar-item has-dropdown is-hoverable {{ if $currentPage.HasMenuCurrent $menuName . }}is-active is-tab{{ end }}">
@@ -79,14 +79,14 @@
       <div class="level">
         <div class="level-left">
           <div class="level-item">
-            <!-- Each item should have a corresponding assets/img/x.png and link in config.yaml -->
+            {{/* Each item should have a corresponding assets/img/x.png and link in config.yaml */}}
             {{ range (slice "rss" "mastodon" "peertube" "funkwhale" "gitea" "mail" )}}
             {{ $imageName := . }}
-            <!-- Get image and resize to logo size -->
+            {{/* Get image and resize to logo size */}}
             {{ $imagePath := printf "img/%s.png" $imageName }}
             {{ $image := resources.Get $imagePath }}
             {{ $imageResized := $image.Resize "64x" }}
-            <!-- Get logo link in site params (index allows to use a dynamic parameter name) -->
+            {{/* Get logo link in site params (index allows to use a dynamic parameter name) */}}
             <a class="navbar-item" href="{{ index $.Site.Params $imageName }}">
               <img src="{{ $imageResized.Permalink }}">
             </a>

themes/chosto/layouts/shortcodes/figure.html

@@ -63,7 +63,7 @@
             {{- end -}}
             {{- with .Get "width" }} width="{{ . }}"{{ end -}}
             {{- with .Get "height" }} height="{{ . }}"{{ end -}}
-        /> <!-- Closing img tag -->
+        /> {{/* Closing img tag */}}
         {{- if .Get "link" }}</a>{{ end -}}
         {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
             <figcaption>

themes/chosto/static/css/custom.css

@@ -41,6 +41,12 @@ p:not(.title, .subtitle, figcaption p) {
   background: rgba(0, 0, 0, 0.3);
 }
 
+/* Used to disable click on incoming posts in thematic series */
+a.disabled {
+  pointer-events: none;
+  cursor: default;
+}
+
 /* New font is "smaller" in feeling */
 .navbar-dropdown {
   font-size: 1rem;