chore: Lots of misc. cleanup

svelte-app/src/components/bullet-point.svelte

@@ -1,12 +1,12 @@
-<div class={$$props.class || ''} />
+<span />
 
 <style lang="scss">
-  div {
-    @apply mx-2 block h-1 w-1 flex-shrink-0 rounded-full bg-dark/80 transition-all duration-150;
+  span {
+    @apply mx-2 block h-1 w-1 flex-shrink-0 rounded-full bg-dark/80 transition-colors;
   }
 
   :global(.dark) {
-    div {
+    span {
       @apply bg-light/80;
     }
   }

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

@@ -1,14 +1,14 @@
 <script lang="ts">
   import Divider from '$components/divider.svelte';
-  import Footer from '$components/document/content/common/footer.svelte';
-  import Header from '$components/document/content/common/header.svelte';
+  import Footer from '$components/document/content/footer.svelte';
+  import Header from '$components/document/content/header.svelte';
   import EmptyContent from '$components/empty-content.svelte';
   import PortableText from '$components/portable-text/portable-text.svelte';
 
   import type { PostDocument, ProjectDocument, ProjectImage, RouteFetch } from '$types';
 
   export let data: PostDocument | ProjectDocument,
-    images: ProjectImage[] | undefined,
+    images: ProjectImage[] | undefined = undefined,
     model = data._type,
     routeFetch: RouteFetch | undefined = undefined;
 </script>

svelte-app/src/components/document/content/common/footer.svelte → svelte-app/src/components/document/content/footer.svelte

@@ -17,9 +17,9 @@
   <div>
     <h1 class="my-4 font-display text-2xl font-bold">{$t('Links')}</h1>
     <span class="flex items-center justify-start gap-2 text-base">
-      <Icon icon="ExternalLink" class="mb-0.5" inline />
+      <Icon icon="GitCommit" class="mb-0.5" inline />
       <Link href={data.github}>
-        {'github/' + data.github.split('github.com/')?.[1]}
+        {'github.com/' + data.github.split('github.com/')?.[1]}
       </Link>
     </span>
   </div>

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

@@ -15,7 +15,7 @@
   import type { PostDocument, ProjectDocument, ProjectImage, PTBlock } from '$types';
 
   export let data: PostDocument | ProjectDocument,
-    images: ProjectImage[] | undefined,
+    images: ProjectImage[] | undefined = undefined,
     model = data._type;
 
   const readingTime = getReadingTime(getTotalWords((data?.body ?? []) as PTBlock[]));
@@ -39,8 +39,14 @@
       </p>
       <BulletPoint />
       <p class="cursor-default font-mono text-base">
-        {$t('{views} views', { views: $parseViews(data.views) })}
+        {$t('{views} views', { views: $parseViews((data.views ?? 0) + 1) })}
       </p>
+      {#if data._type === 'project' && data.githubStars !== undefined && data.githubStars > 0}
+        <BulletPoint />
+        <p class="cursor-default font-mono text-base">
+          {$t('{stars} stars', { stars: $parseViews(data.githubStars) })}
+        </p>
+      {/if}
     </div>
     <ArrowButton
       class="focusOutline-sm -mb-1 hidden flex-1 whitespace-nowrap rounded-sm text-right sm:block"
@@ -57,9 +63,14 @@
   </div>
   {#if data._type === 'project' && (data.tags?.length || data.github)}
     <Divider />
-    <div class="flex flex-row flex-wrap items-center justify-start gap-0.5 text-base">
+    <div
+      class="flex flex-row flex-wrap items-center justify-start gap-0.5 gap-y-3 text-base"
+    >
       {#if data._type === 'project' && data.tags?.length}
-        <div class="flex flex-row flex-wrap items-center justify-start gap-2">
+        <div
+          class="flex flex-row flex-wrap items-center justify-start gap-2"
+          aria-label={$t('Tags')}
+        >
           {#each data.tags as tag}
             <span
               class="cursor-default rounded-sm bg-dark/10 px-1.5 py-0.5 font-code text-base transition-colors dark:bg-light/10"
@@ -75,7 +86,7 @@
       {#if data._type === 'project' && data.github}
         <span class="font-mono">
           <Link href={data.github}>
-            {'github/' + data.github.split('github.com/')?.[1]}
+            {'github.com/' + data.github.split('github.com/')?.[1]}
           </Link>
         </span>
       {/if}

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

@@ -13,7 +13,7 @@
 
   export let data: ProjectDocument | PostDocument,
     model = data._type,
-    images: ProjectImage[] | undefined;
+    images: ProjectImage[] | undefined = undefined;
 
   let pageUnsubscriber: Unsubscriber;
 

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

@@ -1,9 +1,20 @@
 <script lang="ts">
-  import IconHeader from '$components/headings/icon-header.svelte';
+  import { t } from '$i18n';
 
-  export let text = 'Hm, it seems empty around here...';
+  import Icon from '$components/icon.svelte';
 </script>
 
-<div class="my-8" data-test-id="error-text">
-  <IconHeader icon={'Downasaur'} {text} />
+<div data-test-id="error-text">
+  <Icon icon="Downasaur" />
+  <p>{$t('Hm, it seems empty around here...')}</p>
 </div>
+
+<style lang="scss">
+  div {
+    @apply my-8 mb-2 mt-8 flex h-fit w-full select-none flex-row items-center justify-start gap-3;
+  }
+
+  p {
+    @apply font-code text-lg font-bold;
+  }
+</style>

svelte-app/src/components/footer.svelte

@@ -5,6 +5,8 @@
   import Divider from '$components/divider.svelte';
   import Icon from '$components/icon.svelte';
 
+  import Tooltip from './tooltip.svelte';
+
   import type { SiteConfig } from '$types';
 
   export let config: SiteConfig;
@@ -34,15 +36,17 @@
     {/if}
     {#if APP_VERSION?.length}
       <div class="version">
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://github.com/kiosion/kio.dev/commit/{APP_VERSION}"
-          aria-label={$t('View latest commit on GitHub')}
-        >
-          <Icon icon="GitCommit" inline />
-          {APP_VERSION.slice(0, 6)}
-        </a>
+        <Tooltip text={$t('View latest commit on GitHub')} position="top" delay={400}>
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://github.com/kiosion/kio.dev/commit/{APP_VERSION}"
+            aria-label={$t('View latest commit on GitHub')}
+          >
+            <Icon icon="GitCommit" inline />
+            {APP_VERSION.slice(0, 6)}
+          </a>
+        </Tooltip>
       </div>
     {/if}
   </div>

svelte-app/src/components/headings/headed-block.svelte

@@ -2,11 +2,9 @@
   export let heading: string;
 </script>
 
-<section class={$$props.class || undefined}>
+<section>
   <h1>{heading}</h1>
-  <div>
-    <slot />
-  </div>
+  <div><slot /></div>
 </section>
 
 <style lang="scss">