add localization + ru translation

package.json

@@ -41,8 +41,10 @@
 		"@types/dom-view-transitions": "^1.0.4",
 		"@types/markdown-it": "^13.0.7",
 		"@types/markdown-it-emoji": "^2.0.4",
+		"@types/sprintf-js": "^1.1.4",
 		"fuzzball": "^2.1.2",
 		"markdown-it": "^14.0.0",
-		"markdown-it-emoji": "^3.0.0"
+		"markdown-it-emoji": "^3.0.0",
+		"sprintf-js": "^1.1.3"
 	}
 }

src/lang/en-US.json

@@ -0,0 +1,68 @@
+{
+    "name": "English",
+
+    "errors.something_went_wrong": "Something went wrong",
+    "errors.package_not_found": "Here, have a cookie, if that makes you feel any better: 🍪",
+    "errors.package_not_found.details": "Fun fact: You can use '@author:name' to view packages made by an author. What 'bout using '@details' to get technical details on each package?",
+    "errors.no_packages_published": "Looks like you don't have any approved packages published to KJSPKG. How sad!",
+    "errors.automatin_down": "Our statistics database seems to be down",
+    "errors.automatin_down.details": "Download and view counts might be missing. Please report this to",
+    "errors.automatin_down.server": "our Discord server",
+
+    "menu.language": "Language",
+    "menu.theme": "Theme",
+
+    "list.by": "by",
+    "list.detailed.on_branch": "on branch",
+    "list.detailed.at_path": "at path",
+    "list.detailed.in_repo": "in repo",
+    "list.download_singluar": "download",
+    "list.download_plural": "downloads",
+    "list.view_singular": "view",
+    "list.view_plural": "views",
+
+    "author.owns": "owns",
+    "author.package_singular": "package",
+    "author.package_plural": "packages",
+    "author.you": "is you!",
+    "author.organizations": "Organizations",
+
+    "author.auth_required": "To access this page, you have to first authenticate yourself through GitHub.",
+    "author.auth_required.login": "Log in",
+
+    "search.placeholder": "Search for packages",
+    "search.package_singular": "package",
+    "search.package_plural": "packages",
+    "search.found_singular": "Found <span>%d</span>",
+    "search.found_plural": "Found <span>%d</span>",
+    "search.matching": "matching",
+    "search.made_by": "made by",
+    "search.detailed": "detailed",
+
+    "search.show_details": "Show details",
+    "search.clear_filters": "Clear filters",
+    "search.use_view.list": "Use list view",
+    "search.use_view.compact": "Use compact view",
+
+    "search.sorted_by": "Sorted by",
+    "search.sort_type.name": "Name (a-z)",
+    "search.sort_type.author": "Author (a-z)",
+    "search.sort_type.downloads": "Download count",
+    "search.sort_type.views": "View count",
+    "search.sorted_by.name": "name",
+    "search.sorted_by.author": "author",
+    "search.sorted_by.downloads": "downloads",
+    "search.sorted_by.views": "views",
+
+    "package.created_by": "Created by",
+    "package.available_for": "Available for",
+    "package.manage_package": "Manage package (click to copy)",
+    "package.readme_file": "README file",
+    "package.package_preview": "Package preview",
+
+    "package.depends_on": "Depends on",
+    "package.incompatible_with": "Incompatible with",
+    "package.dependency.kjs_package": "KJS package",
+    "package.dependency.external_mod": "external mod",
+    "package.dependency.mod_open_in": "Open in"
+}

src/lang/ru-RU.json

