Add anchors to header

content/blog/2020/06/2020-06-18--no-io-yes-xyz.md

@@ -71,7 +71,7 @@ I have bought .io domains in the past. I did not have the knowledge of what was
 
 ---
 
-## Update 1<a name="update-1"></a>
+## Update 1
 
 There is also the issue of the **.io** TLD's [future](https://www.prolificlondon.co.uk/marketing-tech-news/tech-news/2019/05/future-popular-io-domains-question-over-british-empire-row):
 
@@ -81,7 +81,7 @@ Who knows what will happen to your domain registration when control is passed to
 
 ---
 
-## Update 2<a name="update-2"></a>
+## Update 2
 
 It has been pointed out by many that this post focuses too much on the **.xyz** gTLD. This was not my intention. In fact, any gTLD will do just fine, after all they are generic. A non-exhaustive list of gTLDs that could perfectly replace **.io** (assuming **.io** simply stands for "input/output"):
 

public/style.css

@@ -38,6 +38,7 @@
     --clr-link-alt: hsl(175,38%,60%);
     --clr-code: hsl(0,0%,15%);
 }
+
 * {
 	box-sizing: border-box;
 }
@@ -82,6 +83,13 @@ a:hover {
     background-color: var(--clr-link-alt);
     text-decoration: none;
 }
+a.header-anchor {
+	text-decoration: none;
+	opacity: 0.5;
+}
+h2:hover a.header-anchor {
+	opacity: 1;
+}
 h1 {
     line-height: 1.2em;
 	margin: 8px 0 12px 0;

server/util.js

@@ -10,6 +10,14 @@ const yamlFront = require('yaml-front-matter')
 const { DateTime } = require('luxon')
 const Feed = require('feed').Feed
 
+md.use(require("markdown-it-anchor"), {
+  "level": 2,
+  "permalink": true,
+  "permalinkClass": 'header-anchor',
+  "permalinkSymbol": '¶',
+  "permalinkBefore": false
+})
+
 async function* getFiles(dir) {
   const dirents = await readdir(dir, { withFileTypes: true })
   for (const dirent of dirents) {