delete old blog components
This commit is contained in:
parent
e6034bce7e
commit
2a567b6c9a
|
@ -1,12 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
export let post: Urara.Post
|
|
||||||
const actions = import.meta.glob<any>('/src/lib/components/actions/*.svelte', { eager: true, import: 'default' })
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="sticky top-24 hidden xl:flex flex-col gap-4 w-fit h-[calc(100vh-12rem)] ml-auto mr-8 my-8 justify-center">
|
|
||||||
{#if Object.keys(actions).length}
|
|
||||||
{#each Object.values(actions) as action}
|
|
||||||
<svelte:component this={action} {post} />
|
|
||||||
{/each}
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
|
@ -1,130 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { browser } from '$app/environment'
|
|
||||||
import { post as postConfig } from '$lib/config/post'
|
|
||||||
import { posts as storedPosts } from '$lib/stores/posts'
|
|
||||||
import { title as storedTitle } from '$lib/stores/title'
|
|
||||||
import Reply from '$lib/components/post_reply.svelte'
|
|
||||||
import Status from '$lib/components/post_status.svelte'
|
|
||||||
import Image from '$lib/components/prose/img.svelte'
|
|
||||||
import Pagination from '$lib/components/post_pagination.svelte'
|
|
||||||
import Comment from '$lib/components/post_comment.svelte'
|
|
||||||
export let post: Urara.Post
|
|
||||||
export let preview: boolean = false
|
|
||||||
export let loading: 'eager' | 'lazy' = 'lazy'
|
|
||||||
export let decoding: 'async' | 'sync' | 'auto' = 'async'
|
|
||||||
// pagination
|
|
||||||
let index: number
|
|
||||||
let prev: Urara.Post | undefined = undefined
|
|
||||||
let next: Urara.Post | undefined = undefined
|
|
||||||
if (browser && !preview)
|
|
||||||
storedPosts.subscribe((storedPosts: Urara.Post[]) => {
|
|
||||||
index = storedPosts.findIndex(storedPost => storedPost.path === post.path)
|
|
||||||
prev = storedPosts
|
|
||||||
.slice(0, index)
|
|
||||||
.reverse()
|
|
||||||
.find(post => !post.flags?.includes('unlisted'))
|
|
||||||
next = storedPosts.slice(index + 1).find(post => !post.flags?.includes('unlisted'))
|
|
||||||
storedTitle.set(post.title ?? post.path.slice(1))
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<svelte:element
|
|
||||||
this={post.type === 'article' ? 'article' : 'div'}
|
|
||||||
itemscope
|
|
||||||
itemtype="https://schema.org/BlogPosting"
|
|
||||||
itemprop="blogPost"
|
|
||||||
class:md:mb-8={!preview}
|
|
||||||
class:lg:mb-16={!preview}
|
|
||||||
class:group={preview}
|
|
||||||
class:image-full={preview && post.type === 'article' && post.image}
|
|
||||||
class:before:!rounded-none={preview && post.image}
|
|
||||||
class="h-entry card bg-base-100 rounded-none md:rounded-box md:shadow-xl overflow-hidden z-10">
|
|
||||||
{#if !preview && postConfig.bridgy}
|
|
||||||
<div id="bridgy" class="hidden">
|
|
||||||
{#each post.flags?.some( flag => flag.startsWith('bridgy') ) ? post.flags.flatMap( flag => (flag.startsWith('bridgy') ? flag.slice(7) : []) ) : [...(postConfig.bridgy.post ?? []), ...(postConfig.bridgy[post.type] ?? [])] as target}
|
|
||||||
{#if target === 'fed'}
|
|
||||||
<a href="https://fed.brid.gy/">fed</a>
|
|
||||||
{:else}
|
|
||||||
<a href="https://brid.gy/publish/{target}">{target}</a>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{#if post.in_reply_to}
|
|
||||||
<Reply in_reply_to={post.in_reply_to} class="mt-4 mx-4" />
|
|
||||||
{/if}
|
|
||||||
{#if post.image && preview}
|
|
||||||
<figure class="!block">
|
|
||||||
<Image
|
|
||||||
class={post.type === 'article'
|
|
||||||
? 'u-featured object-center h-full w-full absolute group-hover:scale-105 transition-transform duration-500 ease-in-out'
|
|
||||||
: 'u-photo rounded-xl md:rounded-b-none -mb-6 md:-mb-2'}
|
|
||||||
src={post.image}
|
|
||||||
alt={post.alt ?? post.image}
|
|
||||||
{loading}
|
|
||||||
{decoding} />
|
|
||||||
</figure>
|
|
||||||
{/if}
|
|
||||||
<div
|
|
||||||
class={`card-body gap-0 ${
|
|
||||||
preview && post.type === 'article' && post.image ? 'md:col-start-1 md:row-start-1 md:text-neutral-content md:z-20' : ''
|
|
||||||
}`}>
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
{#if post.image && !preview}
|
|
||||||
<figure
|
|
||||||
class={`md:order-last rounded-box shadow-xl mb-4 ${
|
|
||||||
post.type === 'article' ? 'flex-col gap-2 -mx-4 -mt-8 md:mt-0' : 'flex-col -mx-8'
|
|
||||||
}`}>
|
|
||||||
<Image
|
|
||||||
class={`${post.type === 'article' ? 'u-featured' : 'u-photo'}`}
|
|
||||||
src={post.image}
|
|
||||||
alt={post.alt ?? post.image}
|
|
||||||
{loading}
|
|
||||||
{decoding} />
|
|
||||||
</figure>
|
|
||||||
{/if}
|
|
||||||
<Status {post} {preview} />
|
|
||||||
{#if post.title}
|
|
||||||
{#if preview}
|
|
||||||
<h2
|
|
||||||
itemprop="name headline"
|
|
||||||
class="card-title text-3xl mr-auto bg-[length:100%_0%] bg-[position:0_88%] underline decoration-4 decoration-transparent group-hover:decoration-primary hover:bg-[length:100%_100%] hover:text-primary-content bg-gradient-to-t from-primary to-primary bg-no-repeat transition-all ease-in-out duration-300">
|
|
||||||
<a itemprop="url" class="u-url p-name" href={post.path}>{post.title ?? post.path.slice(1)}</a>
|
|
||||||
</h2>
|
|
||||||
{:else}
|
|
||||||
<h1 itemprop="name headline" class="card-title text-3xl mb-8 p-name">{post.title ?? post.path.slice(1)}</h1>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
{#if post.summary}
|
|
||||||
<p itemprop="description" class:hidden={!preview || post.type !== 'article'} class="p-summary mb-auto">
|
|
||||||
{post.summary}
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<main itemprop="articleBody" class:mt-4={post.type !== 'article'} class="urara-prose prose e-content">
|
|
||||||
{#if !preview}
|
|
||||||
<slot />
|
|
||||||
{:else if post.html}
|
|
||||||
{@html post.html}
|
|
||||||
{/if}
|
|
||||||
</main>
|
|
||||||
{#if !preview && post.tags}
|
|
||||||
<div class="divider mt-4 mb-0" />
|
|
||||||
<div>
|
|
||||||
{#each post.tags as tag}
|
|
||||||
<a href="/?tags={tag}" class="btn btn-sm btn-ghost normal-case mt-2 mr-2 p-category">
|
|
||||||
#{tag}
|
|
||||||
</a>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{#if !preview}
|
|
||||||
{#if (prev || next) && !post.flags?.includes('pagination-disabled') && !post.flags?.includes('unlisted')}
|
|
||||||
<Pagination {next} {prev} />
|
|
||||||
{/if}
|
|
||||||
{#if browser && postConfig.comment && !post.flags?.includes('comment-disabled')}
|
|
||||||
<Comment {post} config={postConfig.comment} />
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
</svelte:element>
|
|
|
@ -1,46 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import type { CommentConfig } from '$lib/types/post'
|
|
||||||
import { toSnake } from '$lib/utils/case'
|
|
||||||
export let post: Urara.Post
|
|
||||||
export let config: CommentConfig
|
|
||||||
const comments = import.meta.glob<any>('/src/lib/components/comments/*.svelte', { eager: true, import: 'default' })
|
|
||||||
let currentComment: string | undefined = undefined
|
|
||||||
let currentConfig: unknown | undefined = undefined
|
|
||||||
currentComment = localStorage.getItem('comment') ?? toSnake(config.use[0])
|
|
||||||
// @ts-ignore No index signature with a parameter of type 'string' was found on type 'CommentConfig'. ts(7053)
|
|
||||||
$: if (currentComment) currentConfig = config[currentComment]
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#if config?.use.length > 0}
|
|
||||||
<div id="post-comment" class="card card-body">
|
|
||||||
{#if config.use.length > 1}
|
|
||||||
<div
|
|
||||||
class="tabs w-full mb-8"
|
|
||||||
class:tabs-boxed={config?.['style'] === 'boxed'}
|
|
||||||
class:tab-bordered={config?.['style'] === 'bordered'}
|
|
||||||
class:tab-lifted={config?.['style'] === 'lifted'}>
|
|
||||||
{#each config.use as name}
|
|
||||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
||||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
||||||
<span
|
|
||||||
on:click={() => {
|
|
||||||
currentComment = toSnake(name)
|
|
||||||
localStorage.setItem('comment', toSnake(name))
|
|
||||||
}}
|
|
||||||
class="flex-1 tab transition-all"
|
|
||||||
class:tab-active={currentComment === toSnake(name)}>
|
|
||||||
{name}
|
|
||||||
</span>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{#if currentComment}
|
|
||||||
{#key currentComment}
|
|
||||||
<svelte:component
|
|
||||||
this={comments[`/src/lib/components/comments/${currentComment}.svelte`]}
|
|
||||||
{post}
|
|
||||||
config={currentConfig} />
|
|
||||||
{/key}
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
|
@ -1,39 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { fly } from 'svelte/transition'
|
|
||||||
import { browser } from '$app/environment'
|
|
||||||
import Card from '$lib/components/post_card.svelte'
|
|
||||||
import Head from '$lib/components/head.svelte'
|
|
||||||
import Toc from '$lib/components/post_toc.svelte'
|
|
||||||
import Action from '$lib/components/post_action.svelte'
|
|
||||||
import Footer from '$lib/components/footer.svelte'
|
|
||||||
export let post: Urara.Post
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Head {post} />
|
|
||||||
|
|
||||||
<div class="flex flex-col flex-nowrap justify-center xl:flex-row xl:flex-wrap">
|
|
||||||
<div
|
|
||||||
in:fly={{ x: 25, duration: 300, delay: 500 }}
|
|
||||||
out:fly={{ x: 25, duration: 300 }}
|
|
||||||
class="flex-1 w-full order-first ease-out transform mx-auto xl:mr-0 xl:ml-0">
|
|
||||||
{#if browser}
|
|
||||||
<Action {post} />
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
in:fly={{ x: -25, duration: 300, delay: 500 }}
|
|
||||||
out:fly={{ x: -25, duration: 300 }}
|
|
||||||
class="flex-1 w-full xl:order-last ease-out transform mx-auto xl:ml-0 xl:mr-0">
|
|
||||||
{#if browser && post.toc}
|
|
||||||
<div class="h-full hidden xl:block">
|
|
||||||
<Toc toc={post.toc} />
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<div class="flex-none w-full max-w-screen-md mx-auto xl:mx-0">
|
|
||||||
<Card {post}>
|
|
||||||
<slot />
|
|
||||||
</Card>
|
|
||||||
<Footer sticky={true} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
|
@ -1,32 +0,0 @@
|
||||||
<script lang="ts" context="module">
|
|
||||||
import Image from '$lib/components/prose/img.svelte'
|
|
||||||
import table from '$lib/components/prose/table.svelte'
|
|
||||||
export { Image as img, table }
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { typeOfPost } from '$lib/utils/posts'
|
|
||||||
import Container from '$lib/components/post_container.svelte'
|
|
||||||
// auto-generated
|
|
||||||
export let path
|
|
||||||
export let slug
|
|
||||||
export let toc
|
|
||||||
// common
|
|
||||||
export let created
|
|
||||||
export let updated
|
|
||||||
export let published
|
|
||||||
export let summary
|
|
||||||
export let tags
|
|
||||||
export let flags
|
|
||||||
// specify
|
|
||||||
export let title
|
|
||||||
export let image
|
|
||||||
export let in_reply_to
|
|
||||||
// post
|
|
||||||
let fm = { path, slug, toc, created, updated, published, summary, tags, flags, title, image, in_reply_to }
|
|
||||||
let post = { type: typeOfPost(fm), ...fm }
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Container {post}>
|
|
||||||
<slot />
|
|
||||||
</Container>
|
|
|
@ -1,59 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import Image from '$lib/components/prose/img.svelte'
|
|
||||||
export let prev: Urara.Post | undefined = undefined
|
|
||||||
export let next: Urara.Post | undefined = undefined
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<nav class="flex flex-col md:flex-row flex-warp justify-evenly">
|
|
||||||
{#if prev}
|
|
||||||
<div
|
|
||||||
class:image-full={prev['image']}
|
|
||||||
class:md:rounded-r-box={next && !next['image']}
|
|
||||||
class="flex-1 card group rounded-none before:!rounded-none overflow-hidden">
|
|
||||||
{#if prev['image']}
|
|
||||||
<figure class="!block">
|
|
||||||
<Image
|
|
||||||
class="object-center h-full w-full absolute group-hover:scale-105 transition-transform duration-500 ease-in-out"
|
|
||||||
src={prev['image']}
|
|
||||||
alt={prev['alt'] ?? prev['image']} />
|
|
||||||
</figure>
|
|
||||||
{/if}
|
|
||||||
<div class="card-body">
|
|
||||||
<span class="i-heroicons-outline-chevron-left opacity-50 group-hover:opacity-100 mr-auto" />
|
|
||||||
<a
|
|
||||||
rel="prev"
|
|
||||||
href={prev.path}
|
|
||||||
class="card-title block text-left mb-0 mr-auto bg-[length:100%_0%] bg-[position:0_88%] underline decoration-3 decoration-transparent group-hover:decoration-primary hover:bg-[length:100%_100%] hover:text-primary-content bg-gradient-to-t from-primary to-primary bg-no-repeat transition-all ease-in-out duration-300">
|
|
||||||
{prev['title'] ?? prev['summary'] ?? prev.path.slice(1)}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{#if next && !next['image'] && !prev['image']}
|
|
||||||
<div class="flex-0 divider mx-4 md:divider-horizontal md:mx-0 md:my-4" />
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
{#if next}
|
|
||||||
<div
|
|
||||||
class:image-full={next['image']}
|
|
||||||
class:md:rounded-l-box={prev && !prev['image']}
|
|
||||||
class="flex-1 card group rounded-none before:!rounded-none overflow-hidden">
|
|
||||||
{#if next['image']}
|
|
||||||
<figure class="!block">
|
|
||||||
<Image
|
|
||||||
class="object-center h-full w-full absolute group-hover:scale-105 transition-transform duration-500 ease-in-out"
|
|
||||||
src={next['image']}
|
|
||||||
alt={next['alt'] ?? next['image']} />
|
|
||||||
</figure>
|
|
||||||
{/if}
|
|
||||||
<div class="card-body">
|
|
||||||
<a
|
|
||||||
rel="next"
|
|
||||||
href={next.path}
|
|
||||||
class="card-title block text-right mb-0 ml-auto bg-[length:100%_0%] bg-[position:0_88%] underline decoration-3 decoration-transparent group-hover:decoration-primary hover:bg-[length:100%_100%] hover:text-primary-content bg-gradient-to-t from-primary to-primary bg-no-repeat transition-all ease-in-out duration-300">
|
|
||||||
{next['title'] ?? next['summary'] ?? next.path.slice(1)}
|
|
||||||
</a>
|
|
||||||
<span class="i-heroicons-outline-chevron-right opacity-50 group-hover:opacity-100 ml-auto" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</nav>
|
|
|
@ -1,17 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
let className = ''
|
|
||||||
export { className as class }
|
|
||||||
export let in_reply_to: Urara.Post['in_reply_to']
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="flex flex-wrap gap-2 rounded-box outline outline-neutral/10 p-4 {className}">
|
|
||||||
<span class="flex-none font-bold uppercase opacity-30">Reply to: </span>
|
|
||||||
<a
|
|
||||||
href={in_reply_to}
|
|
||||||
rel="noopener noreferrer external"
|
|
||||||
target="_blank"
|
|
||||||
class="ml-auto flex-none flex rounded-badge bg-base-200 hover:bg-base-300 transition-all gap-2 px-4 u-in-reply-to">
|
|
||||||
<span class="i-heroicons-outline-reply my-auto !w-4 !h-4" />
|
|
||||||
{in_reply_to}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
|
@ -1,35 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { date } from '$lib/config/general'
|
|
||||||
import { site } from '$lib/config/site'
|
|
||||||
export let post: Urara.Post
|
|
||||||
export let preview: boolean = false
|
|
||||||
const stringPublished = new Date(post.published ?? post.created).toLocaleString(date.locales, date.options)
|
|
||||||
const stringUpdated = new Date(post.updated ?? post.published ?? post.created).toLocaleString(date.locales, date.options)
|
|
||||||
const jsonPublished = new Date(post.published ?? post.created).toJSON()
|
|
||||||
const jsonUpdated = new Date(post.updated ?? post.published ?? post.created).toJSON()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class:md:mb-4={!preview && post.type !== 'article'} class="flex font-semibold gap-1.5">
|
|
||||||
<a
|
|
||||||
class:hidden={preview}
|
|
||||||
rel="author"
|
|
||||||
class="opacity-75 hover:opacity-100 hover:text-primary duration-500 ease-in-out p-author h-card"
|
|
||||||
href={site.protocol + site.domain}>
|
|
||||||
{site.author.name}
|
|
||||||
</a>
|
|
||||||
<span class:hidden={preview} class="opacity-50">/</span>
|
|
||||||
<a href={post.path} class="u-url u-uid swap group/time">
|
|
||||||
<time
|
|
||||||
class="group-hover/time:opacity-0 font-semibold opacity-75 duration-500 ease-in-out mr-auto dt-published"
|
|
||||||
datetime={jsonPublished}
|
|
||||||
itemprop="datePublished">
|
|
||||||
{stringPublished}
|
|
||||||
</time>
|
|
||||||
<time
|
|
||||||
class="opacity-0 group-hover/time:opacity-100 font-semibold text-primary duration-500 ease-in-out mr-auto dt-updated"
|
|
||||||
datetime={jsonUpdated}
|
|
||||||
itemprop="dateModified">
|
|
||||||
{stringUpdated}
|
|
||||||
</time>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
|
@ -1,80 +0,0 @@
|
||||||
<script lang="ts" context="module">
|
|
||||||
export const prerender = true
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { onMount, onDestroy } from 'svelte'
|
|
||||||
export let toc: Urara.Post.Toc[]
|
|
||||||
|
|
||||||
let intersecting: string[] = []
|
|
||||||
let intersectingArticle: boolean = true
|
|
||||||
let bordered: string[] = []
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
if (window.screen.availWidth >= 1280) {
|
|
||||||
const headingsObserver = new IntersectionObserver(
|
|
||||||
headings =>
|
|
||||||
headings.forEach(heading =>
|
|
||||||
heading.isIntersecting
|
|
||||||
? intersecting.push(heading.target.id)
|
|
||||||
: (intersecting = intersecting.filter(h => h !== heading.target.id))
|
|
||||||
),
|
|
||||||
{ rootMargin: '-64px 0px 0px 0px' }
|
|
||||||
)
|
|
||||||
const articleObserver = new IntersectionObserver(article => (intersectingArticle = article[0].isIntersecting))
|
|
||||||
Array.from(document.querySelectorAll('main h2, main h3, main h4, main h5, main h6')).forEach(element =>
|
|
||||||
headingsObserver.observe(element)
|
|
||||||
)
|
|
||||||
articleObserver.observe(document.getElementsByTagName('main')[0])
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
onDestroy(() => {
|
|
||||||
// @ts-ignore: Cannot find name 'headingsObserver'
|
|
||||||
if (typeof headingsObserver !== 'undefined') headingsObserver.disconnect()
|
|
||||||
// @ts-ignore: Cannot find name 'articleObserver'
|
|
||||||
if (typeof articleObserver !== 'undefined') articleObserver.disconnect()
|
|
||||||
})
|
|
||||||
|
|
||||||
$: if (intersecting.length > 0) bordered = intersecting
|
|
||||||
$: if (intersectingArticle === false) bordered = []
|
|
||||||
$: if (bordered)
|
|
||||||
toc.forEach(heading =>
|
|
||||||
bordered.includes(heading.slug!)
|
|
||||||
? document.getElementById(`toc-link-${heading.slug}`)?.classList.add('!border-accent')
|
|
||||||
: document.getElementById(`toc-link-${heading.slug}`)?.classList.remove('!border-accent')
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<aside class="sticky top-16 py-8">
|
|
||||||
<nav
|
|
||||||
id="post-toc"
|
|
||||||
aria-label="TableOfContent"
|
|
||||||
dir="rtl"
|
|
||||||
class="max-h-[calc(100vh-12rem)] overflow-y-hidden hover:overflow-y-auto">
|
|
||||||
<ul dir="ltr" id="toc-list-root">
|
|
||||||
{#each toc as { depth, title, slug }}
|
|
||||||
<li id={`toc-item-${slug}`} class="flex flex-col">
|
|
||||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
||||||
<span
|
|
||||||
dir="ltr"
|
|
||||||
on:click={() =>
|
|
||||||
// @ts-ignore Object is possibly 'null'. ts(2531)
|
|
||||||
document.getElementById(slug).scrollIntoView({ behavior: 'smooth' })}
|
|
||||||
id={`toc-link-${slug}`}
|
|
||||||
class="cursor-pointer border-l-4 border-transparent transition-all hover:border-primary hover:bg-base-content hover:bg-opacity-10 active:bg-primary active:text-primary-content active:font-bold pr-4 {depth <=
|
|
||||||
2
|
|
||||||
? 'py-3'
|
|
||||||
: 'py-2'}"
|
|
||||||
class:pl-4={depth <= 2}
|
|
||||||
class:pl-8={depth === 3}
|
|
||||||
class:pl-12={depth === 4}
|
|
||||||
class:pl-16={depth === 5}
|
|
||||||
class:pl-20={depth === 6}>
|
|
||||||
{title}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</aside>
|
|
Loading…
Reference in New Issue