starred/reiverr
1
0
Fork 0
mirror of https://github.com/aleksilassila/reiverr.git synced 2026-04-22 00:35:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

enhancement: Added Localization to the app

Browse Source 
Added Localization to the app (English, Spanish)
Users can add translations in .json format in the /src/lib/lang folder and then register them in the I18n Svelte component
Maybe someone knows how to dinamically load everything in the /lang folder so you don't need to register them manually
Some strings are still missing to be updated, I'm setting up my environment to have Radarr, Sonarr and Jellyfin
Followed this guide to add Localization to Reiverr: https://phrase.com/blog/posts/a-step-by-step-guide-to-svelte-localization-with-svelte-i18n-v3/
This commit is contained in:
Axel Aguilar
2023-08-12 11:45:42 -06:00
parent eb023b811e
commit c6e19cbc93
14 changed files with 339 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/lib/components/Lang/I18n.svelte Normal file
View File

@@ -0,0 +1,15 @@
<!-- I18n.svelte -->
<script>
import { addMessages, init } from 'svelte-i18n';
import en from '../../lang/en.json';
import es from '../../lang/es.json';
addMessages('en', en);
addMessages('es', es);
init({
initialLocale: 'en',
fallbackLocale: 'en'
});
</script>

11
src/lib/components/Navbar/Navbar.svelte
View File

@@ -6,6 +6,7 @@
import IconButton from '../IconButton.svelte';
import { fade } from 'svelte/transition';
import { modalStack } from '../Modal/Modal';
import { _ } from 'svelte-i18n';
let y = 0;
let transparent = true;
@@ -58,11 +59,11 @@
<div
class="flex items-center justify-center gap-4 md:gap-8 font-normal text-sm tracking-wider text-zinc-200"
>
<a href="/" class={$page && getLinkStyle('/')}>Home</a>
<a href="/discover" class={$page && getLinkStyle('/discover')}>Discover</a>
<a href="/library" class={$page && getLinkStyle('/library')}>Library</a>
<a href="/sources" class={$page && getLinkStyle('/sources')}>Sources</a>
<a href="/settings" class={$page && getLinkStyle('/settings')}>Settings</a>
<a href="/" class={$page && getLinkStyle('/')}>{$_('navbarHome')}</a>
<a href="/discover" class={$page && getLinkStyle('/discover')}>{$_('navbarDiscover')}</a>
<a href="/library" class={$page && getLinkStyle('/library')}>{$_('navbarLibrary')}</a>
<a href="/sources" class={$page && getLinkStyle('/sources')}>{$_('navbarSources')}</a>
<a href="/settings" class={$page && getLinkStyle('/settings')}>{$_('navbarSettings')}</a>
</div>
<div class="flex gap-2 items-center">
<IconButton on:click={openSearchModal}>

9
src/lib/components/Navbar/TitleSearchModal.svelte
View File

@@ -8,6 +8,7 @@
import ModalHeader from '../Modal/ModalHeader.svelte';
import { onMount } from 'svelte';
import type { TitleType } from '$lib/types';
import { _ } from 'svelte-i18n';
export let modalId: Symbol;
@@ -75,13 +76,15 @@
on:input={handleInput}
type="text"
class="flex-1 bg-transparent font-light outline-none"
placeholder="Search for Movies and Shows..."
placeholder={$_('searchModalPlaceholder')}
/>
</ModalHeader>
{#if resultProps === undefined || inputValue === ''}
<div class="text-sm text-zinc-200 opacity-50 font-light p-4">No recent searches</div>
<div class="text-sm text-zinc-200 opacity-50 font-light p-4">
{$_('searchNoRecentSearches')}
</div>
{:else if resultProps?.length === 0 && !fetching}
<div class="text-sm text-zinc-200 opacity-50 font-light p-4">No search results</div>
<div class="text-sm text-zinc-200 opacity-50 font-light p-4">{$_('searchNoResults')}</div>
{:else}
<div class="py-2">
{#each resultProps.slice(0, 5) as result}

6
src/lib/components/SetupRequired/SetupRequired.svelte
View File

@@ -1,12 +1,12 @@
<script lang="ts">
export let missingEnvironmentVariables: Record<string, boolean>;
import { _ } from 'svelte-i18n';
</script>
<div class="min-h-screen flex flex-col max-w-screen-2xl mx-auto p-4 md:p-8 lg:px-32 gap-2">
<h1 class="font-bold text-3xl">Welcome to Reiverr</h1>
<h1 class="font-bold text-3xl">{`${$_('setupRequiredTitle')} ${$_('appName')}`}</h1>
<p>
It seems like the application is missing some environment variables that are necessary for the
application to function. Please provide the following environment variables:
{$_('setupRequiredDescription')}
</p>
<ul class="flex flex-col gap-1">
{#each Object.keys(missingEnvironmentVariables).filter((k) => missingEnvironmentVariables[k]) as variableName}