Blog: Fix categories, blog single page template

README.md

@@ -49,7 +49,7 @@ Events will be shown on the home page from their publishing date until they have
 
 To create a new event blog post, run a command like this:
 ```shell
-hugo new content --king event blog/your-event-title.md
+hugo new content --kind event blog/your-event-title.md
 ```
 
 #### Add a Blog Entry
@@ -59,7 +59,7 @@ They will only be shown in the "blog" section and posted to the RSS feeds.
 
 To create a new general blog post, run a command like this:
 ```shell
-hugo new content --king article blog/your-article-title.md
+hugo new content --kind article blog/your-article-title.md
 ```
 
 ### Icons

content/blog/_index.md

@@ -3,5 +3,3 @@ title: "Blog"
 draft: false
 menu: main
 ---
-
-TODO: Provide filters by type (announcement, post)

content/blog/test-event-future.md

@@ -1,13 +1,13 @@
 ---
-kind: event
+categories: event
 title: "Test Event Future"
 date: 2023-12-30T09:03:20+02:00 # date of the event
 publishDate: 2023-08-27T09:03:20+02:00 # when to publish
 draft: false
-keywords:
+location: Z9
-  - foo
+authors:
-  - bar
+  - jtbx
-categories: announcement
+  - Ada Lovelace
 ---
 This is **bold** text, and this is *emphasized* text.
 

content/blog/test-event-future2.md

@@ -1,13 +1,12 @@
 ---
-kind: event
+categories: event
 title: "Test Event Future 2"
 date: 2023-12-03T09:03:20+02:00 # date of the event
 publishDate: 2023-09-27T09:03:20+02:00 # when to publish
 draft: false
-keywords:
+location: Z9
-  - foo
+tags:
-  - bar
+  - test
-categories: announcement
 ---
 This is **bold** text, and this is *emphasized* text.
 

content/blog/test-event.md

@@ -1,13 +1,15 @@
 ---
-kind: event
+categories: event
 title: "Test Event"
 date: 2023-09-20T09:03:20+02:00 # date of the event
 publishDate: 2023-09-20T09:03:20+02:00 # when to publish
 draft: false
-keywords:
+location: Z9
-  - foo
+authors:
-  - bar
+  - jtbx
-categories: announcement
+  - Ada Lovelace
+tags:
+  - test
 ---
 This is **bold** text, and this is *emphasized* text.
 

content/blog/test-post.md

@@ -1,13 +1,13 @@
 ---
-kind: article
+categories: article
 title: "Test Blogpost"
 date: 2023-08-20T09:03:20+02:00
 draft: false
-keywords:
+authors:
+  - your name
+tags:
   - foo
   - bar
-categories:
-- article
 ---
 This is **bold** text, and this is *emphasized* text.
 

content/categories/article/_index.md

@@ -0,0 +1,3 @@
+---
+title: Blogeintrag
+---

content/categories/event/_index.md

@@ -0,0 +1,3 @@
+---
+title: Eventankündigung
+---

hugo.toml

@@ -3,6 +3,15 @@ languageCode = 'de-de'
 title = 'CCC Hansestadt Hamburg e.V.'
 theme = 'ccchh'
 
+[taxonomies]
+  category  = 'categories'
+  tag       = 'tags'
+  author    = 'authors'
+
+[frontmatter]
+  lastmod = [':git', ':fileModTime', 'lastmod', 'modified', 'publishdate', 'pubdate', 'published', 'date']
+
+
 [menu]
 [[menu.main]]
   name = "Wiki"

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">