LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-06 04:22:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1879 from appwrite/update-on-this-page

Browse Source 
Update "on this page"
This commit is contained in:
Jesse Winton
2025-03-26 09:04:01 -04:00
committed by GitHub
parent 7849893b48 78a105688e
commit bdd6a75d9a
2 changed files with 27 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/lib/components/blog/table-of-contents.svelte
View File

@@ -1,19 +1,29 @@
<script lang="ts">
import type { TocItem } from '$lib/layouts/DocsArticle.svelte';
import { classNames } from '$lib/utils/classnames';
import { fade } from 'svelte/transition';
const backToTop = () => {
window.scrollTo({ top: 0 });
};
let isScrolled: boolean = false;
window.addEventListener('scroll', () => {
isScrolled = !!window.scrollY;
});
export let toc: Array<TocItem> = [];
export let heading: string = 'Table of Contents';
</script>
<nav class="sticky top-32 col-span-3 mt-2 -ml-4 hidden h-[800px] flex-col gap-6 lg:flex">
<span class="text-micro text-primary ps-6 uppercase tracking-tighter">Table of Contents</span>
<span class="text-micro tracking-loose text-primary font-aeonik-fono ps-6 uppercase"
>{heading}</span
>
<div class="relative">
<ul
class="border-smooth mask text-caption flex max-h-[600px] flex-col gap-4 overflow-scroll border-b pb-11 [scrollbar-width:none]"
class="mask text-caption flex max-h-[600px] flex-col gap-4 overflow-scroll pb-11 [scrollbar-width:none]"
>
{#each toc as parent (parent.href)}
<li
@@ -24,7 +34,7 @@
{
'font-medium': parent.level && parent.level === 1,
'ps-6': parent.level && parent.level === 2,
'pl-10': parent.level && parent.level >= 3,
'ps-12': parent.level && parent.level >= 3,
'before:opacity-100': parent.selected
}
)}
@@ -33,7 +43,7 @@
{#if parent.children}
<ul
class="border-smooth mt-11 ml-9 flex flex-col gap-7 border-b pb-11 text-xs"
class="border-smooth text-caption mt-11 ml-9 flex flex-col gap-7 border-b pb-10"
>
{#each parent.children as child}
<li
@@ -58,11 +68,15 @@
</ul>
</div>
<button
class="text-primary group mt-8 flex cursor-pointer items-center gap-2 pl-7 transition-all active:scale-95"
on:click={backToTop}
>
<span class="web-icon-arrow-up transition group-hover:-translate-y-0.5" />
Back to Top
</button>
{#if isScrolled}
<button
class="text-primary group border-smooth text-caption ms-6 -mt-4 flex cursor-pointer items-center gap-2 border-t pt-10 font-medium transition-all"
on:click={backToTop}
out:fade
in:fade
>
<span class="web-icon-arrow-up transition group-hover:-translate-y-0.5" />
Back to Top
</button>
{/if}
</nav>

41
src/lib/layouts/DocsArticle.svelte
View File

@@ -19,6 +19,7 @@
import { writable } from 'svelte/store';
import { Feedback } from '$lib/components';
import { scrollToTop } from '$lib/actions/scrollToTop';
import TableOfContents from '$lib/components/blog/table-of-contents.svelte';
export let title: string;
export let toc: Array<TocItem>;
@@ -72,45 +73,7 @@
<aside class="web-references-menu ps-6">
<div class="web-references-menu-content">
{#if toc && toc.length > 0}
<div class="flex items-center justify-between gap-4">
<h5 class="web-references-menu-title text-micro uppercase">On This Page</h5>
</div>
<ol class="web-references-menu-list">
{#each toc as parent (parent.href)}
<li class="web-references-menu-item">
<a
href={parent.href}
class="web-references-menu-link"
class:is-selected={parent.selected}
>
{#if parent?.step}
<span class="web-numeric-badge">{parent.step}</span>
{/if}
<span class="text-caption">{parent.title}</span>
</a>
{#if parent.children}
<ol class="web-references-menu-list mt-4 ml-8">
{#each parent.children as child}
<li class="web-references-menu-item">
<a
href={child.href}
class="web-references-menu-link"
>
<span class="text-caption">{child.title}</span>
</a>
</li>
{/each}
</ol>
{/if}
</li>
{/each}
</ol>
<div class="border-greyscale-900/4 border-t pt-5">
<button class="web-link inline-flex items-center gap-2" use:scrollToTop>
<span class="web-icon-arrow-up" aria-hidden="true" />
<span class="text-caption">Back to top</span>
</button>
</div>
<TableOfContents heading="On This Page" {toc} />
{/if}
</div>
</aside>