feat: add tags to post pages (#193)

exampleSite/config.yaml

@@ -20,9 +20,13 @@ markup:
     startLevel: 1
     endLevel: 9
 
+taxonomies:
+  tag: tags
+
 params:
   # geekdocMenuBundle: true
   geekdocToC: 3
+  geekdocTagsToMenu: true
 
   geekdocRepo: https://github.com/thegeeklab/hugo-geekdoc
   geekdocEditPath: edit/main/exampleSite/content

exampleSite/content/posts/hello_geekdoc.md

@@ -2,6 +2,8 @@
 title: Hello Geekdoc
 type: posts
 date: 2020-01-06
+tags:
+  - Documentation
 ---
 
 This is the first release of the Geekdoc theme.

exampleSite/content/usage/configuration.md

@@ -29,6 +29,9 @@ enableGitInfo = true
     startLevel = 1
     endLevel = 9
 
+[taxonomies]
+  tag = "tags"
+
 [params]
   # (Optional, default 6) Set how many table of contents levels to be showed on page.
   # Use false to hide ToC, note that 0 will default to 6 (https://gohugo.io/functions/default/)
@@ -97,6 +100,9 @@ enableGitInfo = true
 
   # (Optional, default true) Display a "Back to top" link in the site footer.
   geekdocBackToTop = true
+
+  # (Optional, default false) Enable or disable adding tags for post pages automatically to the navigation sidebar.
+  geekdocTagsToMenu = true
 ```
 
 {{< /tab >}}
@@ -123,6 +129,9 @@ markup:
     startLevel: 1
     endLevel: 9
 
+taxonomies:
+  tag: tags
+
 params:
   # (Optional, default 6) Set how many table of contents levels to be showed on page.
   # Use false to hide ToC, note that 0 will default to 6 (https://gohugo.io/functions/default/)
@@ -196,6 +205,9 @@ params:
 
   # (Optional, default true) Display a "Back to top" link in the site footer.
   geekdocBackToTop: true
+
+  # (Optional, default false) Enable or disable adding tags for post pages automatically to the navigation sidebar.
+  geekdocTagsToMenu: true
 ```
 
 {{< /tab >}}

exampleSite/content/usage/getting-started.md

@@ -63,6 +63,9 @@ To prepare your new site environment just a few steps are required:
      [markup.tableOfContents]
        startLevel = 1
        endLevel = 9
+
+   [taxonomies]
+      tag = "tags"
    ```
 
 5. Test your site.

layouts/_default/list.html

@@ -1,5 +1,6 @@
 {{ define "main" }}
     {{ partial "page-header" . }}
+
     <article class="gdoc-markdown gdoc-markdown__align--{{ default "left" (.Page.Params.GeekdocAlign | lower) }}">
         <h1>{{ partial "title" . }}</h1>
         {{ partial "content" . }}

layouts/partials/menu.html

@@ -10,6 +10,22 @@
         {{ end }}
     </section>
 
+    {{ if and (in (slice "posts" "tags") .Section) (default false .Site.Params.GeekdocTagsToMenu) }}
+    <section class="gdoc-nav--tags">
+        <h2>Tags</h2>
+        <ul class="gdoc-nav__list">
+            {{ $currentPage := .RelPermalink }}
+            {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
+            {{ with $.Site.GetPage (printf "/tags/%s" $name) }}
+            <li>
+                <a class="gdoc-nav__entry {{ if eq $currentPage .RelPermalink }} is-active {{ end }}" href="{{ .RelPermalink }}">{{ .Title }}</a>
+            </li>
+            {{ end }}
+            {{ end }}
+        </ul>
+    </section>
+    {{ end }}
+
     <section class="gdoc-nav--more">
         {{ if .Site.Data.menu.more.more }}
             <h2>More</h2>

layouts/posts/list.html

@@ -3,24 +3,60 @@
         <article class="gdoc-markdown gdoc-post">
             <header class="gdoc-post__header">
                 <h1 class="gdoc-post__title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
-                <div class="gdoc-post__date">
-                    <svg class="icon gdoc_date"><use xlink:href="#gdoc_date"></use></svg>
-                    <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
-                        {{ if ne (.Lastmod.Format "2006-01-02") (.Date.Format "2006-01-02") }}
-                        Updated on
-                        {{ end }}
-                        {{ .Lastmod.Format "Jan 2, 2006" }}
-                    </time>
-                </div>
             </header>
             <section>
                 {{ .Summary }}
             </section>
-            {{ if .Truncated }}
             <div class="gdoc-post__readmore">
+                {{ if .Truncated }}
                 <a class="flex-inline align-center fake-link" title="Read full post" href="{{ .RelPermalink }}">Read full post</a>
+                {{ end }}
             </div>
-            {{ end }}
+
+            <footer class="gdoc-post__footer">
+                <span class="no-wrap">
+                    <svg class="icon gdoc_date"><use xlink:href="#gdoc_date"></use></svg>
+                    <span class="gdoc-post__tag">
+                        <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
+                            {{ if .Lastmod.After (.Date.AddDate 0 0 1) }}
+                                Updated on
+                            {{ end }}
+                            {{ .Lastmod.Format "Jan 2, 2006" }}
+                        </time>
+                    </span>
+                </span>
+
+                <span class="no-wrap">
+                    <svg class="icon gdoc_timer"><use xlink:href="#gdoc_timer"></use></svg>
+                    <span class="gdoc-post__tag">{{ .ReadingTime }} min read</span>
+                </span>
+
+                {{ $tc := 0 }}
+                {{ with .Params.tags }}
+                {{ range sort . }}
+                    {{ $name := . }}
+                    {{ with $.Site.GetPage (printf "/tags/%s" $name | urlize) }}
+                        {{ if eq $tc 0 }}
+                        <span class="no-wrap">
+                        <svg class="icon gdoc_bookmark"><use xlink:href="#gdoc_bookmark"></use></svg>
+                        {{ template "post-tag" dict "name" $name "page" . }}
+                        </span>
+                        {{ else }}
+                        {{ template "post-tag" dict "name" $name "page" . }}
+                        {{ end }}
+                    {{ end }}
+                    {{ $tc = (add $tc 1) }}
+                {{ end }}
+                {{ end }}
+            </footer>
         </article>
     {{ end }}
 {{ end }}
+
+{{ define "post-tag" }}
+<span class="gdoc-post__tag">
+    <span class="gdoc-button">
+        <a class="gdoc-button__link" href="{{ .page.RelPermalink }}" title="All posts tagged with '{{ .name }}'">{{ .name }}</a>
+    </span>
+</span>
+{{ end }}

layouts/posts/single.html

@@ -2,15 +2,24 @@
     <article class="gdoc-markdown gdoc-post">
       <header class="gdoc-post__header">
         <h1 class="gdoc-post__title">{{ .Title }}</h1>
-        <div class="gdoc-post__date">
+        <div class="gdoc-post__meta">
-            <svg class="icon gdoc_date"><use xlink:href="#gdoc_date"></use></svg>
+          <span class="no-wrap">
-            <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
+              <svg class="icon gdoc_date"><use xlink:href="#gdoc_date"></use></svg>
-                {{ if ne (.Lastmod.Format "2006-01-02") (.Date.Format "2006-01-02") }}
+              <span class="gdoc-post__tag">
-                Updated on
+                  <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
-                {{ end }}
+                      {{ if ne (.Lastmod.Format "2006-01-02") (.Date.Format "2006-01-02") }}
-                {{ .Lastmod.Format "Jan 2, 2006" }}
+                          Updated on
-            </time>
+                      {{ end }}
-        </div>
+                      {{ .Lastmod.Format "Jan 2, 2006" }}
+                  </time>
+              </span>
+          </span>
+
+          <span class="no-wrap">
+              <svg class="icon gdoc_timer"><use xlink:href="#gdoc_timer"></use></svg>
+              <span class="gdoc-post__tag">{{ .ReadingTime }} min read</span>
+          </span>
+      </div>
       </header>
       <div>
         {{ partial "content" . }}

layouts/taxonomy/list.html

@@ -0,0 +1,62 @@
+{{ define "main" }}
+    {{ range .Paginator.Pages }}
+        <article class="gdoc-markdown gdoc-post">
+            <header class="gdoc-post__header">
+                <h1 class="gdoc-post__title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
+            </header>
+            <section>
+                {{ .Summary }}
+            </section>
+            <div class="gdoc-post__readmore">
+                {{ if .Truncated }}
+                <a class="flex-inline align-center fake-link" title="Read full post" href="{{ .RelPermalink }}">Read full post</a>
+                {{ end }}
+            </div>
+
+            <footer class="gdoc-post__footer">
+                <span class="no-wrap">
+                    <svg class="icon gdoc_date"><use xlink:href="#gdoc_date"></use></svg>
+                    <span class="gdoc-post__tag">
+                        <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
+                            {{ if .Lastmod.After (.Date.AddDate 0 0 1) }}
+                                Updated on
+                            {{ end }}
+                            {{ .Lastmod.Format "Jan 2, 2006" }}
+                        </time>
+                    </span>
+                </span>
+
+                <span class="no-wrap">
+                    <svg class="icon gdoc_timer"><use xlink:href="#gdoc_timer"></use></svg>
+                    <span class="gdoc-post__tag">{{ .ReadingTime }} min read</span>
+                </span>
+
+                {{ $tc := 0 }}
+                {{ with .Params.tags }}
+                {{ range sort . }}
+                    {{ $name := . }}
+                    {{ with $.Site.GetPage (printf "/tags/%s" $name | urlize) }}
+                        {{ if eq $tc 0 }}
+                        <span class="no-wrap">
+                        <svg class="icon gdoc_bookmark"><use xlink:href="#gdoc_bookmark"></use></svg>
+                        {{ template "post-tag" dict "name" $name "page" . }}
+                        </span>
+                        {{ else }}
+                        {{ template "post-tag" dict "name" $name "page" . }}
+                        {{ end }}
+                    {{ end }}
+                    {{ $tc = (add $tc 1) }}
+                {{ end }}
+                {{ end }}
+            </footer>
+        </article>
+    {{ end }}
+{{ end }}
+
+{{ define "post-tag" }}
+<span class="gdoc-post__tag">
+    <span class="gdoc-button">
+        <a class="gdoc-button__link" href="{{ .page.RelPermalink }}" title="All posts tagged with '{{ .name }}'">{{ .name }}</a>
+    </span>
+</span>
+{{ end }}

src/icons/timer.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>timer</title>
+<path d="M16 29q4.428 0 7.536-3.143t3.107-7.571-3.107-7.536-7.536-3.107-7.536 3.107-3.107 7.536 3.107 7.571 7.536 3.143zM26.714 9.786q1.214 1.571 2.107 4.036t0.893 4.464q0 5.643-4 9.678t-9.714 4.036-9.714-4.036-4-9.678 4-9.678 9.714-4.036q1.929 0 4.464 0.929t4.107 2.143l2.143-2.214q1.143 0.929 2.143 2.143zM14.5 19.857v-9.143h3v9.143h-3zM20.571 0.001v3.071h-9.143v-3.071h9.143z"></path>
+</svg>

src/sass/_base.scss

@@ -278,7 +278,7 @@ img {
       cursor: pointer;
 
       .icon {
-        font-size: 0.7rem;
+        font-size: $font-size-12;
       }
     }
 
@@ -311,6 +311,7 @@ img {
     font-weight: bold;
   }
 
+  &--tags,
   &--more {
     padding-top: $padding-8;
   }
@@ -437,14 +438,6 @@ img {
     }
   }
 
-  &__date {
-    margin: 1em 0;
-
-    .icon {
-      font-size: 1.2em;
-    }
-  }
-
   &:first-child {
     border-top: 0;
 
@@ -468,6 +461,33 @@ img {
       text-decoration: none !important;
     }
   }
+
+  &__tag {
+    margin: $padding-4 0 !important;
+
+    .gdoc-button {
+      background: var(--body-background);
+
+      &__link {
+        padding: $padding-4 $padding-8;
+      }
+    }
+  }
+
+  &__meta {
+    padding-bottom: $padding-16;
+  }
+
+  &__footer,
+  &__meta {
+    :not(:first-child).no-wrap {
+      margin-left: $padding-8;
+    }
+
+    .icon {
+      font-size: $font-size-20;
+    }
+  }
 }
 
 .gdoc-footer {

src/sass/_utils.scss

@@ -57,6 +57,10 @@
   text-align: center;
 }
 
+.no-wrap {
+  white-space: nowrap;
+}
+
 .hidden {
   display: none;
 }