Skip to content

feat: Implement internationalization #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bishworup11 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: Implement internationalization #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 0 additions & 52 deletions assets/desktops.json
View file
Open in desktop

This file was deleted.

81 changes: 81 additions & 0 deletions components/LanguageSwitcher.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<script setup>
const { locales, locale, setLocale } = useI18n()

const isOpen = ref(false)
const toggleDropdown = () => {
isOpen.value = !isOpen.value
}

const currentLocaleCode = computed(() => {
return locales.value.find(l => l.code === locale.value)?.code.toUpperCase() || 'EN'
})

const changeLanguage = (code) => {
setLocale(code)
isOpen.value = false
}
</script>

<template>
<div class="relative inline-block text-left">
<div
type="button"
class=" flex justify-between items-center gap-2 inline-block"
@click="toggleDropdown"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
/>
</svg>
<span>{{ currentLocaleCode }}</span>
<svg
class="h-4 w-4 ml-1 transition-transform"
:class="{ 'rotate-180': isOpen }"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</div>

<!-- Dropdown menu -->
<ul
v-show="isOpen"
class="absolute right-0 mt-2 w-40 bg-base-100 dark:bg-gray-800 shadow rounded-md py-1 z-10"
>
<li
v-for="lang in locales"
:key="lang.code"
>
<button
class="w-full text-left px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 flex justify-between items-center"
:class="{ 'font-bold': locale === lang.code }"
@click="changeLanguage(lang.code)"
>
{{ lang.name }}
<span
v-if="locale === lang.code"
class="badge badge-xs badge-primary"
/>
</button>
</li>
</ul>
</div>
</template>
55 changes: 27 additions & 28 deletions components/footer-item.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div class="px-4 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
<div class="grid gap-16 row-gap-10 mb-8 lg:grid-cols-6">
<div class="md:max-w-md lg:col-span-2">
<a
<NuxtLink
href="/"
aria-label="Go home"
title="Manjaro"
Expand All @@ -16,7 +16,7 @@
alt="Manjaro Logo"
>
<span class="ml-2 text-xl font-bold tracking-wide text-gray-800 dark:text-gray-400">Manjaro</span>
</a>
</NuxtLink>
<div class="mt-4 lg:max-w-sm">
<p class="text-sm text-gray-800 dark:text-gray-400">
The Manjaro project is backed by Manjaro GmbH & Co. KG, an open source driven company.
Expand All @@ -26,105 +26,104 @@
<div class="grid grid-cols-2 gap-8 row-gap-8 lg:col-span-4 md:grid-cols-4">
<div>
<p class="font-semibold tracking-wide text-gray-800 dark:text-gray-400">
People
{{ $t('footer.people') }}
</p>
<ul class="mt-2 space-y-2">
<li>
<a
<NuxtLink
href="/team"
class="text-gray-600 dark:text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400"
>Team</a>
>{{ $t('footer.team') }}</NuxtLink>
</li>
<li>
<a
<NuxtLink
href="/donate"
class="text-gray-600 dark:text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400"
>Donate</a>
>{{ $t('footer.donate') }}</NuxtLink>
</li>
<li>
<a
<NuxtLink
href="/contribute"
class="text-gray-600 dark:text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400"
>Contribute</a>
>{{ $t('footer.contribute') }}</NuxtLink>
</li>
</ul>
</div>
<div>
<p class="font-semibold tracking-wide text-gray-800 dark:text-gray-400">
Commercial
{{ $t('footer.commercial') }}
</p>
<ul class="mt-2 space-y-2">
<li>
<a
<NuxtLink
href="/partners"
class="text-gray-600 dark:text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400"
>Partners</a>
>{{ $t('footer.partners') }}</NuxtLink>
</li>
<li>
<a
<NuxtLink
href="/dpp"
class="text-gray-600 dark:text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400"
>DPP</a>
>{{ $t('footer.dpp') }}</NuxtLink>
</li>
<li>
<a
<NuxtLink
href="/enterprise#contact-us"
class="text-gray-600 dark:text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400"
>Contact</a>
>{{ $t('footer.contact') }}</NuxtLink>
</li>
</ul>
</div>
<div>
<p class="font-semibold tracking-wide text-gray-800 dark:text-gray-400">
Status
{{ $t('footer.status') }}
</p>
<ul class="mt-2 space-y-2">
<li>
<a
href="https://repo.manjaro.org/"
target="_blank"
class="text-gray-600 dark:text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400"
>Mirrors</a>
>{{ $t('footer.mirrors') }}</a>
</li>
<li>
<a
href="https://manjaristas.org/branch_compare"
target="_blank"
class="text-gray-600 dark:text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400"
>Packages</a>
>{{ $t('footer.packages') }}</a>
</li>
<li>
<a
href="https://status.manjaro.org"
target="_blank"
class="text-gray-600 dark:text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400"
>Servers</a>
>{{ $t('footer.servers') }}</a>
</li>
</ul>
</div>
<div>
<p class="font-semibold tracking-wide text-gray-800 dark:text-gray-400">
Legal
{{ $t('footer.legal') }}
</p>
<ul class="mt-2 space-y-2">
<li>
<a
<NuxtLink
href="/privacy-policy"
class="text-gray-600 dark:text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400"
>Privacy Policy</a>
>{{ $t('footer.privacy_policy') }}</NuxtLink>
</li>
<li>
<a
<NuxtLink
href="/terms-of-use"
class="text-gray-600 dark:text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400"
>Terms
Of Use</a>
>{{ $t('footer.terms_of_use') }}</NuxtLink>
</li>
<li>
<a
<NuxtLink
href="/imprint"
class="text-gray-600 dark:text-gray-500 transition-colors duration-300 hover:text-deep-purple-accent-400"
>Imprint</a>
>{{ $t('footer.imprint') }}</NuxtLink>
</li>
</ul>
</div>
Expand Down
6 changes: 3 additions & 3 deletions components/iso-breadcrumbs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<nav
class="mx-auto pt-6 px-4 text-gray-600 dark:text-gray-500"
aria-label="Breadcrumb"
:aria-label="$t('iso.breadcrumbs_aria')"
>
<ol class="inline-flex flex-wrap items-center mb-3 sm:mb-0">
<li>
Expand All @@ -19,7 +19,7 @@
>
<path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z" />
</svg>
Products
{{ $t('navbar.products') }}
</NuxtLink>
</li>
<svg
Expand All @@ -37,7 +37,7 @@
href="/products"
class="inline-flex items-center px-2 py-2 gap-1.5 text-center rounded-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:hover:bg-gray-800 dark:focus:ring-gray-700"
>
Download
{{ $t('common.download') }}
</NuxtLink>
</li>
<svg
Expand Down
Loading