From 50219ad15bf23755d1522c20940eb152c991d279 Mon Sep 17 00:00:00 2001 From: Karim <20050570+yoshiyes@users.noreply.github.com> Date: Wed, 7 Sep 2022 10:53:52 +0200 Subject: [PATCH] Add language selector --- package-lock.json | 18 ++++++ package.json | 3 +- public/assets/images/flags/fr.png | Bin 0 -> 285 bytes public/assets/images/flags/uk.png | Bin 0 -> 2949 bytes src/common/components/BaseHeader.vue | 3 + src/common/components/BaseHomeHeader.vue | 3 + src/common/constants/languages.ts | 16 +++++ src/i18n/index.ts | 25 +++++++- src/i18n/locales/fr/footer.json | 4 ++ src/i18n/locales/fr/header.json | 8 +++ src/i18n/locales/fr/index.ts | 17 +++++ src/i18n/locales/fr/navigations.json | 7 ++ src/i18n/locales/fr/views/contribute.json | 12 ++++ src/i18n/locales/fr/views/download.json | 22 +++++++ src/i18n/locales/fr/views/homepage.json | 26 ++++++++ src/modules/LanguageSelector.vue | 75 ++++++++++++++++++++++ src/types/app/i18n.ts | 6 ++ src/types/index.ts | 2 +- 18 files changed, 244 insertions(+), 3 deletions(-) create mode 100644 public/assets/images/flags/fr.png create mode 100644 public/assets/images/flags/uk.png create mode 100644 src/common/constants/languages.ts create mode 100644 src/i18n/locales/fr/footer.json create mode 100644 src/i18n/locales/fr/header.json create mode 100644 src/i18n/locales/fr/index.ts create mode 100644 src/i18n/locales/fr/navigations.json create mode 100644 src/i18n/locales/fr/views/contribute.json create mode 100644 src/i18n/locales/fr/views/download.json create mode 100644 src/i18n/locales/fr/views/homepage.json create mode 100644 src/modules/LanguageSelector.vue create mode 100644 src/types/app/i18n.ts diff --git a/package-lock.json b/package-lock.json index 5225e19..f0bcf56 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "ryujinx-website", "version": "3.0.0", "dependencies": { + "@headlessui/vue": "^1.7.0", "@heroicons/vue": "^1.0.6", "axios": "^0.27.2", "dayjs": "^1.11.5", @@ -81,6 +82,17 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@headlessui/vue": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.0.tgz", + "integrity": "sha512-ClrXMThmo9lrFjHdzDQXsopjCgRA28v+u5s/J+gIAgvS5l3tTAI84GaVghFwxobijL9c6BsVgDQ7SrJ2dS1nLw==", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "vue": "^3.2.0" + } + }, "node_modules/@heroicons/vue": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-1.0.6.tgz", @@ -3341,6 +3353,12 @@ "strip-json-comments": "^3.1.1" } }, + "@headlessui/vue": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.0.tgz", + "integrity": "sha512-ClrXMThmo9lrFjHdzDQXsopjCgRA28v+u5s/J+gIAgvS5l3tTAI84GaVghFwxobijL9c6BsVgDQ7SrJ2dS1nLw==", + "requires": {} + }, "@heroicons/vue": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-1.0.6.tgz", diff --git a/package.json b/package.json index 1e5b44b..7372085 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "vue-i18n": "^9.2.2", "@heroicons/vue": "^1.0.6", "axios": "^0.27.2", - "dayjs": "^1.11.5" + "dayjs": "^1.11.5", + "@headlessui/vue": "^1.7.0" }, "devDependencies": { "@vitejs/plugin-vue": "^3.0.2", diff --git a/public/assets/images/flags/fr.png b/public/assets/images/flags/fr.png new file mode 100644 index 0000000000000000000000000000000000000000..f95f584d562afbb23f936e05b79c1e43c2d4cfd7 GIT binary patch literal 285 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 literal 0 HcmV?d00001 diff --git a/src/common/components/BaseHeader.vue b/src/common/components/BaseHeader.vue index 43cfd64..b3242f2 100644 --- a/src/common/components/BaseHeader.vue +++ b/src/common/components/BaseHeader.vue @@ -1,6 +1,7 @@ @@ -21,6 +22,8 @@ import { navigations } from "@/common/constants/navigation";
+ +
diff --git a/src/common/components/BaseHomeHeader.vue b/src/common/components/BaseHomeHeader.vue index bd37119..ff592d1 100644 --- a/src/common/components/BaseHomeHeader.vue +++ b/src/common/components/BaseHomeHeader.vue @@ -3,6 +3,7 @@ import { useI18n } from "vue-i18n"; import BaseNavigation from "@/common/components/navigations/BaseNavigation.vue"; import SocialIconList from "@/modules/SocialIconList.vue"; +import LanguageSelector from "@/modules/LanguageSelector.vue"; import { navigations } from "@/common/constants/navigation"; const { t } = useI18n(); @@ -40,6 +41,8 @@ const { t } = useI18n();
+ + diff --git a/src/common/constants/languages.ts b/src/common/constants/languages.ts new file mode 100644 index 0000000..ff91c1c --- /dev/null +++ b/src/common/constants/languages.ts @@ -0,0 +1,16 @@ +import { Language } from "@/types"; + +export const availableLanguages: Language[] = [ + { + id: 0, + tag: "en", + name: "English", + image: "/assets/images/flags/uk.png", + }, + { + id: 1, + tag: "fr", + name: "Français", + image: "/assets/images/flags/fr.png", + }, +]; diff --git a/src/i18n/index.ts b/src/i18n/index.ts index 551fe16..13d3b7b 100644 --- a/src/i18n/index.ts +++ b/src/i18n/index.ts @@ -1,12 +1,35 @@ import { createI18n } from "vue-i18n"; import { en } from "@/i18n/locales/en"; +import { fr } from "@/i18n/locales/fr"; +import { availableLanguages } from "@/common/constants/languages"; + +let locale = "en"; + +try { + const storeValue = localStorage.getItem("lang"); + + if (storeValue !== null) { + const lang = JSON.parse(storeValue as string); + locale = lang.tag; + } else { + if (navigator.language.startsWith("fr")) { + locale = "fr"; + localStorage.setItem("lang", JSON.stringify(availableLanguages[1])); + } else { + localStorage.setItem("lang", JSON.stringify(availableLanguages[0])); + } + } +} catch (e) { + console.error("Invalid lang:" + e); +} export const i18n = createI18n({ legacy: false, - locale: "en", + locale: locale, fallbackLocale: "en", messages: { en, + fr, }, }); diff --git a/src/i18n/locales/fr/footer.json b/src/i18n/locales/fr/footer.json new file mode 100644 index 0000000..f554598 --- /dev/null +++ b/src/i18n/locales/fr/footer.json @@ -0,0 +1,4 @@ +{ + "getStarted": "Démarrer", + "contribute": "Contribuer" +} diff --git a/src/i18n/locales/fr/header.json b/src/i18n/locales/fr/header.json new file mode 100644 index 0000000..47eac04 --- /dev/null +++ b/src/i18n/locales/fr/header.json @@ -0,0 +1,8 @@ +{ + "title1": "Un émulateur simple et expérimental pour {0}", + "title2": "Nintendo Switch", + "description": "Ryujinx est un émulateur open source Nintendo Switch créé par {0} et écrit en C#. Il a pour but d'être précis et performant tout en ayant une interface conviviale et des versions régulières.", + "author": "gdkchan", + "getStarted": "Démarrer", + "contribute": "Contribuer" +} diff --git a/src/i18n/locales/fr/index.ts b/src/i18n/locales/fr/index.ts new file mode 100644 index 0000000..7265c06 --- /dev/null +++ b/src/i18n/locales/fr/index.ts @@ -0,0 +1,17 @@ +import navigations from "./navigations.json"; +import footer from "./footer.json"; +import header from "./header.json"; +import homepage from "./views/homepage.json"; +import download from "./views/download.json"; +import contribute from "./views/contribute.json"; + +export const fr = { + navigations: navigations, + header: header, + footer: footer, + views: { + homepage: homepage, + download: download, + contribute: contribute + }, +}; diff --git a/src/i18n/locales/fr/navigations.json b/src/i18n/locales/fr/navigations.json new file mode 100644 index 0000000..24bf217 --- /dev/null +++ b/src/i18n/locales/fr/navigations.json @@ -0,0 +1,7 @@ +{ + "blog": "Blog", + "download": "Télécharger", + "guide": "Guide", + "faq": "FAQ", + "compatibility": "Compatibilité" +} diff --git a/src/i18n/locales/fr/views/contribute.json b/src/i18n/locales/fr/views/contribute.json new file mode 100644 index 0000000..6f5dc35 --- /dev/null +++ b/src/i18n/locales/fr/views/contribute.json @@ -0,0 +1,12 @@ +{ + "title1": "Aidez-nous à créer le {0}", + "title2": "meilleur émulateur pour switch", + "subTitle": "Créée par une équipe passionnée, Ryujinx est en développement actif et toute aide est appréciée pour la maintenir.", + "titleContribute": " Comment puis-je contribuer ?", + "areaDevTitle": "Aider au Développement", + "areaDevDescription": "Si vous avez de l'expérience avec le C#, les Homebrew, le design graphique, l'assurance qualité logicielle ou le test logiciel, la gestion de serveur Discord ou n'importe quelle autre compétence que vous pensez utiles pour le projet Ryujinx, veuillez nous contacter sur notre serveur Discord.", + "joinDiscord": "Rejoignez notre Discord", + "becomePatron": "Devenez un Patron", + "areaDonationTitle": "Aider avec les Dons", + "areaDonationDescription": "Si vous ne pouvez pas aider avec l'expérience de développement, il y a d'autres moyens de nous soutenir. Bien que les dons monétaires ne soient en aucun cas nécessaire, nous les apprécions. Ils financeront l\"équipements nécessaire. En retour, il y certaines récompenses que vous recevrez en tant que supporter (l'accès à un canal réservé sur notre Discord)." +} diff --git a/src/i18n/locales/fr/views/download.json b/src/i18n/locales/fr/views/download.json new file mode 100644 index 0000000..6dbe0ee --- /dev/null +++ b/src/i18n/locales/fr/views/download.json @@ -0,0 +1,22 @@ +{ + "title1": "Dernier {0}", + "title2": "Télécharger", + "subTitle": "N'oubliez pas de consulter {0} après l'installation", + "startupGuide": "le guide de démarrage", + "download": "Télécharger", + "notSupported": "Actuellement non supporté", + "supportPlanned": "Support prévu", + "supportWindows": "Pour Windows 10 & 11", + "supportLinux": "Pour les distributions Linux les plus courantes", + "buildInformation": "Information sur la version", + "buildRelease": "Cette version a été publiée le {0}", + "assets": "ressources", + "downloads": "téléchargements", + "tag": "Étiquette", + "manualDownload": "Téléchargement manuel", + "olderBuilds": "Anciennes versions", + "ldnBuildTitle": "Vous recherchez la {0} ?", + "ldnBuild": "version LDN", + "ldnBuildDescription": "Rendez-vous sur notre Patreon pour plus d'informations avec le lien de téléchargement gratuit", + "learnMore": "En savoir plus" +} diff --git a/src/i18n/locales/fr/views/homepage.json b/src/i18n/locales/fr/views/homepage.json new file mode 100644 index 0000000..2b44a27 --- /dev/null +++ b/src/i18n/locales/fr/views/homepage.json @@ -0,0 +1,26 @@ +{ + "ourTeam": "Notre équipe", + "ourTeamDescription": "Ces développeurs travaillent sans relâche pour construire le meilleur émulateur pour Switch.", + "aboutProject": "À propos du projet", + "featureDescription": " Écrit à partir de zéro, le développement a commencé en 2017 et continue toujours.", + "openSource": "Open source", + "openSourceDescription": "Développé par une équipe de passionnés, le code source de l'émulateur est disponible sur {0}.", + "github": "GitHub", + "crossPlatform": "Multiplateforme", + "crossPlatformDescription": "Ryujinx est actuellement disponible pour les Windows 10/11 et Linux (le support macOS est prévu).", + "compatibility": "Compatibilité", + "compatibilityDescription": "Ryujinx a été testé sur 3.600 jeux, et près de 2.700 sont considérés comme jouables.", + "support": "Soutien", + "supportDescription": "Besoin d'aide ? Rejoignez-le {0} pour obtenir de l'aide ainsi que pour discuter avec d'autres passionnés d'émulation et l'équipe de développement.", + "discord": "serveur Discord Ryujinx", + "supportUs": "Nous soutenir", + "trustedCommunities": "Adopté par la communauté", + "trustedCommunitiesDescription": "Si vous avez des contributions, des suggestions, besoin d'aide pour utiliser l'émulateur ou si vous souhaitez simplement entrer en contact avec l'équipe. Contactez-nous sur Twitter ou Discord ;)", + "githubStar": "Étoiles GitHub", + "playableGames": "Jeux jouables", + "patreonContributors": "Contributeurs Patreon", + "nameQuestion": "Pourquoi le {0} ?", + "name": "nom", + "nameDescription": "Prononcé {0}. Il est basé sur le nom \"Ryujin\", un mythique dieu/dragon de la mer. NX provient du nom de code interne de la Switch.", + "spelled": "Ree-You-Jinx" +} diff --git a/src/modules/LanguageSelector.vue b/src/modules/LanguageSelector.vue new file mode 100644 index 0000000..7013a21 --- /dev/null +++ b/src/modules/LanguageSelector.vue @@ -0,0 +1,75 @@ + + + diff --git a/src/types/app/i18n.ts b/src/types/app/i18n.ts new file mode 100644 index 0000000..8886303 --- /dev/null +++ b/src/types/app/i18n.ts @@ -0,0 +1,6 @@ +export type Language = { + id: number; + tag: string; + name: string; + image: string; +}; diff --git a/src/types/index.ts b/src/types/index.ts index 0b02b7f..a307b78 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,4 +1,4 @@ +export * from "./app/i18n"; export * from "./generic/navigation"; export * from "./generic/teams"; - export * from "./response/github";