feat: add a table of content on blog posts

assets/static/css/bcarlin.css

@@ -266,6 +266,43 @@ main {
       }
     }
 
+    section.table-of-contents {
+      font-size: 0.9em;
+      margin-block-end: 2em;
+      margin-inline-start: 1em;
+      padding-inline-start: 1em;
+      border-inline-start: 1px solid var(--pico-muted-color);
+
+
+      p {
+        margin-bottom: 0; /* reset pico styles */
+        margin-block-end: 0.2em;
+        font-weight: bold;
+      }
+
+      nav {
+        ol {
+          &:last-of-type {
+            margin-right: initial; /* reset pico styles */
+          }
+
+          &:first-of-type {
+            margin-left: initial; /* reset pico styles */
+          }
+          
+          li {
+            display: list-item; /* reset pico styles */
+            padding: initial; /* reset pico styles */
+            list-style-type: none;
+
+            ol {
+              margin-inline-start: 1em !important;
+            }
+          }
+        }
+      }
+    }
+
     ul > li {
       list-style-type: disc;
     }

config/_default/hugo.yaml

@@ -41,3 +41,5 @@ markup:
   goldmark:
     parser:
       wrapStandAloneImageWithinParagraph: false
+  tableOfContents:
+    ordered: true

i18n/en.yaml

@@ -18,3 +18,4 @@ tags: Tags
 information_icon: Information icon
 warning_icon: Warning icon
 also_available_in: "Also available in:"
+table_of_contents: "Contents:"

i18n/fr.yaml

@@ -18,3 +18,4 @@ tags: Tags
 information_icon: Icône information
 warning_icon: Icône attention
 also_available_in: "Également disponible en :"
+table_of_contents: "Contenu :"

layouts/blog/single.html

@@ -23,6 +23,16 @@
       </div>
     </header>
 
+    
+    {{ with .TableOfContents }}
+    {{- if ne . `<nav id="TableOfContents"></nav>` }}
+    <section class="table-of-contents">
+      <p>{{ T "table_of_contents" }}</p>
+      {{ . }}
+    </section>
+    {{- end }}
+    {{- end }}
+
     <section class="e-content">
       {{ .Content }}
     </section>