Pre-2.0 Enhancements (#94)

2.0 Enhancements

- Improve template structure
- Fixed issue where flexbox was configured improperly and the side column expanded with longer content.
- No longer assume that posts are called "post"
- Simplify tag handling
- Improve related posts handling
- Support native Table of contents (if declared in params)
- Add DISQUS commenting (if disqusShortname added to config)
- Uses Hugo's Related content feature 
- Add asset hashing to Webpack for performance

README.md

@@ -10,17 +10,19 @@ Features
 
 - Responsive
 - Accessible
-- Contact form
+- Contact form 
 - Custom Robots.txt (changes values based on environment)
-- Internal templates for meta data and google analytics
+- Internal templates for meta data, google analytics, and DISQUS comments
 - RSS Discovery
+- Table of Contents (must declare `toc: true` in post parameter)
 
 Also includes examples of Hugo Features or Functions:
 
 - Pagination (internal template)
 - Taxonomies
 - Archetypes
 - Custom shortcode
+- Related content
 - Hugo built-in menu
 - `with`
 - `HUGO_ENV`
@@ -66,6 +68,12 @@ Take a look inside the [`exampleSite`](https://github.com/budparr/gohugo-theme-a
 You may need to delete the line: `themesDir = "../.."`
 
 
+### Add comments
+
+To enable DISQUS comments, add `disqusShortname = YOURSHORTNAME` to your config file.
+
+
+
 ### Change the hero background
 
 For any page or post you can add a featured image by including the local path in front matter (see content in the ExampleSite folder for examples): `featured_image: '/images/gohugo-default-sample-hero-image.jpg'`

layouts/_default/baseof.html

@@ -17,7 +17,13 @@
       <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
     {{ end }}
 
-    <link href='{{ "dist/main.css" | absURL }}' rel='stylesheet' type="text/css" />
+    {{ $css_path := $.Param "dev.css_path" | default "themes/gohugo-theme-ananke/static/dist/css" }}
+    {{ with $css_path }}
+      {{ range readDir . }}
+        <link href='/dist/css/{{ .Name }}' rel='stylesheet' type="text/css" data-turbolinks-track="reload" />
+      {{ end }}
+    {{ end }}
+
     {{ block "favicon" . }}
       {{ partial "site-favicon.html" . }}
     {{ end }}

layouts/_default/list.html

@@ -1,18 +1,15 @@
 {{ define "main" }}
-  <article class="cf pa3 pa4-m pa4-l">
-    <div class="measure-wide-l center f4 lh-copy nested-copy-line-height nested-links nested-img mid-gray">
-      {{ .Content }}
-    </div>
-  </article>
-  <div class="mw8 center">
-    {{ $paginator := .Paginate (where .Data.Pages "Section" .Section) }}
+  <article class="pa3 pa4-ns nested-copy-line-height nested-img">
+  <main class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy mid-gray">
+    {{- .Content -}}
+  </main>
     <section class="flex-ns flex-wrap justify-around mt5">
-      {{ range  $paginator.Pages }}
-        <div class="relative w-100  mb4 bg-white">
-          {{ partial "summary.html" . }}
+      {{ range .Paginator.Pages }}
+        <div class="relative w-100 w-30-l mb4 bg-white">
+          {{- partial "summary.html" . -}}
         </div>
       {{ end }}
     </section>
-  {{ template "_internal/pagination.html" . }}
-  </div>
+    {{- template "_internal/pagination.html" . -}}
+  </article>
 {{ end }}

layouts/_default/single.html

@@ -1,21 +1,39 @@
-{{ define "header" }}{{ partial "page-header.html" . }}{{ end }}
+{{ define "header" }}
+   {{/* We can override any block in the baseof file be defining it in the template */}}
+  {{ partial "page-header.html" . }}
+{{ end }}
+
 {{ define "main" }}
-  <div class="flex-l mt2 mw8 center">
-    <article class="center cf pv5 ph3 ph4-ns mw7">
-      <header>
-        <p class="f6 b helvetica tracked">
-          {{ humanize .Section | upper  }}
-        </p>
-        <h1 class="f1">
-          {{ .Title }}
-        </h1>
-      </header>
-      <div class="nested-copy-line-height lh-copy f4 nested-links nested-img mid-gray">
-        {{ .Content }}
+  <article class="flex-l flex-wrap justify-between mw8 center">
+
+    <header class="mt4 w-100">
+      <p class="f6 b helvetica tracked">
+          {{/*
+          CurrentSection allows us to use the section title instead of inferring from the folder.
+          https://gohugo.io/variables/page/#section-variables-and-methods
+          */}}
+        {{with .CurrentSection.Title }}{{. | upper }}{{end}}
+      </p>
+      <h1 class="f1 athelas mb1">
+        {{- .Title -}}
+      </h1>
+      {{/* Hugo uses Go's date formatting is set by example. Here are two formats */}}
+      <time class="f6 mv4 dib tracked" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
+        {{- .Date.Format "January 2, 2006" -}}
+      </time>
+    </header>
+
+    <main class="nested-copy-line-height lh-copy serif f4 nested-links nested-img mid-gray pr4-l w-two-thirds-l">
+        {{- .Content -}}
+      {{- partial "tags.html" . -}}
+      <div class="mt6">
+        {{ template "_internal/disqus.html" . }}
       </div>
-    </article>
-    <aside class="ph3 mt2 mt6-ns">
-      {{ partial "menu-contextual.html" . }}
+    </main>
+
+    <aside class="w-30-l mt6-l">
+      {{- partial "menu-contextual.html" . -}}
     </aside>
-  </div>
+
+  </article>
 {{ end }}

layouts/_default/taxonomy.html

@@ -4,10 +4,9 @@
       <p>Below you will find pages that utilize the taxonomy term “{{ .Title }}”</p>
     </div>
   </article>
-  <div class="mw8 center">
-    {{ $section := .Data.Pages }}
+  <div class="mw8 center">    
     <section class="flex-ns flex-wrap justify-around mt5">
-      {{ range  $section }}
+      {{ range  .Pages }}
         <div class="relative w-100  mb4 bg-white">
           {{ partial "summary.html" . }}
         </div>

layouts/page/single.html

@@ -0,0 +1,18 @@
+{{ define "header" }}{{ partial "page-header.html" . }}{{ end }}
+{{ define "main" }}
+  <div class="flex-l mt2 mw8 center">
+    <article class="center cf pv5 ph3 ph4-ns mw7">
+      <header>
+        <p class="f6 b helvetica tracked">
+          {{ humanize .Section | upper  }}
+        </p>
+        <h1 class="f1">
+          {{ .Title }}
+        </h1>
+      </header>
+      <div class="nested-copy-line-height lh-copy f4 nested-links nested-img mid-gray">
+        {{ .Content }}
+      </div>
+    </article>
+  </div>
+{{ end }}

layouts/partials/menu-contextual.html

@@ -1,24 +1,33 @@
-{{/* Get the current page's URL so we can compare it to the list below */}}
-{{ $currentPageUrl := .URL }}
-{{/* Get a list of this section's other pages. "RegularPages" excludes the list page    */}}
-{{ $currentSection := (where .Site.RegularPages "Section" .Section) }}
-{{/* Get the number of entries of  $currentSection and subtract 1 */}}
-{{ $i := sub ($currentSection | len) 1 }}
-{{/* So we can only show this menu if there are one or more other entries  */}}
-{{ if ge $i 1 }}
-  <div class="bg-light-gray pa3">
-    <ul>
-      <li class="list b mb3">{{/* Return the section name, make it readable (humanize) and if there are 2 or more entries, make the section name plural (pluralize).  */}}
-        {{ $i }} More {{ if ge $i 2 }}{{ .Section | humanize | pluralize }}{{ else }}{{ .Section | humanize }}{{end}}
-      </li>
-      {{ range $currentSection }}
-        <li class="list f5 w-100 hover-bg-white nl1">
-          {{/* If the URL returned is the same as the current URL dim it so we know that that's the page we're on. NOTE: Should probably use a more accessible way of displaying this. */}}
-          <a href="{{ .URL }}" class="link ph2 pv2 db black{{ if eq $currentPageUrl .URL }} o-50{{end}}">
-            {{ .Title }}
+{{/*
+  Use Hugo's native Table of contents feature. You must set `toc: true` in your parameters for this to show.
+  https://gohugo.io/content-management/toc/
+*/}}
+
+{{- if .Params.toc -}}
+  <div class="bg-light-gray pa3 nested-list-reset nested-copy-line-height nested-links">
+    <p class="f5 b mb3">What's in this {{ humanize .Type }}</p>
+      {{ .TableOfContents }}
+  </div>
+{{- end -}}
+
+{{/*
+  Use Hugo's native related content feature to pull in content that may have similar parameters, like tags. etc.
+  https://gohugo.io/content-management/related/
+*/}}
+
+{{ $related := .Site.RegularPages.Related . | first 15 }}
+
+{{ with $related }}
+  <div class="bg-light-gray pa3 nested-list-reset nested-copy-line-height nested-links">
+    <p class="f5 b mb3">Related</p>
+    <ul class="pa0 list">
+	   {{ range . }}
+	     <li  class="mb2">
+          <a href="{{ .RelPermalink }}">
+            {{- .Title -}}
           </a>
         </li>
-      {{ end }}
+	    {{ end }}
     </ul>
-  </div>
+</div>
 {{ end }}

layouts/partials/site-scripts.html

@@ -1 +1,6 @@
-<script src="{{ "dist/app.bundle.js" | absURL }}" async></script>
+{{ $css_path := $.Param "dev.js_path" | default "themes/gohugo-theme-ananke/static/dist/js" }}
+{{ with $css_path }}
+  {{ range readDir . }}
+    <link href='/dist/js/{{ .Name }}' rel='stylesheet' type="text/css" data-turbolinks-track="reload" />
+  {{ end }}
+{{ end }}

layouts/partials/tags.html

@@ -1,25 +1,9 @@
-{{ $currentPageUrl := .URL }}
-{{ if .Params.tags }}
-  {{ $name := index .Params.tags 0 }}
-  {{ $name := $name | urlize }}
-  {{ $tags := index .Site.Taxonomies.tags $name }}
-  {{ $i := $tags | len }}
-  {{ if ge $i 2 }}
-    <div class="mt5 f6 gray nested-lh-copy bg-light-gray ph3 pv2 measure-wide-l">
-      <ul class="list dib ml0 pl0">
-        <li class="black dib mb2 mr2">
-          Related:
-        </li>
-        {{ range $tags.Pages }}
-          {{ if ne .URL $currentPageUrl }}
-            <li class="mb2 mr3">
-              <a href="{{ .URL }}" class="link mid-gray dim">
-                 {{ .LinkTitle }}
-              </a>
-            </li>
-          {{ end }}
-        {{end}}
-      </ul>
-    </div>
+<ul class="pa0">
+  {{ range .Params.tags }}
+   <li class="list">
+     <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}" class="link f5 grow no-underline br-pill ba ph3 pv2 mb2 dib black sans-serif">
+       {{- . -}}
+     </a>
+   </li>
   {{ end }}
-{{end}}
+</ul>

layouts/section/post.html → layouts/post/list.html

@@ -1,12 +1,17 @@
 {{ define "main" }}
+{{/*
+  This template is the same as the default and is here to demonstrate that if you have a content directory called "post" you can create a layouts directory, just for that section.
+   */}}
   <article class="pa3 pa4-ns nested-copy-line-height nested-img">
   <main class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy mid-gray">
     {{ .Content }}
   </main>
-    {{ $section := .Paginate (where .Data.Pages "Section" .Section) }}
     <section class="flex-ns flex-wrap justify-around mt5">
-      {{ range  $section.Pages }}
+      {{ range .Paginator.Pages }}
         <div class="relative w-100 w-30-l mb4 bg-white">
+          {{/*
+          Note we can use `.Render` here for items just in this section, instead of a partial to pull in items for the list page. https://gohugo.io/functions/render/
+          */}}
           {{ .Render "summary" }}
         </div>
       {{ end }}

src/css/_hugo-internal-templates.css

@@ -25,3 +25,7 @@
 .pagination li.active a:visited {
   background-color: #ddd;
 }
+
+#TableOfContents ul li {
+  margin-bottom: 1em;
+}

src/css/_styles.css

@@ -1 +1,5 @@
 /* Put your custom styles here and run `npm start` from the "src" directory on */
+
+#TableOfContents ul li {
+  margin-bottom: 1em;
+}

src/css/_tachyons.css

@@ -1,4 +1,4 @@
-/*! TACHYONS v4.7.0 | http://tachyons.io */
+/*! TACHYONS v4.9.1 | http://tachyons.io */
 
 /*
  *
@@ -87,8 +87,8 @@
 @import 'tachyons/src/_media-queries';
 
 /* Debugging */
-/*@import 'tachyons/src/_debug-children';
-@import 'tachyons/src/_debug-grid';*/
+/* @import 'tachyons/src/_debug-children';
+@import 'tachyons/src/_debug-grid'; */
 
 /* Uncomment out the line below to help debug layout issues */
 /* @import 'tachyons/src/_debug'; */

src/package.json

@@ -25,7 +25,7 @@
     "postcss-import": "^9.1.0",
     "postcss-loader": "^1.3.3",
     "style-loader": "^0.16.1",
-    "tachyons": "^4.7.0",
+    "tachyons": "^4.9.1",
     "webpack": "^2.3.3"
   },
   "dependencies": {}