First tentative version of a blog

config.yaml

@@ -9,8 +9,7 @@ params:
   siteLicenseName: "GNU GPLv3"
 
 taxonomies:
-  category: categories
+  blog_tag: 'blog/tags'
-  tag: tags
 
 privacy:
   disqus:

content/blog/_index.md

@@ -0,0 +1,15 @@
+---
+title: "Blog"
+date: 2024-04-01
+draft: false
+type: blog
+
+menu:
+  main:
+    weight: 150
+---
+
+This blog is an eclectic collection of things I thought deserved to be written
+up and recorded. It may (or may never) include the way I set up some services
+for system administration, things I struggled to find, cool dev tricks, or
+whatever crosses my mind (and, hopefully, was helpful).

content/blog/test01.md

@@ -0,0 +1,10 @@
+---
+title: Test 1
+date: 2023-04-01
+draft: true
+"blog/tags":
+- test
+- misc
+---
+
+Bonjour, ceci est un test.

content/blog/test02.md

@@ -0,0 +1,10 @@
+---
+title: Test 2
+date: 2023-05-02
+draft: true
+"blog/tags":
+- test
+- second
+---
+
+Bonjour, ceci est également un test.

content/blog/test_long.md

@@ -0,0 +1,9 @@
+---
+title: Ceci, par rapport aux autres, est un test avec un titre d'une longueur fort surprenante.
+date: 2023-05-12
+draft: true
+"blog/tags":
+- test
+---
+
+Bonjour, ceci est également un test.

layouts/blog/list.html

@@ -0,0 +1,16 @@
+{{ define "profilepic" }}<div class="nopic"></div>{{ end }}
+
+{{ define "pagename" }}
+<h1>{{ .Title }}</h1>
+{{ end }}
+
+{{ define "main" }}
+  {{ .Content }}
+
+  <div id="entries">
+    {{ range .Pages }}
+    {{ partial "blog/entry_list.html" . }}
+    <hr />
+    {{ end }}
+  </div>
+{{ end }}

layouts/partials/blog/entry_list.html

@@ -0,0 +1,13 @@
+<div class="blog_entry">
+  <div class="blog_entry_descr">
+    <a href="{{ .Permalink }}" class="blog_entry_title">{{ .Title }}</a>
+    <span class="blog_entry_date">{{ .Date | time.Format ":date_medium" }}</span>
+  </div>
+  {{ with .GetTerms "blog/tags" }}
+  <ul class="blog_entry_tags">
+    {{ range . -}}
+    <li class="tag"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+    {{- end }}
+  </li>
+  {{ end }}
+</div>

scss/_blog.scss

@@ -0,0 +1,52 @@
+// vim: tabstop=2 shiftwidth=2 expandtab
+
+@import 'params';
+
+#entries {
+  .blog_entry {
+    padding: 15px 0;
+    .blog_entry_descr {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: 10px;
+
+      .blog_entry_title {
+        display: block;
+        font-size: 1.1em;
+        text-align: left;
+      }
+      .blog_entry_date {
+        color: $fg_color_light;
+        font-style: italic;
+        display: block;
+        align-self: flex-start;
+      }
+    }
+    .blog_entry_tags::before {
+      content: "Tags:"
+    }
+    .blog_entry_tags {
+      list-style: none;
+      padding-left: 0;
+      margin: 5px 0;
+      font-size: 0.9em;
+      li {
+        display: inline;
+        font-style: italic;
+      }
+      li ~ li::before {
+        content: ", ";
+      }
+    }
+  }
+
+  hr {
+    width: 80%;
+    border-color: $fg_color_light;
+  }
+
+  hr:last-child {
+    display: none;
+  }
+}

scss/style.scss

@@ -2,6 +2,7 @@
 
 @import url('fonts.css');
 @import 'params';
+@import 'blog';
 
 html {
   background-color: $bg_color;

static/css/style.css

@@ -1,5 +1,41 @@
 @charset "UTF-8";
 @import url("fonts.css");
+#entries .blog_entry {
+  padding: 15px 0; }
+  #entries .blog_entry .blog_entry_descr {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 10px; }
+    #entries .blog_entry .blog_entry_descr .blog_entry_title {
+      display: block;
+      font-size: 1.1em;
+      text-align: left; }
+    #entries .blog_entry .blog_entry_descr .blog_entry_date {
+      color: #555555bb;
+      font-style: italic;
+      display: block;
+      align-self: flex-start; }
+  #entries .blog_entry .blog_entry_tags::before {
+    content: "Tags:"; }
+  #entries .blog_entry .blog_entry_tags {
+    list-style: none;
+    padding-left: 0;
+    margin: 5px 0;
+    font-size: 0.9em; }
+    #entries .blog_entry .blog_entry_tags li {
+      display: inline;
+      font-style: italic; }
+    #entries .blog_entry .blog_entry_tags li ~ li::before {
+      content: ", "; }
+
+#entries hr {
+  width: 80%;
+  border-color: #555555bb; }
+
+#entries hr:last-child {
+  display: none; }
+
 html {
   background-color: white; }