Add basic layout for single content

layouts/_default/single.html

@@ -0,0 +1,28 @@
+{{ define "main" }}
+<div id="main">
+  <div class="container">
+    {{ if .Params.image }}
+      <img class="mb-3" src="{{ .Params.image }}" style="width: 100%; max-height: 30vh"/>
+    {{ end }}
+    <h1 class="display-5">{{ .Title }}</h1>
+    <h5 class="my-3">{{ .Params.subtitle }}</h5>
+    <p>
+      <span class="pr-4">{{ .Date.Format "2006-01-02" }}</span>
+      {{ if .Params.tags }}
+        {{ range .Params.tags }}
+          <a href="/tags/{{ urlize . }}" class="badge badge-dark mr-2" style="font-size: 1rem">
+            <i class="fa fa-tag"></i> {{ . }}
+          </a>
+        {{ end }}
+      {{ end }}
+    </p>
+    <hr />
+    <div class="content mt-3">
+      <div class="float-md-right ml-4">
+        {{ .TableOfContents }}
+      </div>
+      {{ .Content }}
+    </div>
+  </div>
+</div>
+{{ end }}

layouts/posts/list.html

@@ -6,9 +6,7 @@
     {{ range $paginator.PageGroups }}
       {{ $month := (print .Key "-01") }}
       <h3 class="mt-5">
-        {{ if ne .Key "0001-01" }}
-          <time class="posts-archive-month" datetime="{{ $month }}">{{ dateFormat "2006-01" $month }}</time>
-        {{ end }}
+        <time class="posts-archive-month" datetime="{{ $month }}">{{ dateFormat "2006-01" $month }}</time>
       </h3>
       {{ range .Pages.ByDate }}
         <div class="media list-page-item mb-3">

static/src/js/index.js

@@ -27,6 +27,14 @@ $(document).ready(function () {
     preload: 2,
     download: false
   });
+
+  // HACK: ToC has blank li if no initial header
+  $('#TableOfContents > ul > li').each(function () {
+    var ele = $(this);
+    if (ele.children('a').length === 0) {
+      ele.parent().replaceWith(ele.find('ul').eq(0));
+    }
+  });
 });
 
 $('.navbar-brand').bind('click', function (event) {

static/src/scss/style.scss

@@ -1,10 +1,11 @@
 $fa-font-path: "../fonts";
 @import "node_modules/font-awesome/scss/font-awesome";
 
-@import "node_modules/bootstrap/scss/bootstrap";
 
 @import "highlight";  // Generated by Hugo
 
+@import "node_modules/bootstrap/scss/bootstrap";
+
 pre code {
   margin: 0;
   border: 0;
@@ -136,3 +137,13 @@ footer {
     color: #e89980;
   }
 }
+
+#TableOfContents {
+  & > ul {
+    padding-left: $spacer;
+  }
+}
+
+ul ul, ol ol {
+  padding-left: $spacer * 1.5;
+}