From 253d6301d90e88da9f2f3aefb787c46971661316 Mon Sep 17 00:00:00 2001
From: Mawoka <git@mawoka.eu>
Date: Wed, 31 Aug 2022 18:03:57 +0200
Subject: [PATCH] :globe_with_meridians: Added footer to translations

---
 frontend/src/lib/footer.svelte        | 39 ++++++++++++++-------------
 frontend/src/lib/i18n/locales/en.json | 10 ++++++-
 2 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/frontend/src/lib/footer.svelte b/frontend/src/lib/footer.svelte
index 1f02f5c..14cf593 100644
--- a/frontend/src/lib/footer.svelte
+++ b/frontend/src/lib/footer.svelte
@@ -5,35 +5,36 @@
   -->
 <script lang="ts">
 	import LanguageToggle from './language-toggle.svelte';
+	import { getLocalization } from '$lib/i18n';
+
+	const { t } = getLocalization();
 </script>
 
 <footer class="text-center text-white border-black w-screen">
 	<div class="grid grid-cols-12 w-full pt-4 bg-gray-700 pb-2">
 		<p class="col-start-3 col-end-11 text-center w-full">
-			Made with ❤️ by
-			<a
-				href="https://mawoka.eu?utm_source=ClassQuiz&utm_medium=footer"
-				target="_blank"
-				class="hover:underline bg-clip-text text-transparent bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f]"
-				>Mawoka</a
-			>
-			and with the help of
-			<a
-				href="/docs/attribution"
-				class="underline text-blue-300 hover:text-blue-500 transition">others</a
-			>.
+			{@html $t('footer.self_ads', {
+				mawoka_link:
+					'<a href="https://mawoka.eu?utm_source=ClassQuiz&utm_medium=footer" target="_blank" class="hover:underline bg-clip-text text-transparent bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f]">Mawoka</a>',
+				others_link: `<a href="/docs/attribution" class="underline text-blue-300 hover:text-blue-500 transition">${$t(
+					'words.other',
+					{ count: 2 }
+				)}</a>`,
+				interpolation: { escapeValue: false }
+			})}
 			<br />
-			If you find this useful, please consider
-			<a
-				href="https://mawoka.eu/donate"
-				target="_blank"
-				class="underline text-blue-300 hover:text-blue-500 transition">Donating</a
-			>.
+
+			{@html $t('footer.donate', {
+				donate_link: `<a href='https://mawoka.eu/donate' target='_blank' class='underline text-blue-300 hover:text-blue-500 transition'>${$t(
+					'words.donating'
+				)}</a>`,
+				interpolation: { escapeValue: false }
+			})}
 			<a
 				href="https://mawoka.eu/donate"
 				target="_blank"
 				class="underline text-blue-300 hover:text-blue-500 transition"
-				>More details are here.</a
+				>{$t('footer.more_details_here')}.</a
 			>
 		</p>
 		<div
diff --git a/frontend/src/lib/i18n/locales/en.json b/frontend/src/lib/i18n/locales/en.json
index 1d8567d..da61c81 100644
--- a/frontend/src/lib/i18n/locales/en.json
+++ b/frontend/src/lib/i18n/locales/en.json
@@ -110,7 +110,10 @@
         "private": "Private",
         "dashboard": "Dashboard",
         "question_plural": "Questions",
-        "game_pin": "Game Pin"
+        "game_pin": "Game Pin",
+        "other": "other",
+        "other_plural": "others",
+        "donating": "donating"
     },
     "editor": {
         "time_in_seconds": "Time in seconds",
@@ -170,5 +173,10 @@
     },
     "dashboard": {
         "search_for_own_quizzes": "Search for your own quizzes"
+    },
+    "footer": {
+        "self_ads": "Made with ❤️ by {{mawoka_link}} and with the help of {{others_link}}.",
+        "more_details_here": "More details are here",
+        "donate": "If you find this useful, please consider {{donate_link}}."
     }
 }