delete old blog components
This commit is contained in:
matthieu42morin
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