From 0ebb60f986682ad8d3538c2fd1d708a861e0b1fb Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 22 Aug 2022 15:49:08 -0700
Subject: migrate to sveltekit-i18n

---
 src/components/404.svelte             |  6 +++---
 src/components/About.svelte           | 25 +++++++++++--------------
 src/components/AppHeader.svelte       |  6 +++---
 src/components/FaqCard.svelte         |  6 +++---
 src/components/Footer.svelte          | 10 +++++-----
 src/components/HowItWorksCard.svelte  |  6 +++---
 src/components/LandingHeader.svelte   | 30 +++++++++++++++---------------
 src/components/LandingHero.svelte     | 12 ++++++------
 src/components/LocaleSelector.svelte  |  2 +-
 src/components/RegisterOrLogin.svelte | 18 +++++++++---------
 10 files changed, 59 insertions(+), 62 deletions(-)

(limited to 'src/components')

diff --git a/src/components/404.svelte b/src/components/404.svelte
index 4d5be76e..08323d40 100644
--- a/src/components/404.svelte
+++ b/src/components/404.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { Icon } from '$comp';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 </script>
 
 <div class="flex justify-center items-center mt-20">
@@ -11,7 +11,7 @@
 
 		<Icon icon="question" style="mx-auto w-56" />
 
-		<h1 class="font-bold text-5xl">{$_('404.404')}</h1>
-		<p>{$_('404.pageNotFound')}</p>
+		<h1 class="font-bold text-5xl">{$t('404.404')}</h1>
+		<p>{$t('404.pageNotFound')}</p>
 	</div>
 </div>
diff --git a/src/components/About.svelte b/src/components/About.svelte
index db74fd96..257fc49c 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -1,22 +1,22 @@
 <script>
 	import { Image, Icon, LocationsMap } from '$comp';
-	import { _, json } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 </script>
 
-<h3 class="text-5xl font-medium mb-10 text-center">{$_('about.header')}</h3>
+<h3 class="text-5xl font-medium mb-10 text-center">{$t('about.header')}</h3>
 <div
 	class="md:px-10 lg:px-0 block lg:flex justify-center text-secondary text-xl lg:space-x-20 mx-auto max-w-7xl relative"
 >
 	<p class="w-full lg:w-5/12">
-		{@html $_('about.p1')}
+		{@html $t('about.p1')}
 		<br /><br />
-		{@html $_('about.p2')}
+		{@html $t('about.p2')}
 		<br /><br />
 	</p>
 	<p class="w-full lg:w-5/12">
-		{@html $_('about.p3')}
+		{@html $t('about.p3')}
 		<br /><br />
-		{@html $_('about.p4')}
+		{@html $t('about.p4')}
 	</p>
 	<Image image="swoosh" style="w-32 absolute -bottom-20 lg:bottom-0 right-0 md:right-10" />
 </div>
@@ -24,17 +24,17 @@
 <div class="px-5 block lg:flex justify-center lg:space-x-32 items-center mt-40 lg:mt-20">
 	<div class="space-y-5 mb-5 lg:mb-0">
 		<h3 class="text-5xl font-medium mb-10 text-center lg:text-right">
-			{$_('about.founder.header')}
+			{$t('about.founder.header')}
 		</h3>
 
 		<Image image="adam" style="rounded-full mx-auto lg:mx-0 lg:ml-auto w-40" />
 
 		<div class="space-y-2">
 			<span class="text-2xl text-center font-semibold block lg:text-right"
-				>{$_('about.founder.name')}</span
+				>{$t('about.founder.name')}</span
 			>
 			<span class="text-xl text-center text-secondary block lg:text-right"
-				>{$_('about.founder.position')}</span
+				>{$t('about.founder.position')}</span
 			>
 		</div>
 
@@ -57,16 +57,13 @@
 	<ul
 		class="w-full mx-auto md:w-[700px] lg:w-[500px] xl:w-auto text-secondary px-1 md:px-10 text-xl list-disc space-y-5"
 	>
