mirror of
https://github.com/youwen5/site.git
synced 2024-11-24 17:33:51 -08:00
style: update mobile ToC styling
This commit is contained in:
parent
f6a6af79f5
commit
9f2c27d429
GPG key ID:
865658ED1FE61EC3
4 changed files with 65 additions and 59 deletions
|
|
@ -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">
|
||||
|
|
|
|||
40
src/lib/components/Toc/MobileToc.svelte
Normal file
40
src/lib/components/Toc/MobileToc.svelte
Normal file
|
|
@ -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>
|
||||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue