From 24648e8e4399de0d346b09a49a8780344cb2347b Mon Sep 17 00:00:00 2001
From: kiosion <hi@kio.dev>
Date: Fri, 9 Feb 2024 08:47:47 -0500
Subject: [PATCH] chore: Clean up utils, helpers, PT serializer props

---
 svelte-app/src/components/code-block.svelte   |  2 +-
 .../controls/language-toggle.svelte           |  2 +-
 .../components/controls/theme-toggle.svelte   |  2 +-
 .../components/document/content/footer.svelte |  4 +-
 .../components/document/content/header.svelte | 10 +--
 .../src/components/document/route.svelte      |  4 +-
 .../src/components/empty-content.svelte       |  2 +-
 svelte-app/src/components/footer.svelte       |  2 +-
 svelte-app/src/components/header.svelte       |  2 +-
 svelte-app/src/components/icon.svelte         |  2 +-
 svelte-app/src/components/images/image.svelte |  2 +-
 svelte-app/src/components/link.svelte         |  2 +-
 .../src/components/lists/list-item.svelte     | 12 ++--
 .../src/components/lists/year-list.svelte     |  2 +-
 .../src/components/nav/base-link.svelte       |  2 +-
 .../src/components/nav/header-link.svelte     |  2 +-
 .../components/portable-text/footnote.svelte  |  2 +-
 .../portable-text/portable-text.svelte        |  4 +-
 .../serializers/custom-highlight.svelte       |  8 +++
 .../serializers/custom-paragraph.svelte       |  8 +++
 .../serializers/custom-quote.svelte           |  8 +++
 .../portable-text/serializers/divider.svelte  |  6 ++
 .../serializers/list-item.svelte              |  8 +++
 .../serializers/null-mark.svelte              |  8 +++
 .../portable-text/serializers/ol-item.svelte  |  8 +++
 .../serializers/ol-wrapper.svelte             |  8 +++
 .../serializers/ul-wrapper.svelte             |  8 +++
 svelte-app/src/lib/data.ts                    | 21 ++++++
 svelte-app/src/lib/date.ts                    | 63 +++++++++++++++++-
 svelte-app/src/lib/helpers/date.ts            | 64 -------------------
 svelte-app/src/lib/helpers/emoji.ts           | 17 -----
 svelte-app/src/lib/helpers/scrollTo.ts        | 19 ------
 svelte-app/src/lib/{helpers => }/i18n.ts      |  0
 .../src/lib/{helpers => }/navigation.ts       | 25 +++++++-
 .../src/lib/{helpers => }/responsive.ts       |  0
 .../src/lib/{helpers/image.ts => sanity.ts}   |  0
 svelte-app/src/lib/store.ts                   |  2 +-
 svelte-app/src/lib/try-fetch.ts               | 21 ------
 svelte-app/src/lib/utils.ts                   | 40 ++++++++++++
 svelte-app/src/lib/views.ts                   | 21 ------
 svelte-app/src/routes/+error.svelte           |  2 +-
 svelte-app/src/routes/+layout.svelte          |  2 +-
 .../src/routes/[[lang=lang]]/+page.svelte     |  4 +-
 .../routes/[[lang=lang]]/blog/+page.svelte    |  4 +-
 .../src/routes/[[lang=lang]]/etc/+page.svelte |  4 +-
 .../routes/[[lang=lang]]/work/+page.svelte    |  4 +-
 .../routes/[[lang=lang]]/work/[slug]/+page.ts |  2 +-
 svelte-app/svelte.config.js                   | 11 ++--
 svelte-app/tests/unit/i18n.test.ts            |  2 +-
 svelte-app/tsconfig.json                      | 20 ------
 50 files changed, 265 insertions(+), 213 deletions(-)
 delete mode 100644 svelte-app/src/lib/helpers/date.ts
 delete mode 100644 svelte-app/src/lib/helpers/emoji.ts
 delete mode 100644 svelte-app/src/lib/helpers/scrollTo.ts
 rename svelte-app/src/lib/{helpers => }/i18n.ts (100%)
 rename svelte-app/src/lib/{helpers => }/navigation.ts (51%)
 rename svelte-app/src/lib/{helpers => }/responsive.ts (100%)
 rename svelte-app/src/lib/{helpers/image.ts => sanity.ts} (100%)
 delete mode 100644 svelte-app/src/lib/try-fetch.ts
 create mode 100644 svelte-app/src/lib/utils.ts
 delete mode 100644 svelte-app/src/lib/views.ts

diff --git a/svelte-app/src/components/code-block.svelte b/svelte-app/src/components/code-block.svelte
index 145e46c89..0f36dd3a6 100644
--- a/svelte-app/src/components/code-block.svelte
+++ b/svelte-app/src/components/code-block.svelte
@@ -2,8 +2,8 @@
   import { onDestroy, onMount } from 'svelte';
 
   import { browser } from '$app/environment';
-  import { t } from '$i18n';
   import { BASE_ANIMATION_DURATION } from '$lib/consts';
+  import { t } from '$lib/i18n';
   import Settings from '$lib/settings';
 
   import { genericAsyncImport, getLangType } from '$components/code-block/imports';
diff --git a/svelte-app/src/components/controls/language-toggle.svelte b/svelte-app/src/components/controls/language-toggle.svelte
index 5a3e42690..6109e247c 100644
--- a/svelte-app/src/components/controls/language-toggle.svelte
+++ b/svelte-app/src/components/controls/language-toggle.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
-  import { currentLang, linkTo, t } from '$i18n';
   import { APP_LANGS } from '$lib/consts';