-		{#each Object.values($json('about.founder.qualifications')) as qualification}
-			<li>{qualification}</li>
-		{/each}
 	</ul>
 </div>
 
 <div class="mt-20">
-	<h3 class="text-5xl font-medium mb-5 text-center">{$_('about.locations.header')}</h3>
+	<h3 class="text-5xl font-medium mb-5 text-center">{$t('about.locations.header')}</h3>
 	<p class="text-secondary text-xl w-full md:w-10/12 lg:w-2/3 2xl:w-[800px] mx-auto mb-10">
-		{@html $_('about.locations.description')}
+		{@html $t('about.locations.description')}
 	</p>
 	<LocationsMap />
 </div>
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 1d24cb1d..7b3987d5 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -5,7 +5,7 @@
 	import { user, newPayment, colorTheme } from '$lib/store';
 	import { goto } from '$app/navigation';
 	import { Icon } from '$comp';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 
 	export let avatarPosition = 'left-[calc(50vw-48px)]';
 
@@ -75,7 +75,7 @@
 									<button
 										class="flex justify-center items-center font-semibold text-sm"
 										on:click={() => handleMenuItemClick(button.goto)}
-										><Icon icon={button.icon} style="mr-1" /> {$_(button.stringID)}
+										><Icon icon={button.icon} style="mr-1" /> {$t(button.stringID)}
 									</button>
 								</li>
 							{/each}
@@ -86,7 +86,7 @@
 		{:else}
 			<a href="/login">
 				<button class="bg-white px-5 py-2 rounded-xl font-semibold text-sm"
-					>{$_('nav.signIn')}</button
+					>{$t('nav.signIn')}</button
 				>
 			</a>
 		{/if}
diff --git a/src/components/FaqCard.svelte b/src/components/FaqCard.svelte
index 0d3a9fa7..918e03d6 100644
--- a/src/components/FaqCard.svelte
+++ b/src/components/FaqCard.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 
 	// this ID will be used to get the strings from the locale
 	// question is at faq.[questionID].question
@@ -8,8 +8,8 @@
 </script>
 
 <div class="mx-auto w-full md:w-2/3 lg:w-[700px] space-y-5">
-	<p class="text-2xl font-medium">{$_('faq.' + questionID + '.question')}</p>
+	<p class="text-2xl font-medium">{$t('faq.' + questionID + '.question')}</p>
 	<p class="text-secondary text-xl font-medium">
-		{$_('faq.' + questionID + '.answer')}
+		{$t('faq.' + questionID + '.answer')}
 	</p>
 </div>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index e2acd993..a1173f74 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { Icon } from '$comp';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 
 	const followLinks = [
 		{ url: 'https://twitter.com/coinoswallet', titleID: 'twitter' },
@@ -18,21 +18,21 @@
 	<Icon icon="logo" style="w-48 mx-auto md:mx-0" />
 
 	<div class="text-center md:text-left">
-		<p class="font-semibold">{$_('footer.followUs')}</p>
+		<p class="font-semibold">{$t('footer.followUs')}</p>
 		<ul class="mt-5 text-secondary space-y-3 font-medium">
 			{#each followLinks as link}
 				<li>
-					<a href={link.url} target="_blank" rel="noreferrer">{$_('footer.' + link.titleID)}</a>
+					<a href={link.url} target="_blank" rel="noreferrer">{$t('footer.' + link.titleID)}</a>
 				</li>
 			{/each}
 		</ul>
 	</div>
 
 	<div class="text-center md:text-left">
-		<p class="font-semibold">{$_('footer.company')}</p>
+		<p class="font-semibold">{$t('footer.company')}</p>
 		<ul class="mt-5 text-secondary space-y-3">
 			{#each companyLinks as link}
-				<li><a href={link.url}>{$_('footer.' + link.titleID)}</a></li>
+				<li><a href={link.url}>{$t('footer.' + link.titleID)}</a></li>
 			{/each}
 		</ul>
 	</div>
diff --git a/src/components/HowItWorksCard.svelte b/src/components/HowItWorksCard.svelte
index 6f82c360..784c738d 100644
--- a/src/components/HowItWorksCard.svelte
+++ b/src/components/HowItWorksCard.svelte
@@ -1,14 +1,14 @@
 <script>
 	import Icon from './Icon.svelte';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 	export let image;
 	export let stepID;
 </script>
 
 <div class="space-y-5">
 	<Icon icon={image} style="mx-auto w-32 h-32" />
-	<p class="text-2xl font-medium">{$_('howItWorks.' + stepID + '.header')}</p>
+	<p class="text-2xl font-medium">{$t('howItWorks.' + stepID + '.header')}</p>
 	<p class="text-secondary text-xl font-medium w-full md:w-2/3 mx-auto">
-		{$_('howItWorks.' + stepID + '.description')}
+		{$t('howItWorks.' + stepID + '.description')}
 	</p>
 </div>
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index acc83001..372c0b98 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -3,7 +3,7 @@
 	import { scroll } from '$lib/utils';
 	import { Icon, LocaleSelector } from '$comp';
 	import { user } from '$lib/store';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 
 	export let howItWorks;
 	export let faq;
@@ -28,30 +28,30 @@
 
 		<!-- desktop nav -->
 		<div class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold">
-			<button on:click={() => scroll(howItWorks)}>{$_('howItWorks.header')}</button>
-			<button on:click={() => scroll(faq)}>{$_('faq.header')}</button>
-			<button on:click={() => scroll(about)}>{$_('about.header')}</button>
+			<button on:click={() => scroll(howItWorks)}>{$t('howItWorks.header')}</button>
+			<button on:click={() => scroll(faq)}>{$t('faq.header')}</button>
+			<button on:click={() => scroll(about)}>{$t('about.header')}</button>
 			{#if !$user}
 				<button class="border rounded-full px-6 py-2 font-bold" on:click={() => goto('/register')}
-					>{$_('nav.startInSeconds')}
+					>{$t('nav.startInSeconds')}
 				</button>
 				<button
 					class="bg-black text-white border rounded-full px-6 py-2 font-bold"
 					on:click={() => goto('/login')}
 				>
-					{$_('nav.signIn')}
+					{$t('nav.signIn')}
 				</button>
 			{:else}
 				<button
 					class="border rounded-full px-6 py-2 font-bold"
 					on:click={() => goto(`/${$user.username}/dashboard`)}
-					>{$_('nav.account')}
+					>{$t('nav.account')}
 				</button>
 				<button
 					class="bg-black text-white border rounded-full px-6 py-2 font-bold"
 					on:click={() => goto('/logout')}
 				>
-					{$_('nav.signOut')}
+					{$t('nav.signOut')}
 				</button>
 			{/if}
 		</div>
@@ -70,35 +70,35 @@
 		>
 			<div class="space-y-8 mt-24 ml-10 font-bold text-xl">
 				<button on:click={() => mobileMenuButtonClick(howItWorks)} class="block"
-					>{$_('nav.howItWorks')}</button
+					>{$t('nav.howItWorks')}</button
 				>
-				<button on:click={() => mobileMenuButtonClick(faq)} class="block">{$_('nav.faq')}</button>
+				<button on:click={() => mobileMenuButtonClick(faq)} class="block">{$t('nav.faq')}</button>
 				<button on:click={() => mobileMenuButtonClick(about)} class="block"
-					>{$_('nav.about')}</button
+					>{$t('nav.about')}</button
 				>
 				{#if !$user}
 					<button
 						class="border rounded-full px-6 py-2 font-bold block"
 						on:click={() => goto('/register')}
-						>{$_('nav.startInSeconds')}
+						>{$t('nav.startInSeconds')}
 					</button>
 					<button
 						class="bg-black text-white border rounded-full px-6 py-2 font-bold block"
 						on:click={() => goto('/login')}
 					>
-						{$_('nav.signIn')}
+						{$t('nav.signIn')}
 					</button>
 				{:else}
 					<button
 						class="border rounded-full px-6 py-2 font-bold block"
 						on:click={() => goto(`/${$user.username}/dashboard`)}
-						>{$_('nav.account')}
+						>{$t('nav.account')}
 					</button>
 					<button
 						class="bg-black text-white border rounded-full px-6 py-2 font-bold block"
 						on:click={() => goto('/logout')}
 					>
-						{$_('nav.signOut')}
+						{$t('nav.signOut')}
 					</button>
 				{/if}
 				<LocaleSelector style="py-1" />
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
index 6553d271..1415692e 100644
--- a/src/components/LandingHero.svelte
+++ b/src/components/LandingHero.svelte
@@ -2,7 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { Icon, Image } from '$comp';
 	import { user } from '$lib/store';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 </script>
 
 <div class="mt-[96.88px] md:mt-0">
@@ -10,17 +10,17 @@
 		<h1
 			class="text-5xl md:text-6xl lg:text-7xl 2xl:text-8xl font-medium text-center w-full md:w-3/4 lg:w-1/2 max-w-7xl mx-auto leading-tight"
 		>
-			{$_('landing.header_before_icon')}
+			{$t('landing.header_before_icon')}
 			<span class="relative">
-				{$_('landing.header_with_icon')}
+				{$t('landing.header_with_icon')}
 				<Icon icon="rays" style="absolute -top-16 left-5 md:left-8 lg:left-14 2xl:left-24" />
 			</span>
-			{$_('landing.header_after_icon')}
+			{$t('landing.header_after_icon')}
 		</h1>
 		<h2
 			class="text-center text-secondary w-full md:w-3/5 lg:w-2/5 max-w-3xl mx-auto text-xl leading-normal font-medium"
 		>
-			{$_('landing.subheader')}
+			{$t('landing.subheader')}
 		</h2>
 		{#if !$user}
 			<div class="flex justify-center">
@@ -28,7 +28,7 @@
 					class="bg-black text-white border rounded-full px-6 py-2 font-bold"
 					on:click={() => goto('/register')}
 				>
-					{$_('nav.startInSeconds')}
+					{$t('nav.startInSeconds')}
 				</button>
 			</div>
 		{/if}
diff --git a/src/components/LocaleSelector.svelte b/src/components/LocaleSelector.svelte
index 2ae65986..4672a564 100644
--- a/src/components/LocaleSelector.svelte
+++ b/src/components/LocaleSelector.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { _, locale, locales } from 'svelte-i18n';
+  import { locale, locales } from '$lib/translations';
 	export let style;
 </script>
 
diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte
index acf98523..2d1ee6a5 100644
--- a/src/components/RegisterOrLogin.svelte
+++ b/src/components/RegisterOrLogin.svelte
@@ -4,7 +4,7 @@
 	import { user, token } from '$lib/store';
 	import { auth } from '$lib/socket';
 	import { goto } from '$app/navigation';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 
 	export let pageID;
 
@@ -30,11 +30,11 @@
 
 	<div class="flex justify-center items-center">
 		<div class="shadow-xl rounded-3xl p-10 pb-12 space-y-5 w-full mx-5 md:mx-0 md:w-[400px]">
-			<h1 class="text-2xl font-bold text-center">{$_('login.' + pageID)}</h1>
+			<h1 class="text-2xl font-bold text-center">{$t('login.' + pageID)}</h1>
 
 			<form class="space-y-5" {action} method="POST">
 				<div>
-					<label for="username" class="font-semibold">{$_('login.username')}</label>
+					<label for="username" class="font-semibold">{$t('login.username')}</label>
 					<!-- svelte-ignore a11y-autofocus -->
 					<input
 						name="username"
@@ -47,7 +47,7 @@
 				</div>
 
 				<div class="relative">
-					<label for="password" class="block font-semibold">{$_('login.password')}</label>
+					<label for="password" class="block font-semibold">{$t('login.password')}</label>
 					{#if revealPassword}
 						<input
 							name="password"
@@ -76,28 +76,28 @@
 
 				{#if pageID === 'register'}
 					<p class="text-secondary text-sm">
-						{$_('login.passwordRecommendation')}
+						{$t('login.passwordRecommendation')}
 					</p>
 				{:else}
 					<div class="flex justify-end items-center">
 						<a href="/forgot" class="underline underline-offset-4 text-black text-sm"
-							>{$_('login.forgotPassword')}</a
+							>{$t('login.forgotPassword')}</a
 						>
 					</div>
 				{/if}
 
 				<button type="submit" class="bg-black text-white w-full rounded-2xl p-4 font-semibold"
-					>{$_('login.' + pageID)}
+					>{$t('login.' + pageID)}
 				</button>
 			</form>
 
 			<p class="text-secondary text-center font-medium">
-				{pageID === 'register' ? $_('login.haveAccount') : $_('login.noAccount')}
+				{pageID === 'register' ? $t('login.haveAccount') : $t('login.noAccount')}
 				<a
 					href={pageID === 'register' ? '/login' : '/register'}
 					class="block md:inline text-black underline underline-offset-4"
 				>
-					{pageID === 'register' ? $_('login.signIn') : $_('login.register')}
+					{pageID === 'register' ? $t('login.signIn') : $t('login.register')}
 				</a>
 			</p>
 		</div>
-- 
cgit v1.2.3