🎨 Move heading anchors to render hook

assets/css/main.css

@@ -9,20 +9,22 @@
 
 /* Heading anchors */
 .prose .heading-anchor {
-  @apply absolute top-0 w-6 no-underline opacity-0 -left-6;
+  @apply absolute top-0 no-underline opacity-0;
+  width: 1.1em;
+  left: -1.1em;
 }
 .prose .heading-anchor:hover {
-  @apply underline bg-transparent opacity-100 text-primary-600;
+  @apply underline bg-transparent text-primary-600;
 }
-.prose h2:focus > .heading-anchor,
+.prose .heading-anchor:hover,
+.prose .heading-anchor:focus,
 .prose h2:hover > .heading-anchor,
-.prose h3:focus > .heading-anchor,
 .prose h3:hover > .heading-anchor,
-.prose h4:focus > .heading-anchor,
 .prose h4:hover > .heading-anchor {
   @apply opacity-100;
 }
 
+/* Prose escape hatch */
 .no-prose > p {
   @apply mt-0 last:mb-0;
 }

layouts/_default/_markup/render-heading.html

@@ -0,0 +1 @@
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} <a class="heading-anchor" href="#{{ .Anchor | safeURL }}" aria-label="Anchor">#</a></h{{ .Level }}>

layouts/_default/single.html

@@ -7,7 +7,7 @@
       </div>
     </header>
     <section class="prose dark:prose-light">
-      {{ partial "heading-anchor.html" .Content | emojify }}
+      {{ .Content | emojify }}
     </section>
     <footer>
       {{ partialCached "author.html" . }}

layouts/partials/head.html

@@ -22,7 +22,6 @@
   {{ with .Site.Params.keywords -}}
     <meta name="keywords" content="{{ . }}" />
   {{- end }}
-  <base href="{{ .Site.BaseURL }}" />
   <link rel="canonical" href="{{ .Permalink }}" />
   {{/* Styles */}}
   <link type="text/css" rel="stylesheet" href="{{ "css/main.css" | absURL }}" />

layouts/partials/heading-anchor.html

@@ -1 +0,0 @@
-{{ . | replaceRE "(<h[2-4] id=\"([^\"]+)\".+)(</h[2-9]+>)" `${1}&nbsp;<a class="heading-anchor" href="#${2}" aria-label="Anchor">#</a> ${3}` | safeHTML }}