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

@@ -12,8 +12,9 @@ Features
 - Accessible
 - 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:
 
@@ -21,6 +22,7 @@ Also includes examples of Hugo Features or Functions:
 - 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">
+  <article class="pa3 pa4-ns nested-copy-line-height nested-img">
-    <div class="measure-wide-l center f4 lh-copy nested-copy-line-height nested-links nested-img mid-gray">
+  <main class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy mid-gray">
-      {{ .Content }}
+    {{- .Content -}}
-    </div>
+  </main>
-  </article>
-  <div class="mw8 center">
-    {{ $paginator := .Paginate (where .Data.Pages "Section" .Section) }}
     <section class="flex-ns flex-wrap justify-around mt5">
-      {{ range  $paginator.Pages }}
+      {{ range .Paginator.Pages }}
-        <div class="relative w-100  mb4 bg-white">
+        <div class="relative w-100 w-30-l mb4 bg-white">
-          {{ partial "summary.html" . }}
+          {{- partial "summary.html" . -}}
         </div>
       {{ end }}
     </section>
-  {{ template "_internal/pagination.html" . }}
+    {{- template "_internal/pagination.html" . -}}
-  </div>
+  </article>
 {{ end }}

layouts/_default/single.html

@@ -1,21 +1,39 @@
-{{ define "header" }}{{ partial "page-header.html" . }}{{ end }}
+{{ define "header" }}
-{{ define "main" }}
+   {{/* We can override any block in the baseof file be defining it in the template */}}
-  <div class="flex-l mt2 mw8 center">
+  {{ partial "page-header.html" . }}
-    <article class="center cf pv5 ph3 ph4-ns mw7">
+{{ end }}
-      <header>
+
-        <p class="f6 b helvetica tracked">
+{{ define "main" }}
-          {{ humanize .Section | upper  }}
+  <article class="flex-l flex-wrap justify-between mw8 center">
-        </p>
+
-        <h1 class="f1">
+    <header class="mt4 w-100">
-          {{ .Title }}
+      <p class="f6 b helvetica tracked">
-        </h1>
+          {{/*
-      </header>
+          CurrentSection allows us to use the section title instead of inferring from the folder.
-      <div class="nested-copy-line-height lh-copy f4 nested-links nested-img mid-gray">
+          https://gohugo.io/variables/page/#section-variables-and-methods
-        {{ .Content }}
+          */}}
-      </div>
+        {{with .CurrentSection.Title }}{{. | upper }}{{end}}
-    </article>
+      </p>
-    <aside class="ph3 mt2 mt6-ns">
+      <h1 class="f1 athelas mb1">
-      {{ partial "menu-contextual.html" . }}
+        {{- .Title -}}
-    </aside>
+      </h1>
-  </div>
+      {{/* 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>
+    </main>
+
+    <aside class="w-30-l mt6-l">
+      {{- partial "menu-contextual.html" . -}}
+    </aside>
+
+  </article>
 {{ end }}

layouts/_default/taxonomy.html

@@ -5,9 +5,8 @@
     </div>
   </article>
   <div class="mw8 center">    
-    {{ $section := .Data.Pages }}
     <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 }}
+  Use Hugo's native Table of contents feature. You must set `toc: true` in your parameters for this to show.
-{{/* Get a list of this section's other pages. "RegularPages" excludes the list page    */}}
+  https://gohugo.io/content-management/toc/
-{{ $currentSection := (where .Site.RegularPages "Section" .Section) }}
+*/}}
-{{/* Get the number of entries of  $currentSection and subtract 1 */}}
+
-{{ $i := sub ($currentSection | len) 1 }}
+{{- if .Params.toc -}}
-{{/* So we can only show this menu if there are one or more other entries  */}}
+  <div class="bg-light-gray pa3 nested-list-reset nested-copy-line-height nested-links">
-{{ if ge $i 1 }}
+    <p class="f5 b mb3">What's in this {{ humanize .Type }}</p>
-  <div class="bg-light-gray pa3">
+      {{ .TableOfContents }}
-    <ul>
+  </div>
-      <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).  */}}
+{{- end -}}
-        {{ $i }} More {{ if ge $i 2 }}{{ .Section | humanize | pluralize }}{{ else }}{{ .Section | humanize }}{{end}}
+
-      </li>
+{{/*
-      {{ range $currentSection }}
+  Use Hugo's native related content feature to pull in content that may have similar parameters, like tags. etc.
-        <li class="list f5 w-100 hover-bg-white nl1">
+  https://gohugo.io/content-management/related/
-          {{/* 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 }}
+{{ $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 }}
+<ul class="pa0">
-{{ if .Params.tags }}
+  {{ range .Params.tags }}
-  {{ $name := index .Params.tags 0 }}
+   <li class="list">
-  {{ $name := $name | urlize }}
+     <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}" class="link f5 grow no-underline br-pill ba ph3 pv2 mb2 dib black sans-serif">
-  {{ $tags := index .Site.Taxonomies.tags $name }}
+       {{- . -}}
-  {{ $i := $tags | len }}
+     </a>
-  {{ if ge $i 2 }}
+   </li>
-    <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>
   {{ end }}
-{{end}}
+</ul>

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

layouts/post/single.html

@@ -1,30 +0,0 @@
-{{ 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">
-      <p class="f6 b helvetica tracked">
-        {{/* Humanize removes hyphens and capitalizes the first word */}}
-        {{ humanize .Section | upper  }}
-      </p>
-      <h1 class="f1 athelas">
-        {{ .Title }}
-      </h1>
-        {{/* TODO: Add Hugo author  */}}
-        {{/* 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>
-      <section class="nested-copy-line-height lh-copy serif f4 nested-links nested-img mid-gray">
-        {{ .Content }}
-      </section>
-      {{ partial "tags.html" . }}
-    </article>
-    <div class="ph3 mt2 mt6-ns">
-      {{ partial "menu-contextual.html" . }}
-    </div>
-  </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-children';
-@import 'tachyons/src/_debug-grid';*/
+@import 'tachyons/src/_debug-grid'; */
 
 /* Uncomment out the line below to help debug layout issues */
 /* @import 'tachyons/src/_debug'; */

src/package-lock.json

@@ -5336,9 +5336,9 @@
       }
     },
     "tachyons": {
-      "version": "4.9.0",
+      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/tachyons/-/tachyons-4.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/tachyons/-/tachyons-4.9.1.tgz",
-      "integrity": "sha512-bq40Dxl0Q9LFcFsoU4BmTlR4Y9Ta/9AClAhmKhBBdXN0isup9dXtYmFIJGYHz2EOVOf/gO/FONEH0BDa/iNYkg==",
+      "integrity": "sha512-trJFXhzDZeHRcd9Bqn6ub3e0VqGWKMsGdP7RJoT+8Ihoak41o1qCwqcFx8hsFlfFWa6a4jsb464TNXnTt+MPnw==",
       "dev": true
     },
     "tapable": {

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": {}

src/webpack.config.js

@@ -1,6 +1,6 @@
-var path = require("path");
+var path = require('path');
-var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var webpack = require("webpack");
+var webpack = require('webpack');
 module.exports = {
 	entry: {
 		app: './js/main.js'
@@ -8,20 +8,20 @@ module.exports = {
 	module: {
 		rules: [
 			{
-      test: /\.js$/,
+				test: /\.js$/,
-      exclude: /node_modules/,
+				exclude: /node_modules/,
-      use: {
+				use: {
-        loader: 'babel-loader',
+					loader: 'babel-loader',
-        options: {
+					options: {
-          presets: ['env']
+						presets: ['env']
-          // plugins: [require('babel-plugin-transform-object-rest-spread')]
+						// plugins: [require('babel-plugin-transform-object-rest-spread')]
-        }
+					}
-      }
+				}
-    },
+			},
 			{
 				test: /\.css$/,
 				use: ExtractTextPlugin.extract({
-					fallback: "style-loader",
+					fallback: 'style-loader',
 					use: 'css-loader?importLoaders=1!postcss-loader'
 				})
 			}
@@ -29,22 +29,27 @@ module.exports = {
 	},
 
 	output: {
-    path: path.join(__dirname, "./../static/dist"),
+		path: path.join(__dirname, './../static/dist'),
-		filename: '[name].bundle.js',
+		filename: 'js/[name].[chunkhash].js'
 	},
 
 	resolve: {
-		modules: [path.resolve(__dirname, 'src'), 'node_modules'],
+		modules: [path.resolve(__dirname, 'src'), 'node_modules']
 	},
 
 	plugins: [
-		new ExtractTextPlugin("main.css"),
+		new ExtractTextPlugin({
-		new webpack.ProvidePlugin({
+			filename: getPath => {
-            $: "jquery",
+				return getPath('css/[name].[contenthash].css');
-            jQuery: "jquery"
+			},
-        })
+			allChunks: true
+		})
+		// new webpack.ProvidePlugin({
+		//         $: "jquery",
+		//         jQuery: "jquery"
+		//     })
 	],
 	watchOptions: {
 		watch: true
 	}
-}
+};

theme.toml

@@ -6,9 +6,9 @@ license = "MIT"
 licenselink = "https://github.com/budparr/gohugo-theme-ananke/blob/master/LICENSE.md"
 description = "A Base theme for building full featured Hugo sites"
 homepage = "https://github.com/budparr/gohugo-theme-ananke"
-tags = ["website", "starter", "responsive"]
+tags = ["website", "starter", "responsive", "Disqus", "blog", "Tachyons"]
-features = ["posts", "shortcodes"]
+features = ["posts", "shortcodes", "related content", "comments"]
-min_version = 0.25
+min_version = 0.30.2
 
 [author]
   name = "Bud Parr"