Add heading jump links (#1054)

documentation/astro.config.mjs

@@ -4,10 +4,13 @@ import og from "./integrations/og";
 
 import tailwind from "@astrojs/tailwind";
 
+import { rehypeHeadingIds } from "@astrojs/markdown-remark";
+
 // https://astro.build/config
 export default defineConfig({
 	integrations: [tailwind(), markdown(), og()],
 	markdown: {
+		rehypePlugins: [rehypeHeadingIds],
 		shikiConfig: {
 			theme: "min-light"
 		}

documentation/integrations/markdown/rehype.ts

@@ -1,12 +1,12 @@
 import type {
 	Root,
 	RootContent,
-	Element as HastElementInstance,
+	Element as HastElementInterface,
 	ElementContent as HastElementContent,
-	Text as HastTextNode
+	Text as HastTextNodeInterface
 } from "hast";
 
-class HastElement implements HastElementInstance {
+class HastElement implements HastElementInterface {
 	public readonly type = "element";
 	public children;
 	public tagName;
@@ -27,6 +27,36 @@ class HastElement implements HastElementInstance {
 	}
 }
 
+class HastTextNode implements HastTextNodeInterface {
+	public readonly type = "text";
+	public value: string;
+	constructor(value: string) {
+		this.value = value;
+	}
+}
+
+const handleHeadings = (element: HastElement) => {
+	const headingTags = ["h1", "h2", "h3", "h4", "h5"];
+	if (!headingTags.includes(element.tagName)) return;
+	const headingId = element.properties?.id
+	if (!headingId) return
+	if (!element.properties) {
+		element.properties = {};
+	}
+	element.properties.id = headingId;
+	element.properties.class = "relative block flex group"
+	element.children.push(
+		new HastElement("a", {
+			properties: {
+				href: `#${headingId}`,
+				class: "w-4 -ml-5 pl-0.5 sm:pl-0 sm:-ml-6 absolute block group-hover:!text-main !text-zinc-200 shrink-0",
+				"aria-label": "Permalink"
+			},
+			children: [new HastTextNode("#")]
+		})
+	);
+};
+
 const handleBlockquoteElement = (element: HastElement) => {
 	if (element.tagName !== "blockquote") return;
 	const pElement = element.children.find((child) => {
@@ -80,6 +110,7 @@ const parseContent = (content: Root | RootContent) => {
 	}
 	if (content.type === "element") {
 		handleBlockquoteElement(content);
+		handleHeadings(content);
 	}
 	for (const children of content.children) {
 		parseContent(children);

documentation/src/components/Header.astro

@@ -14,7 +14,7 @@ const menuButtonVisible = !blogPage && !guidebook;
 
 <header class="fixed top-0 z-30 w-full bg-white">
 	<div
-		class="flex place-content-between place-items-center gap-x-16 border-b px-4 pb-3 pt-4 sm:px-8"
+		class="flex place-content-between place-items-center gap-x-16 border-b px-6 pb-3 pt-4 sm:px-8"
 	>
 		<div class="flex place-items-center gap-x-8 text-sm">
 			<a class="pointer-events-auto flex place-items-end" href="/">
@@ -100,7 +100,7 @@ const menuButtonVisible = !blogPage && !guidebook;
 	</div>
 	{
 		menuButtonVisible && (
-			<div class="border-b px-4 py-1.5 sm:px-8 lg:hidden">
+			<div class="border-b px-6 py-1.5 sm:px-8 lg:hidden">
 				<button class="block rounded p-1 hover:bg-indigo-50" id="menu-button">
 					<div class="h-5 w-5 fill-current">
 						<MenuIcon />

documentation/src/components/MarkdownStyle.astro

@@ -1,8 +1,9 @@
-<section id="md" class="overflow-hidden">
+<section id="md">
 	<slot />
 </section>
 
 <style lang="postcss">
+
 	:global(#md h2) {
 		@apply mb-2 mt-10 break-words text-2xl font-semibold;
 	}

documentation/src/layouts/MainLayout.astro

@@ -15,7 +15,7 @@ const { title, description } = Astro.props;
 	<Header />
 	<Menu />
 	<main
-		class="mt-24 overflow-hidden px-4 pb-20 sm:px-8 md:px-16 lg:ml-72 lg:mt-20"
+		class="mt-24 overflow-hidden px-6 pb-20 sm:px-8 md:px-16 lg:ml-72 lg:mt-20"
 	>
 		<slot />
 	</main>

documentation/src/layouts/OAuthLayout.astro

@@ -15,7 +15,7 @@ const { title, description } = Astro.props;
 	<Header />
 	<Menu />
 	<main
-		class="mt-24 overflow-hidden px-4 pb-20 sm:px-8 md:px-16 lg:ml-72 lg:mt-20"
+		class="mt-24 overflow-hidden px-6 pb-20 sm:px-8 md:px-16 lg:ml-72 lg:mt-20"
 	>
 		<slot />
 	</main>

documentation/src/layouts/ReferenceLayout.astro

@@ -15,7 +15,7 @@ const { title, description } = Astro.props;
 	<Header />
 	<Menu />
 	<main
-		class="mt-24 overflow-hidden px-4 pb-20 sm:px-8 md:px-16 lg:ml-72 lg:mt-20"
+		class="mt-24 overflow-hidden px-6 pb-20 sm:px-8 md:px-16 lg:ml-72 lg:mt-20"
 	>
 		<slot />
 	</main>

documentation/src/pages/blog/[post].astro

@@ -27,7 +27,7 @@ const { page } = Astro.props;
 
 <BaseLayout title={page.title} description={page.description}>
 	<Header />
-	<main class="mt-24 overflow-hidden px-4 pb-20 sm:px-8 md:px-16 lg:mt-20">
+	<main class="mt-24 overflow-hidden px-6 pb-20 sm:px-8 md:px-16 lg:mt-20">
 		<div class="mx-auto w-full max-w-4xl">
 			<div class="mb-8 mt-6">
 				<h1 class="text-4xl font-semibold" set:html={page.htmlTitle} />

documentation/src/pages/guidebook/[...guidebook].astro

@@ -28,7 +28,7 @@ const { page } = Astro.props;
 
 <BaseLayout title={page.title} description={page.description}>
 	<Header />
-	<main class="mt-24 overflow-hidden px-4 pb-20 sm:px-8 md:px-16 lg:mt-20">
+	<main class="mt-24 overflow-hidden px-6 pb-20 sm:px-8 md:px-16 lg:mt-20">
 		<div class="mx-auto w-full max-w-4xl">
 			<div class="mb-8 mt-6">
 				{

documentation/src/pages/guidebook/index.astro

@@ -11,7 +11,7 @@ const parentPages = allPages.filter((page) => page.frameworkId === null);
 
 <BaseLayout title="The Lucia Guidebook">
 	<Header />
-	<main class="min-h-screen px-4 pb-24 sm:px-8 md:px-16">
+	<main class="min-h-screen px-6 pb-24 sm:px-8 md:px-16">
 		<div class="mx-auto max-w-4xl">
 			<div class="w-full pb-16 pt-32">
 				<div class="mx-auto max-w-2xl text-center">

documentation/src/pages/index.astro

@@ -73,7 +73,7 @@ const contributors = await getGithubContributors();
 	</div>
 	<main class="overflow-hidden lg:ml-72">
 		<div
-			class="mx-auto w-fit max-w-4xl px-4 pb-24 pt-16 sm:px-8 md:px-16 lg:pt-32"
+			class="mx-auto w-fit max-w-4xl px-6 pb-24 pt-16 sm:px-8 md:px-16 lg:pt-32"
 		>
 			<img
 				src="/logo.svg"
@@ -109,7 +109,7 @@ const contributors = await getGithubContributors();
 				></a
 			>
 		</div>
-		<div class="mt-12 bg-sky-500 px-4 py-12 text-white sm:px-8 md:px-16">
+		<div class="mt-12 bg-sky-500 px-6 py-12 text-white sm:px-8 md:px-16">
 			<h2 class="mx-auto mb-4 text-center text-3xl font-semibold sm:text-4xl">
 				Motivation
 			</h2>
@@ -120,7 +120,7 @@ const contributors = await getGithubContributors();
 				worrying about the small details?
 			</p>
 		</div>
-		<div class="px-4 pb-8 pt-12 sm:px-8 md:px-16">
+		<div class="px-6 pb-8 pt-12 sm:px-8 md:px-16">
 			<h2 class="mx-auto mb-4 text-center text-3xl font-semibold sm:text-4xl">
 				It just works
 			</h2>
@@ -191,7 +191,7 @@ const contributors = await getGithubContributors();
 				</p>
 			</div>
 		</div>
-		<div class="px-4 pb-12 pt-12 sm:px-8 md:px-16">
+		<div class="px-6 pb-12 pt-12 sm:px-8 md:px-16">
 			<h2 class="mx-auto mb-4 text-center text-3xl font-semibold sm:text-4xl">
 				Free and open source
 			</h2>
@@ -224,7 +224,7 @@ const contributors = await getGithubContributors();
 				}
 			</div>
 		</div>
-		<div class="px-4 pb-12 pt-16 sm:px-8 md:px-16">
+		<div class="px-6 pb-12 pt-16 sm:px-8 md:px-16">
 			<h2 class="mx-auto mb-4 text-center text-3xl font-semibold sm:text-4xl">
 				Let's get started
 			</h2>
@@ -242,7 +242,7 @@ const contributors = await getGithubContributors();
 				>
 			</p>
 		</div>
-		<div class="px-4 pb-12 text-sm text-zinc-600 sm:px-8 md:px-16">
+		<div class="6 pb-12 text-sm text-zinc-600 sm:px-8 md:px-16">
 			<div class="border-t pt-12">
 				<p class="text-center">Tip: Lucia is pronounced <i>loo-shya</i></p>
 				<p class="mt-4 text-center">

documentation/tailwind.config.cjs

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+	content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}", "./integrations/**/*.ts"],
 	theme: {
 		extend: {
 			screens: {