generated from Seekra/repository-template
Use vue-i18n #68
@@ -364,6 +364,16 @@ OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
|
||||
|
||||
-----------
|
||||
|
||||
The following npm package may be included in this product:
|
||||
|
||||
- @vue/devtools-api@6.6.4
|
||||
|
||||
This package contains the following license:
|
||||
|
||||
MIT
|
||||
|
||||
-----------
|
||||
|
||||
The following npm package may be included in this product:
|
||||
|
||||
- json5@2.2.3
|
||||
@@ -1371,6 +1381,67 @@ SOFTWARE.
|
||||
|
||||
-----------
|
||||
|
||||
The following npm packages may be included in this product:
|
||||
|
||||
- @intlify/core-base@11.4.4
|
||||
- @intlify/message-compiler@11.4.4
|
||||
- @intlify/shared@11.4.4
|
||||
- vue-i18n@11.4.4
|
||||
|
||||
These packages each contain the following license:
|
||||
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2020 kazuya kawaguchi
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
-----------
|
||||
|
||||
The following npm package may be included in this product:
|
||||
|
||||
- @intlify/devtools-types@11.4.4
|
||||
|
||||
This package contains the following license:
|
||||
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2024 kazuya kawaguchi
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
-----------
|
||||
|
||||
The following npm package may be included in this product:
|
||||
|
||||
- hookable@5.5.3
|
||||
|
||||
Generated
+83
@@ -10,6 +10,7 @@
|
||||
"dependencies": {
|
||||
"terser": "^5.47.1",
|
||||
"vue": "^3.5.32",
|
||||
"vue-i18n": "^11.4.4",
|
||||
"vue-router": "^5.0.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -106,6 +107,63 @@
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@intlify/core-base": {
|
||||
"version": "11.4.4",
|
||||
"resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.4.4.tgz",
|
||||
"integrity": "sha512-w/vItlylrAmhebkIbVl5YY8XMCtj8Mb2g70ttxktMYuf5AuRahgEHL2iLgLIsZBIbTSgs4hkUo7ucCL0uTJvOg==",
|
||||
"dependencies": {
|
||||
"@intlify/devtools-types": "11.4.4",
|
||||
"@intlify/message-compiler": "11.4.4",
|
||||
"@intlify/shared": "11.4.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 22"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/kazupon"
|
||||
}
|
||||
},
|
||||
"node_modules/@intlify/devtools-types": {
|
||||
"version": "11.4.4",
|
||||
"resolved": "https://registry.npmjs.org/@intlify/devtools-types/-/devtools-types-11.4.4.tgz",
|
||||
"integrity": "sha512-PcBLmGmDQsTSVV911P8upzpcLJO1CNVYi/IH6bGnLR2nA+0L963+kXN1ZrisTEnbtw2ewN6HMMSldqzjronA0Q==",
|
||||
"dependencies": {
|
||||
"@intlify/core-base": "11.4.4",
|
||||
"@intlify/shared": "11.4.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 22"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/kazupon"
|
||||
}
|
||||
},
|
||||
"node_modules/@intlify/message-compiler": {
|
||||
"version": "11.4.4",
|
||||
"resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.4.4.tgz",
|
||||
"integrity": "sha512-vn0OAV9pYkJlPPmgnsSm5eAG3mL0+9C/oaded2JY9jmxBbhmUXT3TcAUY8WRgLY9Hte7lkUJKpXrVlYjMXBD2w==",
|
||||
"dependencies": {
|
||||
"@intlify/shared": "11.4.4",
|
||||
"source-map-js": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 22"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/kazupon"
|
||||
}
|
||||
},
|
||||
"node_modules/@intlify/shared": {
|
||||
"version": "11.4.4",
|
||||
"resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.4.4.tgz",
|
||||
"integrity": "sha512-QRUCHqda1U6aR14FR0vvXD4+4gj6+fm0AhAozvSuRCw0fCvrmCugWpgiR4xH2NI6s8am6N9p5OhirplsX8ZS3g==",
|
||||
"engines": {
|
||||
"node": ">= 22"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/kazupon"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/gen-mapping": {
|
||||
"version": "0.3.13",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
|
||||
@@ -2105,6 +2163,31 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vue-i18n": {
|
||||
"version": "11.4.4",
|
||||
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.4.4.tgz",
|
||||
"integrity": "sha512-gIbXVSFQV4jcSJxfwdZ5zSZmZ+12CnX0K3vBkRSd6Zn+HSzCp+QwUgPwpD/uN0oKNKI9RzlUXPKVedEuMgNG0A==",
|
||||
"dependencies": {
|
||||
"@intlify/core-base": "11.4.4",
|
||||
"@intlify/devtools-types": "11.4.4",
|
||||
"@intlify/shared": "11.4.4",
|
||||
"@vue/devtools-api": "^6.5.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 22"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/kazupon"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-i18n/node_modules/@vue/devtools-api": {
|
||||
"version": "6.6.4",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
|
||||
"integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
|
||||
},
|
||||
"node_modules/vue-router": {
|
||||
"version": "5.0.6",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.0.6.tgz",
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
"dependencies": {
|
||||
"terser": "^5.47.1",
|
||||
"vue": "^3.5.32",
|
||||
"vue-i18n": "^11.4.4",
|
||||
"vue-router": "^5.0.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -16,6 +16,9 @@ limitations under the License.
|
||||
|
||||
<script setup>
|
||||
import { inject } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const colorScheme = inject('colorScheme');
|
||||
|
||||
@@ -25,24 +28,22 @@ const colorSchemeNextMapper = {
|
||||
'auto': 'light'
|
||||
};
|
||||
|
||||
const colorSchemeTextMapper = {
|
||||
'light': 'Switch to light mode',
|
||||
'dark': 'Switch to dark mode',
|
||||
'auto': 'Switch to the system scheme'
|
||||
}
|
||||
|
||||
const colorSchemeIconMapper = {
|
||||
'dark': '⏾',
|
||||
'light': '☀',
|
||||
'auto': '◐'
|
||||
}
|
||||
};
|
||||
|
||||
const getTooltipTranslation = function (colorScheme) {
|
||||
return t(`preferences.colorScheme.switch.${colorSchemeNextMapper[colorScheme]}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button class="color-scheme-button"
|
||||
@click="colorScheme = colorSchemeNextMapper[colorScheme]"
|
||||
:aria-label="colorSchemeTextMapper[colorSchemeNextMapper[colorScheme]]"
|
||||
:title="colorSchemeTextMapper[colorSchemeNextMapper[colorScheme]]"
|
||||
:aria-label="getTooltipTranslation(colorScheme)"
|
||||
:title="getTooltipTranslation(colorScheme)"
|
||||
>
|
||||
{{ colorSchemeIconMapper[colorSchemeNextMapper[colorScheme]] }}
|
||||
</button>
|
||||
|
||||
@@ -18,6 +18,9 @@ limitations under the License.
|
||||
const searchQuery = defineModel();
|
||||
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const router = useRouter()
|
||||
const props = defineProps(['autoSubmit'])
|
||||
@@ -38,10 +41,10 @@ const submitSearch = function () {
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="search"
|
||||
placeholder="Search..."
|
||||
:placeholder="t('search.searchBar.placeholder')"
|
||||
required
|
||||
/>
|
||||
<button type="submit" class="search-button">Search</button>
|
||||
<button type="submit" class="search-button">{{ t('search.searchBar.submit') }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
@@ -17,6 +17,10 @@ limitations under the License.
|
||||
<script setup>
|
||||
import Searchbar from '@/features/search/components/Searchbar.vue';
|
||||
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const props = defineProps(['searchQuery']);
|
||||
|
||||
const searchQueryModel = defineModel();
|
||||
@@ -28,8 +32,8 @@ searchQueryModel.value = props.searchQuery;
|
||||
|
||||
<div class="search-results-error-message-container">
|
||||
<div class="search-results-error-message">
|
||||
<p>Search is not available right now.</p>
|
||||
<p>Please try again to another time.</p>
|
||||
<p>{{ t('search.error.searchNotAvailable') }}</p>
|
||||
<p>{{ t('error.tryAgainToAnotherTime') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-results-container">
|
||||
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
/*
|
||||
Copyright 2026 Seekra
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { createI18n } from 'vue-i18n';
|
||||
import getCurrentLanguage from './utils/currentLanguage';
|
||||
|
||||
export const fallbackLocale = 'en';
|
||||
|
||||
const SUPPORTED_LANGUAGES = [
|
||||
'en'
|
||||
];
|
||||
|
||||
export const i18n = createI18n({
|
||||
legacy: false,
|
||||
locale: getCurrentLanguage(),
|
||||
fallbackLocale: fallbackLocale,
|
||||
messages: {}
|
||||
});
|
||||
|
||||
const loadedLanguages = new Set();
|
||||
|
||||
export async function loadLanguage (locale) {
|
||||
if (!SUPPORTED_LANGUAGES.includes(locale)) {
|
||||
locale = fallbackLocale;
|
||||
}
|
||||
|
||||
if (loadedLanguages.has(locale)) {
|
||||
i18n.global.locale.value = locale;
|
||||
return;
|
||||
};
|
||||
|
||||
const messages = (await import(`./locales/${locale}.json`)).default;
|
||||
|
||||
i18n.global.setLocaleMessage(locale, messages);
|
||||
i18n.global.locale.value = locale;
|
||||
|
||||
loadedLanguages.add(locale);
|
||||
};
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"search": {
|
||||
"searchBar": {
|
||||
"submit": "Search",
|
||||
"placeholder": "Search..."
|
||||
},
|
||||
"error": {
|
||||
"searchNotAvailable": "Search is not available right now."
|
||||
}
|
||||
},
|
||||
"error": {
|
||||
"tryAgainToAnotherTime": "Please try again to another time.",
|
||||
"pageNotFound": "The page you are looking for does not exist. Please check the URL or return to the search page."
|
||||
},
|
||||
"links": {
|
||||
"back": {
|
||||
"search": "Back to Search"
|
||||
}
|
||||
},
|
||||
"preferences": {
|
||||
"colorScheme": {
|
||||
"switch": {
|
||||
"light": "Switch to light mode",
|
||||
"dark": "Switch to dark mode",
|
||||
"auto": "Switch to the system color scheme"
|
||||
}
|
||||
}
|
||||
},
|
||||
"slogan": "Built to search."
|
||||
}
|
||||
+8
-1
@@ -16,8 +16,15 @@ limitations under the License.
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import { i18n, loadLanguage } from './i18n';
|
||||
import getCurrentLanguage from './utils/currentLanguage';
|
||||
import router from './router'
|
||||
import './styles/common.css'
|
||||
import './styles/variables/colors.css'
|
||||
|
||||
createApp(App).use(router).mount('#app')
|
||||
await loadLanguage(getCurrentLanguage());
|
||||
|
||||
createApp(App)
|
||||
.use(router)
|
||||
.use(i18n)
|
||||
.mount('#app')
|
||||
@@ -0,0 +1,20 @@
|
||||
/*
|
||||
Copyright 2026 Seekra
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
export default function getCurrentLanguage () {
|
||||
const locale = new Intl.Locale(navigator.language);
|
||||
return locale.language;
|
||||
};
|
||||
+10
-2
@@ -14,12 +14,20 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const { t } = useI18n();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="not-found">
|
||||
<span class="error-message">
|
||||
The page you are looking for does not exist. Please check the URL or return to the search page.
|
||||
{{ t('error.pageNotFound') }}
|
||||
</span>
|
||||
<RouterLink to="/" id="link">Back to Search</RouterLink>
|
||||
<RouterLink to="/" id="link">
|
||||
{{ t('links.back.search') }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -18,8 +18,10 @@ limitations under the License.
|
||||
import Searchbar from '../features/search/components/Searchbar.vue';
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import logo from '@/assets/logo.svg';
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
|
||||
const searchQuery = ref('');
|
||||
@@ -34,7 +36,7 @@ const submitSearch = function () {
|
||||
<header class="global-header">
|
||||
<img :src="logo" alt="Seekra" class="header-logo" />
|
||||
<span class="slogan">
|
||||
Built to search.
|
||||
{{ t('slogan') }}
|
||||
</span>
|
||||
</header>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user