feat: add localisation

4 years ago · cf3a380723
11 changed files with 256 additions and 17 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -9,7 +9,8 @@
      "version": "0.0.0",
      "dependencies": {
        "pinia": "^2.0.14",
-        "vue": "^3.2.37"
+        "vue": "^3.2.37",
+        "vue-i18n": "^9.1.10"
      },
      "devDependencies": {
        "@rushstack/eslint-patch": "^1.1.0",
@ -528,6 +529,88 @@
      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
      "dev": true
    },
+    "node_modules/@intlify/core-base": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.1.10.tgz",
+      "integrity": "sha512-So9CNUavB/IsZ+zBmk2Cv6McQp6vc2wbGi1S0XQmJ8Vz+UFcNn9MFXAe9gY67PreIHrbLsLxDD0cwo1qsxM1Nw==",
+      "dependencies": {
+        "@intlify/devtools-if": "9.1.10",
+        "@intlify/message-compiler": "9.1.10",
+        "@intlify/message-resolver": "9.1.10",
+        "@intlify/runtime": "9.1.10",
+        "@intlify/shared": "9.1.10",
+        "@intlify/vue-devtools": "9.1.10"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@intlify/devtools-if": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.1.10.tgz",
+      "integrity": "sha512-SHaKoYu6sog3+Q8js1y3oXLywuogbH1sKuc7NSYkN3GElvXSBaMoCzW+we0ZSFqj/6c7vTNLg9nQ6rxhKqYwnQ==",
+      "dependencies": {
+        "@intlify/shared": "9.1.10"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.1.10.tgz",
+      "integrity": "sha512-+JiJpXff/XTb0EadYwdxOyRTB0hXNd4n1HaJ/a4yuV960uRmPXaklJsedW0LNdcptd/hYUZtCkI7Lc9J5C1gxg==",
+      "dependencies": {
+        "@intlify/message-resolver": "9.1.10",
+        "@intlify/shared": "9.1.10",
+        "source-map": "0.6.1"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@intlify/message-resolver": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/message-resolver/-/message-resolver-9.1.10.tgz",
+      "integrity": "sha512-5YixMG/M05m0cn9+gOzd4EZQTFRUu8RGhzxJbR1DWN21x/Z3bJ8QpDYj6hC4FwBj5uKsRfKpJQ3Xqg98KWoA+w==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@intlify/runtime": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/runtime/-/runtime-9.1.10.tgz",
+      "integrity": "sha512-7QsuByNzpe3Gfmhwq6hzgXcMPpxz8Zxb/XFI6s9lQdPLPe5Lgw4U1ovRPZTOs6Y2hwitR3j/HD8BJNGWpJnOFA==",
+      "dependencies": {
+        "@intlify/message-compiler": "9.1.10",
+        "@intlify/message-resolver": "9.1.10",
+        "@intlify/shared": "9.1.10"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.1.10.tgz",
+      "integrity": "sha512-Om54xJeo1Vw+K1+wHYyXngE8cAbrxZHpWjYzMR9wCkqbhGtRV5VLhVc214Ze2YatPrWlS2WSMOWXR8JktX/IgA==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@intlify/vue-devtools": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.1.10.tgz",
+      "integrity": "sha512-5l3qYARVbkWAkagLu1XbDUWRJSL8br1Dj60wgMaKB0+HswVsrR6LloYZTg7ozyvM621V6+zsmwzbQxbVQyrytQ==",
+      "dependencies": {
+        "@intlify/message-resolver": "9.1.10",
+        "@intlify/runtime": "9.1.10",
+        "@intlify/shared": "9.1.10"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
    "node_modules/@jridgewell/gen-mapping": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@ -4142,6 +4225,23 @@
        "node": ">=10"
      }
    },
+    "node_modules/vue-i18n": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.1.10.tgz",
+      "integrity": "sha512-jpr7gV5KPk4n+sSPdpZT8Qx3XzTcNDWffRlHV/cT2NUyEf+sEgTTmLvnBAibjOFJ0zsUyZlVTAWH5DDnYep+1g==",
+      "dependencies": {
+        "@intlify/core-base": "9.1.10",
+        "@intlify/shared": "9.1.10",
+        "@intlify/vue-devtools": "9.1.10",
+        "@vue/devtools-api": "^6.0.0-beta.7"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
    "node_modules/vue-tsc": {
      "version": "0.38.5",
      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.38.5.tgz",
@ -4594,6 +4694,67 @@
      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
      "dev": true
    },
+    "@intlify/core-base": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.1.10.tgz",
+      "integrity": "sha512-So9CNUavB/IsZ+zBmk2Cv6McQp6vc2wbGi1S0XQmJ8Vz+UFcNn9MFXAe9gY67PreIHrbLsLxDD0cwo1qsxM1Nw==",
+      "requires": {
+        "@intlify/devtools-if": "9.1.10",
+        "@intlify/message-compiler": "9.1.10",
+        "@intlify/message-resolver": "9.1.10",
+        "@intlify/runtime": "9.1.10",
+        "@intlify/shared": "9.1.10",
+        "@intlify/vue-devtools": "9.1.10"
+      }
+    },
+    "@intlify/devtools-if": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.1.10.tgz",
+      "integrity": "sha512-SHaKoYu6sog3+Q8js1y3oXLywuogbH1sKuc7NSYkN3GElvXSBaMoCzW+we0ZSFqj/6c7vTNLg9nQ6rxhKqYwnQ==",
+      "requires": {
+        "@intlify/shared": "9.1.10"
+      }
+    },
+    "@intlify/message-compiler": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.1.10.tgz",
+      "integrity": "sha512-+JiJpXff/XTb0EadYwdxOyRTB0hXNd4n1HaJ/a4yuV960uRmPXaklJsedW0LNdcptd/hYUZtCkI7Lc9J5C1gxg==",
+      "requires": {
+        "@intlify/message-resolver": "9.1.10",
+        "@intlify/shared": "9.1.10",
+        "source-map": "0.6.1"
+      }
+    },
+    "@intlify/message-resolver": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/message-resolver/-/message-resolver-9.1.10.tgz",
+      "integrity": "sha512-5YixMG/M05m0cn9+gOzd4EZQTFRUu8RGhzxJbR1DWN21x/Z3bJ8QpDYj6hC4FwBj5uKsRfKpJQ3Xqg98KWoA+w=="
+    },
+    "@intlify/runtime": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/runtime/-/runtime-9.1.10.tgz",
+      "integrity": "sha512-7QsuByNzpe3Gfmhwq6hzgXcMPpxz8Zxb/XFI6s9lQdPLPe5Lgw4U1ovRPZTOs6Y2hwitR3j/HD8BJNGWpJnOFA==",
+      "requires": {
+        "@intlify/message-compiler": "9.1.10",
+        "@intlify/message-resolver": "9.1.10",
+        "@intlify/shared": "9.1.10"
+      }
+    },
+    "@intlify/shared": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.1.10.tgz",
+      "integrity": "sha512-Om54xJeo1Vw+K1+wHYyXngE8cAbrxZHpWjYzMR9wCkqbhGtRV5VLhVc214Ze2YatPrWlS2WSMOWXR8JktX/IgA=="
+    },
+    "@intlify/vue-devtools": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.1.10.tgz",
+      "integrity": "sha512-5l3qYARVbkWAkagLu1XbDUWRJSL8br1Dj60wgMaKB0+HswVsrR6LloYZTg7ozyvM621V6+zsmwzbQxbVQyrytQ==",
+      "requires": {
+        "@intlify/message-resolver": "9.1.10",
+        "@intlify/runtime": "9.1.10",
+        "@intlify/shared": "9.1.10"
+      }
+    },
    "@jridgewell/gen-mapping": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@ -7081,6 +7242,17 @@
        }
      }
    },
