add heading anchors

src/lib/Heading.svelte

@@ -0,0 +1,52 @@
+    <script>
+    export let level;
+    export let id = '';
+
+    const tag = `h${level}`;
+</script>
+
+<style>
+    a {
+        /* Works better to set the size here for line-height reasons */
+        font-size: 0.9em;
+        color: hsl(0, 0%, 50%);
+    }
+
+    a:hover {
+        border-bottom: 0.05em solid currentcolor;
+    }
+
+    svg {
+        width: 1em;
+    }
+
+    .before {
+        display: none;
+        margin-right: 0.5rem;
+        margin-left: calc(-1em - 0.5rem);
+    }
+    
+    @media(min-width: 58rem) {
+        .before {
+            display: inline;
+        }
+        .after {
+            display: none;
+        }
+    }
+</style>
+
+<svelte:element this={tag} {id} class="h">
+    <a href="#{id}" class="before">
+        <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.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
+        </svg></a><span> <!-- Looks ugly but necessary to get rid of spurious whitespace -->
+            <slot></slot>
+        </span>
+    <!-- Icon from https://heroicons.com/ -->
+    <a href="#{id}" class="after">
+        <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.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
+        </svg>
+    </a>
+</svelte:element>

src/lib/Post.svelte

@@ -1,7 +1,7 @@
 <script context="module">
     import { onMount } from 'svelte';
     import { formatDate } from './datefmt.js';
-    import { makeSlug } from '$lib/slug.js';
+    import { makeSlug } from '$lib/utils.js';
     
     import Link from './Link.svelte';
     export { Link as a };