Merge pull request #3 from LordMathis/feature/post-metadata

Feature/post metadata

README.md

@@ -4,6 +4,7 @@ Nightfall is a minimal dark theme for Hugo
 
 ![Hugo Theme Nightfall](https://raw.githubusercontent.com/LordMathis/hugo-theme-nightfall/main/images/screenshot.png)
 ![Hugo Theme Nightfall Posts](https://raw.githubusercontent.com/LordMathis/hugo-theme-nightfall/main/images/screenshot_2.png)
+![Hugo Theme Nightfall Single](https://raw.githubusercontent.com/LordMathis/hugo-theme-nightfall/main/images/screenshot_3.png)
 
 ## Get the theme
 
@@ -70,7 +71,6 @@ To add a menu item add `[[menu.header]]` item to `config.toml`. For example:
 
 To use icons for social links, you also need to add the link to icon font to custom-head.html
 
-
 ## Custom Head
 
 To use custom icons, css, js or other resources create `layouts/partials/custom-head.html` and add your links there.

assets/sass/pages/_single.scss

@@ -2,4 +2,32 @@
 
 .postWrapper {
     text-align: left;
+}
+
+.postMetadata {
+    font-family: $fontCode;
+    display: block;
+    background: $backgroundDarker;
+    padding: 10px;
+}
+
+dt, dd {
+    line-height: 1.5;
+}
+
+dl {
+    display: grid;
+    grid-template-columns: max-content auto;
+}
+
+dt {
+    grid-column-start: 1;
+}
+
+dd {
+    grid-column-start: 2;
+}
+
+dt::after {
+    content: ":";
 }

exampleSite/config.toml

@@ -17,6 +17,9 @@ author = "Hugo Nightfall"
 user = "hello"
 hostname = "gohugo.io"
 
+readingTime = true  # Show reading time on post page
+published = true  # Show published data on post page
+
 [[params.social]]
 key = 0
 name = "github"

layouts/_default/list.html

@@ -23,7 +23,8 @@ <h1>{{ .Title }}</h1>
             <div class="postListItem" role="listitem">
                 <div class="postHeader">
                     <span class="postTitle">{{ .Title }}</span>
-                    <span class="postDate">{{ .Date.Format "January 2, 2006" }}</span>
+                    {{ $formattedDate := .Date.Format "2006-01-02" }}
+                    <time class="postDate" datetime="{{ $formattedDate }}">{{ .Date.Format "January 2, 2006" }}</time>
                 </div>
                 <div class="postExcerpt">
                     <p>{{ .Summary }}</p>

layouts/_default/single.html

@@ -6,6 +6,28 @@
 {{ define "main" }}
 <div class="postWrapper">
     <h1>{{ .Title }}</h1>
+    <section class="postMetadata">
+        <dl>
+            {{ with .GetTerms "tags" }}
+                {{ partial "taxonomy/tags.html" . }}
+            {{ end }}
+            {{ with .GetTerms "authors" }}
+                {{ partial "taxonomy/authors.html" . }}
+            {{ end }}
+            {{ with .GetTerms "categories" }}
+                {{ partial "taxonomy/categories.html" . }}
+            {{ end }}
+            {{ if .Site.Params.published | default true }}
+                <dt>published</dt>
+                {{ $formattedDate := .Date.Format "2006-01-02" }}
+                <dd><time datetime="{{ $formattedDate }}">{{ .Date.Format "January 2, 2006" }}</time></dd>
+            {{ end }}
+            {{ if .Site.Params.readingTime | default true }}
+                <dt>reading time</dt>
+                <dd>{{ math.Round (div (countwords .Content) 220.0) }} minutes</dd>
+            {{ end }}
+        </dl>
+    </section>
     <div>
         {{ .Content }}
     </div>

layouts/partials/taxonomy/authors.html

@@ -0,0 +1,8 @@
+<!-- [html-validate-disable element-required-ancestor] -->
+<dt>authors</dt>
+<dd>
+{{- range $index, $el := . -}}
+    <span></span>
+    <a href="{{ .RelPermalink }}">{{- .LinkTitle -}}</a>
+{{- end -}}
+</dd>

layouts/partials/taxonomy/categories.html

@@ -0,0 +1,8 @@
+<!-- [html-validate-disable element-required-ancestor] -->
+<dt>categories</dt>
+<dd>
+{{- range $index, $el := . -}}
+    <span></span>
+    <a href="{{ .RelPermalink }}">{{- .LinkTitle -}}</a>
+{{- end -}}
+</dd>

layouts/partials/taxonomy/tags.html

@@ -0,0 +1,8 @@
+<!-- [html-validate-disable element-required-ancestor] -->
+<dt>tags</dt>
+<dd>
+{{- range $index, $el := . -}}
+    <span></span>
+    <a href="{{ .RelPermalink }}">#{{ .LinkTitle }}</a>
+{{- end -}}
+</dd>