Table of contents extension (#76)

* Add a table of contents extension that shows up to the right side, sticky and highlights the first heading showing up in the page

Author: emad-elsaid

cmd/assets/styles.scss

@@ -57,7 +57,7 @@
         font-size: 0.6em;
         margin: 0 0.4em;
     }
-    &>p:first-child img:only-child {
+    &>p:first-of-type img:only-child {
         border-radius: 0.5em;
         object-fit: cover;
         object-position: 0 50%;

extensions/all/all.go

@@ -33,6 +33,7 @@ import (
 	_ "github.com/emad-elsaid/xlog/extensions/shortcode"
 	_ "github.com/emad-elsaid/xlog/extensions/sitemap"
 	_ "github.com/emad-elsaid/xlog/extensions/star"
+	_ "github.com/emad-elsaid/xlog/extensions/toc"
 	_ "github.com/emad-elsaid/xlog/extensions/todo"
 	_ "github.com/emad-elsaid/xlog/extensions/upload_file"
 )

extensions/toc/extension.go

@@ -0,0 +1,46 @@
+package toc
+
+import (
+	"embed"
+	"html/template"
+
+	"github.com/emad-elsaid/xlog"
+	gtoc "go.abhg.dev/goldmark/toc"
+)
+
+//go:embed templates
+var templates embed.FS
+
+func init() {
+	xlog.RegisterExtension(Extension{})
+}
+
+type Extension struct{}
+
+func (Extension) Name() string { return "toc" }
+func (Extension) Init() {
+	xlog.RegisterWidget(xlog.WidgetBeforeView, 0, TOC)
+	xlog.RegisterTemplate(templates, "templates")
+}
+
+func TOC(p xlog.Page) template.HTML {
+	if p == nil {
+		return ""
+	}
+
+	src, doc := p.AST()
+	if src == nil || doc == nil {
+		return ""
+	}
+
+	tree, err := gtoc.Inspect(doc, src, gtoc.MaxDepth(1))
+	if err != nil {
+		return ""
+	}
+
+	if len(tree.Items) == 0 {
+		return ""
+	}
+
+	return xlog.Partial("toc", xlog.Locals{"tree": tree})
+}

extensions/toc/templates/toc.html

@@ -0,0 +1,89 @@
+{{ define "toc-item" }}
+<li>
+  <a href="#{{ printf "%s" .ID}}">{{ printf "%s" .Title}}</a>
+  {{ with .Items }}
+  <ul class="menu-list">
+    {{ range . }}
+    {{ template "toc-item" . }}
+    {{ end }}
+  </ul>
+  {{ end }}
+</li>
+{{ end }}
+
+{{ with .tree.Items }}
+<style>
+ .table-of-contents{
+     position: sticky;
+     top: 8em;
+
+     #table-of-contents-list{
+         position: absolute;
+         top: 0;
+         left: 100%;
+         padding-left: 1em;
+         white-space: nowrap;
+
+         ul{
+             list-style: none;
+             margin: 0;
+             li a {
+                 max-width: 20em;
+                 overflow: hidden;
+                 text-overflow: ellipsis;
+             }
+         }
+     }
+ }
+</style>
+
+<script>
+ document.addEventListener("DOMContentLoaded", () => {
+     const links = document.querySelectorAll("#table-of-contents-list a");
+     const headings = document.querySelectorAll("h1");
+
+     const updateActiveLink = () => {
+         let activeLink = null;
+         let activeRect = null;
+         let lastOut = null;
+
+         headings.forEach((heading, index) => {
+             const rect = heading.getBoundingClientRect();
+             let inViewPort = rect.top >= 0 && rect.top < window.innerHeight;
+             let beforeActive = activeRect == null || rect.top < activeRect.top;
+             if (inViewPort && beforeActive) {
+                 activeLink = links[index];
+                 activeRect = rect;
+             }
+
+             let beforeViewPort = rect.top < 0;
+             if(beforeViewPort){
+                 lastOut = links[index];
+             }
+         });
+
+         links.forEach((link) => link.classList.remove("is-active"));
+         if (activeLink) {
+             activeLink.classList.add("is-active");
+         }else if(lastOut) {
+             lastOut.classList.add("is-active");
+         }
+     };
+
+     window.addEventListener("scroll", updateActiveLink);
+     updateActiveLink();
+ });
+</script>
+
+
+<aside class="menu is-hidden-touch table-of-contents">
+  <div id="table-of-contents-list">
+    <p class="menu-label">TABLE OF CONTENTS</p>
+    <ul class="menu-list">
+      {{ range . }}
+      {{ template "toc-item" . }}
+      {{ end }}
+    </ul>
+  </div>
+</aside>
+{{ end }}

go.mod

@@ -30,6 +30,7 @@ require (
 require (
 	github.com/davecgh/go-spew v1.1.1 // indirect
 	github.com/pmezard/go-difflib v1.0.0 // indirect
+	go.abhg.dev/goldmark/toc v0.10.0 // indirect
 	golang.org/x/net v0.33.0 // indirect
 	gopkg.in/yaml.v2 v2.3.0 // indirect
 )

go.sum

@@ -70,6 +70,8 @@ github.com/yuin/goldmark-meta v1.1.0 h1:pWw+JLHGZe8Rk0EGsMVssiNb/AaPMHfSRszZeUei
 github.com/yuin/goldmark-meta v1.1.0/go.mod h1:U4spWENafuA7Zyg+Lj5RqK/MF+ovMYtBvXi1lBb2VP0=
 gitlab.com/greyxor/slogor v1.5.2 h1:ushBskVMbduRt3mWLpIct9mOGAkxnytVNoSn2IHBgXM=
 gitlab.com/greyxor/slogor v1.5.2/go.mod h1:P8dDYZxKsh/omu91z+vep/m78GxWEOc2KP2f0zaCasE=
+go.abhg.dev/goldmark/toc v0.10.0 h1:de3LrIimwtGhBMKh7aEl1c6n4XWwOdukIO5wOAMYZzg=
+go.abhg.dev/goldmark/toc v0.10.0/go.mod h1:OpH0qqRP9v/eosCV28ZeqGI78jZ8rri3C7Jh8fzEo2M=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
 golang.org/x/crypto v0.3.1-0.20221117191849-2c476679df9a/go.mod h1:hebNnKkNXi2UzZN1eVRvBB7co0a+JxK6XbPiWVs/3J4=