Add Table of Contents (#72)

Initial work on table of contents.

.github/workflows/deploy.yml

@@ -4,11 +4,6 @@ on:
   push:
     branches:
     - main
-
-  workflow_run:
-    workflows: [Generate TailwindCSS]
-    types: [completed]
-
   pull_request:
 
 jobs:
@@ -24,6 +19,9 @@ jobs:
       id: pages
       uses: actions/configure-pages@v3
 
+    - name: Set up Node.js
+      uses: actions/setup-node@v3
+
     - name: Install NPM dependencies
       run: npm install
 
@@ -32,9 +30,6 @@ jobs:
       with:
         fetch-depth: 0
 
-    - name: Install NPM dependencies
-      run: npm install
-
     - name: Setup Hugo
       uses: peaceiris/actions-hugo@v2
       with:
@@ -54,6 +49,6 @@ jobs:
       if: ${{ github.ref == 'refs/heads/main' }}
       with:
         github_token: ${{ secrets.GITHUB_TOKEN }}
-        publish_dir: ./public
+        publish_dir: ./exampleSite/public
         user_name: github-actions[bot]
         user_email: github-actions[bot]@users.noreply.github.com

assets/css/_base.scss

@@ -1,3 +1,7 @@
+html {
+    scroll-behavior: smooth;
+}
+
 a {
     font-weight: 500;
     text-decoration: underline;
@@ -7,6 +11,18 @@ a {
     }
 }
 
+#TableOfContents {
+    ul {
+        li {
+            margin-top: 0.5rem;
+
+            a {
+                text-decoration: none;
+            }
+        }
+    }
+}
+
 // https://github.com/hugo-mods/icons/blob/main/assets/mod-icons/style.css
 .icon {
     display: inline;

assets/css/_layout.scss

@@ -1,5 +1,6 @@
-body {
+main {
     max-width: $maxWidth;
+    margin: 0 auto;
 }
 
 header nav {

exampleSite/content/posts/socialism.md

@@ -10,28 +10,6 @@ categories: [blog-posts]
 
 _Source: Monthly Review, May 1949_
 
-## Heading 1
-
-### Heading 2
-
-### Heading 3
-
-### Heading 4
-
-```html
-{{ define "main" }}
-<article class="space-y-4">
-    <h1 class="text-4xl -mb-2">{{ .Page.Title }}</h1>
-
-    {{ with .Page.Params.description }}
-    <h2>{{ . }}</h2>
-    {{ end }}
-
-    <div class="space-y-4">{{ .Content }}</div>
-</article>
-{{ end }}
-```
-
 Is it advisable for one who is not an expert on economic and social issues to express views on the
 subject of socialism? I believe for a number of reasons that it is.
 

layouts/partials/posts/toc.html

@@ -0,0 +1,6 @@
+<details class="text-secondary text-sm border border-dashed border-secondary p-2 cursor-zoom-in open:cursor-zoom-out max-h-[80vh] overflow-auto">
+    <summary class="text-lg font-base">
+        Table of Contents
+    </summary>
+    {{ .TableOfContents }}
+</details>

layouts/posts/single.html

@@ -41,6 +41,10 @@ <h3 class="text-sm italic text-secondary">
         </h3>
     </header>
 
+    <aside class="2xl:fixed 2xl:top-14 2xl:left-0 2xl:p-4 2xl:w-[256px]">
+        {{ partial "posts/toc" . }}
+    </aside>
+
     <article class="markdown">
         {{ .Content }}
     </article>