🌐 translated more strings

frontend/src/lib/editor.svelte

@@ -183,7 +183,7 @@
 </button>
 {#if imgur_links_valid}
 	<p class="text-blue-600 text-xl text-center w-fit mx-auto">
-		Not all links are imgur-links! <!-- TODO: Add translation -->
+		{$t('editor.not_all_links_imgur_links')}
 	</p>
 {/if}
 <button

frontend/src/lib/i18n/locales/en.json

@@ -85,7 +85,13 @@
 		"settings": "Settings",
 		"repeat_password": "Repeat password",
 		"overview": "Overview",
-		"report": "Report"
+		"report": "Report",
+		"explore": "Explore",
+		"search": "Search",
+		"screenshot": "Screenshot",
+		"screenshot_plural": "Screenshots",
+		"browser": "Browser",
+		"view": "View"
 	},
 	"editor": {
 		"time_in_seconds": "Time in seconds",
@@ -93,7 +99,8 @@
 		"add_new_answer": "Add new answer",
 		"add_new_question": "Add new question",
 		"delete_question": "Delete question",
-		"delete_answer": "Delete answer"
+		"delete_answer": "Delete answer",
+		"not_all_links_imgur_links": "Not all links are Imgur-links!"
 	},
 	"import_page": {
 		"need_help": "Need help?",
@@ -107,5 +114,21 @@
 	},
 	"password_reset_page": {
 		"reset_password": "Reset password"
+	},
+	"settings_page": {
+		"old_password": "Old password",
+		"new_password": "New password",
+		"repeat_password": "Repeat password",
+		"change_password_submit": "Change password!",
+		"last_seen": "Last seen",
+		"check_location": "Check location",
+		"delete_this_session": "Delete this session",
+		"this_session?": "This session?"
+	},
+	"explore_page": {
+		"made_by": "Made by"
+	},
+	"search_page": {
+		"at_least_3_characters": "Enter at least 3 characters..."
 	}
 }

frontend/src/lib/navbar.svelte

@@ -94,15 +94,14 @@
 			<li class="py-2">
 				<a
 					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
-					href="/explore">Explore</a
+					href="/explore">{$t('words.explore')}</a
 				>
 			</li>
 			<li class="py-2">
 				<a
 					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
-					href="/search">Search</a
+					href="/search">{$t('words.search')}</a
 				>
-				<!--TODO: Add translation -->
 			</li>
 			<li class="py-2">
 				<a
@@ -133,15 +132,14 @@
 			<li class="py-2">
 				<a
 					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
-					href="/explore">Explore</a
+					href="/explore">{$t('words.explore')}</a
 				>
 			</li>
 			<li class="py-2">
 				<a
 					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
-					href="/search">Search</a
+					href="/search">{$t('words.search')}</a
 				>
-				<!--TODO: Add translation -->
 			</li>
 			<li class="py-2">
 				<a

frontend/src/routes/account/reset-password.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <script lang="ts">
-	import { getLocalization } from '../../lib/i18n';
+	import { getLocalization } from '$lib/i18n';
 	import { navbarVisible } from '$lib/stores';
 
 	navbarVisible.set(true);
@@ -19,7 +19,6 @@
 	const { t } = getLocalization();
 
 	let isSubmitting = false;
-	// TODO: Add translation
 
 	const submit = async () => {
 		isSubmitting = true;

frontend/src/routes/account/settings.svelte

@@ -155,24 +155,23 @@
 				<p class="text-slate-100 text-lg mb-6 md:max-w-lg">
 					{$t('words.email')}: {user.email}
 				</p>
-				<!-- TODO: Add translation -->
 				<form class="flex flex-col md:flex-row" on:submit|preventDefault={changePassword}>
 					<label
-						>Old Password:<input
+						>{$t('settings_page.old_password')}:<input
 							type="password"
 							class="m-2 text-black"
 							bind:value={changePasswordData.oldPassword}
 						/></label
 					>
 					<label
-						>New Password:<input
+						>{$t('settings_page.new_password')}:<input
 							type="password"
 							class="m-2 text-black"
 							bind:value={changePasswordData.newPassword}
 						/></label
 					>
 					<label
-						>New Password again:<input
+						>{$t('settings_page.repeat_password')}:<input
 							type="password"
 							class="m-2 text-black"
 							bind:value={changePasswordData.newPasswordConfirm}
@@ -183,7 +182,7 @@
 						disabled={!passwordChangeDataValid}
 						type="submit"
 					>
-						Change Password!
+						{$t('settings_page.change_password_submit')}
 					</button>
 				</form>
 			</div>
@@ -206,31 +205,31 @@
 					scope="col"
 					class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
 				>
-					Last seen
+					{$t('settings_page.last_seen')}
 				</th>
 				<th
 					scope="col"
 					class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
 				>
-					Browser
+					{$t('words.browser')}
 				</th>
 				<th
 					scope="col"
 					class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
 				>
-					Check location
+					{$t('settings_page.check_location')}
 				</th>
 				<th
 					scope="col"
 					class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
 				>
-					Delete this session
+					{$t('settings_page.delete_this_session')}
 				</th>
 				<th
 					scope="col"
 					class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
 				>
-					This session?
+					{$t('settings_page.this_session?')}
 				</th>
 			</tr>
 		</thead>
@@ -258,7 +257,7 @@
 						<button
 							on:click={() => {
 								checkLocation(session.ip_address);
-							}}>View</button
+							}}>{$t('words.view')}</button
 						>
 					</td>
 					<td
