feat: Floating TOC

feat: Floating TOC bugfix: Scrollbar was not shown for wide code blocks
chollinger93 · Jun 20, 2023 · bfc25ac · bfc25ac
1 parent 2e9eeb2
commit bfc25ac
Show file tree

Hide file tree

Showing 16 changed files with 265 additions and 127 deletions.
diff --git a/README.md b/README.md
@@ -6,13 +6,16 @@ Forked from [knadh](https://github.com/knadh/hugo-ink) with custom adjustments.
 
 
 ## Ink-Free vs Hugo-Ink
-This repository is a purely local (i.e., no CDNs), simplified version of `hugo-ink` with several **simplifications** for the sake of privacy:
+This repository is a purely local (i.e., no CDNs[^1]), simplified version of `hugo-ink` with several **simplifications** for the sake of privacy:
 - Removed all references to Google's font-CDN
 - Removed Analytics code, even if it was controlled by a variable
 
 As well as some additional **features**:
 - Added a Back button to all posts
-- Added a TOC, controlled by a variable, to all posts
+- Added a Table of Contents (TOC), controlled by a variable, to all posts
+  - The TOC can either be static at the top
+  - Or floating on the side
+
 - Added a word count, tags, and an approximate read time to the overview
 - Added random footer messages
 - Added "Edit this on GitHub" button
@@ -26,15 +29,20 @@ And some **bugfixes**:
   - Change the background color for Syntax Highlighting, otherwise we're looking at grey code on a grey background
   - Added some classes for a Back button
 
-It is also missing some features, which might be added later:
-- Dark mode
-
 ## Demo
-![Screenshot](https://raw.githubusercontent.com/chollinger93/ink-free/master/images/screenshot.png "Ink-Free theme")
 
+### Overview
+
+![Screenshot](https://raw.githubusercontent.com/chollinger93/ink-free/master/images/screenshot.png "Ink-Free theme")
 
 ![Screenshot](https://raw.githubusercontent.com/chollinger93/ink-free/master/images/screenshot2.png "Ink-Free theme")
 
+### Static vs Floating TOC
+
+![image-20230620114414684](images/floating_toc.png)
+
+![image-20230620114454738](images/static_toc.png)
+
 ### Run the example
 ```
 cd exampleSite
@@ -110,3 +118,5 @@ EOF
 
 ## License
 Licensed under the MIT license.
+
+[^1]: Note that the Feather CDN can still be enabled, but you can also host it statically.
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -22,8 +22,10 @@ copyright = "© Copyright notice"
 	# Site color - dark/light/auto
 	mode = "auto"
 
-	# Enable a table of contents
-	toc = true
+	# Enable a table of contents:
+	# Either "static"/true, "floating", or "none"
+	# The floating TOC dissapears on mobile and adds 200px vertical space
+	toc = "floating"
 
 	# Max tags
 	maxTags = 7

diff --git a/exampleSite/content/posts/post-8.md b/exampleSite/content/posts/post-8.md
@@ -1,6 +1,6 @@
 ---
 title: "Markdown Syntax Guide"
-date: "2021-09-03"
+date: "2023-06-20"
 description: "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
 tags: [markdown, css, html, themes]
 categories: [themes, syntax]
@@ -13,7 +13,6 @@ This article offers a sample of basic Markdown syntax that can be used in Hugo c
 
 The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
 
-# H1
 ## H2
 ### H3
 #### H4
@@ -30,12 +29,12 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
 
 The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
 
-#### Blockquote without attribution
+### Blockquote without attribution
 
 > Tiam, ad mint andaepu dandae nostion secatur sequo quae.
 > **Note** that you can use *Markdown syntax* within a blockquote.
 
-#### Blockquote with attribution
+### Blockquote with attribution
 
 > Don't communicate by sharing memory, share memory by communicating.</p>
 > — <cite>Rob Pike[^1]</cite>
@@ -52,18 +51,17 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
     Bob | 27
   Alice | 23
 
-#### Inline Markdown within tables
+### Inline Markdown within tables
 
 | Inline&nbsp;&nbsp;&nbsp;     | Markdown&nbsp;&nbsp;&nbsp;  | In&nbsp;&nbsp;&nbsp;                | Table      |
 | ---------- | --------- | ----------------- | ---------- |
 | *italics*  | **bold**  | ~~strikethrough~~&nbsp;&nbsp;&nbsp; | `code`     |
 
 ## Code Blocks
 
-#### Code block with backticks
+### Code block with backticks
 
-```
-html
+```html
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -75,7 +73,18 @@ html
 </body>
 </html>
 ```
-#### Code block indented with four spaces
+
+### Extra wide code block
+
+```scala 
+def make[F[_]: Sync: Parallel: ThrowableMonadError](cfg: ServiceConfig, client: Client[F]): HealthMonitorService[F] =
+  new HealthMonitorService[F] {
+
+    override def checkWorkerStatus(workerCfg: WorkerConfig): F[WorkerStatus] = ???
+  }
+```
+
+### Code block indented with four spaces
 
     <!DOCTYPE html>
     <html lang="en">
@@ -88,7 +97,7 @@ html
     </body>
     </html>
 
-#### Code block with Hugo's internal highlight shortcode
+### Code block with Hugo's internal highlight shortcode
 {{< highlight html >}}
 <!DOCTYPE html>
 <html lang="en">
@@ -104,19 +113,19 @@ html
 
 ## List Types
 
-#### Ordered List
+### Ordered List
 
 1. First item
 2. Second item
 3. Third item
 
-#### Unordered List
+### Unordered List
 
 * List item
 * Another item
 * And another item
 
-#### Nested list
+### Nested list
 
 * Item
 1. First Sub-item

diff --git a/images/floating_toc.png b/images/floating_toc.png
diff --git a/images/static_toc.png b/images/static_toc.png
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -3,94 +3,26 @@
 {{ partial "header.html" . }}
 
 <body>
-	<div class="container wrapper">
-		{{ partial "head.html" . }}
-
-		<div class="post">
-			<div class="post-header">
-				{{ if ne .Date.Year 1 }}
-				<div class="meta">
-					<div class="date">
-						<span class="day">{{ dateFormat "02" .Date }}</span>
-						<span class="rest">{{ if $.Site.Data.month }}{{ index $.Site.Data.month (printf "%d"
-							.Date.Month) }} {{ .Date.Year }}{{ else }}{{ dateFormat "Jan 2006" .Date }}{{ end }}</span>
-					</div>
-				</div>
-				{{ end }}
-				<div class="matter">
-					<h1 class="title">{{ .Title }}</h1>
-				</div>
-			</div>
-
-
-			{{ if and (gt .WordCount 400 ) (.Site.Params.toc) (ne .Params.toc false) }}
-			<aside class="toc">
-				<header>
-					<h2>Contents</h2>
-				</header>
-				{{.TableOfContents}}
-			</aside>
-			{{ end }}
-
-			<div class="markdown">
-				{{ .Content }}
-			</div>
-
-			<div class="tags">
-				{{ if ne .Type "page" }}
-				{{ if gt .Params.tags 0 }}
-				<ul class="flat">
-					{{ range .Params.tags }}
-					<li class="tag-li"><a href="{{ " /tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a></li>
-					{{ end }}
-				</ul>
-				{{ end }}
-				{{ end }}
-			</div>
-
-			{{ if isset .Site.Params "github" }}
-			<div class="back">
-				<a href="{{ .Site.Params.github }}/blob/master/content/{{ .File.Path }}" title="github"><i
-						data-feather="github"></i> Edit this on GitHub</a>
-			</div>
-			{{ end }}
 
-			<div class="back">
-				<a href="{{ $.Site.BaseURL }}"><span aria-hidden="true">← Back</span></a>
-			</div>
 
+	{{ if and (gt .WordCount 400 ) (eq .Site.Params.toc "floating") }}
+	<div class="container-wide wrapper">
+		{{ partial "head.html" . }}
 
-			<div class="back">
-				{{ if isset .Site.Params "footers" }}
-				{{ if ne .Type "page" }}
-				Next time, we'll talk about <i>"{{ range .Site.Params.footers | shuffle | first 1 }}{{ . }}"</i>{{ end
-				}}
-				{{ end }}
-				{{ end }}
-			</div>
-
-			{{- if .Site.DisqusShortname -}}
-			{{- $.Scratch.Set "isDisqus" true -}}
-
-			{{- if and (isset .Params "type") (in .Site.Params.disableDisqusTypes .Params.type) -}}
-			{{- $.Scratch.Set "isDisqus" false -}}
-			{{- end -}}
-
-			{{- if and (isset .Params "disqus") (eq .Params.disqus false) -}}
-			{{- $.Scratch.Set "isDisqus" false -}}
-			{{- else if and (isset .Params "disqus") (eq .Params.disqus true) -}}
-			{{- $.Scratch.Set "isDisqus" true -}}
-			{{- end -}}
-
-			{{- if eq ($.Scratch.Get "isDisqus") true -}}
-			{{- partial "disqus.html" . -}}
-			{{- end -}}
-			{{- end -}}
-		</div>
+		{{ partial "content_floating_toc.html" . }}
+	</div>
+	{{ else }}
+	<div class="container wrapper">
+		{{ partial "head.html" . }}
 
+		{{ partial "content_static.html" . }}
 	</div>
+	{{ end }}
 
 	{{ partial "footer.html" . }}
+	{{ if and (gt .WordCount 400 ) (eq .Site.Params.toc "floating") }}
+	{{ partial "toc_script.html" . }}
+	{{ end }}
 </body>
 
 </html>
diff --git a/layouts/index.html b/layouts/index.html
@@ -36,8 +36,9 @@ <h4 class="title small smaller">
 							<h4 class="title small smaller">
 								{{ if gt .Params.tags 0 }}
 								<ul class="tags flat">
+									{{ $tagUrl := "/tags/"}}
 									{{ range first .Site.Params.maxTags .Params.tags }}
-									<li class="tag-li"><a href="{{ " /tags/" | relLangURL }}{{ . | urlize }}">{{ .
+									<li class="tag-li"><a href="{{ $tagUrl | relLangURL }}{{ . | urlize }}">{{ .
 											}}</a></li>
 									{{ end }}
 								</ul>

diff --git a/layouts/partials/article_footer.html b/layouts/partials/article_footer.html
@@ -0,0 +1,36 @@
+<hr class="footer-separator" />
+<div class="tags">
+    {{ if ne .Type "page" }}
+    {{ if gt .Params.tags 0 }}
+    <ul class="flat">
+        {{ range .Params.tags }}
+        {{ $tagUrl := "/tags/"}}
+        <li class="tag-li"><a href="{{ $tagUrl | relLangURL }}{{ . | urlize }}">{{ . }}</a>
+        </li>
+        {{ end }}
+    </ul>
+    {{ end }}
+    {{ end }}
+</div>
+
+{{ if isset .Site.Params "github" }}
+<div class="back">
+    <a href="{{ .Site.Params.github }}/blob/master/content/{{ .File.Path }}" title="github"><i
+            data-feather="github"></i> Edit this on GitHub</a>
+</div>
+{{ end }}
+
+<div class="back">
+    <a href="{{ $.Site.BaseURL }}"><span aria-hidden="true">← Back</span></a>
+</div>
+
+
+<div class="back">
+    {{ if isset .Site.Params "footers" }}
+    {{ if ne .Type "page" }}
+    Next time, we'll talk about <i>"{{ range .Site.Params.footers | shuffle | first 1 }}{{ .
+        }}"</i>{{ end
+    }}
+    {{ end }}
+    {{ end }}
+</div>
diff --git a/layouts/partials/content_floating_toc.html b/layouts/partials/content_floating_toc.html
@@ -0,0 +1,23 @@
+<!-- Inspired by https://iamsorush.com/posts/table-of-content-blog/ -->
+<div class="article-nav" id="article-nav-id">
+    <div class="post">
+        {{ partial "post_header.html" . }}
+
+        <!-- The TOC will be static on mobile decides -->
+        <aside class="show-on-mobile toc">
+            <header>
+                <h3>Contents</h3>
+            </header>
+            {{.TableOfContents}}
+        </aside>
+
+        {{ .Content }}
+
+    </div>
+    <nav class="hide-on-mobile section-nav">
+        {{ .TableOfContents }}
+    </nav>
+</div>
+<div class="post">
+    {{ partial "article_footer.html" . }}
+</div>
diff --git a/layouts/partials/content_static.html b/layouts/partials/content_static.html
@@ -0,0 +1,15 @@
+<div class="post">
+    {{ partial "post_header.html" . }}
+
+    <!-- Inline TOC -->
+    {{ if and (gt .WordCount 400 ) (or (eq .Site.Params.toc "static") (eq .Site.Params.toc "true") )}}
+    <aside class="toc">
+        <header>
+            <h3>Contents</h3>
+        </header>
+        {{.TableOfContents}}
+    </aside>
+    {{ end }}
+    {{ .Content }}
+    {{ partial "article_footer.html" . }}
+</div>
diff --git a/layouts/partials/disqus.html b/layouts/partials/disqus.html
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -1,6 +1,6 @@
 <div class="footer wrapper">
 	<nav class="nav">
-		<div>{{ default 2022 .Date.Year}} {{ with .Site.Copyright }} {{ . | safeHTML }} {{ end }}</div>
+		<div>{{ default 2023 .Date.Year}} {{ with .Site.Copyright }} {{ . | safeHTML }} {{ end }}</div>
 		<!-- <a href="https://github.com/knadh/hugo-ink">Ink</a> theme on <a href="https://gohugo.io">Hugo</a></div> -->
 	</nav>
 </div>