feat: Render localized content from sanity

3 files changed, 108 insertions, 29 deletions

diff --git a/src/components/contact.svelte b/src/components/contact.svelte
index c7b0be3..9f5bb98 100644
--- a/src/components/contact.svelte
+++ b/src/components/contact.svelte
@@ -1,45 +1,66 @@
+<script context="module" lang="ts">
+	export type ContactModel = {
+		addressLines: Array<string>;
+		email?: string;
+		phone?: string;
+		phoneHours?: string;
+	};
+</script>
+
 <script lang="ts">
-	export let address1: string;
-	export let address2: string;
-	export let address3: string;
-	export let email: string;
-	export let phone: string;
-	export let phoneHours: string;
+	import LL from "$i18n/i18n-svelte";
+
+	export let model: ContactModel;
+
+	let visible = true;
+
+	$: if (!model.addressLines) {
+		visible = false;
+	} else {
+		visible = true;
+	}
 </script>
 
 <section class="contact relative z-1">
 	<div class="w-[calc(100%_-_2.5rem)] lg:w-[calc(100%_-_4rem)] mx-auto max-w-7xl">
 		<div class="mb-8 lg:mb-12">
-			<h1 class="text-center">Contact Us</h1>
+			<h1 class="text-center">{$LL.contact.title()}</h1>
 		</div>
 
 		<div class="grid grid-cols-12 gap-8 lg:gap-12">
 			<div class="col-span-12 lg:col-span-6">
 				<dl class="details-list details-list--rows">
-					<div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between">
-						<dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">Address</dt>
-						<dd class="leading-snug lg:text-right">
-							{address1}<br />{address2}<br />{address3}
-						</dd>
-					</div>
-
-					<div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between">
-						<dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">Email</dt>
-						<dd>
-							<a href="mailto:webmaster@example.com">{email}</a>
-						</dd>
-					</div>
-
-					<div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between">
-						<dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">Phone</dt>
-						<dd class="leading-snug lg:text-right">
-							<p><a href="tel:+44 7656 6455">{phone}</a></p>
-							<p class="text-contrast-medium">{phoneHours}</p>
-						</dd>
-					</div>
+					{#if (model.addressLines?.length ?? 0) > 0}
+						<div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between">
+							<dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">{$LL.contact.addressTitle()}</dt>
+							<dd class="leading-snug lg:text-right">
+								{#each model.addressLines as line}
+									{line}<br />
+								{/each}
+							</dd>
+						</div>
+					{/if}
+					{#if model.email}
+						<div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between">
+							<dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">{$LL.contact.emailTitle()}</dt>
+							<dd>
+								<a href="mailto:webmaster@example.com">{model.email}</a>
+							</dd>
+						</div>
+					{/if}
+					{#if model.phone}
+						<div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between">
+							<dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">{$LL.contact.phoneTitle()}</dt>
+							<dd class="leading-snug lg:text-right">
+								<p><a href="tel:+44 7656 6455">{model.phone}</a></p>
+								{#if model.phoneHours}
+									<p class="text-contrast-medium">{model.phoneHours}</p>
+								{/if}
+							</dd>
+						</div>
+					{/if}
 				</dl>
 			</div>
-
 			<div class="rounded col-span-12 lg:col-span-6 lg:h-auto lg:pb-0" />
 		</div>
 	</div>
diff --git a/src/components/header.svelte b/src/components/header.svelte
new file mode 100644
index 0000000..5789196
--- /dev/null
+++ b/src/components/header.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { locale } from "$i18n/i18n-svelte";
+	import LocaleSwitcher from "./locale-switcher.svelte";
+</script>
+
+<header>
+	<a href="/{$locale}">
+		<h1>Auroraklinikken</h1>
+	</a>
+
+	<LocaleSwitcher />
+</header>
diff --git a/src/components/locale-switcher.svelte b/src/components/locale-switcher.svelte
new file mode 100644
index 0000000..938d18a
--- /dev/null
+++ b/src/components/locale-switcher.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { browser } from "$app/environment";
+	import { invalidateAll } from "$app/navigation";
+	import { page } from "$app/stores";
+	import { setLocale, locale } from "$i18n/i18n-svelte";
+	import type { Locales } from "$i18n/i18n-types";
+	import { locales } from "$i18n/i18n-util";
+	import { loadLocaleAsync } from "$i18n/i18n-util.async";
+	import { replaceLocaleInUrl } from "$lib/utils";
+
+	const switchLocale = async (newLocale: Locales, updateHistoryState = true) => {
+		if (!newLocale || $locale === newLocale) return;
+		// load new dictionary from server
+		await loadLocaleAsync(newLocale);
+		// select locale
+		setLocale(newLocale);
+		// update `lang` attribute
+		document.querySelector("html")?.setAttribute("lang", newLocale);
+		if (updateHistoryState) {
+			// update url to reflect locale changes
+			history.pushState({ locale: newLocale }, "", replaceLocaleInUrl($page.url, newLocale));
+		}
+		// run the `load` function again
+		invalidateAll();
+	};
+	// update locale when navigating via browser back/forward buttons
+	const handlePopStateEvent = async ({ state }: PopStateEvent) => switchLocale(state.locale, false);
+	// update locale when page store changes
+	$: if (browser) {
+		const lang = $page.params.lang as Locales;
+		switchLocale(lang, false);
+		history.replaceState({ ...history.state, locale: lang }, "", replaceLocaleInUrl($page.url, lang));
+	}
+</script>
+
+<svelte:window on:popstate={handlePopStateEvent} />
+
+<ul>
+	{#each locales as l}
+		<li>
+			<a class:active={l === $locale} href={`${replaceLocaleInUrl($page.url, l)}`}>
+				{l}
+			</a>
+		</li>
+	{/each}
+</ul>