chore: Remove unused routes, cleanup data loading

svelte-app/src/components/about/timeline.svelte

@@ -10,7 +10,6 @@
   import Hoverable from '$components/hoverable.svelte';
   import Icon from '$components/icon.svelte';
   import PortableText from '$components/portable-text/portable-text.svelte';
-  // import Tags from '$components/tags.svelte';
   import Tooltip from '$components/tooltip.svelte';
 
   import type { AuthorTimelineItem } from '$types';
@@ -111,9 +110,6 @@
                 easing: circInOut
               }}
             >
-              <!-- {#if item.skills}
-                <Tags model="project" data={item.skills} class="mt-4 select-none" />
-              {/if} -->
               <div class="-mb-5">
                 <PortableText text={item.body} />
               </div>

svelte-app/src/components/document/content/common/header.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
+  import { cubicInOut } from 'svelte/easing';
+  import { slide } from 'svelte/transition';
+
   import { formatDate, getReadingTime } from '$helpers/date';
   import { getTotalWords } from '$helpers/pt';
   import { currentLang, t } from '$i18n';
+  import { BASE_ANIMATION_DURATION } from '$lib/consts';
 
   import BulletPoint from '$components/bullet-point.svelte';
   import ArrowButton from '$components/controls/arrow-button.svelte';
   import Divider from '$components/divider.svelte';
-  import SummaryItems from '$components/document/content/common/summary/items.svelte';
+  import Summary from '$components/document/content/common/summary.svelte';
   import PostHeader from '$components/document/content/post/header.svelte';
   import ProjectHeader from '$components/document/content/project/header.svelte';
 
@@ -60,7 +64,15 @@
     </svelte:component>
   </div>
   {#if headings?.length && summaryExpanded}
-    <SummaryItems {headings} />
+    <div
+      class="relative my-6 border-t border-dark/50 px-4 pt-4 dark:border-light/50"
+      transition:slide={{
+        duration: BASE_ANIMATION_DURATION + headings.length * 10,
+        easing: cubicInOut
+      }}
+    >
+      <Summary {headings} />
+    </div>
   {/if}
   <Divider />
 </div>

svelte-app/src/components/document/content/common/summary.svelte

@@ -1,40 +1,19 @@
 <script lang="ts">
-  import Heading from '$components/document/content/common/summary_old/heading.svelte';
-  import Items from '$components/document/content/common/summary_old/items.svelte';
-
   import type { DocumentHeadings } from '$types';
 
-  export let headings: DocumentHeadings[],
-    expanded = false;
-
-  $: headingsExist = headings.length > 0;
+  export let headings: DocumentHeadings[];
 </script>
 
-<div class:expanded>
-  <Heading {headingsExist} on:toggle={() => (expanded = !expanded)} />
-  {#if expanded}
-    <Items {headings} {headingsExist} on:toggle={() => (expanded = !expanded)} />
-  {/if}
+<div class={$$props.class}>
+  {#each headings as heading}
+    <a
+      href={`#${heading.key}`}
+      class="focusOutline-sm block w-full select-none overflow-hidden text-ellipsis whitespace-nowrap rounded-sm py-2 text-base font-medium hover:text-accent-light dark:hover:text-accent-dark"
+    >
+      &bull;&nbsp;&nbsp;{heading.text}
+    </a>
+    {#if heading.children?.length}
+      <svelte:self headings={heading.children} class="ml-5" />
+    {/if}
+  {/each}
 </div>
-
-<style lang="scss">
-  div {
-    @apply rounded-sm border border-dark/40 bg-transparent transition-[background-color,border-color];
-
-    &:hover,
-    &.expanded {
-      @apply border-dark/60 bg-dark/[0.025];
-    }
-  }
-
-  :global(.dark) {
-    div {
-      @apply border-light/40;
-
-      &:hover,
-      &.expanded {
-        @apply border-light/60 bg-light/5;
-      }
-    }
-  }
-</style>

svelte-app/src/components/document/content/content.svelte

@@ -14,12 +14,11 @@
   export let data: PostDocument | ProjectDocument,
     model = data._type,
     headings: DocumentHeadings[] | undefined,
-    routeFetch: RouteFetch | undefined = undefined,
-    container: HTMLDivElement | undefined = undefined;
+    routeFetch: RouteFetch | undefined = undefined;
 </script>
 
 <Header {data} {headings} />
-<div class="mt-4 font-sans text-base" bind:this={container}>
+<div class="mt-4 font-sans text-base">
   {#if data.body}
     <PortableText text={data.body} {routeFetch} />
   {:else}

svelte-app/src/components/document/route.svelte

@@ -17,28 +17,26 @@
 
   export let data: ProjectDocument | PostDocument,
     model = data._type,
-    headings: DocumentHeadings[] | never[],
+    headings: DocumentHeadings[] | undefined,
     routeFetch: RouteFetch | undefined = undefined;
 
-  const allTags =
-    (((tags: NonNullable<typeof data>['tags'] | undefined) => {
-      if (!tags) {
-        return undefined;
-      }
-      return tags.reduce((acc, tag) => {
-        tag.title && acc.push(tag.title.toLowerCase());
-        return acc;
-      }, [] as string[]);
-    })(data?.tags)?.join(', ') as string) + ', ' || '';
-
   onMount(() => {
     scrollTo($page?.url);
   });
 
+  $: allTags =
+    (data?.tags || [])
+      .reduce(
+        (acc, tag) => (tag.title && acc.push(tag.title.toLowerCase()), acc),
+        [] as string[]
+      )
+      ?.join(', ') + ', ' || '';
   $: $page?.url && scrollTo($page.url);
   $: pageTitle = `kio.dev${data?.title ? ` | ${data.title}` : ''}`;
   $: pageDescription = data?.desc
-    ? data.desc
+    ? data.desc.length > 160
+      ? `${data.desc.slice(0, 160 - 3)}...`
+      : data.desc
     : $t(`A ${model === 'post' ? 'post' : 'project'} on kio.dev`);
 </script>
 
@@ -52,7 +50,7 @@
   <meta
     name="keywords"
     content="{allTags}blog, {model === 'post'
-      ? 'post, blog post'
+      ? 'blog post'
       : 'project'}, kio.dev, kio, kiosion"
   />
   <meta name="author" content="Kio" />
@@ -68,8 +66,6 @@
   <meta property="twitter:url" content={$page.url.href} />
   <meta property="twitter:title" content={pageTitle} />
   <meta property="twitter:description" content={pageDescription} />
-
-  <slot name="meta" />
 </svelte:head>
 
 <ContentWrapper>

svelte-app/src/components/link.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  import { linkTo } from '$i18n';
+
+  import Hoverable from '$components/hoverable.svelte';
+
+  let hovered: boolean;
+
+  const dispatch = createEventDispatcher(),
+    type = $$props.href ? 'a' : 'button';
+
+  $: link = $$props.href
+    ? $$props.href.startsWith('/')
+      ? $linkTo($$props.href)
+      : $$props.href
+    : undefined;
+</script>
+
+<Hoverable bind:hovered>
+  <svelte:element
+    this={type}
+    href={link}
+    target={$$props.newtab ? '_blank' : undefined}
+    rel={$$props.newtab ? 'noopener noreferrer' : undefined}
+    class="focusOutline-sm rounded-sm from-accent-light text-dark/90 underline decoration-accent-light underline-offset-[2px] dark:text-light dark:decoration-accent-dark {hovered
+      ? 'decoration-[3px]'
+      : 'decoration-2'}"
+    tabindex="0"
+    on:click={() => dispatch('click')}
+    on:keydown={(e) => {
+      if (e.key === 'Enter') {
+        dispatch('click');
+      }
+    }}
+    role={type === 'a' ? 'link' : 'button'}
+    aria-label={$$props['aria-label']}
+    {...$$restProps}
+  >
+    <slot />
+  </svelte:element>
+</Hoverable>

svelte-app/src/components/portable-text/serializers/custom-link.svelte

@@ -1,29 +1,11 @@
 <script lang="ts">
-  import { linkTo } from '$i18n';
-
-  import Hoverable from '$components/hoverable.svelte';
+  import Link from '$components/link.svelte';
 
   import type { MarkComponentProps } from '@portabletext/svelte';
 
   export let portableText: MarkComponentProps;
 
-  let hovered: boolean;
-
   $: ({ value, plainTextContent } = portableText);
-  $: href = value.href as string;
-  $: newtab = !!value.newtab;
 </script>
 
-<Hoverable bind:hovered>
-  <a
-    href={href ? $linkTo(href) : '#'}
-    target={newtab ? '_blank' : undefined}
-    rel={newtab ? 'noopener noreferrer' : ''}
-    class="focusOutline-sm rounded-sm from-accent-light text-dark/90 underline decoration-accent-light underline-offset-[2px] dark:text-light dark:decoration-accent-dark {hovered
-      ? 'decoration-[3px]'
-      : 'decoration-2'}"
-    tabindex="0"
-  >
-    {plainTextContent}
-  </a>
-</Hoverable>
+<Link href={value.href} newtab={!!value.newtab}>{plainTextContent}</Link>