Blog: Fix categories, blog single page template

themes/ccchh/archetypes/article.md

@@ -1,8 +1,11 @@
 ---
-kind: article
+categories: article
 title: '{{ replace .File.ContentBaseName `-` ` ` | title }}'
 date: '{{ .Date }}'
 draft: true
+authors:
+  - your name
+# tags:
 ---
 
 TODO: Write your blog post

themes/ccchh/archetypes/event.md

@@ -1,9 +1,13 @@
 ---
-kind: event
+categories: event
 title: '{{ replace .File.ContentBaseName `-` ` ` | title }}'
 date: '{{ .Date }}' # date of the event
 publishDate: '{{ .Date }}' # when to publish
 draft: true
+location: Z9
+authors:
+  - your name
+# tags:
 ---
 
 TODO: Describe your event here

themes/ccchh/assets/sass/main.scss

@@ -3,6 +3,35 @@ $roomstate_color_open: var(--ins-color);
 $roomstate_color_closed: var(--del-color);
 
 
+// General Customizations
+header {
+  margin-bottom: 3rem;
+
+  h1 {
+    margin-bottom: 0;
+  }
+}
+
+body>footer {
+  padding-top: var(--spacing);
+  padding-bottom: var(--spacing);
+}
+
+body>main {
+  padding-bottom: var(--spacing);
+}
+
+.li-comma {
+  &::after {
+    content: ", ";
+  }
+
+  &:last-child::after {
+    content: "";
+  }
+}
+
+
 // Room State in Menu
 #roomstate {
   font-size: 0.9em;
@@ -75,4 +104,17 @@ $roomstate_color_closed: var(--del-color);
       margin: 0 auto;
     }
   }
+}
+
+// Blog Overview: Categories list
+div.nav-aside {
+  ul {
+    display: inline;
+    padding: 0;
+
+    li {
+      text-decoration: none;
+      display: inline;
+    }
+  }
 }

themes/ccchh/layouts/_default/list.html

@@ -0,0 +1,16 @@
+{{ define "main" }}
+  <main class="container" aria-role="main">
+    <header class="header">
+      <h1>{{ .Title }}</h1>
+    </header>
+
+    <ul>
+      {{ range .Pages }}
+      <!-- TODO: Content summary -->
+        <li>
+          <a href="{{ .Permalink }}"><span style="font-variant-numeric: tabular-nums;">{{ .Date.Format "2006-01-02" }}</span> | {{ .Title }}</a>
+        </li>
+      {{ end }}
+    </ul>
+  </main>
+{{ end }}

themes/ccchh/layouts/_default/single.html

@@ -6,8 +6,10 @@
       <span class="subtitle">{{ . }}</span>
       {{ end }}
     </header>
-    <div class="content">
+
+    <section class="content">
       {{ .Content }}
-    </div>
+    </section>
+
   </main>
 {{ end }}

themes/ccchh/layouts/blog/list.html

@@ -5,29 +5,27 @@
       {{ with .Params.subtitle }}
       <span class="subtitle">{{ . }}</span>
       {{ end }}
+
+      <div class="nav-aside">
+        Filter nach Kategorie:
+        <ul class="aside">
+        {{ range .Site.Taxonomies.categories }}
+          <li>
+            <a href="{{ .Page.Permalink }}">[{{ .Page.Title }}]</a>
+          </li>
+        {{ end }}
+        </ul>
+      </div>
     </header>
-    <div class="content">
-      {{ .Content }}
-    </div>
 
     <ul>
       {{ range .Pages }}
+      <!-- TODO: Content summary -->
         <li>
-          <a href="{{ .Permalink }}">{{ .Date.Format "2006-01-02" }} | {{ .Title }}</a>
+          <a href="{{ .Permalink }}"><span style="font-variant-numeric: tabular-nums;">{{ .Date.Format "2006-01-02" }}</span> | {{ .Title }}</a>
         </li>
       {{ end }}
     </ul>
-
-    {{ range .Pages.GroupByParam "kind" }}
-    <h3>{{ .Key }}</h3>
-    <ul>
-      {{ range .Pages }}
-        <li>
-          <a href="{{ .Permalink }}">{{ .Date.Format "2006-01-02" }} | {{ .Title }}</a>
-        </li>
-      {{ end }}
-    </ul>
-    {{ end }}
     <!-- TODO: Pagination: see https://gohugo.io/templates/pagination/ -->
   </main>
 {{ end }}

themes/ccchh/layouts/blog/single.html

@@ -0,0 +1,35 @@
+{{ define "main" }}
+  <main class="container" aria-role="main">
+    <header class="header">
+      <h1>{{ .Title }}</h1>
+      {{- with .Params.subtitle }}
+      <span class="subtitle">{{ . }}</span>
+      {{- end }}
+
+      <div class="infos">
+        <i class="fa-regular fa-calendar-xmark"></i> {{ .Date.Format "2006-01-02 15:04" }}
+        {{- with .Params.location }},
+        <i class="fa-solid fa-location-dot"></i> {{ . }}
+        {{- end }}
+        <br>
+        {{- if .Params.authors }}
+        <i class="fa-regular fa-user"></i>
+          {{ range .Params.authors }}<span class="li-comma">{{ . }}</span>{{ end }}
+        {{- end }}
+      </div>
+    </header>
+
+    <section class="content">
+      {{ .Content }}
+    </section>
+
+    <div class="meta">
+      {{- with .Params.publishDate }}
+      <small class="li-comma">Veröffentlicht: {{ .Format "2006-01-02 15:04" }}</small>
+      {{- end }}
+      {{- with .Params.lastmod }}
+      <small class="li-comma">letzte Änderung: {{ .Format "2006-01-02 15:04" }}</small>
+      {{- end }}
+    </div>
+  </main>
+{{ end }}

themes/ccchh/layouts/index.html

@@ -11,7 +11,7 @@
       {{ .Content }}
     </div>
 
-    {{- $events := where (.Site.GetPage "blog").Pages ".Params.kind" "event" }}
+    {{- $events := where (.Site.GetPage "blog").Pages ".Params.categories" "event" }}
     {{- $upcoming := where $events ".Params.date" "ge" now }}
     {{ if $upcoming}}
     <div class="announcements">