feature: adding title to next and prev. Adding anchor to the headers

paganotoni · Jan 28, 2024 · e88462e · e88462e
1 parent ac37862
commit e88462e
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 13 deletions.
diff --git a/go.mod b/go.mod
@@ -6,6 +6,7 @@ require (
 	github.com/fsnotify/fsnotify v1.7.0
 	github.com/yuin/goldmark v1.5.4
 	github.com/yuin/goldmark-meta v1.1.0
+	go.abhg.dev/goldmark/anchor v0.1.1
 	golang.org/x/net v0.20.0
 	golang.org/x/text v0.14.0
 )

diff --git a/go.sum b/go.sum
@@ -1,9 +1,17 @@
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/fsnotify/fsnotify v1.7.0 h1:8JEhPFa5W2WU7YfeZzPNqzMP6Lwt7L2715Ggo0nosvA=
 github.com/fsnotify/fsnotify v1.7.0/go.mod h1:40Bi/Hjc2AVfZrqy+aj+yEI+/bRxZnMJyTJwOpGvigM=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/stretchr/testify v1.8.1 h1:w7B6lhMri9wdJUVmEZPGGhZzrYTPvgJArz7wNPgYKsk=
+github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
 github.com/yuin/goldmark v1.5.4 h1:2uY/xC0roWy8IBEGLgB1ywIoEJFGmRrX21YQcvGZzjU=
 github.com/yuin/goldmark v1.5.4/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
 github.com/yuin/goldmark-meta v1.1.0 h1:pWw+JLHGZe8Rk0EGsMVssiNb/AaPMHfSRszZeUeiOUc=
 github.com/yuin/goldmark-meta v1.1.0/go.mod h1:U4spWENafuA7Zyg+Lj5RqK/MF+ovMYtBvXi1lBb2VP0=
+go.abhg.dev/goldmark/anchor v0.1.1 h1:NUH3hAzhfeymRqZKOkSoFReZlEAmfXBZlbXEzpD2Qgc=
+go.abhg.dev/goldmark/anchor v0.1.1/go.mod h1:zYKiaHXTdugwVJRZqInVdmNGQRM3ZRJ6AGBC7xP7its=
 golang.org/x/net v0.20.0 h1:aCL9BSgETF1k+blQaYUBx9hJ9LOGP3gAVemcZlf1Kpo=
 golang.org/x/net v0.20.0/go.mod h1:z8BVo6PvndSri0LbOE3hAn0apkU+1YvI6E70E9jsnvY=
 golang.org/x/sys v0.16.0 h1:xWw16ngr6ZMtmxDyKyIgsE93KNKz5HKmMa3b8ALHidU=
@@ -14,3 +22,5 @@ gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/yaml.v2 v2.3.0 h1:clyUAQHOM3G0M3f5vQj7LuJrETvjVot3Z5el9nffUtU=
 gopkg.in/yaml.v2 v2.3.0/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
+gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
diff --git a/internal/markdown.go b/internal/markdown.go
@@ -7,11 +7,30 @@ import (
 	"github.com/yuin/goldmark"
 	meta "github.com/yuin/goldmark-meta"
 	"github.com/yuin/goldmark/parser"
+	"go.abhg.dev/goldmark/anchor"
 )
 
 var (
 	// mparser is the markdown parser used to parse the content
-	mparser = goldmark.New(goldmark.WithExtensions(meta.Meta))
+	mparser = goldmark.New(
+		goldmark.WithParserOptions(
+			parser.WithAutoHeadingID(), // read note
+		),
+
+		goldmark.WithExtensions(
+			meta.Meta,
+
+			// anchor is used to generate anchor links for headings
+			// in the markdown file.
+			&anchor.Extender{
+				Texter: anchor.Text("#"),
+				Attributer: anchor.Attributes{
+					"class": "heading-anchor",
+					"alt":   "Link to this section",
+				},
+			},
+		),
+	)
 )
 
 // metadataFrom parses the content and returns the metadata

diff --git a/internal/style.css b/internal/style.css
@@ -95,6 +95,10 @@
     @apply m-8 border border-gray-200 rounded-xl max-w-[90%];
 }
 
+#htmlcontainer .heading-anchor {
+    @apply text-gray-500 no-underline;
+}
+
 #desktop-navigation ul {
     @apply flex flex-col mb-5 gap-1 border-collapse border-l-[2px];
 }

diff --git a/internal/template.html b/internal/template.html
@@ -129,25 +129,35 @@ <h1 id="welcome" class="font-bold text-4xl mb-2">
                     {{ .Content }}
                 </div>
 
-                <div class="flex flex-row justify-between text-gray-600 pt-8">
+                <div class="grid grid-cols-2 gap-2 justify-between text-gray-600 pt-8">
                     <div>
                         {{if not (eq .Prev.Link "")}}
-                            <a class="p-6 border-2 rounded-lg flex flex-row gap-3 items-center hover:shadow-md" href="/{{.Prev.Link}}">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
-                                </svg>
-
-                                Previous 
+                            <a class="p-3.5 px-5 flex border rounded-lg hover:shadow" href="/{{.Prev.Link}}">
+                                <span class="flex flex-col">
+                                    <span class="text-base">Previous </span>
+                                    <span class="text-lg flex flex-row gap-3 font-bold">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
+                                        </svg>
+                                        {{ .Prev.Title }} 
+                                    </span>
+                                </span>
                             </a>
+
                         {{end}}
                     </div>
                     <div>
                         {{if not (eq .Next.Link "")}}
-                            <a class="p-6 border-2 rounded-lg flex flex-row gap-3 items-center hover:shadow-md" href="/{{.Next.Link}}">
-                                Next
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
-                                </svg>
+                            <a class="p-3.5 px-5 border rounded-lg flex flex-row flex-row-reverse hover:shadow" href="/{{.Next.Link}}">
+                                <span class="flex flex-col text-right">
+                                    <span class="text-base">Next </span>
+                                    <span class="text-lg flex flex-row gap-2 font-bold">
+                                        {{ .Next.Title }} 
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
+                                        </svg>
+                                    </span>
+                                </span>
                             </a>
                         {{end}}
                     </div>