@@ -267,7 +266,7 @@
 						<button
 							on:click={() => {
 								deleteSession(session.id);
-							}}>Delete</button
+							}}>{$t('words.delete')}</button
 						>
 					</td>
 					<td
@@ -294,7 +293,7 @@
 				on:click={() => {
 					showMap = false;
 				}}
-				class="bg-black text-white rounded-t-lg px-1">Close</button
+				class="bg-black text-white rounded-t-lg px-1">{$t('words.close')}</button
 			>
 			<div class="w-full h-full">
 				<svelte:component

frontend/src/routes/docs/attribution.svelte

@@ -1,33 +1,32 @@
 <svelte:head>
 	<title>ClassQuiz/docs - Attribution</title>
-	<meta
+	<meta name="description" content="People who helped make with ClassQuiz." />
-		name='description'
-		content='People who helped make with ClassQuiz.'
-	/>
 </svelte:head>
 <article
-	class='prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate text-yellow-50 px-4'
+	class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate text-yellow-50 px-4"
 >
 	<h1>People</h1>
 	<h2>Contributors</h2>
 	<p>People who contributed to the code on GitHub directly</p>
 	<ul>
 		<li>
-			<a href='https://github.com/Dynnammo'>Dynnammo</a>
+			<a href="https://github.com/Dynnammo">Dynnammo</a>
 		</li>
 	</ul>
 	<h2>Helpers</h2>
 	<p>People who helped through issues (at least 2), tips, etc</p>
-	<p></p>
+	<p />
 	<ul>
 		<li>
-			<a href='https://github.com/adeekshith'>Deekshith</a>
+			<a href="https://github.com/adeekshith">Deekshith</a>
 		</li>
 	</ul>
 
 	<p><i>...Maybe you?</i></p>
 
 	<h1>Rules</h1>
-	<p>If you are listed once here, you're a part of ClassQuiz, forever! <br>
+	<p>
-	You can also be listed in more categories.</p>
+		If you are listed once here, you're a part of ClassQuiz, forever! <br />
+		You can also be listed in more categories.
+	</p>
 </article>

frontend/src/routes/explore.svelte

@@ -10,6 +10,8 @@
 </script>
 
 <script lang="ts">
+	import { getLocalization } from '$lib/i18n';
+	const { t } = getLocalization();
 	const getData = async () => {
 		const response = await fetch('/api/v1/search/', {
 			method: 'POST',
@@ -55,7 +57,7 @@
 							<p class="mt-2 text-gray-600">{quiz.description}</p>
 						</div>
 						<div class="flex mt-4">
-							<span>Made by {quiz.user}</span>
+							<span>{$t('explore_page.made_by')} {quiz.user}</span>
 						</div>
 					</div>
 				</a>

frontend/src/routes/index.svelte

@@ -58,7 +58,7 @@
 	</section>
 
 	<section class="py-8">
-		<h1 class="sm:text-6xl text-4xl text-center">Screenshots</h1>
+		<h1 class="sm:text-6xl text-4xl text-center">{$t('words.screenshot', { count: 2 })}</h1>
 		<div>
 			<LandingPromo />
 		</div>

frontend/src/routes/search.svelte

@@ -10,6 +10,8 @@
 </script>
 
 <script lang="ts">
+	import { getLocalization } from '$lib/i18n';
+	const { t } = getLocalization();
 	let search_term = '';
 	let resp_data = null;
 
@@ -51,7 +53,7 @@
 				<input
 					type="search"
 					class="form-control relative flex-auto min-w-0 block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
-					placeholder="Enter at least 3 characters..."
+					placeholder={$t('search_page.at_least_3_characters')}
 					aria-label="Search"
 					aria-describedby="button-addon2"
 					bind:value={search_term}
@@ -103,7 +105,9 @@
 								</p>
 							</div>
 							<div class="flex mt-4">
-								<span>Made by {@html quiz._formatted.user}</span>
+								<span
+									>{$t('explore_page.made_by')} {@html quiz._formatted.user}</span
+								>
 							</div>
 						</div>
 					</a>