feat: TOC auto-shortens when the article gets too long

feat: TOC auto-shortens when the article gets too long feat: Enabled option for floating + static TOC chore: better styling for TOC
chollinger93 · Jun 20, 2023 · 318f4b4 · 318f4b4
1 parent 3e17a48
commit 318f4b4
Show file tree

Hide file tree

Showing 14 changed files with 362 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -35,13 +35,29 @@ And some **bugfixes**:
 
 ![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")
+![image-20230620151830930](images/screenshot2.png)
 
-### Static vs Floating TOC
+### Table Of Contents Options
+
+#### Floating
 
 ![image-20230620114414684](images/floating_toc.png)
 
-![image-20230620114454738](images/static_toc.png)
+#### Static
+
+![image-20230620151300448](images/static_toc.png)
+
+#### Both
+
+![image-20230620151006141](images/both_toc.png)
+
+#### Truncated
+
+![image-20230620151110164](images/truncated_toc.png)
+
+#### Mobile
+
+![image-20230620151645609](images/mobile_toc.png)
 
 ### Run the example
 ```

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -23,9 +23,11 @@ copyright = "© Copyright notice"
 	mode = "auto"
 
 	# Enable a table of contents:
-	# Either "static"/true, "floating", or "none"
+	# Either "static"/true, "floating", "both", or "none" (default: static)
 	# The floating TOC dissapears on mobile and adds 200px vertical space
-	toc = "floating"
+	toc = "both"
+	# Whether to truncate everything but H1/H2 headings if the last element in a TOC isn't visible. Enabled by default
+	enableTocTrunate = true
 
 	# Max tags
 	maxTags = 7

diff --git a/exampleSite/content/posts/post-8.md b/exampleSite/content/posts/post-8.md
@@ -111,6 +111,9 @@ def make[F[_]: Sync: Parallel: ThrowableMonadError](cfg: ServiceConfig, client:
 </html>
 {{< /highlight >}}
 
+### Inline code
+`Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum `
+
 ## List Types
 
 ### Ordered List

diff --git a/exampleSite/content/posts/post-9.md b/exampleSite/content/posts/post-9.md
@@ -0,0 +1,211 @@
+---
+title: "Floating Navigation bar"
+date: "2023-06-19"
+description: "The Floating Navigation bar can get truncated to show h2 headings if the table of content gets to long"
+tags: [markdown, css, html, themes]
+categories: [themes, syntax]
+---
+
+## Intro 
+
+Try this example with `toc = "floating"` and `toc = "static"`!
+
+## Header
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+## Header 2
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+### Subitem
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum tempus odio eu consectetur.
+
+## Header 1
+### Subitem
+## Header 2
+### Subitem
+## Header 3
+### Subitem
+## Header 4
+### Subitem
+## Header 5
+### Subitem
+## Header 6
+### Subitem
+## Header 7
+### Subitem
+## Header 8
+### Subitem
+## Header 9
+### Subitem
+## Header 10
+### Subitem
+## Header 11
+### Subitem
+## Header 12
+### Subitem
+## Header 13
+### Subitem
+## Header 14
+### Subitem
+## Header 15
+### Subitem
+## Header 16
+### Subitem
+## Header 17
+### Subitem
+## Header 18
+### Subitem
+## Header 19
+### Subitem
+## Header 20
+### Subitem
+## Header 21
+### Subitem
+## Header 22
+### Subitem
+## Header 23
+### Subitem
+## Header 24
+### Subitem
+## Header 25
+### Subitem
+## Header 26
+### Subitem
+## Header 27
+### Subitem
+## Header 28
+### Subitem
+## Header 29
+### Subitem
+## Header 30
+### Subitem
+## Header 31
+### Subitem
+## Header 32
+### Subitem
+## Header 33
+### Subitem
+## Header 34
+### Subitem
+## Header 35
+### Subitem
+## Header 36
+### Subitem
+## Header 37
+### Subitem
+## Header 38
+### Subitem
+## Header 39
+### Subitem
+## Header 40
+### Subitem
+## Header 41
+### Subitem
+## Header 42
+### Subitem
+## Header 43
+### Subitem
+## Header 44
+### Subitem
+## Header 45
+### Subitem
+## Header 46
+### Subitem
+## Header 47
+### Subitem
+## Header 48
+### Subitem
+## Header 49
+### Subitem
+## Header 50
diff --git a/images/both_toc.png b/images/both_toc.png
diff --git a/images/mobile_toc.png b/images/mobile_toc.png
diff --git a/images/screenshot2.png b/images/screenshot2.png
diff --git a/images/static_toc.png b/images/static_toc.png
diff --git a/images/truncated_toc.png b/images/truncated_toc.png
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -5,7 +5,7 @@
 <body>
 
 
-	{{ if and (gt .WordCount 400 ) (eq .Site.Params.toc "floating") }}
+	{{ if and (gt .WordCount 400 ) (or (eq .Site.Params.toc "floating") (eq .Site.Params.toc "both") )}}
 	<div class="container-wide wrapper">
 		{{ partial "head.html" . }}
 
@@ -20,7 +20,7 @@
 	{{ end }}
 
 	{{ partial "footer.html" . }}
-	{{ if and (gt .WordCount 400 ) (eq .Site.Params.toc "floating") }}
+	{{ if and (gt .WordCount 400 ) (or (eq .Site.Params.toc "floating") (eq .Site.Params.toc "both") )}}
 	{{ partial "toc_script.html" . }}
 	{{ end }}
 </body>

diff --git a/layouts/partials/content_floating_toc.html b/layouts/partials/content_floating_toc.html
@@ -4,12 +4,21 @@
         {{ partial "post_header.html" . }}
 
         <!-- The TOC will be static on mobile decides -->
-        <aside class="show-on-mobile toc">
+        {{ if and (gt .WordCount 400 ) (eq .Site.Params.toc "both") }}
+        <aside class="toc" id="static-toc">
             <header>
                 <h3>Contents</h3>
             </header>
             {{.TableOfContents}}
         </aside>
+        {{ else }}
+        <aside class="show-on-mobile toc" id="static-toc">
+            <header>
+                <h3>Contents</h3>
+            </header>
+            {{.TableOfContents}}
+        </aside>
+        {{ end }}
 
         {{ .Content }}
 

diff --git a/layouts/partials/content_static.html b/layouts/partials/content_static.html
@@ -3,7 +3,7 @@
 
     <!-- Inline TOC -->
     {{ if and (gt .WordCount 400 ) (or (eq .Site.Params.toc "static") (eq .Site.Params.toc "true") )}}
-    <aside class="toc">
+    <aside class="toc" id="static-toc">
         <header>
             <h3>Contents</h3>
         </header>