@@ -0,0 +1,68 @@
+{
+    "name": "Русский",
+
+    "errors.something_went_wrong": "Что-то пошло не так",
+    "errors.package_not_found": "Вот, возьми печеньку, если это тебя подбодрит: 🍪",
+    "errors.package_not_found.details": "Интересный факт: В поиске можно использовать '@author:name' чтобы просмотреть пакеты от определённого автора. Также попробуйте добавить '@details' чтобы увидеть больше технической информации о каждом пакете.",
+    "errors.no_packages_published": "Похоже, что вы ещё не опубликовали ни одного пакета в KJSPKG. Как грустно!",
+    "errors.automatin_down": "Похоже, у нас неполадки с нашей базой данных",
+    "errors.automatin_down.details": "Кол-во загрузок и просмотров может быть недоступно. Пожалуйста, сообщите нам об этом сообщении на",
+    "errors.automatin_down.server": "нашем Discord сервере",
+
+    "menu.language": "Язык",
+    "menu.theme": "Тема",
+
+    "list.by": "от",
+    "list.detailed.on_branch": "на ветке",
+    "list.detailed.at_path": "в",
+    "list.detailed.in_repo": "в репозитории",
+    "list.download_singluar": "загрузка",
+    "list.download_plural": "загрузок",
+    "list.view_singular": "просмотр",
+    "list.view_plural": "просмотров",
+
+    "author.owns": "владеет",
+    "author.package_singular": "пакетом",
+    "author.package_plural": "пакетами",
+    "author.you": "это ты!",
+    "author.organizations": "Организации",
+
+    "author.auth_required": "Чтобы получить доступ к этой странице, сначала войдите через GitHub.",
+    "author.auth_required.login": "Войти",
+
+    "search.placeholder": "Искать пакеты",
+    "search.package_singular": "пакет",
+    "search.package_plural": "пакетов",
+    "search.found_singular": "Найден <span>%d</span>",
+    "search.found_plural": "Найдено <span>%d</span>",
+    "search.matching": "по запросу",
+    "search.made_by": "от",
+    "search.detailed": "детально",
+
+    "search.show_details": "Показать детали",
+    "search.clear_filters": "Очистить фильтры",
+    "search.use_view.list": "Использовать списочный вид",
+    "search.use_view.compact": "Использовать компактный вид",
+
+    "search.sorted_by": "Отсортировано по",
+    "search.sort_type.name": "Название (a-z)",
+    "search.sort_type.author": "Автор (a-z)",
+    "search.sort_type.downloads": "Кол-во загрузок",
+    "search.sort_type.views": "Кол-во просмотров",
+    "search.sorted_by.name": "названию",
+    "search.sorted_by.author": "автору",
+    "search.sorted_by.downloads": "загрузкам",
+    "search.sorted_by.views": "просмотрам",
+
+    "package.created_by": "Создано",
+    "package.available_for": "Доступно на",
+    "package.manage_package": "Управлять пакетом (нажмите чтобы скопировать)",
+    "package.readme_file": "Файл README",
+    "package.package_preview": "Превью пакета",
+
+    "package.depends_on": "Зависит от",
+    "package.incompatible_with": "Несовместим с",
+    "package.dependency.kjs_package": "KJS пакет",
+    "package.dependency.external_mod": "сторонний мод",
+    "package.dependency.mod_open_in": "Открыть на"
+}

src/lib/AuthRequired.svelte

@@ -3,6 +3,7 @@
 	import { PUBLIC_CLIENT_ID } from "$env/static/public";
 	import { IconAlertTriangle, IconBrandGithub } from "@tabler/icons-svelte";
 	import { fly } from "svelte/transition";
+	import { langKeyStore } from "./stores";
 </script>
 
 <svelte:head>
@@ -11,10 +12,10 @@
 
 <div class="flex-1 flex flex-col items-center justify-center" transition:fly={{ y: 40 }}>
     <IconAlertTriangle class="text-[rgb(var(--color-primary-500))] h-36 lg:h-60 w-auto" />
-    <h1 class="h3 text-center w-64 lg:w-96">To access this page, you have to first authenticate yourself through GitHub.</h1>
+    <h1 class="h3 text-center w-64 lg:w-96">{$langKeyStore['author.auth_required']}</h1>
 
     <a class="card flex gap-2 mt-4 py-3 px-5 hover:variant-soft-primary" href="https://github.com/login/oauth/authorize?client_id={PUBLIC_CLIENT_ID}&redirect_uri={$page.url}">
         <IconBrandGithub />
-        Log In
+        {$langKeyStore['author.auth_required.login']}
     </a>
 </div>

src/lib/HeaderBar.svelte

@@ -4,11 +4,11 @@
 	import { page } from '$app/stores';
 	import { IconBlank } from '$lib';
 	import { AppBar } from '@skeletonlabs/skeleton';
-	import { IconCheck, IconColorSwatch, IconSearch, IconUser } from '@tabler/icons-svelte';
+	import { IconCheck, IconColorSwatch, IconSearch, IconWorld } from '@tabler/icons-svelte';
 	import consts from './consts';
 	import { contextMenu, type ContextMenuItem } from './overlays/contextMenu';
-	import { currentScrollPosition, currentSearchStore, userPreferencesStore } from './stores';
-	import { parseInputString } from './utils';
+	import { currentScrollPosition, currentSearchStore, langKeyStore, userPreferencesStore } from './stores';
+	import { getLangKeys, getLangs, parseInputString } from './utils';
 	import { fly } from 'svelte/transition';
 	import IconLogin from './IconLogin.svelte';
 
