From 9f2c27d429ef464f66c5e1a3c1f68b755ad18100 Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Sun, 7 Apr 2024 00:04:58 -0700
Subject: [PATCH] style: update mobile ToC styling

---
 src/lib/components/Blog/Article.svelte     | 37 +++++++++---------
 src/lib/components/Toc/MobileToc.svelte    | 40 +++++++++++++++++++
 src/lib/components/Toc/StickyToc.svelte    |  2 +-
 src/routes/blog/[year]/[slug]/+page.svelte | 45 +++-------------------
 4 files changed, 65 insertions(+), 59 deletions(-)
 create mode 100644 src/lib/components/Toc/MobileToc.svelte

diff --git a/src/lib/components/Blog/Article.svelte b/src/lib/components/Blog/Article.svelte
index dbc9593..382cacd 100644
--- a/src/lib/components/Blog/Article.svelte
+++ b/src/lib/components/Blog/Article.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { ChevronRight } from 'svelte-radix';
 	import PostMetadata from './PostMetadata.svelte';
-	import Separator from '../ui/separator/separator.svelte';
 
 	export let doc: BlogDocument;
 </script>
@@ -12,23 +11,25 @@
 		<ChevronRight class="h-4 w-4" />
 		<div class="font-medium text-foreground">{doc.title}</div>
 	</div>
-	<header class="space-y-2">
-		<h1 class="scroll-m-20 text-5xl font-bold font-serif tracking-tight">
-			{doc.title}
-		</h1>
-		{#if doc.description}
-			<p class="text-balance text-lg text-muted-foreground">
-				{doc.description}
-			</p>
-		{/if}
-		<PostMetadata
-			primaryTags={doc.primaryTags}
-			secondaryTags={doc.secondaryTags}
-			time={doc.time}
-			length={doc.content.length}
-			reverseDateAndRest
-		/>
-		<slot name="toc" />
+	<header class="space-y-6">
+		<div class="space-y-2">
+			<h1 class="scroll-m-20 text-5xl font-bold font-serif tracking-tight">
+				{doc.title}
+			</h1>
+			{#if doc.description}
+				<p class="text-balance text-lg text-muted-foreground">
+					{doc.description}
+				</p>
+			{/if}
+			<PostMetadata
+				primaryTags={doc.primaryTags}
+				secondaryTags={doc.secondaryTags}
+				time={doc.time}
+				length={doc.content.length}
+				reverseDateAndRest
+			/>
+		</div>
+		<slot name="mobile-toc" />
 	</header>
 
 	<div class="markdown-body mt-8 font-serif">
diff --git a/src/lib/components/Toc/MobileToc.svelte b/src/lib/components/Toc/MobileToc.svelte
new file mode 100644
index 0000000..5bc0ceb
--- /dev/null
+++ b/src/lib/components/Toc/MobileToc.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { toclink, type TocStore } from '@svelte-put/toc';
+	import * as Accordion from '$lib/components/ui/accordion';
+	import * as Card from '$lib/components/ui/card';
+
+	export let tocStore: TocStore;
+
+	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';
+	};
+</script>
+
+<Card.Root class="lg:hidden">
+	<Card.Content>
+		<Accordion.Root>
+			<Accordion.Item value="toc">
+				<Accordion.Trigger>
+					<p class="text-lg">On this page</p>
+				</Accordion.Trigger>
+				<Accordion.Content>
+					{#if $tocStore.items.size}
+						<ol class="border-l-4 border-l-muted 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>
diff --git a/src/lib/components/Toc/StickyToc.svelte b/src/lib/components/Toc/StickyToc.svelte
index 19dc85c..10e636e 100644
--- a/src/lib/components/Toc/StickyToc.svelte
+++ b/src/lib/components/Toc/StickyToc.svelte
@@ -14,7 +14,7 @@
 
 <Card.Root>
 	<Card.Header>
-		<Card.Title><h2 class="text-lg xl:text-xl">On this page</h2></Card.Title>
+		<Card.Title><h2 class="text-lg xl:text-xl font-serif">On this page</h2></Card.Title>
 	</Card.Header>
 	<Card.Content>
 		{#if $tocStore.items.size}
diff --git a/src/routes/blog/[year]/[slug]/+page.svelte b/src/routes/blog/[year]/[slug]/+page.svelte
index e361590..253eba0 100644
--- a/src/routes/blog/[year]/[slug]/+page.svelte
+++ b/src/routes/blog/[year]/[slug]/+page.svelte
@@ -1,14 +1,9 @@
 <script lang="ts">
-	import ChevronRight from 'svelte-radix/ChevronRight.svelte';
-	import Code from 'svelte-radix/Code.svelte';
+	import MobileToc from '$lib/components/Toc/MobileToc.svelte';
 	import type { PageData } from './$types';
-	// import { config } from '$lib/stores/index.js';
 	import Article from '$lib/components/Blog/Article.svelte';
-	import { toc, createTocStore, toclink } from '@svelte-put/toc';
+	import { toc, createTocStore } from '@svelte-put/toc';
 	import StickyToc from '$lib/components/Toc/StickyToc.svelte';
-	import { onMount } from 'svelte';
-	import * as Accordion from '$lib/components/ui/accordion';
-	import * as Card from '$lib/components/ui/card';
 
 	const tocStore = createTocStore();
 
@@ -24,13 +19,6 @@
 		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>
@@ -55,32 +43,9 @@
 		}}
 	>
 		<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>
+			<svelte:fragment slot="mobile-toc">
+				<MobileToc {tocStore} />
+			</svelte:fragment>
 		</Article>
 	</main>