add anchor links for headlines

CHANGELOG.md

@@ -1,2 +1,2 @@
-* BUGFIX
-  * remove mobile menu button on error page
+* FEATURE
+  * Add anchor links for headlines

layouts/_default/list.html

@@ -2,6 +2,6 @@
     {{ partial "page-header" . }}
     <article class="gdoc-markdown">
         <h1>{{ partial "title" . }}</h1>
-        {{ .Content }}
+        {{ partial "content" . }}
     </article>
 {{ end }}

layouts/_default/single.html

@@ -3,6 +3,6 @@
 
     <article class="gdoc-markdown">
         <h1>{{ partial "title" . }}</h1>
-        {{ .Content | replaceRE `<nav id="TableOfContents">\s*<ul>\s*<li>\s*<ul>` `<nav id="TableOfContents"><ul>` | replaceRE `</ul>\s*</li>\s*</ul>\s*</nav>` `</ul></nav>` | safeHTML }}
+        {{ partial "content" . }}
     </article>
 {{ end }}

layouts/partials/content.html

@@ -0,0 +1,8 @@
+{{ $showAnchor := (and (default true .Page.Params.geekdocAnchor) (default true .Site.Params.geekdocAnchor)) }}
+
+{{ $.Scratch.Set "content" (.Content | replaceRE `<nav id="TableOfContents">\s*<ul>\s*<li>\s*<ul>` `<nav id="TableOfContents"><ul>` | replaceRE `</ul>\s*</li>\s*</ul>\s*</nav>` `</ul></nav>` | safeHTML) }}
+{{ if $showAnchor }}
+    {{ $.Scratch.Set "content" ($.Scratch.Get "content" | replaceRE "(<h[2-9] id=\"([^\"]+)\".+)(</h[2-9]+>)" `${1}&nbsp;<a class="gdoc-page__anchor" href="#${2}"><svg class="icon link"><use xlink:href="#link"></use></svg></a> ${3}</h>` | safeHTML) }}
+{{ end }}
+
+{{ $.Scratch.Get "content" }}

layouts/posts/single.html

@@ -5,6 +5,6 @@
         <h5>
             <strong>{{ .Date.Format $dateFormat }}</strong>
         </h5>
-        {{ .Content }}
+        {{ partial "content" . }}
     </article>
 {{ end }}

src/icons/link.svg

@@ -0,0 +1,4 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>link</title>
+<path d="M17.016 6.984q2.063 0 3.516 1.477t1.453 3.539-1.453 3.539-3.516 1.477h-4.031v-1.922h4.031q1.266 0 2.18-0.914t0.914-2.18-0.914-2.18-2.18-0.914h-4.031v-1.922h4.031zM8.016 12.984v-1.969h7.969v1.969h-7.969zM3.891 12q0 1.266 0.914 2.18t2.18 0.914h4.031v1.922h-4.031q-2.063 0-3.516-1.477t-1.453-3.539 1.453-3.539 3.516-1.477h4.031v1.922h-4.031q-1.266 0-2.18 0.914t-0.914 2.18z"></path></svg>

src/sass/_base.scss

@@ -30,8 +30,12 @@ h1,
 h2,
 h3,
 h4,
-h5 {
+h5,
+h6 {
   font-weight: $body-font-weight;
+  display: flex;
+  align-items: center;
+  text-align: center;
 }
 
 a {
@@ -217,6 +221,10 @@ img {
       content: "\1f82a";
     }
   }
+
+  &__anchor .icon {
+    color: $gray-400;
+  }
 }
 
 .gdoc-post {

src/sass/_shortcodes.scss

@@ -70,6 +70,10 @@
     min-width: $body-min-width * 0.66;
     padding: 0 $padding-16;
   }
+
+  .gdoc-page__anchor {
+    display: none;
+  }
 }
 
 // {{< button >}}