added too much stuff

README.md

@@ -1,5 +1,7 @@
 # coredump
 
+[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
+
 My personal website and its associated blog. Written in [SvelteKit](https://kit.svelte.dev) using [TailwindCSS](https://tailwindcss.com/) and components from [shadcn-svelte](https://www.shadcn-svelte.com/).
 
 ## Running locally

src/lib/components/Blog/Article.svelte

@@ -12,7 +12,7 @@
 		<ChevronRight class="h-4 w-4" />
 		<div class="font-medium text-foreground">{doc.title}</div>
 	</div>
-	<div class="space-y-2">
+	<header class="space-y-2">
 		<h1 class="scroll-m-20 text-5xl font-bold font-serif tracking-tight">
 			{doc.title}
 		</h1>
@@ -28,10 +28,10 @@
 			length={doc.content.length}
 			reverseDateAndRest
 		/>
-	</div>
+		<slot name="toc" />
+	</header>
 
 	<div class="markdown-body mt-8 font-serif">
 		{@html doc.content}
-		<div role="note" id="end-marker" aria-label="End of article" class="invisible h-0 w-0">End</div>
 	</div>
 </article>

src/lib/components/Blog/PostMetadata.svelte

@@ -10,7 +10,11 @@
   - `time` - A unix epoch integer representing the time the post was published.
   - `length` - An integer representing amount of words in the post.
   - `reverseDateAndRest` - A boolean that determines whether the date should be displayed at the bottom of the metadata.
- -->
+	
+	@slots
+
+	- toc - Place a table of contents here
+-->
 
 <script lang="ts">
 	import Badge from '../ui/badge/badge.svelte';

src/lib/components/Toc/StickyToc.svelte

@@ -5,9 +5,9 @@
 	export let tocStore: TocStore;
 
 	const calcTextClasses = (el: HTMLElement) => {
-		if (el.tagName === 'H1') return 'text-md xl:text-lg';
+		if (el.tagName === 'H1') return 'text-lg xl:text-xl font-medium';
 		if (el.tagName === 'H2') return 'text-md xl:text-lg';
-		if (el.id === 'end-marker') return 'text-md xl:text-lg';
+		if (el.id === 'end-marker') return 'text-lg xl:text-xl';
 		return 'text-sm text-muted-foreground';
 	};
 </script>
@@ -24,6 +24,7 @@
 						<!-- svelte-ignore a11y-missing-attribute a11y-missing-content -->
 						<a
 							use:toclink={{ store: tocStore, tocItem, observe: true }}
+							class:highlighted={$tocStore.activeItem === tocItem}
 							class={`hover:bg-muted px-2 py-1 rounded-r-sm transition-all border-l-secondary border-l-4 ${calcTextClasses(tocItem.element)}`}
 						/>
 					</li>
@@ -32,3 +33,9 @@
 		{/if}
 	</Card.Content>
 </Card.Root>
+
+<style lang="postcss">
+	.highlighted {
+		@apply bg-blue-200 dark:bg-blue-900 border-l-blue-500;
+	}
+</style>

src/lib/components/ui/accordion/accordion-content.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { slide } from "svelte/transition";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AccordionPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = slide;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 200,
+	};
+
+	export { className as class };
+</script>
+
+<AccordionPrimitive.Content
+	class={cn("overflow-hidden text-sm", className)}
+	{transition}
+	{transitionConfig}
+	{...$$restProps}
+>
+	<div class="pb-4 pt-0">
+		<slot />
+	</div>
+</AccordionPrimitive.Content>

src/lib/components/ui/accordion/accordion-item.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AccordionPrimitive.ItemProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+	export let value: $$Props["value"];
+</script>
+
+<AccordionPrimitive.Item {value} class={cn("border-b", className)} {...$$restProps}>
+	<slot />
+</AccordionPrimitive.Item>

src/lib/components/ui/accordion/accordion-trigger.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import ChevronDown from "svelte-radix/ChevronDown.svelte";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = AccordionPrimitive.TriggerProps;
+	type $$Events = AccordionPrimitive.TriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let level: AccordionPrimitive.HeaderProps["level"] = 3;
+	export { className as class };
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		class={cn(
+			"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+			className
+		)}
+		{...$$restProps}
+		on:click
+	>
+		<slot />
+		<ChevronDown
+			class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
+		/>
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

src/lib/components/ui/accordion/index.ts

@@ -0,0 +1,17 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
+
+const Root = AccordionPrimitive.Root;
+export {
+	Root,
+	Content,
+	Item,
+	Trigger,
+	//
+	Root as Accordion,
+	Content as AccordionContent,
+	Item as AccordionItem,
+	Trigger as AccordionTrigger,
+};

src/lib/components/ui/drawer/drawer-content.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import DrawerOverlay from "./drawer-overlay.svelte";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DrawerPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DrawerPrimitive.Portal>
+	<DrawerOverlay />
+	<DrawerPrimitive.Content
+		class={cn(
+			"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+			className
+		)}
+		{...$$restProps}
+	>
+		<div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+		<slot />
+	</DrawerPrimitive.Content>
+</DrawerPrimitive.Portal>

src/lib/components/ui/drawer/drawer-description.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DrawerPrimitive.DescriptionProps;
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DrawerPrimitive.Description
+	bind:el
+	class={cn("text-sm text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</DrawerPrimitive.Description>

src/lib/components/ui/drawer/drawer-footer.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement> & {
+		el?: HTMLDivElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div bind:this={el} class={cn("mt-auto flex flex-col gap-2 p-4", className)} {...$$restProps}>
+	<slot />
+</div>

src/lib/components/ui/drawer/drawer-header.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement> & {
+		el?: HTMLDivElement;
+	};
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	bind:this={el}
+	class={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>

src/lib/components/ui/drawer/drawer-nested.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	type $$Props = DrawerPrimitive.Props;
+	export let shouldScaleBackground: $$Props["shouldScaleBackground"] = true;
+	export let open: $$Props["open"] = false;
+	export let activeSnapPoint: $$Props["activeSnapPoint"] = undefined;
+</script>
+
+<DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...$$restProps}>
+	<slot />
+</DrawerPrimitive.NestedRoot>

src/lib/components/ui/drawer/drawer-overlay.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DrawerPrimitive.OverlayProps;
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DrawerPrimitive.Overlay
+	bind:el
+	class={cn("fixed inset-0 z-50 bg-black/80", className)}
+	{...$$restProps}
+>
+	<slot />
+</DrawerPrimitive.Overlay>

src/lib/components/ui/drawer/drawer-title.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DrawerPrimitive.TitleProps;
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DrawerPrimitive.Title
+	bind:el
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</DrawerPrimitive.Title>

src/lib/components/ui/drawer/drawer.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	type $$Props = DrawerPrimitive.Props;
+	export let shouldScaleBackground: $$Props["shouldScaleBackground"] = true;
+	export let open: $$Props["open"] = false;
+	export let activeSnapPoint: $$Props["activeSnapPoint"] = undefined;
+</script>
+
+<DrawerPrimitive.Root {shouldScaleBackground} bind:open bind:activeSnapPoint {...$$restProps}>
+	<slot />
+</DrawerPrimitive.Root>

src/lib/components/ui/drawer/index.ts

@@ -0,0 +1,40 @@
+import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+import Root from "./drawer.svelte";
+import Content from "./drawer-content.svelte";
+import Description from "./drawer-description.svelte";
+import Overlay from "./drawer-overlay.svelte";
+import Footer from "./drawer-footer.svelte";
+import Header from "./drawer-header.svelte";
+import Title from "./drawer-title.svelte";
+import NestedRoot from "./drawer-nested.svelte";
+
+const Trigger = DrawerPrimitive.Trigger;
+const Portal = DrawerPrimitive.Portal;
+const Close = DrawerPrimitive.Close;
+
+export {
+	Root,
+	NestedRoot,
+	Content,
+	Description,
+	Overlay,
+	Footer,
+	Header,
+	Title,
+	Trigger,
+	Portal,
+	Close,
+	//
+	Root as Drawer,
+	NestedRoot as DrawerNestedRoot,
+	Content as DrawerContent,
+	Description as DrawerDescription,
+	Overlay as DrawerOverlay,
+	Footer as DrawerFooter,
+	Header as DrawerHeader,
+	Title as DrawerTitle,
+	Trigger as DrawerTrigger,
+	Portal as DrawerPortal,
+	Close as DrawerClose,
+};

src/routes/blog/+page.svelte

@@ -48,7 +48,10 @@
 			>
 				my blog on computer science, math, games, art, and more.
 			</p>
-			<span class="flex flex-wrap items-center mt-8 md:hidden">
+			<span
+				class="flex flex-wrap items-center mt-8 md:hidden"
+				in:fly={{ duration: 300, x: -50, delay: 300 }}
+			>
 				<a href="#archive" class="flex items-center font-mono gap-2 hover:underline"
 					><ChevronRight />Archived Posts</a
 				>

src/routes/blog/[year]/[slug]/+page.svelte

@@ -3,12 +3,12 @@
 	import Code from 'svelte-radix/Code.svelte';
 	import type { PageData } from './$types';
 	// import { config } from '$lib/stores/index.js';
-	import { cn } from '$lib/utils.js';
 	import Article from '$lib/components/Blog/Article.svelte';
-	import { toc, createTocStore } from '@svelte-put/toc';
+	import { toc, createTocStore, toclink } from '@svelte-put/toc';
 	import StickyToc from '$lib/components/Toc/StickyToc.svelte';
 	import { onMount } from 'svelte';
-	import MobileTocFooter from '$lib/components/MobileTocFooter.svelte';
+	import * as Accordion from '$lib/components/ui/accordion';
+	import * as Card from '$lib/components/ui/card';
 
 	const tocStore = createTocStore();
 
@@ -24,6 +24,13 @@
 		description:
 			'An insightful and longer description of the post. This should be a bit more detailed than the blurb. It should give the reader a good idea of what the post is about.'
 	};
+
+	const calcTextClasses = (el: HTMLElement) => {
+		if (el.tagName === 'H1') return 'text-xl font-medium';
+		if (el.tagName === 'H2') return 'text-lg';
+		return 'text-sm text-muted-foreground';
+	};
+
 	// $: doc = data.metadata;
 	// $: componentSource = data.metadata.source?.replace('default', $config.style ?? 'default');
 </script>
@@ -47,7 +54,34 @@
 			scrollMarginTop: 120
 		}}
 	>
-		<Article {doc} />
+		<Article {doc}>
+			<Card.Root slot="toc" class="lg:hidden">
+				<Card.Content>
+					<Accordion.Root>
+						<Accordion.Item value="toc">
+							<Accordion.Trigger>
+								<p>On this page</p>
+							</Accordion.Trigger>
+							<Accordion.Content>
+								{#if $tocStore.items.size}
+									<ol class="border-l-2 border-l-blue-500 px-4">
+										{#each $tocStore.items.values() as tocItem}
+											<li class="py-0.5">
+												<!-- svelte-ignore a11y-missing-attribute a11y-missing-content -->
+												<a
+													use:toclink={{ store: tocStore, tocItem, observe: true }}
+													class={`${calcTextClasses(tocItem.element)}`}
+												/>
+											</li>
+										{/each}
+									</ol>
+								{/if}
+							</Accordion.Content>
+						</Accordion.Item>
+					</Accordion.Root>
+				</Card.Content>
+			</Card.Root>
+		</Article>
 	</main>
 
 	<aside class="basis-1/4 relative hidden lg:block">
@@ -55,8 +89,4 @@
 			<StickyToc {tocStore} />
 		</div>
 	</aside>
-
-	<aside class="lg:hidden">
-		<MobileTocFooter {tocStore} />
-	</aside>
 </div>

src/routes/blog/[year]/[slug]/+page.ts

@@ -8,6 +8,7 @@ export const prerender = true;
 const options = {
 	throwOnError: false
 };
+
 marked.use(markedKatex(options));
 marked.use(markedAlert());