From e6034bce7e67ecc2af8ddc7d3e88bedbabfd33e1 Mon Sep 17 00:00:00 2001
From: matthieu42morin <matthieu.bernard.morin@gmail.com>
Date: Sun, 28 Apr 2024 13:57:26 +0200
Subject: [PATCH] changedir posts

---
 src/lib/components/blog/post_action.svelte    |  12 ++
 src/lib/components/blog/post_card.svelte      | 130 ++++++++++++++++++
 src/lib/components/blog/post_comment.svelte   |  46 +++++++
 src/lib/components/blog/post_container.svelte |  39 ++++++
 src/lib/components/blog/post_layout.svelte    |  32 +++++
 .../components/blog/post_pagination.svelte    |  59 ++++++++
 src/lib/components/blog/post_reply.svelte     |  17 +++
 src/lib/components/blog/post_status.svelte    |  35 +++++
 src/lib/components/blog/post_toc.svelte       |  81 +++++++++++
 9 files changed, 451 insertions(+)
 create mode 100644 src/lib/components/blog/post_action.svelte
 create mode 100644 src/lib/components/blog/post_card.svelte
 create mode 100644 src/lib/components/blog/post_comment.svelte
 create mode 100644 src/lib/components/blog/post_container.svelte
 create mode 100644 src/lib/components/blog/post_layout.svelte
 create mode 100644 src/lib/components/blog/post_pagination.svelte
 create mode 100644 src/lib/components/blog/post_reply.svelte
 create mode 100644 src/lib/components/blog/post_status.svelte
 create mode 100644 src/lib/components/blog/post_toc.svelte

diff --git a/src/lib/components/blog/post_action.svelte b/src/lib/components/blog/post_action.svelte
new file mode 100644
index 0000000..4c98b17
--- /dev/null
+++ b/src/lib/components/blog/post_action.svelte
@@ -0,0 +1,12 @@
+<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>
diff --git a/src/lib/components/blog/post_card.svelte b/src/lib/components/blog/post_card.svelte
new file mode 100644
index 0000000..e942d94
--- /dev/null
+++ b/src/lib/components/blog/post_card.svelte
@@ -0,0 +1,130 @@
+<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/blog/post_reply.svelte'
+  import Status from '$lib/components/blog/post_status.svelte'
+  import Image from '$lib/components/prose/img.svelte'
+  import Pagination from '$lib/components/blog/post_pagination.svelte'
+  import Comment from '$lib/components/blog/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>
diff --git a/src/lib/components/blog/post_comment.svelte b/src/lib/components/blog/post_comment.svelte
new file mode 100644
index 0000000..19666b7
--- /dev/null
+++ b/src/lib/components/blog/post_comment.svelte
@@ -0,0 +1,46 @@
+<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}
diff --git a/src/lib/components/blog/post_container.svelte b/src/lib/components/blog/post_container.svelte
new file mode 100644
index 0000000..7e079b0
--- /dev/null
+++ b/src/lib/components/blog/post_container.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { fly } from 'svelte/transition'
+  import { browser } from '$app/environment'
+  import Card from '$lib/components/blog/post_card.svelte'
+  import Head from '$lib/components/main/head.svelte'
+  import Toc from '$lib/components/blog/post_toc.svelte'
+  import Action from '$lib/components/blog/post_action.svelte'
+  import Footer from '$lib/components/main/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>
diff --git a/src/lib/components/blog/post_layout.svelte b/src/lib/components/blog/post_layout.svelte
new file mode 100644
index 0000000..7baa6f4
--- /dev/null
+++ b/src/lib/components/blog/post_layout.svelte
@@ -0,0 +1,32 @@
+<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/blog/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>
diff --git a/src/lib/components/blog/post_pagination.svelte b/src/lib/components/blog/post_pagination.svelte
new file mode 100644
index 0000000..a56ccb2
--- /dev/null
+++ b/src/lib/components/blog/post_pagination.svelte
@@ -0,0 +1,59 @@
+<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>
diff --git a/src/lib/components/blog/post_reply.svelte b/src/lib/components/blog/post_reply.svelte
new file mode 100644
index 0000000..4d3c0be
--- /dev/null
+++ b/src/lib/components/blog/post_reply.svelte
@@ -0,0 +1,17 @@
+<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:&nbsp;</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>
diff --git a/src/lib/components/blog/post_status.svelte b/src/lib/components/blog/post_status.svelte
new file mode 100644
index 0000000..6665b95
--- /dev/null
+++ b/src/lib/components/blog/post_status.svelte
@@ -0,0 +1,35 @@
+<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>
diff --git a/src/lib/components/blog/post_toc.svelte b/src/lib/components/blog/post_toc.svelte
new file mode 100644
index 0000000..e2914bc
--- /dev/null
+++ b/src/lib/components/blog/post_toc.svelte
@@ -0,0 +1,81 @@
+<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'}"
+            role={`toc-link-${slug}`}
+            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>