Use header Markdown decorations as anchor links

lib/markdown.ts

@@ -1,4 +1,5 @@
 import MarkdownIt from "markdown-it";
+import slugify from "@sindresorhus/slugify";
 import * as util from "./util";
 
 const md = new MarkdownIt({
@@ -7,6 +8,42 @@ const md = new MarkdownIt({
 	typographer: true
 });
 
+// Inserts heading anchors
+// Based on https://github.com/valeriangalliat/markdown-it-anchor
+md.core.ruler.push("anchor", (state) => {
+	const tokens = state.tokens;
+
+	tokens
+		.filter((token) => token.type === "heading_open")
+		.forEach((token) => {
+			const index = tokens.indexOf(token);
+			const title = tokens[index + 1]
+				.children
+				.filter((token) => token.type === "text" || token.type == "code_inline")
+				.reduce((acc, t) => acc + t.content, "");
+			
+			let slug = token.attrGet("id") || slugify(title);
+			if (token.attrGet("id") == null) {
+				token.attrPush(["id", slug]);
+			}
+			
+			const linkTokens = [
+				Object.assign(new state.Token("link_open", "a", 1), {
+					attrs: [
+						["class", "header-anchor"],
+						["href", "#" + slug],
+						["aria-hidden", "true"]
+					]
+				}),
+				Object.assign(new state.Token("html_block", "", 0), { content: token.markup }),
+				new state.Token("link_close", "a", -1),
+				Object.assign(new state.Token("text", "", 0), { content: " " })
+			];
+		
+			state.tokens[index + 1].children.unshift(...linkTokens);
+		});
+});
+
 export function render(text: string): string {
 	return md.render(text);
 }

site/css/main.scss

@@ -43,14 +43,6 @@ article {
 	margin-bottom: 75px;
 	color: var(--content-text-color);
 
-	h1::before { content: "#"; }
-	h2::before { content: "##"; }
-	h3::before { content: "###"; }
-	h1::before, h2::before, h3::before {
-		font-family: $monospace;
-		color: var(--accent-color);
-		margin-right: 10px;
-	}
 	@media (min-width: 768px) {
 		a::before { content: "["; }
 		a::after { content: "](" attr(href) ")"; word-wrap: break-word; }
@@ -102,6 +94,13 @@ article {
 		margin-bottom: 0;
 		font-size: 1.8rem;
 
+		&::before {
+			content: "#";
+			font-family: $monospace;
+			color: var(--accent-color);
+			user-select: none;
+		}
+
 		> a {
 			color: var(--content-text-color);
 			text-decoration: none;
@@ -132,6 +131,14 @@ article {
 
 		h1, h2, h3, h4, h5, h6 {
 			font-family: $sansSerif;
+
+			.header-anchor {
+				font-family: $monospace;
+				color: var(--accent-color);
+				user-select: none;
+
+				&::before, &::after { content: ""; }
+			}
 		}
 
 		h1 { font-size: 1.8rem; }

site/index.html.ejs

@@ -6,7 +6,11 @@ metadata.layout = "default.html.ejs"
 <div class="main">
 	<% for (const post of posts) { %>
 		<article itemscope itemtype="https://schema.org/BlogPosting">
-			<h1 class="article-title" itemprop="headline"><a href="<%= post.metadata.permalink %>" itemprop="url mainEntityOfPage"><%= post.metadata.title %></a></h1>
+			<h1 class="article-title" itemprop="headline">
+				<a href="<%= post.metadata.permalink %>" itemprop="url mainEntityOfPage">
+					<%= post.metadata.title %>
+				</a>
+			</h1>
 			<%- include("includes/article-meta.html.ejs", { metadata: post.metadata }) %>
 			<div class="article-content" itemprop="description">
 				<%- post.metadata.excerpt %>

site/layouts/article.html.ejs

@@ -4,7 +4,9 @@ metadata.layout = "default.html.ejs"
 
 <article itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
 	<meta itemprop="mainEntityOfPage" content="https://shadowfacts.net<%= metadata.permalink %>">
-	<h1 class="article-title" itemprop="name headline"><%= metadata.title %></h1>
+	<h1 class="article-title" itemprop="name headline">
+		<%= metadata.title %>
+	</h1>
 	<%- include("../includes/article-meta.html.ejs", { metadata }) %>
 	<div class="article-content" itemprop="articleBody">
 		<%- content %>

site/tutorial-series.html.ejs

@@ -10,7 +10,11 @@ metadata.layout = "default.html.ejs";
 
 	<% for (const tutorial of tutorials) { %>
 		<article>
-			<h2 class="article-title"><a href="<%= tutorial.metadata.permalink %>"><%= tutorial.metadata.title %></a></h2>
+			<h2 class="article-title">
+				<a href="<%= tutorial.metadata.permalink %>">
+					<%= tutorial.metadata.title %>
+				</a>
+			</h2>
 			<%- include("includes/article-meta.html.ejs", { metadata: tutorial.metadata }) %>
 		</article>
 	<% } %>

site/tutorials.html.ejs

@@ -5,7 +5,11 @@ metadata.layout = "default.html.ejs"
 <div class="main">
 	<% for (const series of allSeries) { %>
 		<article>
-			<h2 class="article-title"><a href="<%= series.index.metadata.permalink %>"><%= series.index.metadata.title %></a></h2>
+			<h2 class="article-title">
+				<a href="<%= series.index.metadata.permalink %>">
+					<%= series.index.metadata.title %>
+				</a>
+			</h2>
 			<p class="article-meta">
 				last updated on
 				<span>

tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
     /* Basic Options */
-    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+    "target": "ES2015",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
     "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
-    "lib": ["es6"],                           /* Specify library files to be included in the compilation. */
+    "lib": ["es6", "es7"],                    /* Specify library files to be included in the compilation. */
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
     // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */