feat: added rehype-autolink-heading plugin

astro.config.mjs

@@ -1,20 +0,0 @@
-import { defineConfig } from "astro/config";
-import solid from "@astrojs/solid-js";
-import compress from "astro-compress";
-
-// https://astro.build/config
-export default defineConfig({
-	site: "https://yarkov.tech",
-	integrations: [solid(), compress({ img: false, html: false })],
-	markdown: {
-		syntaxHighlight: "prism",
-	},
-	vite: {
-		ssr: {
-			external: ["svgo"],
-		},
-	},
-	experimental: {
-		integrations: true,
-	},
-});

astro.config.ts

@@ -0,0 +1,70 @@
+import { defineConfig } from "astro/config";
+import solid from "@astrojs/solid-js";
+import compress from "astro-compress";
+import { h } from "hastscript";
+import { toString } from "hast-util-to-string";
+import { escape } from "html-escaper";
+
+const createAnchorLabel = (heading: string) => {
+	const node = h("span.anchor-label", escape(heading));
+	node.properties["is:raw"] = true;
+	return node;
+};
+
+// https://astro.build/config
+export default defineConfig({
+	site: "https://yarkov.tech",
+	integrations: [solid(), compress({ img: false, html: false })],
+	markdown: {
+		syntaxHighlight: "prism",
+		remarkPlugins: ["remark-gfm", "remark-smartypants"],
+		rehypePlugins: [
+			"rehype-slug",
+			[
+				"rehype-autolink-headings",
+				{
+					properties: {
+						class: "anchor-link",
+					},
+					behavior: "after",
+					group: ({ tagName }) =>
+						h(`div.heading-wrapper.level-${tagName}`, {
+							tabIndex: -1,
+						}),
+					content: (heading) => [
+						h(
+							`span.anchor-icon`,
+							undefined,
+							h(
+								"svg",
+								{
+									width: 18,
+									height: 18,
+									version: 1.1,
+									viewBox: "0 0 16 16",
+									xlmns: "http://www.w3.org/2000/svg",
+									ariaHidden: "true",
+									"data-filter": "none",
+								},
+								h("path", {
+									fillRule: "evenodd",
+									fill: "currentcolor",
+									d: "M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z",
+								})
+							)
+						),
+						createAnchorLabel(toString(heading)),
+					],
+				},
+			],
+		],
+	},
+	vite: {
+		ssr: {
+			external: ["svgo"],
+		},
+	},
+	experimental: {
+		integrations: true,
+	},
+});

package.json

@@ -22,12 +22,19 @@
 		"@typescript-eslint/eslint-plugin": "^5.31.0",
 		"@typescript-eslint/parser": "^5.31.0",
 		"astro": "^1.0.0-beta.73",
-		"astro-icon": "^0.7.3",
 		"astro-compress": "^0.0.15",
+		"astro-icon": "^0.7.3",
 		"eslint": "^8.20.0",
 		"eslint-plugin-solid": "^0.7.1",
+		"hast-util-to-string": "^2.0.0",
+		"hastscript": "^7.0.2",
+		"html-escaper": "^3.0.3",
 		"prettier": "^2.7.1",
 		"prettier-plugin-astro": "^0.2.0",
+		"rehype-autolink-headings": "^6.1.1",
+		"rehype-slug": "^5.0.1",
+		"remark-gfm": "^3.0.1",
+		"remark-smartypants": "^2.0.0",
 		"sass": "^1.54.0",
 		"solid-js": "^1.4.8"
 	}

src/components/ArticleContent/ArticleContent.scss

@@ -24,35 +24,6 @@
 		quotes: "«" "»";
 	}
 
-	& h1,
-	& h2,
-	& h3,
-	& h4 {
-		margin-top: 3rem;
-		margin-bottom: 1rem;
-		padding-bottom: 0.35rem;
-	}
-
-	& h1:not(:first-child),
-	& h2:not(:first-child),
-	& h3:not(:first-child),
-	& h4:not(:first-child) {
-		margin-top: 3rem;
-	}
-
-	& h2 {
-		font-size: var(--font-size-2xl);
-		border-bottom: 1px solid var(--border-color);
-	}
-
-	& h3 {
-		font-size: var(--font-size-xl);
-	}
-
-	& h4 {
-		font-size: var(--font-size-lg);
-	}
-
 	& a {
 		color: var(--font-color);
 		text-decoration: underline;
@@ -153,4 +124,81 @@
 		border-left: 0.25rem solid var(--border-color);
 		padding-left: 1rem;
 	}
+
+	& .heading-wrapper {
+		border-bottom: 1px solid var(--border-color);
+		margin: 3rem 0 1rem 0;
+		padding-bottom: 0.35rem;
+
+		& h2 {
+			font-size: var(--font-size-2xl);
+		}
+
+		& h3 {
+			font-size: var(--font-size-xl);
+		}
+
+		& h4 {
+			font-size: var(--font-size-lg);
+		}
+
+		& h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			margin: 0;
+		}
+	}
+
+	& .heading-wrapper {
+		display: flex;
+		align-items: center;
+		flex-direction: row-reverse;
+		justify-content: flex-end;
+		margin-inline-start: 1px;
+		& .anchor-link {
+			position: relative;
+			display: inline-flex;
+			text-decoration: none;
+			justify-content: center;
+			align-items: center;
+			opacity: 0;
+			& .anchor-icon {
+				position: absolute;
+				left: -25px;
+			}
+			& svg {
+				vertical-align: middle;
+			}
+		}
+		& .anchor-label {
+			position: absolute;
+			width: 0;
+			height: 0;
+			padding: 0;
+			overflow: hidden;
+			white-space: nowrap;
+		}
+		&:hover {
+			& .anchor-link {
+				opacity: 1;
+			}
+		}
+	}
+}
+
+@media screen and (max-width: 800px) {
+	.article-content {
+		& .heading-wrapper {
+			flex-direction: row;
+			justify-content: flex-start;
+			& .anchor-link {
+				& .anchor-icon {
+					left: 5px;
+				}
+			}
+		}
+	}
 }

src/pages/blog/[...slug].astro

@@ -1,13 +1,13 @@
 ---
-import type { MarkdownInstance } from 'astro';
+import type { MarkdownInstance } from "astro";
 
-import ArticleLayout from '@layouts/article.astro';
+import ArticleLayout from "@layouts/article.astro";
 
 // TODO: generate pages based on user language
 export async function getStaticPaths() {
-	const data = await Astro.glob<ArticleType>('../../../content/articles/**/*.md');
+	const data = await Astro.glob<ArticleType>("../../../content/articles/**/*.md");
 	return data.map((article) => {
-		const published_at = new Date(article.frontmatter.published_at).toLocaleDateString('en-CA');
+		const published_at = new Date(article.frontmatter.published_at).toLocaleDateString("en-CA");
 		const slug = `${published_at}/${article.frontmatter.slug}`;
 		const props = { Content: article.Content, frontmatter: article.frontmatter };
 		return { params: { slug }, props };

src/styles/global.scss

@@ -29,6 +29,7 @@ html {
 	font-kerning: normal;
 	font-family: var(--font-family-base);
 	background: var(--background-body-color);
+	scroll-padding-top: 7rem;
 }
 
 body {