+    "vue-i18n": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.1.10.tgz",
+      "integrity": "sha512-jpr7gV5KPk4n+sSPdpZT8Qx3XzTcNDWffRlHV/cT2NUyEf+sEgTTmLvnBAibjOFJ0zsUyZlVTAWH5DDnYep+1g==",
+      "requires": {
+        "@intlify/core-base": "9.1.10",
+        "@intlify/shared": "9.1.10",
+        "@intlify/vue-devtools": "9.1.10",
+        "@vue/devtools-api": "^6.0.0-beta.7"
+      }
+    },
    "vue-tsc": {
      "version": "0.38.5",
      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.38.5.tgz",
--- a/package.json
+++ b/package.json
@ -11,7 +11,8 @@
  },
  "dependencies": {
    "pinia": "^2.0.14",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "vue-i18n": "^9.1.10"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.0",
--- a/src/components/common/LeftSection.vue
+++ b/src/components/common/LeftSection.vue
@ -0,0 +1,33 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+}>();
+</script>
+
+<template>
+  <div class="wrapper">
+    <div class="title">
+      {{ title }}
+    </div>
+    <div class="body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+
+<style scoped>
+.wrapper{
+  display: flex;
+  flex-direction: column;
+}
+.title {
+  font-size: 18px;
+  font-weight: bolder;
+  font-variant: titling-caps;
+  text-transform: capitalize;
+}
+.body {
+  flex: 1;
+}
+</style>
--- a/src/components/common/RightSection.vue
+++ b/src/components/common/RightSection.vue
@ -25,6 +25,7 @@ defineProps<{
  font-size: 18px;
  font-weight: bolder;
  font-variant: titling-caps;
+  text-transform: capitalize;
 }
 .body {
  flex: 1;
--- a/src/components/education/MyEducation.vue
+++ b/src/components/education/MyEducation.vue
@ -1,10 +1,13 @@
+<script setup lang="ts">
+import LeftSection from "@/components/common/LeftSection.vue";
+</script>
 <template>
-  <div>
+  <LeftSection :title="$t('section.education')">
    My Education
-  </div>
+  </LeftSection>
 </template>

-<script>
+<script lang="ts">
 export default {
  name: "MyEducation"
 };
--- a/src/components/experiences/MyExperiences.vue
+++ b/src/components/experiences/MyExperiences.vue
@ -3,7 +3,7 @@ import RightSection from "@/components/common/RightSection.vue";
 </script>

 <template>
-  <RightSection title="Experiences">
+  <RightSection :title="$t('section.experiences')">
    {{ message }}
  </RightSection>
 </template>
--- a/src/components/informations/MyHobbies.vue
+++ b/src/components/informations/MyHobbies.vue
@ -1,10 +1,14 @@
+<script setup lang="ts">
+import LeftSection from "@/components/common/LeftSection.vue"
+</script>
+
 <template>
-  <div>
+  <LeftSection :title="$t('section.hobbies')">
    My Hobbies
-  </div>
+  </LeftSection>
 </template>

-<script>
+<script lang="ts">
 export default {
  name: "MyHobbies"
 };
--- a/src/components/informations/MyInformations.vue
+++ b/src/components/informations/MyInformations.vue
@ -1,10 +1,14 @@
+<script setup lang="ts">
+import LeftSection from "@/components/common/LeftSection.vue";
+</script>
+
 <template>
-  <div>
+  <LeftSection :title="$t('section.information')">
    My Informations
-  </div>
+  </LeftSection>
 </template>

-<script>
+<script lang="ts">
 export default {
  name: "MyInformations"
 };
--- a/src/components/informations/MyLanguages.vue
+++ b/src/components/informations/MyLanguages.vue
@ -1,10 +1,13 @@
+<script setup lang="ts">
+import LeftSection from "@/components/common/LeftSection.vue";
+</script>
 <template>
-  <div>
+  <LeftSection :title="$t('section.languages')">
    My Languages
-  </div>
+  </LeftSection>
 </template>

-<script>
+<script lang="ts">
 export default {
  name: "MyLanguages"
 };
--- a/src/components/skills/MySkills.vue
+++ b/src/components/skills/MySkills.vue
@ -3,7 +3,7 @@ import RightSection from "@/components/common/RightSection.vue";
 </script>

 <template>
-  <RightSection title="Skills">
+  <RightSection :title="$t('section.skills')">
    Here are my skills
  </RightSection>
 </template>
--- a/src/main.ts
+++ b/src/main.ts
@ -1,11 +1,29 @@
 import { createApp } from "vue";
+import { createI18n } from "vue-i18n";
 import { createPinia } from "pinia";
 import App from "./App.vue";

 import "./assets/main.css";

+const i18n = createI18n({
+  locale: "fr",
+  messages: {
+    fr: {
+      section: {
+        information: "informations",
+        education: "formation",
+        languages: "langues",
+        hobbies: "hobbies",
+        experiences: "expériences",
+        skills: "compétences",
+      },
+    },
+    en: { hello: "こんにちは！" },
+  },
+});
+
 const app = createApp(App);

 app.use(createPinia());
-
+app.use(i18n);
 app.mount("#app");