+  import { currentLang, linkTo, t } from '$lib/i18n';
 
   import Hoverable from '$components/hoverable.svelte';
   import Icon from '$components/icon.svelte';
diff --git a/svelte-app/src/components/controls/theme-toggle.svelte b/svelte-app/src/components/controls/theme-toggle.svelte
index ff0fc2fbb..acbdf978c 100644
--- a/svelte-app/src/components/controls/theme-toggle.svelte
+++ b/svelte-app/src/components/controls/theme-toggle.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { t } from '$i18n';
   import { APP_THEMES } from '$lib/consts';
+  import { t } from '$lib/i18n';
   import Settings from '$lib/settings';
 
   import Hoverable from '$components/hoverable.svelte';
diff --git a/svelte-app/src/components/document/content/footer.svelte b/svelte-app/src/components/document/content/footer.svelte
index a5173c228..7c190e26a 100644
--- a/svelte-app/src/components/document/content/footer.svelte
+++ b/svelte-app/src/components/document/content/footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { linkTo, t } from '$i18n';
-  import { isMobile } from '$lib/helpers/responsive';
+  import { linkTo, t } from '$lib/i18n';
+  import { isMobile } from '$lib/responsive';
 
   import ArrowButton from '$components/controls/arrow-button.svelte';
   import Divider from '$components/divider.svelte';
diff --git a/svelte-app/src/components/document/content/header.svelte b/svelte-app/src/components/document/content/header.svelte
index dcbac20b0..6b3f42afe 100644
--- a/svelte-app/src/components/document/content/header.svelte
+++ b/svelte-app/src/components/document/content/header.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { formatDate } from '$helpers/date';
-  import { currentLang, linkTo, t } from '$i18n';
-  import { isMobile } from '$lib/helpers/responsive';
-  import { parseViews } from '$lib/views';
+  import { formatDate } from '$lib/date';
+  import { linkTo, t } from '$lib/i18n';
+  import { isMobile } from '$lib/responsive';
+  import { parseViews } from '$lib/utils';
 
   import BulletPoint from '$components/bullet-point.svelte';
   import ArrowButton from '$components/controls/arrow-button.svelte';
@@ -28,7 +28,7 @@
       class="flex flex-row flex-wrap items-center justify-start gap-y-2 transition-[color]"
     >
       <p class="cursor-default font-mono text-base">
-        {formatDate(data.date, 'full', $currentLang) ?? $t('Unknown date')}
+        {$formatDate(data.date, 'full') ?? $t('Unknown date')}
       </p>
       <BulletPoint />
       <p class="cursor-default font-mono text-base">
diff --git a/svelte-app/src/components/document/route.svelte b/svelte-app/src/components/document/route.svelte
index 5b3b78f8a..bdb9ace6b 100644
--- a/svelte-app/src/components/document/route.svelte
+++ b/svelte-app/src/components/document/route.svelte
@@ -2,9 +2,9 @@
   import { onDestroy, onMount } from 'svelte';
 
   import { page } from '$app/stores';
-  import scrollTo from '$helpers/scrollTo';
-  import { t } from '$i18n';
   import { BASE_PAGE_TITLE } from '$lib/consts';
+  import { t } from '$lib/i18n';
+  import { scrollTo } from '$lib/navigation';
 
   import Content from '$components/document/content/content.svelte';
 
diff --git a/svelte-app/src/components/empty-content.svelte b/svelte-app/src/components/empty-content.svelte
index 62ccfeb22..de5e25674 100644
--- a/svelte-app/src/components/empty-content.svelte
+++ b/svelte-app/src/components/empty-content.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { t } from '$i18n';
+  import { t } from '$lib/i18n';
 
   import Icon from '$components/icon.svelte';
 </script>
diff --git a/svelte-app/src/components/footer.svelte b/svelte-app/src/components/footer.svelte
index c2993f199..493586707 100644
--- a/svelte-app/src/components/footer.svelte
+++ b/svelte-app/src/components/footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { t } from '$i18n';
   import { APP_VERSION } from '$lib/env';
+  import { t } from '$lib/i18n';
 
   import Divider from '$components/divider.svelte';
   import Icon from '$components/icon.svelte';
diff --git a/svelte-app/src/components/header.svelte b/svelte-app/src/components/header.svelte
index 4a22545e3..c8e61ad57 100644
--- a/svelte-app/src/components/header.svelte
+++ b/svelte-app/src/components/header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { linkTo } from '$i18n';
   import { NAV_LINKS } from '$lib/consts';
+  import { linkTo } from '$lib/i18n';
 
   import LanguageControls from '$components/controls/language-toggle.svelte';
   import ThemeToggle from '$components/controls/theme-toggle.svelte';
