Skip to content

Commit

Permalink
localization v2
Browse files Browse the repository at this point in the history
  • Loading branch information
@seanmorley15
seanmorley15 committed Oct 28, 2024
1 parent 6cf62cf commit 91c0ec8
Show file tree
Hide file tree
Showing 18 changed files with 432 additions and 101 deletions.
28 changes: 27 additions & 1 deletion .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,29 @@
{
"git.ignoreLimitWarning": true
"git.ignoreLimitWarning": true,
"i18n-ally.localesPaths": [
"frontend/src/locales",
"backend/server/backend/lib/python3.12/site-packages/allauth/locale",
"backend/server/backend/lib/python3.12/site-packages/dj_rest_auth/locale",
"backend/server/backend/lib/python3.12/site-packages/rest_framework/locale",
"backend/server/backend/lib/python3.12/site-packages/rest_framework_simplejwt/locale",
"backend/server/backend/lib/python3.12/site-packages/django/conf/locale",
"backend/server/backend/lib/python3.12/site-packages/django/contrib/messages",
"backend/server/backend/lib/python3.12/site-packages/allauth/templates/account/messages",
"backend/server/backend/lib/python3.12/site-packages/allauth/templates/mfa/messages",
"backend/server/backend/lib/python3.12/site-packages/allauth/templates/socialaccount/messages",
"backend/server/backend/lib/python3.12/site-packages/allauth/templates/usersessions/messages",
"backend/server/backend/lib/python3.12/site-packages/django/contrib/admindocs/locale",
"backend/server/backend/lib/python3.12/site-packages/django/contrib/auth/locale",
"backend/server/backend/lib/python3.12/site-packages/django/contrib/admin/locale",
"backend/server/backend/lib/python3.12/site-packages/django/contrib/contenttypes/locale",
"backend/server/backend/lib/python3.12/site-packages/django/contrib/flatpages/locale",
"backend/server/backend/lib/python3.12/site-packages/django/contrib/humanize/locale",
"backend/server/backend/lib/python3.12/site-packages/django/contrib/gis/locale",
"backend/server/backend/lib/python3.12/site-packages/django/contrib/redirects/locale",
"backend/server/backend/lib/python3.12/site-packages/django/contrib/postgres/locale",
"backend/server/backend/lib/python3.12/site-packages/django/contrib/sessions/locale",
"backend/server/backend/lib/python3.12/site-packages/django/contrib/sites/locale",
"backend/server/backend/lib/python3.12/site-packages/rest_framework/templates/rest_framework/docs/langs"
],
"i18n-ally.keystyle": "nested"
}
14 changes: 4 additions & 10 deletions frontend/src/hooks.server.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,17 +109,11 @@ export const themeHook: Handle = async ({ event, resolve }) => {

// hook to get the langauge cookie and set the locale
export const i18nHook: Handle = async ({ event, resolve }) => {
let lang = event.cookies.get('lang');
if (!lang) {
lang = ''; // Set default locale
event.cookies.set('lang', lang, {
httpOnly: true,
sameSite: 'lax',
expires: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000), // 1 year
path: '/'
});
let locale = event.cookies.get('locale');
if (!locale) {
return await resolve(event);
}
event.locals.locale = lang; // Store the locale in locals
event.locals.locale = locale; // Store the locale in locals
return await resolve(event);
};

Expand Down
62 changes: 17 additions & 45 deletions frontend/src/lib/components/AdventureCard.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,14 @@
import MapMarker from '~icons/mdi/map-marker';
import { addToast } from '$lib/toasts';
import Link from '~icons/mdi/link-variant';
import CheckBold from '~icons/mdi/check-bold';
import FormatListBulletedSquare from '~icons/mdi/format-list-bulleted-square';
import LinkVariantRemove from '~icons/mdi/link-variant-remove';
import Plus from '~icons/mdi/plus';
import CollectionLink from './CollectionLink.svelte';
import DotsHorizontal from '~icons/mdi/dots-horizontal';
import DeleteWarning from './DeleteWarning.svelte';
import { isAdventureVisited, typeToString } from '$lib';
import { isAdventureVisited } from '$lib';
import CardCarousel from './CardCarousel.svelte';
import { t } from 'svelte-i18n';
export let type: string;
export let user: User | null;
Expand Down Expand Up @@ -67,34 +66,13 @@
body: JSON.stringify({ collection: null })
});
if (res.ok) {
console.log('Adventure removed from collection');
addToast('info', 'Adventure removed from collection successfully!');
addToast('info', `${$t('adventures.collection_remove_success')}`);
dispatch('delete', adventure.id);
} else {
console.log('Error removing adventure from collection');
addToast('error', `${$t('adventures.collection_remove_error')}`);
}
}
function changeType(newType: string) {
return async () => {
let res = await fetch(`/api/adventures/${adventure.id}/`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ type: newType })
});
if (res.ok) {
console.log('Adventure type changed');
dispatch('typeChange', adventure.id);
addToast('info', 'Adventure type changed successfully!');
adventure.type = newType;
} else {
console.log('Error changing adventure type');
}
};
}
async function linkCollection(event: CustomEvent<number>) {
let collectionId = event.detail;
let res = await fetch(`/api/adventures/${adventure.id}`, {
Expand All @@ -106,11 +84,11 @@
});
if (res.ok) {
console.log('Adventure linked to collection');
addToast('info', 'Adventure linked to collection successfully!');
addToast('info', `${$t('adventures.collection_link_success')}`);
isCollectionModalOpen = false;
dispatch('delete', adventure.id);
} else {
console.log('Error linking adventure to collection');
addToast('error', `${$t('adventures.collection_link_error')}`);
}
}
Expand All @@ -131,7 +109,7 @@
<DeleteWarning
title="Delete Adventure"
button_text="Delete"
description="Are you sure you want to delete this adventure? This action cannot be undone."
description={$t('adventures.adventure_delete_confirm')}
is_warning={false}
on:close={() => (isWarningModalOpen = false)}
on:confirm={deleteAdventure}
Expand All @@ -153,7 +131,7 @@
</button>
</div>
<div>
<div class="badge badge-primary">{typeToString(adventure.type)}</div>
<div class="badge badge-primary">{$t(`adventures.activities.${adventure.type}`)}</div>
<div class="badge badge-success">{isAdventureVisited(adventure) ? 'Visited' : 'Planned'}</div>
<div class="badge badge-secondary">{adventure.is_public ? 'Public' : 'Private'}</div>
</div>
Expand Down Expand Up @@ -198,38 +176,32 @@
<button
class="btn btn-neutral mb-2"
on:click={() => goto(`/adventures/${adventure.id}`)}
><Launch class="w-6 h-6" />Open Details</button
><Launch class="w-6 h-6" />{$t('adventures.open_details')}</button
>
<button class="btn btn-neutral mb-2" on:click={editAdventure}>
<FileDocumentEdit class="w-6 h-6" />Edit Adventure
<FileDocumentEdit class="w-6 h-6" />
{$t('adventures.edit_adventure')}
</button>
{#if adventure.type == 'visited' && user?.pk == adventure.user_id}
<button class="btn btn-neutral mb-2" on:click={changeType('planned')}
><FormatListBulletedSquare class="w-6 h-6" />Change to Plan</button
>
{/if}
{#if adventure.type == 'planned' && user?.pk == adventure.user_id}
<button class="btn btn-neutral mb-2" on:click={changeType('visited')}
><CheckBold class="w-6 h-6" />Mark Visited</button
>
{/if}

<!-- remove from collection -->
{#if adventure.collection && user?.pk == adventure.user_id}
<button class="btn btn-neutral mb-2" on:click={removeFromCollection}
><LinkVariantRemove class="w-6 h-6" />Remove from Collection</button
><LinkVariantRemove class="w-6 h-6" />{$t(
'adventures.remove_from_collection'
)}</button
>
{/if}
{#if !adventure.collection}
<button class="btn btn-neutral mb-2" on:click={() => (isCollectionModalOpen = true)}
><Plus class="w-6 h-6" />Add to Collection</button
><Plus class="w-6 h-6" />{$t('adventures.add_to_collection')}</button
>
{/if}
<button
id="delete_adventure"
data-umami-event="Delete Adventure"
class="btn btn-warning"
on:click={() => (isWarningModalOpen = true)}
><TrashCan class="w-6 h-6" />Delete</button
><TrashCan class="w-6 h-6" />{$t('adventures.delete')}</button
>
</ul>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/Avatar.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<div class="avatar placeholder">
<div class="bg-neutral rounded-full text-neutral-200 w-10 ml-4">
{#if user.profile_pic}
<img src={user.profile_pic} alt="User Profile" />
<img src={user.profile_pic} alt={$t('navbar.profile')} />
{:else}
<span class="text-2xl -mt-1">{letter}</span>
{/if}
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/lib/components/CardCarousel.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script lang="ts">
import type { Adventure } from '$lib/types';
import ImageDisplayModal from './ImageDisplayModal.svelte';
import { t } from 'svelte-i18n';
export let adventures: Adventure[] = [];
Expand Down Expand Up @@ -79,7 +80,7 @@
{:else}
<!-- svelte-ignore a11y-img-redundant-alt -->
<img
src={'https://placehold.co/300?text=No%20Image%20Found&font=roboto'}
src={`https://placehold.co/300?text=${$t('adventures.no_image_found')}&font=roboto`}
alt="No image available"
class="w-full h-48 object-cover"
/>
Expand Down
50 changes: 35 additions & 15 deletions frontend/src/lib/components/Navbar.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,25 @@
import WeatherSunny from '~icons/mdi/weather-sunny';
import WeatherNight from '~icons/mdi/weather-night';
import Forest from '~icons/mdi/forest';
import Flower from '~icons/mdi/flower';
import Water from '~icons/mdi/water';
import AboutModal from './AboutModal.svelte';
import AccountMultiple from '~icons/mdi/account-multiple';
import Avatar from './Avatar.svelte';
import PaletteOutline from '~icons/mdi/palette-outline';
import { page } from '$app/stores';
import { t } from 'svelte-i18n';
import { t, locale, locales } from 'svelte-i18n';
let query: string = '';
let isAboutModalOpen: boolean = false;
const submitLocaleChange = (event: Event) => {
const select = event.target as HTMLSelectElement;
const newLocale = select.value;
document.cookie = `locale=${newLocale}; path=/`;
locale.set(newLocale);
window.location.reload();
};
const submitUpdateTheme: SubmitFunction = ({ action }) => {
const theme = action.searchParams.get('theme');
console.log('theme', theme);
Expand Down Expand Up @@ -104,7 +110,7 @@

<form class="flex gap-2">
<label class="input input-bordered flex items-center gap-2">
<input type="text" bind:value={query} class="grow" placeholder="Search" />
<input type="text" bind:value={query} class="grow" placeholder={$t('navbar.search')} />

<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -172,7 +178,7 @@

<form class="flex gap-2">
<label class="input input-bordered flex items-center gap-2">
<input type="text" bind:value={query} class="grow" placeholder="Search" />
<input type="text" bind:value={query} class="grow" placeholder={$t('navbar.search')} />

<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -206,41 +212,55 @@
tabindex="0"
class="dropdown-content bg-neutral text-neutral-content z-[1] menu p-2 shadow rounded-box w-52"
>
<button class="btn" on:click={() => (isAboutModalOpen = true)}>About AdventureLog</button>
<button class="btn" on:click={() => (isAboutModalOpen = true)}>{$t('navbar.about')}</button>
<button
class="btn btn-sm mt-2"
on:click={() => (window.location.href = 'https://docs.adventurelog.app/')}
>Documentation</button
>{$t('navbar.documentation')}</button
>
<button
class="btn btn-sm mt-2"
on:click={() => (window.location.href = 'https://discord.gg/wRbQ9Egr8C')}>Discord</button
on:click={() => (window.location.href = 'https://discord.gg/wRbQ9Egr8C')}
>{$t('navbar.discord')}</button
>
<p class="font-bold m-4 text-lg">Theme Selection</p>
<p class="font-bold m-4 text-lg">{$t('navbar.theme_selection')}</p>
<form method="POST" use:enhance={submitUpdateTheme}>
<li>
<button formaction="/?/setTheme&theme=light"
>Light<WeatherSunny class="w-6 h-6" />
>{$t('navbar.themes.light')}<WeatherSunny class="w-6 h-6" />
</button>
</li>
<li>
<button formaction="/?/setTheme&theme=dark">Dark<WeatherNight class="w-6 h-6" /></button
<button formaction="/?/setTheme&theme=dark"
>{$t('navbar.themes.dark')}<WeatherNight class="w-6 h-6" /></button
>
</li>
<li>
<button formaction="/?/setTheme&theme=night"
>Night<WeatherNight class="w-6 h-6" /></button
>{$t('navbar.themes.night')}<WeatherNight class="w-6 h-6" /></button
>
</li>
<li>
<button formaction="/?/setTheme&theme=forest">Forest<Forest class="w-6 h-6" /></button>
<button formaction="/?/setTheme&theme=forest"
>{$t('navbar.themes.forest')}<Forest class="w-6 h-6" /></button
>
<button formaction="/?/setTheme&theme=aestheticLight"
>Aesthetic Light<PaletteOutline class="w-6 h-6" /></button
>{$t('navbar.themes.aestetic-light')}<PaletteOutline class="w-6 h-6" /></button
>
<button formaction="/?/setTheme&theme=aestheticDark"
>Aesthetic Dark<PaletteOutline class="w-6 h-6" /></button
>{$t('navbar.themes.aestetic-dark')}<PaletteOutline class="w-6 h-6" /></button
>
<button formaction="/?/setTheme&theme=aqua"
>{$t('navbar.themes.aqua')}<Water class="w-6 h-6" /></button
>
<button formaction="/?/setTheme&theme=aqua">Aqua<Water class="w-6 h-6" /></button>
<form method="POST" use:enhance>
<select class="select" on:change={submitLocaleChange} bind:value={$locale}>
{#each $locales as loc}
<option value={loc}>{loc}</option>
{/each}
</select>
<input type="hidden" name="locale" value={$locale} />
</form>
</li>
</form>
</ul>
Expand Down
9 changes: 0 additions & 9 deletions frontend/src/lib/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,15 +253,6 @@ export let ADVENTURE_TYPES = [
{ type: 'other', label: 'Other' }
];

export function typeToString(type: string) {
const typeObj = ADVENTURE_TYPES.find((t) => t.type === type);
if (typeObj) {
return typeObj.label;
} else {
return 'Unknown';
}
}

/**
* Checks if an adventure has been visited.
*
Expand Down
Empty file added frontend/src/lib/localization.ts
View file
Empty file.
Loading

0 comments on commit 91c0ec8

Please sign in to comment.