mirror of
https://github.com/NotXia/notxia.github.io.git
synced 2025-12-14 19:01:51 +01:00
Add locale handling
This commit is contained in:
128
package-lock.json
generated
128
package-lock.json
generated
@ -10,6 +10,7 @@
|
||||
"dependencies": {
|
||||
"flowbite": "^1.6.2",
|
||||
"vue": "^3.2.45",
|
||||
"vue-i18n": "^9.2.2",
|
||||
"vue-router": "^4.1.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -388,6 +389,63 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@intlify/core-base": {
|
||||
"version": "9.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.2.2.tgz",
|
||||
"integrity": "sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==",
|
||||
"dependencies": {
|
||||
"@intlify/devtools-if": "9.2.2",
|
||||
"@intlify/message-compiler": "9.2.2",
|
||||
"@intlify/shared": "9.2.2",
|
||||
"@intlify/vue-devtools": "9.2.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 14"
|
||||
}
|
||||
},
|
||||
"node_modules/@intlify/devtools-if": {
|
||||
"version": "9.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.2.2.tgz",
|
||||
"integrity": "sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==",
|
||||
"dependencies": {
|
||||
"@intlify/shared": "9.2.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 14"
|
||||
}
|
||||
},
|
||||
"node_modules/@intlify/message-compiler": {
|
||||
"version": "9.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
|
||||
"integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
|
||||
"dependencies": {
|
||||
"@intlify/shared": "9.2.2",
|
||||
"source-map": "0.6.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 14"
|
||||
}
|
||||
},
|
||||
"node_modules/@intlify/shared": {
|
||||
"version": "9.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.2.tgz",
|
||||
"integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==",
|
||||
"engines": {
|
||||
"node": ">= 14"
|
||||
}
|
||||
},
|
||||
"node_modules/@intlify/vue-devtools": {
|
||||
"version": "9.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz",
|
||||
"integrity": "sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==",
|
||||
"dependencies": {
|
||||
"@intlify/core-base": "9.2.2",
|
||||
"@intlify/shared": "9.2.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 14"
|
||||
}
|
||||
},
|
||||
"node_modules/@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
@ -2734,6 +2792,23 @@
|
||||
"@vue/shared": "3.2.45"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-i18n": {
|
||||
"version": "9.2.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
|
||||
"integrity": "sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==",
|
||||
"dependencies": {
|
||||
"@intlify/core-base": "9.2.2",
|
||||
"@intlify/shared": "9.2.2",
|
||||
"@intlify/vue-devtools": "9.2.2",
|
||||
"@vue/devtools-api": "^6.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-router": {
|
||||
"version": "4.1.6",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz",
|
||||
@ -3001,6 +3076,48 @@
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@intlify/core-base": {
|
||||
"version": "9.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.2.2.tgz",
|
||||
"integrity": "sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==",
|
||||
"requires": {
|
||||
"@intlify/devtools-if": "9.2.2",
|
||||
"@intlify/message-compiler": "9.2.2",
|
||||
"@intlify/shared": "9.2.2",
|
||||
"@intlify/vue-devtools": "9.2.2"
|
||||
}
|
||||
},
|
||||
"@intlify/devtools-if": {
|
||||
"version": "9.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.2.2.tgz",
|
||||
"integrity": "sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==",
|
||||
"requires": {
|
||||
"@intlify/shared": "9.2.2"
|
||||
}
|
||||
},
|
||||
"@intlify/message-compiler": {
|
||||
"version": "9.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
|
||||
"integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
|
||||
"requires": {
|
||||
"@intlify/shared": "9.2.2",
|
||||
"source-map": "0.6.1"
|
||||
}
|
||||
},
|
||||
"@intlify/shared": {
|
||||
"version": "9.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.2.tgz",
|
||||
"integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q=="
|
||||
},
|
||||
"@intlify/vue-devtools": {
|
||||
"version": "9.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz",
|
||||
"integrity": "sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==",
|
||||
"requires": {
|
||||
"@intlify/core-base": "9.2.2",
|
||||
"@intlify/shared": "9.2.2"
|
||||
}
|
||||
},
|
||||
"@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
@ -4671,6 +4788,17 @@
|
||||
"@vue/shared": "3.2.45"
|
||||
}
|
||||
},
|
||||
"vue-i18n": {
|
||||
"version": "9.2.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
|
||||
"integrity": "sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==",
|
||||
"requires": {
|
||||
"@intlify/core-base": "9.2.2",
|
||||
"@intlify/shared": "9.2.2",
|
||||
"@intlify/vue-devtools": "9.2.2",
|
||||
"@vue/devtools-api": "^6.2.1"
|
||||
}
|
||||
},
|
||||
"vue-router": {
|
||||
"version": "4.1.6",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz",
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
"dependencies": {
|
||||
"flowbite": "^1.6.2",
|
||||
"vue": "^3.2.45",
|
||||
"vue-i18n": "^9.2.2",
|
||||
"vue-router": "^4.1.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
37
src/components/LanguageSelector/LanguageSelector.vue
Normal file
37
src/components/LanguageSelector/LanguageSelector.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<button id="button-dropdown-locales" data-dropdown-toggle="dropdown-locales" type="button"
|
||||
class="rounded-full p-1 hover:bg-slate-200 dark:hover:bg-slate-700">
|
||||
<div class="w-5 h-5 flex items-center justify-center">
|
||||
<div class="dark:invert">
|
||||
<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 466.337 466.337">
|
||||
<g><path d="M233.168,0C104.604,0,0,104.604,0,233.168c0,128.565,104.604,233.169,233.168,233.169 c128.565,0,233.169-104.604,233.169-233.169C466.337,104.604,361.733,0,233.168,0z M223.984,441.874 c-22.321,0-46.405-41.384-59.045-107.815h118.067C270.371,400.49,246.316,441.874,223.984,441.874z M161.114,310.144 c-2.738-19.991-4.437-41.781-4.881-65.018H291.74c-0.443,23.237-2.148,45.027-4.869,65.018H161.114z M24.521,245.126h107.704 c0.443,21.883,2.09,43.859,4.887,65.018H38.768C30.693,289.826,25.818,267.966,24.521,245.126z M223.984,24.464 c21.982,0,45.687,40.14,58.484,104.877h-116.97C178.286,64.604,201.996,24.464,223.984,24.464z M286.463,153.245 c2.978,20.785,4.811,43.596,5.277,67.966H156.222c0.467-24.37,2.295-47.169,5.272-67.966H286.463z M132.226,221.211H24.521 c1.354-23.926,6.568-46.836,15.332-67.966h97.656C134.462,175.32,132.681,198.312,132.226,221.211z M315.749,245.126h126.065 c-1.296,22.84-6.188,44.7-14.246,65.018H310.855C313.646,288.985,315.305,267.009,315.749,245.126z M315.749,221.211 c-0.468-22.898-2.254-45.891-5.29-67.966h116.023c8.77,21.13,13.978,44.04,15.332,67.966H315.749z M414.596,129.33H306.617 c-7.894-42.067-20.727-78.844-38.195-102.222C330.952,37.799,384.06,76.205,414.596,129.33z M176.073,32.036 c-15.7,23.459-27.348,58.1-34.699,97.305H51.741C78.657,82.505,123.064,47.1,176.073,32.036z M49.96,334.058h90.895 c7.311,40.403,19.133,76.205,35.219,100.26C121.944,418.904,76.672,382.378,49.96,334.058z M268.41,439.222 c17.865-23.938,30.874-61.889,38.697-105.164h109.274C386.15,388.743,332.12,428.339,268.41,439.222z"/></g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div id="dropdown-locales" class="z-10 hidden bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600">
|
||||
<ul class="p-3 space-y-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="button-dropdown-locales">
|
||||
|
||||
<li v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`">
|
||||
<input :id="`radio-locale-${locale}`" type="radio" :value="locale" name="locale" class="hidden" v-model="$i18n.locale" :onChange="changeLocale">
|
||||
<label :for="`radio-locale-${locale}`" class="text-sm font-medium uppercase text-gray-900 rounded dark:text-gray-300 ">
|
||||
<div class="flex items-center p-2 px-5 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
|
||||
{{ locale }}
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Dropdown } from "flowbite";
|
||||
import { setLocale } from "@/utilities/locale_handler";
|
||||
|
||||
function changeLocale(e:any) {
|
||||
setLocale(e.target.value);
|
||||
}
|
||||
</script>
|
||||
@ -6,6 +6,7 @@
|
||||
<div class="block md:flex">
|
||||
<div class="flex justify-end items-center order-2">
|
||||
<ThemeSwitch />
|
||||
<LanguageSelector />
|
||||
|
||||
<button class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 md:hidden dark:text-gray-400"
|
||||
data-collapse-toggle="navbar-main" type="button" aria-controls="navbar-main" aria-expanded="false">
|
||||
@ -32,5 +33,6 @@
|
||||
<script setup lang="ts">
|
||||
import NavLink from "./NavLink.vue";
|
||||
import ThemeSwitch from "../ThemeSwitch/ThemeSwitch.vue";
|
||||
import "flowbite";
|
||||
import LanguageSelector from "../LanguageSelector/LanguageSelector.vue";
|
||||
import { Dropdown } from "flowbite";
|
||||
</script>
|
||||
|
||||
10
src/main.ts
10
src/main.ts
@ -2,7 +2,15 @@ import { createApp } from "vue"
|
||||
import App from "./App.vue"
|
||||
import router from "./router"
|
||||
import "./assets/main.css"
|
||||
import { createI18n } from "vue-i18n";
|
||||
import { getLocale } from "./utilities/locale_handler";
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(router)
|
||||
app.mount("#app")
|
||||
app.use(createI18n({
|
||||
legacy: false,
|
||||
locale: getLocale(),
|
||||
fallbackLocale: "it",
|
||||
messages: { "en": {}, "it": {} },
|
||||
}));
|
||||
app.mount("#app")
|
||||
7
src/utilities/locale_handler.ts
Normal file
7
src/utilities/locale_handler.ts
Normal file
@ -0,0 +1,7 @@
|
||||
export function getLocale():string {
|
||||
return localStorage.getItem("locale") ?? window.navigator.language.split("-")[0];
|
||||
}
|
||||
|
||||
export function setLocale(locale:string):void {
|
||||
localStorage.setItem("locale", locale);
|
||||
}
|
||||
@ -2,13 +2,19 @@
|
||||
<Navbar />
|
||||
|
||||
<main>
|
||||
<h1 class="text-5xl font-bold">
|
||||
Hello world
|
||||
</h1>
|
||||
<div class="container mx-auto">
|
||||
<h1 class="text-5xl font-bold">
|
||||
{{ t("hello") }}
|
||||
</h1>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import Navbar from "@/components/Navbar/Navbar.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import locale from "./locale.json";
|
||||
|
||||
const { t } = useI18n({ messages: locale });
|
||||
</script>
|
||||
8
src/views/locale.json
Normal file
8
src/views/locale.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"en": {
|
||||
"hello": "Hello"
|
||||
},
|
||||
"it": {
|
||||
"hello": "Ciao"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user