youwen5/site
1
0
Fork 0
mirror of https://github.com/youwen5/site.git synced 2024-11-24 17:33:51 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add mobile toc footer (and animation adjust)

Browse source
This commit is contained in:
Youwen Wu 2024-04-06 20:55:14 -07:00
parent 24e0a6f1ff
commit f59d667226
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
1 changed files with 10 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,13 +1,14 @@
<script lang="ts"> <script lang="ts">
import ChevronRight from 'svelte-radix/ChevronRight.svelte'; import ChevronRight from 'svelte-radix/ChevronRight.svelte';
import Code from 'svelte-radix/Code.svelte'; import Code from 'svelte-radix/Code.svelte';
import type { PageData } from './$types.js'; import type { PageData } from './$types';
// import { config } from '$lib/stores/index.js'; // import { config } from '$lib/stores/index.js';
import { cn } from '$lib/utils.js'; import { cn } from '$lib/utils.js';
import Article from '$lib/components/Blog/Article.svelte'; import Article from '$lib/components/Blog/Article.svelte';
import { toc, createTocStore } from '@svelte-put/toc'; import { toc, createTocStore } from '@svelte-put/toc';
import StickyToc from '$lib/components/Toc/StickyToc.svelte'; import StickyToc from '$lib/components/Toc/StickyToc.svelte';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import MobileTocFooter from '$lib/components/MobileTocFooter.svelte';
const tocStore = createTocStore(); const tocStore = createTocStore();
@ -33,9 +34,9 @@
<meta name="author" content="Youwen Wu" /> <meta name="author" content="Youwen Wu" />
</svelte:head> </svelte:head>
<div class="md:flex max-w-6xl mx-auto mt-14 px-4"> <div class="lg:flex max-w-6xl mx-auto mt-14 px-4">
<main <main
class="flex-grow basis-3/4" class="flex-grow basis-3/4 flex-shrink"
use:toc={{ use:toc={{
store: tocStore, store: tocStore,
observe: true, observe: true,
@ -43,16 +44,19 @@
properties: { 'aria-hidden': 'true', class: 'hidden' }, properties: { 'aria-hidden': 'true', class: 'hidden' },
position: 'before' position: 'before'
}, },
scrollMarginTop: 120, scrollMarginTop: 120
selector: 'h1, h2, h3, h4, h5, h6, #end-marker'
}} }}
> >
<Article {doc} /> <Article {doc} />
</main> </main>
<aside class="basis-1/4 relative hidden md:block"> <aside class="basis-1/4 relative hidden lg:block">
<div class="fixed mx-8"> <div class="fixed mx-8">
<StickyToc {tocStore} /> <StickyToc {tocStore} />
</div> </div>
</aside> </aside>
<aside class="lg:hidden">
<MobileTocFooter {tocStore} />
</aside>
</div> </div>