diff --git a/svelte-app/src/components/icon.svelte b/svelte-app/src/components/icon.svelte
index dcbb79a07..f837a077f 100644
--- a/svelte-app/src/components/icon.svelte
+++ b/svelte-app/src/components/icon.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { t } from '$i18n';
+  import { t } from '$lib/i18n';
   import BaseIconWrapper from '$lib/icons/base-icon-wrapper.svelte';
   import {
     Alert,
diff --git a/svelte-app/src/components/images/image.svelte b/svelte-app/src/components/images/image.svelte
index 494493612..17f2f8ace 100644
--- a/svelte-app/src/components/images/image.svelte
+++ b/svelte-app/src/components/images/image.svelte
@@ -3,7 +3,7 @@
   import { crossfade, fade } from 'svelte/transition';
 
   import { BASE_ANIMATION_DURATION } from '$lib/consts';
-  import { buildImageUrl, getCrop } from '$lib/helpers/image';
+  import { buildImageUrl, getCrop } from '$lib/sanity';
 
   import ImageModal from '$components/images/image-modal.svelte';
   import Spinner from '$components/loading/spinner.svelte';
diff --git a/svelte-app/src/components/link.svelte b/svelte-app/src/components/link.svelte
index d80a4af74..609b09da7 100644
--- a/svelte-app/src/components/link.svelte
+++ b/svelte-app/src/components/link.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
 
-  import { linkTo, t } from '$i18n';
+  import { linkTo, t } from '$lib/i18n';
 
   import Hoverable from '$components/hoverable.svelte';
   import Tooltip from '$components/tooltip.svelte';
diff --git a/svelte-app/src/components/lists/list-item.svelte b/svelte-app/src/components/lists/list-item.svelte
index 61c58d3d8..965260e56 100644
--- a/svelte-app/src/components/lists/list-item.svelte
+++ b/svelte-app/src/components/lists/list-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { currentLang, linkTo, t } from '$i18n';
-  import { formatDate } from '$lib/helpers/date';
-  import { parseViews } from '$lib/views';
+  import { formatDate } from '$lib/date';
+  import { linkTo, t } from '$lib/i18n';
+  import { parseViews } from '$lib/utils';
 
   import Hoverable from '$components/hoverable.svelte';
 
@@ -30,11 +30,7 @@
         : 'mb-2'}"
     >
       <p aria-label={$t('Date posted')}>
