chore: Clean up utils, helpers, PT serializer props

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';

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';

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';

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';

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">

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';
 

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>

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';

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';

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,

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';

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';

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

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';
 

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';
 

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';
 

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';
 

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';

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 />

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">

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]"
 >

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 />

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>

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 />

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>

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">

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">

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];

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();
+        })
+      };
+    });
+};