feat: add lang

README.md

@@ -2,7 +2,7 @@
 
 IIIF Viewer with [IIIF Georeference Extension](https://iiif.io/api/extension/georef/)
 
-<img src="public/assets/images/demo.webp" width="100%" title="demo">
+<img src="public/assets/images/home.webp" width="100%" title="demo">
 
 ## 🌐 Website
 

assets/styles/main.css

@@ -0,0 +1,6 @@
+* {
+  text-transform: none !important;
+}
+a {
+  text-decoration: none !important;
+}

components/Header.vue

@@ -3,11 +3,13 @@ import { mdiGithub, mdiHome } from "@mdi/js";
 
 const { canvas, title } = useSettings();
 
-const url = ref("")
+const url = ref("");
 
 onMounted(() => {
   url.value = window.location.href;
 });
+
+const localePath = useLocalePath();
 </script>
 <template>
   <v-app-bar color="purple" flat :absolute="true" density="compact">
@@ -17,18 +19,13 @@ onMounted(() => {
 
     <v-spacer></v-spacer>
 
-    <v-btn :active="false" to="/" class="ma-1">
-      <v-icon class="mr-1">{{ mdiHome }}</v-icon>
-      HOME</v-btn
-    >
+
 
     <template v-if="canvas.items && Object.keys(canvas.items).length > 0">
       <List4Panes></List4Panes>
       <InputButton></InputButton>
     </template>
 
-    <Help></Help>
-
     <template
       v-if="url.indexOf('github.io') > -1 || url.indexOf('localhost') > -1"
     >
@@ -41,5 +38,18 @@ onMounted(() => {
         GitHub</v-btn
       >
     </template>
+
+    <v-btn :active="false" :to="localePath({ name: 'index' })" class="ma-1">
+      <v-icon class="mr-1">{{ mdiHome }}</v-icon>
+      {{ $t("home") }}</v-btn
+    >
+
+
+
+    <Help></Help>
+
+    <Language></Language>
+
+
   </v-app-bar>
 </template>

components/Help.vue

@@ -1,22 +1,24 @@
 <script setup lang="ts">
 import { mdiInformation } from "@mdi/js";
 
-const { data } = await useAsyncData('home', () => queryContent('/help').findOne())
+const {locale} = useI18n()
+
+const { data } = await useAsyncData('home', () => queryContent(`/help/${locale.value}`).findOne())
 
 const dialog = ref(false);
 </script>
 <template>
   <v-btn @click="dialog = !dialog" class="ma-1">
     <v-icon class="mr-1">{{ mdiInformation }}</v-icon>
-    {{ /*("add")*/ "ヘルプ" }}
+    {{ /*("add")*/ $t("help") }}
 
     <v-dialog v-model="dialog">
       <v-card>
         <v-card-text>
           <ContentRenderer class="nuxt-content" :value="data" />
         </v-card-text>
         <v-card-actions>
-          <v-btn color="primary" block @click="dialog = false">閉じる</v-btn>
+          <v-btn color="primary" block @click="dialog = false">{{ $t("close") }}</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>

components/InputButton.vue

@@ -6,15 +6,15 @@ const dialog = ref(false);
 <template>
   <v-btn @click="dialog = !dialog" class="ma-1">
     <v-icon class="mr-1">{{ mdiPlusCircle }}</v-icon>
-    {{ /*("add")*/ "登録" }}
+    {{ $t("add") }}
 
     <v-dialog v-model="dialog">
       <v-card>
         <v-card-text>
           <InputForm />
         </v-card-text>
         <v-card-actions>
-          <v-btn color="primary" block @click="dialog = false">閉じる</v-btn>
+          <v-btn color="primary" block @click="dialog = false">{{ $t("close") }}</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>

components/InputForm.vue

@@ -1,22 +1,31 @@
 <script setup lang="ts">
 const u = ref("");
 
-const ex1 = () => {
-  const baseURL = useNuxtApp().$config.app.baseURL;
-  const path = baseURL + "/canvas.json";
-  u.value = path;
-};
-
-const ex2 = () => {
-  const baseURL = useNuxtApp().$config.app.baseURL;
-  const path = baseURL + "/canvas_extra.json";
-  u.value = path;
-};
+const baseURL = useNuxtApp().$config.app.baseURL;
 
 const add = () => {
   const router = useRouter();
   router.push({ query: { u: u.value } });
 };
+
+const examples = [
+  {
+    label: {
+      ja: "ラベルを含む例",
+      en: "Example with labels",
+    },
+    value: baseURL + "/canvas.json",
+  },
+  {
+    label: {
+      ja: "シンプルな例",
+      en: "Simple example",
+    },
+    value: baseURL + "/canvas.json",
+  },
+];
+
+const { locale } = useI18n();
 </script>
 <template>
   <v-container>
@@ -31,12 +40,10 @@ const add = () => {
       clearable
     ></v-text-field>
 
-    <v-btn @click="add" class="ma-1" color="primary">{{
-      /*("add")*/ "追加"
-    }}</v-btn>
-
-<v-btn @click="ex2" class="ma-1">{{ /*("add")*/ "例1: ラベルを含む" }}</v-btn>
+    <v-btn @click="add" class="ma-1" color="primary">{{ $t("add") }}</v-btn>
 
-    <v-btn @click="ex1" class="ma-1">{{ /*("add")*/ "例2: シンプル" }}</v-btn>
+    <v-btn v-for="(ex, i) in examples" @click="u = ex.value" class="ma-1">{{
+      `${$t("ex")} ${i + 1}: ${ex.label[locale === "en" ? "en" : "ja"]}`
+    }}</v-btn>
   </v-container>
 </template>

components/Language.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { mdiChevronDown } from "@mdi/js";
+
+const i18n = useI18n();
+
+const changeLocale = (locale: string) => {
+  i18n.setLocale(locale);
+};
+</script>
+<template>
+  <client-only>
+    <v-menu offset-y>
+      <template v-slot:activator="{ props }">
+        <v-btn variant="text" v-bind="props">
+          {{ $i18n.locale === "ja" ? "日本語" : "English" }}
+          <v-icon> {{ mdiChevronDown }} </v-icon>
+        </v-btn>
+      </template>
+      <v-card flat>
+        <v-list>
+          <v-list-item @click="changeLocale('ja')" :active="$i18n.locale === 'ja'"
+            >日本語</v-list-item
+          >
+          <v-list-item @click="changeLocale('en')" :active="$i18n.locale === 'en'"
+            >English</v-list-item
+          >
+        </v-list>
+      </v-card>
+    </v-menu>
+  </client-only>
+</template>

components/List4Panes.vue

@@ -31,6 +31,6 @@ watch(
 <template>
   <v-btn @click="dialog = !dialog">
     <v-icon class="mr-1">{{ mdiMagnify }}</v-icon
-    >検索</v-btn
+    >{{ $t("search") }}</v-btn
   >
 </template>