@@ -17,15 +17,34 @@
 	}
 
 	let searched = getQuery();
+	let langs = getLangs();
 
 	let inputElement: HTMLInputElement;
 
 	afterNavigate(() => (searched = getQuery()));
 
-	$: settingsContextMenu = {
+	$: langContextMenu = {
 		initiator: 'left' as const,
 		items: [
-			{ type: 'SEPARATOR', header: 'Theme' },
+			{ type: 'SEPARATOR', header: $langKeyStore['menu.language'] },
+
+			...Object.keys(langs).map(lang => {
+				return {
+					type: 'ITEM' as const,
+					label: langs[lang],
+					icon: $userPreferencesStore.locale == lang ? IconCheck : IconBlank,
+					action: () => {
+						$userPreferencesStore.locale = lang;
+						$langKeyStore = getLangKeys();
+					}
+				};
+			})
+		] as ContextMenuItem[]
+	};
+	$: themeContextMenu = {
+		initiator: 'left' as const,
+		items: [
+			{ type: 'SEPARATOR', header: $langKeyStore['menu.theme'] },
 
 			...[
 				{ label: 'KJSPKG', name: 'kjspkg' },
@@ -119,7 +138,7 @@
 
 			<input
 				type="search"
-				placeholder="Search for packages"
+				placeholder={$langKeyStore['search.placeholder']}
 				bind:this={inputElement}
 				bind:value={searched}
 				on:input={() => ($currentSearchStore = searched)}
@@ -135,7 +154,13 @@
 	<svelte:fragment slot="trail">
 		<button
 			class="btn-icon hover:variant-soft-primary"
-			use:contextMenu={settingsContextMenu}
+			use:contextMenu={langContextMenu}
+		>
+			<IconWorld />
+		</button>
+		<button
+			class="btn-icon hover:variant-soft-primary"
+			use:contextMenu={themeContextMenu}
 		>
 			<IconColorSwatch />
 		</button>

src/lib/project/Author.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { base } from '$app/paths';
 	import consts from '$lib/consts';
-	import { ghApiKeyStore, ghApiLoginStore } from '$lib/stores';
+	import { ghApiKeyStore, ghApiLoginStore, langKeyStore } from '$lib/stores';
 	import { IconBrandGithub, IconLogout } from '@tabler/icons-svelte';
 
 	export let author : string;
@@ -22,10 +22,10 @@
 		<dt class="font-bold select-text">{author}</dt>
 		<dd class="text-sm opacity-50">
 			{#if author!=$ghApiLoginStore}
-				owns {c}
-				{c == 1 ? 'package' : 'packages'}
+				{$langKeyStore['author.owns']} {c}
+				{$langKeyStore[c == 1 ? 'author.package_singular' : 'author.package_plural']}
 			{:else if author==$ghApiLoginStore}
-				is you!
+				{$langKeyStore['author.you']}
 			{/if}
 		</dd>
 	</dl>

src/lib/project/Dependency.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { base } from '$app/paths';
 	import { contextMenu } from '$lib/overlays/contextMenu';
-	import { packageListStore } from '$lib/stores';
+	import { langKeyStore, packageListStore } from '$lib/stores';
 	import { packageNameToReadableFormat } from '$lib/utils';
 	import { popup } from '@skeletonlabs/skeleton';
 	import { IconPackage, IconPuzzle } from '@tabler/icons-svelte';
@@ -20,7 +20,7 @@
 		use:contextMenu={{
 			initiator: 'left',
 			items: [
-				{ type: 'SEPARATOR', header: 'Open in' },
+				{ type: 'SEPARATOR', header: $langKeyStore['package.dependency.mod_open_in'] },
 				{
 					type: 'ITEM',
 					label: 'Modrinth',
@@ -42,7 +42,7 @@
 		<IconPuzzle />
 		<span class="flex-auto">
 			<dt class="select-text font-bold">{t.split(':')[1]}</dt>
-			<dd class="text-sm opacity-50">external mod</dd>
+			<dd class="text-sm opacity-50">{$langKeyStore['package.dependency.external_mod']}</dd>
 		</span>
 	</button>
 {:else}
@@ -55,7 +55,7 @@
 		<IconPackage />
 		<span class="flex-auto">
 			<dt class="select-text font-bold">{packageNameToReadableFormat(t)}</dt>
-			<dd class="text-sm opacity-50">KJS package</dd>
+			<dd class="text-sm opacity-50">{$langKeyStore['package.dependency.kjs_package']}</dd>
 		</span>
 	</a>