-        {formatDate(
-          document.date || document._createdAt,
-          small ? 'med' : 'short',
-          $currentLang
-        )}
+        {$formatDate(document.date || document._createdAt, small ? 'med' : 'short')}
       </p>
       {#if document.tags?.length}
         <span
diff --git a/svelte-app/src/components/lists/year-list.svelte b/svelte-app/src/components/lists/year-list.svelte
index 1b0228c7b..d13011ae4 100644
--- a/svelte-app/src/components/lists/year-list.svelte
+++ b/svelte-app/src/components/lists/year-list.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { sortDocumentsByYear } from '$helpers/date';
+  import { sortDocumentsByYear } from '$lib/date';
 
   import ListItem from '$components/lists/list-item.svelte';
 
diff --git a/svelte-app/src/components/nav/base-link.svelte b/svelte-app/src/components/nav/base-link.svelte
index 86079e89b..d834e420d 100644
--- a/svelte-app/src/components/nav/base-link.svelte
+++ b/svelte-app/src/components/nav/base-link.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
 
-  import { linkTo, t } from '$i18n';
+  import { linkTo, t } from '$lib/i18n';
 
   import Hoverable from '$components/hoverable.svelte';
 
diff --git a/svelte-app/src/components/nav/header-link.svelte b/svelte-app/src/components/nav/header-link.svelte
index 9790d43eb..2b0689072 100644
--- a/svelte-app/src/components/nav/header-link.svelte
+++ b/svelte-app/src/components/nav/header-link.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { navigating, page } from '$app/stores';
-  import { isLocalized, linkTo, t } from '$i18n';
+  import { isLocalized, linkTo, t } from '$lib/i18n';
 
   import BaseLink from '$components/nav/base-link.svelte';
 
diff --git a/svelte-app/src/components/portable-text/footnote.svelte b/svelte-app/src/components/portable-text/footnote.svelte
index 240eb0a97..57a8ce3f2 100644
--- a/svelte-app/src/components/portable-text/footnote.svelte
+++ b/svelte-app/src/components/portable-text/footnote.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { t } from '$lib/helpers/i18n';
+  import { t } from '$lib/i18n';
 
   import Tooltip from '$components/tooltip.svelte';
 
diff --git a/svelte-app/src/components/portable-text/portable-text.svelte b/svelte-app/src/components/portable-text/portable-text.svelte
index ca3bcf62b..93e7866e4 100644
--- a/svelte-app/src/components/portable-text/portable-text.svelte
+++ b/svelte-app/src/components/portable-text/portable-text.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { onMount } from 'svelte';
 
-  import { parseEmoji } from '$helpers/emoji';
-  import { t } from '$i18n';
+  import { t } from '$lib/i18n';
   import Logger from '$lib/logger';
+  import { parseEmoji } from '$lib/utils';
 
   import Icon from '$components/icon.svelte';
   import Footnote from '$components/portable-text/footnote.svelte';
diff --git a/svelte-app/src/components/portable-text/serializers/custom-highlight.svelte b/svelte-app/src/components/portable-text/serializers/custom-highlight.svelte
index 318ba5d11..81b37d849 100644
--- a/svelte-app/src/components/portable-text/serializers/custom-highlight.svelte
+++ b/svelte-app/src/components/portable-text/serializers/custom-highlight.svelte
@@ -1,3 +1,11 @@
+<script lang="ts">
+  import type { MarkComponentProps } from '@portabletext/svelte';
+
+  export let portableText: MarkComponentProps;
+
+  $: ({ value: _value } = portableText);
+</script>
+
 <span class="relative p-0.5">
   <span class="relative z-[1] text-light transition-colors dark:text-dark">
     <slot />
diff --git a/svelte-app/src/components/portable-text/serializers/custom-paragraph.svelte b/svelte-app/src/components/portable-text/serializers/custom-paragraph.svelte
index 8f72b2fc4..328f49e03 100644
--- a/svelte-app/src/components/portable-text/serializers/custom-paragraph.svelte
+++ b/svelte-app/src/components/portable-text/serializers/custom-paragraph.svelte
@@ -1,3 +1,11 @@
+<script lang="ts">
+  import type { BlockComponentProps } from '@portabletext/svelte';
+
+  export let portableText: BlockComponentProps;
+
+  $: ({ value: _value } = portableText);
+</script>
+
 <p><slot /></p>
 
 <style lang="scss">
diff --git a/svelte-app/src/components/portable-text/serializers/custom-quote.svelte b/svelte-app/src/components/portable-text/serializers/custom-quote.svelte
index 2be6aba1f..36a46bbec 100644
--- a/svelte-app/src/components/portable-text/serializers/custom-quote.svelte
+++ b/svelte-app/src/components/portable-text/serializers/custom-quote.svelte
@@ -1,3 +1,11 @@
+<script lang="ts">
+  import type { BlockComponentProps } from '@portabletext/svelte';
+
+  export let portableText: BlockComponentProps;
+
+  $: ({ value: _value } = portableText);
+</script>
+
 <div
   class="flex w-full flex-1 items-stretch justify-start transition-[background-color,color]"
 >
diff --git a/svelte-app/src/components/portable-text/serializers/divider.svelte b/svelte-app/src/components/portable-text/serializers/divider.svelte
index 80cb9df70..4cd42d919 100644
--- a/svelte-app/src/components/portable-text/serializers/divider.svelte
+++ b/svelte-app/src/components/portable-text/serializers/divider.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
   import Divider from '$components/divider.svelte';
+
+  import type { CustomBlockComponentProps } from '@portabletext/svelte';
+
+  export let portableText: CustomBlockComponentProps;
+
+  $: ({ value: _value } = portableText);
 </script>
 
 <Divider />
diff --git a/svelte-app/src/components/portable-text/serializers/list-item.svelte b/svelte-app/src/components/portable-text/serializers/list-item.svelte
index b80337d64..7fcf1dadd 100644
--- a/svelte-app/src/components/portable-text/serializers/list-item.svelte
+++ b/svelte-app/src/components/portable-text/serializers/list-item.svelte
@@ -1 +1,9 @@
+<script lang="ts">
+  import type { ListItemComponentProps } from '@portabletext/svelte';
+
+  export let portableText: ListItemComponentProps;
+
+  $: ({ value: _value } = portableText);
+</script>
+
 <li><slot /></li>
diff --git a/svelte-app/src/components/portable-text/serializers/null-mark.svelte b/svelte-app/src/components/portable-text/serializers/null-mark.svelte
index 4fa864ce7..4c802f12d 100644
--- a/svelte-app/src/components/portable-text/serializers/null-mark.svelte
+++ b/svelte-app/src/components/portable-text/serializers/null-mark.svelte
@@ -1 +1,9 @@
+<script lang="ts">
+  import type { MarkComponentProps } from '@portabletext/svelte';
+
+  export let portableText: MarkComponentProps;
+
+  $: ({ value: _value } = portableText);
+</script>
+
 <slot />
diff --git a/svelte-app/src/components/portable-text/serializers/ol-item.svelte b/svelte-app/src/components/portable-text/serializers/ol-item.svelte
index b80337d64..7fcf1dadd 100644
--- a/svelte-app/src/components/portable-text/serializers/ol-item.svelte
+++ b/svelte-app/src/components/portable-text/serializers/ol-item.svelte
@@ -1 +1,9 @@
+<script lang="ts">
+  import type { ListItemComponentProps } from '@portabletext/svelte';
+
+  export let portableText: ListItemComponentProps;
+
+  $: ({ value: _value } = portableText);
+</script>
+
 <li><slot /></li>
diff --git a/svelte-app/src/components/portable-text/serializers/ol-wrapper.svelte b/svelte-app/src/components/portable-text/serializers/ol-wrapper.svelte
index 46007f242..108b47508 100644
--- a/svelte-app/src/components/portable-text/serializers/ol-wrapper.svelte
+++ b/svelte-app/src/components/portable-text/serializers/ol-wrapper.svelte
@@ -1,3 +1,11 @@
+<script lang="ts">
+  import type { ListComponentProps } from '@portabletext/svelte';
+
+  export let portableText: ListComponentProps;
+
+  $: ({ value: _value } = portableText);
+</script>
+
 <ol class="pt-ol"><slot /></ol>
 
 <style lang="scss">
diff --git a/svelte-app/src/components/portable-text/serializers/ul-wrapper.svelte b/svelte-app/src/components/portable-text/serializers/ul-wrapper.svelte
index 816056138..ea3601b3a 100644
--- a/svelte-app/src/components/portable-text/serializers/ul-wrapper.svelte
+++ b/svelte-app/src/components/portable-text/serializers/ul-wrapper.svelte
@@ -1,3 +1,11 @@
+<script lang="ts">
+  import type { ListComponentProps } from '@portabletext/svelte';
+
+  export let portableText: ListComponentProps;
+
+  $: ({ value: _value } = portableText);
+</script>
+
 <ul class="pt-ul"><slot /></ul>
 
 <style lang="scss">
diff --git a/svelte-app/src/lib/data.ts b/svelte-app/src/lib/data.ts
index 2616c6df2..c29112137 100644
--- a/svelte-app/src/lib/data.ts
+++ b/svelte-app/src/lib/data.ts
@@ -1,3 +1,4 @@
+import { browser } from '$app/environment';
 import { ERRORS } from '$lib/consts';
 import Logger from '$lib/logger';
 
@@ -46,6 +47,26 @@ export const handleLoadError = <T>(data?: T | Error): Clean<T> => {
   return data as Clean<T>;
 };
 
+/*
+ * Since Netlify has a timeout of 10s for any SSR function, we need to wrap
+ * all SSR'd fetches in our own timeout block to abort and have the browser
+ * handle fetching instead
+ */
+export const tryFetch = <T>(promise: Promise<T>, ms = 8000): Promise<T> => {
+  if (browser) {
+    return promise;
+  }
+
+  const timeout = new Promise<T>((resolve, reject) => {
+    const timer = setTimeout(() => {
+      clearTimeout(timer);
+      reject(new Error('Fetch timed out in SSR'));
+    }, ms);
+  });
+
+  return Promise.race([timeout, promise]);
+};
+
 export const fetchRepoStats = async (fetch: typeof window.fetch, githubUrl?: string) => {
   try {
     const repo = githubUrl?.split('github.com/')?.[1];
diff --git a/svelte-app/src/lib/date.ts b/svelte-app/src/lib/date.ts
index 458702f78..86334beb7 100644
--- a/svelte-app/src/lib/date.ts
+++ b/svelte-app/src/lib/date.ts
@@ -1,7 +1,38 @@
 /* eslint-disable func-call-spacing */
 import { derived } from 'svelte/store';
 
-import { currentLang, t } from '$i18n';
+import { currentLang, t } from '$lib/i18n';
+
+export const formatDate = derived(
+  [currentLang],
+  ([currentLang]) =>
+    (dateStr: string, format: 'full' | 'med' | 'short' = 'full') => {
+      const date = new Date(dateStr);
+
+      switch (format) {
+        case 'full':
+          return new Intl.DateTimeFormat(currentLang, {
+            month: 'long',
+            day: 'numeric',
+            year: 'numeric',
+            timeZone: 'UTC'
+          }).format(date);
+        case 'short':
+          return new Intl.DateTimeFormat(currentLang, {
+            month: 'short',
+            day: 'numeric',
+            timeZone: 'UTC'
+          }).format(date);
+        case 'med':
+          return new Intl.DateTimeFormat(currentLang, {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+            timeZone: 'UTC'
+          }).format(date);
+      }
+    }
+);
 
 export const displayRange = derived([currentLang, t], ([currentLang, t]) => {
   return (start: string, end: string | undefined) => {
@@ -77,3 +108,33 @@ export const displayMonthDuration = derived<
     return `${yearString}${yearString && monthString ? ' ' : ''}${monthString}`;
   };
 });
+
+export const sortDocumentsByYear = <T extends { date?: string; _createdAt: string }>(
+  documents: T[]
+) => {
+  const grouped =
+    documents.reduce(
+      (acc, doc) => {
+        const year = new Date(doc.date || doc._createdAt).getFullYear();
+
+        !acc[year] && (acc[year] = []);
+        acc[year].push(doc);
+
+        return acc;
+      },
+      {} as Record<string, NonNullable<T[]>>
+    ) || {};
+
+  return Object.keys(grouped)
+    .sort((a, b) => parseInt(b, 10) - parseInt(a, 10))
+    .map((group) => {
+      return {
+        year: parseInt(group, 10),
+        items: grouped[group].sort((a, b) => {
+          const aDate = new Date(a.date || a._createdAt);
+          const bDate = new Date(b.date || b._createdAt);
+          return bDate.getTime() - aDate.getTime();
+        })
+      };
+    });
+};
diff --git a/svelte-app/src/lib/helpers/date.ts b/svelte-app/src/lib/helpers/date.ts
deleted file mode 100644
index 2a60c3d71..000000000
--- a/svelte-app/src/lib/helpers/date.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { get } from 'svelte/store';
-
-import { currentLang } from '$i18n';
-
-export const formatDate = (
-  dateStr: string,
-  format: 'full' | 'med' | 'short' = 'full',
-  lang: string = get(currentLang) || 'en'
-) => {
-  const date = new Date(dateStr);
-
-  switch (format) {
-    case 'full':
-      return new Intl.DateTimeFormat(lang, {
-        month: 'long',
-        day: 'numeric',
-        year: 'numeric',
-        timeZone: 'UTC'
-      }).format(date);
-    case 'short':
-      return new Intl.DateTimeFormat(lang, {
-        month: 'short',
-        day: 'numeric',
-        timeZone: 'UTC'
-      }).format(date);
-    case 'med':
-      return new Intl.DateTimeFormat(lang, {
-        month: 'short',
-        day: 'numeric',
-        year: 'numeric',
-        timeZone: 'UTC'
-      }).format(date);
-  }
-};
-
-export const sortDocumentsByYear = <T extends { date?: string; _createdAt: string }>(
-  documents: T[]
-) => {
-  const grouped =
-    documents.reduce(
-      (acc, doc) => {
-        const year = new Date(doc.date || doc._createdAt).getFullYear();
-
-        !acc[year] && (acc[year] = []);
-        acc[year].push(doc);
-
-        return acc;
-      },
-      {} as Record<string, NonNullable<T[]>>
-    ) || {};
-
-  return Object.keys(grouped)
-    .sort((a, b) => parseInt(b, 10) - parseInt(a, 10))
-    .map((group) => {
-      return {
-        year: parseInt(group, 10),
-        items: grouped[group].sort((a, b) => {
-          const aDate = new Date(a.date || a._createdAt);
-          const bDate = new Date(b.date || b._createdAt);
-          return bDate.getTime() - aDate.getTime();
-        })
-      };
-    });
-};
diff --git a/svelte-app/src/lib/helpers/emoji.ts b/svelte-app/src/lib/helpers/emoji.ts
deleted file mode 100644
index 711727c57..000000000
--- a/svelte-app/src/lib/helpers/emoji.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import twemoji from 'twemoji';
-
-export const parseEmoji = (element: HTMLElement) => {
-  element && twemoji.parse(element),
-    element?.querySelectorAll('img.emoji')?.forEach((emoji: Element) => {
-      if (!(emoji as HTMLElement)?.style) {
-        return;
-      }
-      (emoji as HTMLElement).setAttribute(
-        'style',
-        'display: inline-block;width: 1.1em;height: 1.1em;margin-right: 0.05em;vertical-align: -0.1em;'.replace(
-          /\s+/g,
-          ' '
-        )
-      );
-    });
-};
diff --git a/svelte-app/src/lib/helpers/scrollTo.ts b/svelte-app/src/lib/helpers/scrollTo.ts
deleted file mode 100644
index bb1feec38..000000000
--- a/svelte-app/src/lib/helpers/scrollTo.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { Page as PageStore } from '@sveltejs/kit';
-
-export default (url: PageStore['url'], scrollParams: ScrollIntoViewOptions = {}) => {
-  const { hash } = url || { hash: '' };
-
-  if (!hash.length) {
-    return;
-  }
-
-  const target =
-    document.getElementById(hash.slice(1)) ||
-    document.getElementById(`heading-${hash.slice(1)}`);
-
-  target?.scrollIntoView({
-    behavior: 'smooth',
-    block: 'center',
-    ...scrollParams
-  });
-};
diff --git a/svelte-app/src/lib/helpers/i18n.ts b/svelte-app/src/lib/i18n.ts
similarity index 100%
rename from svelte-app/src/lib/helpers/i18n.ts
rename to svelte-app/src/lib/i18n.ts
diff --git a/svelte-app/src/lib/helpers/navigation.ts b/svelte-app/src/lib/navigation.ts
similarity index 51%
rename from svelte-app/src/lib/helpers/navigation.ts
rename to svelte-app/src/lib/navigation.ts
index f14619478..ca6bb660d 100644
--- a/svelte-app/src/lib/helpers/navigation.ts
+++ b/svelte-app/src/lib/navigation.ts
@@ -1,8 +1,10 @@
 import { derived } from 'svelte/store';
 
 import { page } from '$app/stores';
-import { isLocalized, t } from '$i18n';
 import { APP_ROUTES, BASE_PAGE_TITLE } from '$lib/consts';
+import { isLocalized, t } from '$lib/i18n';
+
+import type { Page as PageStore } from '@sveltejs/kit';
 
 export const pageTitle = derived([isLocalized, t, page], (vals) => {
   const basePathname = vals[2]?.url?.pathname ?? '/',
@@ -15,3 +17,24 @@ export const pageTitle = derived([isLocalized, t, page], (vals) => {
     ? `${vals[1](route.name)} | ${BASE_PAGE_TITLE}`
     : BASE_PAGE_TITLE;
 });
+
+export const scrollTo = (
+  url: PageStore['url'],
+  scrollParams: ScrollIntoViewOptions = {}
+) => {
+  const { hash } = url || { hash: '' };
+
+  if (!hash.length) {
+    return;
+  }
+
+  const target =
+    document.getElementById(hash.slice(1)) ||
+    document.getElementById(`heading-${hash.slice(1)}`);
+
+  target?.scrollIntoView({
+    behavior: 'smooth',
+    block: 'center',
+    ...scrollParams
+  });
+};
diff --git a/svelte-app/src/lib/helpers/responsive.ts b/svelte-app/src/lib/responsive.ts
similarity index 100%
rename from svelte-app/src/lib/helpers/responsive.ts
rename to svelte-app/src/lib/responsive.ts
diff --git a/svelte-app/src/lib/helpers/image.ts b/svelte-app/src/lib/sanity.ts
similarity index 100%
rename from svelte-app/src/lib/helpers/image.ts
rename to svelte-app/src/lib/sanity.ts
diff --git a/svelte-app/src/lib/store.ts b/svelte-app/src/lib/store.ts
index 66dc64ca3..7dce3a1d8 100644
--- a/svelte-app/src/lib/store.ts
+++ b/svelte-app/src/lib/store.ts
@@ -1,7 +1,7 @@
 import { browser } from '$app/environment';
+import { tryFetch } from '$lib/data';
 import { API_URL } from '$lib/env';
 import Logger from '$lib/logger';
-import tryFetch from '$lib/try-fetch';
 
 import type {
   DocumentTags,
diff --git a/svelte-app/src/lib/try-fetch.ts b/svelte-app/src/lib/try-fetch.ts
deleted file mode 100644
index 3afe1b732..000000000
--- a/svelte-app/src/lib/try-fetch.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { browser } from '$app/environment';
-
-/*
- * Since Netlify has a timeout of 10s for any SSR function, we need to wrap
- * all SSR'd fetches in our own timeout block to abort and have the browser
- * handle fetching instead
- */
-export default <T>(promise: Promise<T>, ms = 8000): Promise<T> => {
-  if (browser) {
-    return promise;
-  }
-
-  const timeout = new Promise<T>((resolve, reject) => {
-    const timer = setTimeout(() => {
-      clearTimeout(timer);
-      reject(new Error('Fetch timed out in SSR'));
-    }, ms);
-  });
-
-  return Promise.race([timeout, promise]);
-};
diff --git a/svelte-app/src/lib/utils.ts b/svelte-app/src/lib/utils.ts
new file mode 100644
index 000000000..12949f2d9
--- /dev/null
+++ b/svelte-app/src/lib/utils.ts
@@ -0,0 +1,40 @@
+// Misc utils that don't fit anywhere else
+import { derived } from 'svelte/store';
+
+import { currentLang } from '$lib/i18n';
+
+import twemoji from 'twemoji';
+
+export const parseEmoji = (element: HTMLElement) => {
+  element && twemoji.parse(element),
+    element?.querySelectorAll('img.emoji')?.forEach((emoji: Element) => {
+      if (!(emoji as HTMLElement)?.style) {
+        return;
+      }
+      (emoji as HTMLElement).setAttribute(
+        'style',
+        'display: inline-block;width: 1.1em;height: 1.1em;margin-right: 0.05em;vertical-align: -0.1em;'.replace(
+          /\s+/g,
+          ' '
+        )
+      );
+    });
+};
+
+const _parseViews = (views: number | undefined, lang: string) => {
+  if (!views || views < 1) {
+    return 0;
+  }
+
+  const parser = new Intl.NumberFormat(lang, {
+    notation: 'compact',
+    compactDisplay: 'short'
+  });
+
+  return parser.format(views);
+};
+
+export const parseViews = derived(
+  currentLang,
+  (currentLang) => (views: number | undefined) => _parseViews(views, currentLang)
+);
diff --git a/svelte-app/src/lib/views.ts b/svelte-app/src/lib/views.ts
deleted file mode 100644
index 57555d055..000000000
--- a/svelte-app/src/lib/views.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { derived } from 'svelte/store';
-
-import { currentLang } from '$i18n';
-
-const _parseViews = (views: number | undefined, lang: string) => {
-  if (!views || views < 1) {
-    return 0;
-  }
-
-  const parser = new Intl.NumberFormat(lang, {
-    notation: 'compact',
-    compactDisplay: 'short'
-  });
-
-  return parser.format(views);
-};
-
-export const parseViews = derived(
-  currentLang,
-  (currentLang) => (views: number | undefined) => _parseViews(views, currentLang)
-);
diff --git a/svelte-app/src/routes/+error.svelte b/svelte-app/src/routes/+error.svelte
index f5531a102..da3905743 100644
--- a/svelte-app/src/routes/+error.svelte
+++ b/svelte-app/src/routes/+error.svelte
@@ -2,8 +2,8 @@
   import { slide } from 'svelte/transition';
 
   import { page } from '$app/stores';
-  import { t } from '$i18n';
   import { BASE_ANIMATION_DURATION } from '$lib/consts';
+  import { t } from '$lib/i18n';
 
   import ArrowButton from '$components/controls/arrow-button.svelte';
   import Divider from '$components/divider.svelte';
diff --git a/svelte-app/src/routes/+layout.svelte b/svelte-app/src/routes/+layout.svelte
index 14c6acf9c..8848a8b09 100644
--- a/svelte-app/src/routes/+layout.svelte
+++ b/svelte-app/src/routes/+layout.svelte
@@ -10,7 +10,6 @@
 
   import { browser } from '$app/environment';
   import { navigating, page } from '$app/stores';
-  import { check as checkTranslations, currentLang, isLocalized, t } from '$i18n';
   import {
     APP_LANGS,
     APP_THEMES,
@@ -18,6 +17,7 @@
     DEFAULT_APP_LANG
   } from '$lib/consts';
   import { ENV, SELF_BASE_URL } from '$lib/env';
+  import { check as checkTranslations, currentLang, isLocalized, t } from '$lib/i18n';
   import Settings, { loading } from '$lib/settings';
 
   import Footer from '$components/footer.svelte';
diff --git a/svelte-app/src/routes/[[lang=lang]]/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/+page.svelte
index 5295c24d5..b79df6aad 100644
--- a/svelte-app/src/routes/[[lang=lang]]/+page.svelte
+++ b/svelte-app/src/routes/[[lang=lang]]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { pageTitle } from '$helpers/navigation';
-  import { linkTo, t } from '$i18n';
+  import { linkTo, t } from '$lib/i18n.js';
+  import { pageTitle } from '$lib/navigation';
 
   import ArrowButton from '$components/controls/arrow-button.svelte';
   import Divider from '$components/divider.svelte';
diff --git a/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte
index 3052017e8..c0eea9e60 100644
--- a/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte
+++ b/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { t } from '$helpers/i18n';
-  import { pageTitle } from '$helpers/navigation';
+  import { t } from '$lib/i18n.js';
+  import { pageTitle } from '$lib/navigation';
 
   import EmptyContent from '$components/empty-content.svelte';
   import HeadedBlock from '$components/headings/headed-block.svelte';
diff --git a/svelte-app/src/routes/[[lang=lang]]/etc/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/etc/+page.svelte
index a908682a4..f7433a84c 100644
--- a/svelte-app/src/routes/[[lang=lang]]/etc/+page.svelte
+++ b/svelte-app/src/routes/[[lang=lang]]/etc/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { pageTitle } from '$helpers/navigation';
-  import { t } from '$i18n';
+  import { t } from '$lib/i18n.js';
+  import { pageTitle } from '$lib/navigation';
 
   import Divider from '$components/divider.svelte';
   import EmptyContent from '$components/empty-content.svelte';
diff --git a/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte
index c76137648..6aba654b6 100644
--- a/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte
+++ b/svelte-app/src/routes/[[lang=lang]]/work/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { pageTitle } from '$helpers/navigation';
-  import { t } from '$i18n';
+  import { t } from '$lib/i18n.js';
+  import { pageTitle } from '$lib/navigation';
 
   import Timeline from '$components/about/timeline.svelte';
   import Divider from '$components/divider.svelte';
diff --git a/svelte-app/src/routes/[[lang=lang]]/work/[slug]/+page.ts b/svelte-app/src/routes/[[lang=lang]]/work/[slug]/+page.ts
index f3d3d00fa..2c6e4a711 100644
--- a/svelte-app/src/routes/[[lang=lang]]/work/[slug]/+page.ts
+++ b/svelte-app/src/routes/[[lang=lang]]/work/[slug]/+page.ts
@@ -1,7 +1,7 @@
 import { DEFAULT_APP_LANG } from '$lib/consts';
 import { fetchRepoStats, handleLoadError } from '$lib/data';
-import { buildImageUrl, getCrop } from '$lib/helpers/image';
 import Logger from '$lib/logger';
+import { buildImageUrl, getCrop } from '$lib/sanity';
 import { findOne } from '$lib/store';
 
 import type { PageLoad } from './$types';
diff --git a/svelte-app/svelte.config.js b/svelte-app/svelte.config.js
index 67727180e..3814ac9e5 100644
--- a/svelte-app/svelte.config.js
+++ b/svelte-app/svelte.config.js
@@ -30,13 +30,16 @@ export default {
   ],
   kit: {
     alias: {
+      '@breakpoints': 'src/styles/breakpoints',
+      '@colours': 'src/styles/colours',
+      '@utils': 'src/styles/utils',
+      '@vars': 'src/styles/vars',
+      $assets: 'src/static',
       $components: 'src/components',
-      $helpers: 'src/lib/helpers',
-      $stores: 'src/stores',
       $langs: 'src/languages',
-      $i18n: 'src/lib/helpers/i18n',
       $routes: 'src/routes',
-      $tests: 'tests'
+      $tests: 'tests',
+      $types: 'types/app'
     },
     adapter:
       process.env.SVELTE_ADAPTER_ENV === 'netlify'
diff --git a/svelte-app/tests/unit/i18n.test.ts b/svelte-app/tests/unit/i18n.test.ts
index 58251e7c3..6b99bde52 100644
--- a/svelte-app/tests/unit/i18n.test.ts
+++ b/svelte-app/tests/unit/i18n.test.ts
@@ -1,6 +1,6 @@
 import { get } from 'svelte/store';
 
-import { currentLang, linkTo, t } from '$i18n';
+import { currentLang, linkTo, t } from '$lib/i18n';
 import Logger from '$lib/logger';
 
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
diff --git a/svelte-app/tsconfig.json b/svelte-app/tsconfig.json
index 0d6a7816b..4694e4772 100644
--- a/svelte-app/tsconfig.json
+++ b/svelte-app/tsconfig.json
@@ -3,7 +3,6 @@
   "compilerOptions": {
     "module": "es2022",
     "allowJs": true,
-    "baseUrl": ".",
     "checkJs": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
@@ -11,25 +10,6 @@
     "noImplicitAny": true,
     "noImplicitThis": true,
     "noEmit": true,
-    "paths": {
-      "@colours": ["src/styles/colours"],
-      "@breakpoints": ["src/styles/breakpoints"],
-      "@utils": ["src/styles/utils"],
-      "@vars": ["src/styles/vars"],
-      "$lib": ["src/lib"],
-      "$lib/*": ["src/lib/*"],
-      "$components/*": ["src/components/*"],
-      "$helpers/*": ["src/lib/helpers/*"],
-      "$stores/*": ["src/stores/*"],
-      "$langs/*": ["src/languages/*"],
-      "$i18n": ["src/lib/helpers/i18n"],
-      "$routes/*": ["src/routes/*"],
-      "$assets/*": ["src/static/*"],
-      "$tests/*": ["tests/*"],
-      "$types": ["types/app/index.d.ts"],
-      "$types/*": ["types/app/*"],
-      "*": ["types/*"]
-    },
     "removeComments": true,
     "rootDir": "./",
     "resolveJsonModule": true,