feat: add basic i18n support, and port Japanese content

.vscode/settings.json

@@ -34,5 +34,13 @@
     "json",
     "jsonc",
     "yaml"
-  ]
+  ],
+  "i18n-ally.enabledFrameworks": [
+    "vue"
+  ],
+  "i18n-ally.localesPaths": [
+    "i18n/locales"
+  ],
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.sourceLanguage": "en"
 }

components/ColorSchemeToggle.vue

@@ -8,9 +8,9 @@ function toggleMode() {
 addCommands(
   {
     id: 'toggle-color-mode',
-    title: colorMode.value === 'light'
-      ? 'Switch to dark mode'
-      : 'Switch to light mode',
+    title: () => colorMode.value === 'light'
+      ? $t('color-mode.to-dark')
+      : $t('color-mode.to-light'),
     handler: toggleMode,
     icon: colorMode.value === 'light'
       ? 'i-ph-moon-stars-duotone'

components/CommandPalette.vue

@@ -32,6 +32,12 @@ function scrollIntoView(elOrComponent?: any) {
   })
 }
 
+function getTitle(command: Command) {
+  if (typeof command.title === 'function')
+    return command.title()
+  return command.title
+}
+
 // Reset selected when search changes
 watch(
   () => commands.search,
@@ -102,23 +108,23 @@ useEventListener('keydown', (e) => {
           ref="input"
           v-model="commands.search"
           h-full w-full rounded border-none p4 pl0 outline-none bg-base
-          placeholder="Search..."
+          :placeholder="$t('search-dots')"
         >
       </div>
 
       <div border="t base" flex="~ col" of-y-auto py2>
         <component
           :is="c.to ? NuxtLink : 'button'"
-          v-for="c, idx in commands.commandsResult"
-          :key="c.id || c.title"
+          v-for="c, idx of commands.commandsResult"
+          :key="c.id || getTitle(c)"
           :ref="(el: Element) => selected === idx && scrollIntoView(el)"
           :to="c.to" flex="~ gap-2 items-center" mx1 rounded p2
           px3
           :class="selected === idx ? 'bg-active' : ''"
           @click="runCommand(c)"
         >
           <div :class="c.icon || 'i-ph-dot-duotone'" />
-          {{ c.title }}
+          {{ getTitle(c) }}
         </component>
       </div>
     </div>

components/PanelDocs.vue

@@ -3,14 +3,20 @@ import type { ContentNavigationItem } from '@nuxt/content'
 
 const runtime = useRuntimeConfig()
 const route = useRoute()
-const { data: page } = useAsyncData(route.path, () => {
-  return queryCollection('tutorials').path(route.path).first()
+const { locale } = useI18n()
+
+const collection = computed(() => locale.value === 'ja' ? 'ja' : 'en')
+
+const { data: page } = useAsyncData(`${locale.value}-${route.path}`, () => {
+  return queryCollection(collection.value)
+    .path(route.path)
+    .first()
 })
-const { data: navigation } = useAsyncData(`navigation`, () => {
-  return queryCollectionNavigation('tutorials')
+const { data: navigation } = useAsyncData(`${locale.value}-navigation`, () => {
+  return queryCollectionNavigation(collection.value)
 })
-const { data: surroundings } = useAsyncData(`${route.path}-surroundings`, () => {
-  return queryCollectionItemSurroundings('tutorials', route.path, {
+const { data: surroundings } = useAsyncData(`${locale.value}-${route.path}-surroundings`, () => {
+  return queryCollectionItemSurroundings(collection.value, route.path, {
     fields: ['title', 'description'],
   })
 })
@@ -55,7 +61,7 @@ const breadcrumbs = computed(() => {
 
   if (!breadcrumbs.find(i => i.path === '/')) {
     breadcrumbs.unshift({
-      title: 'Guide',
+      title: $t('guide'),
       path: '/',
     })
   }
@@ -134,7 +140,7 @@ router.beforeEach(() => {
             hover="text-primary op100"
           >
             <div i-ph-note-pencil-duotone />
-            Edit this page
+            {{ $t('edit-this-page') }}
           </NuxtLink>
         </div>
       </article>

components/PanelPreviewLoading.vue

@@ -51,7 +51,7 @@ function getTextClass(status: PlaygroundStatus) {
     <template v-if="play.status === 'interactive'">
       <div flex="~ gap-2 items-center" text-lg>
         <div i-ph-terminal-window-duotone text-2xl />
-        Interactive terminal mode
+        {{ $t('interactive-terminal-mode') }}
       </div>
       <button
         title="Restart terminal"
@@ -61,20 +61,20 @@ function getTextClass(status: PlaygroundStatus) {
         @click="play.restartServer()"
       >
         <div i-ph-arrow-clockwise-duotone text-lg />
-        Restart the server
+        {{ $t('restart-server') }}
       </button>
     </template>
     <div v-else grid="~ cols-[max-content_1fr] gap-2 items-center justify-center">
       <div :class="getStatusIcon('init')" />
-      <span :class="getTextClass('init')">Initializing WebContainer</span>
+      <span :class="getTextClass('init')">{{ $t('steps.initializing-webcontainer') }}</span>
       <div :class="getStatusIcon('mount')" />
-      <span :class="getTextClass('mount')">Mounting files</span>
+      <span :class="getTextClass('mount')">{{ $t('steps.mounting-files') }}</span>
       <div :class="getStatusIcon('install')" />
-      <span :class="getTextClass('install')">Installing dependencies</span>
+      <span :class="getTextClass('install')">{{ $t('steps.installing-dependencies') }}</span>
       <div :class="getStatusIcon('start')" />
-      <span :class="getTextClass('start')">Starting Nuxt server</span>
+      <span :class="getTextClass('start')">{{ $t('steps.starting-nuxt-server') }}</span>
       <div :class="getStatusIcon('polling')" />
-      <span :class="getTextClass('polling')">Waiting for Nuxt to ready</span>
+      <span :class="getTextClass('polling')">{{ $t('steps.waiting-for-nuxt-to-ready') }}</span>
     </div>
   </div>
 </template>

components/PanelTerminal.vue

@@ -11,19 +11,19 @@ const play = usePlaygroundStore()
       bg-faded p2 pl4
     >
       <div i-ph-terminal-window-duotone />
-      <span text-sm>Terminal</span>
+      <span text-sm>{{ $t('terminal.name') }}</span>
       <div flex-auto />
       <button
         v-if="play.status !== 'init' && play.status !== 'mount'"
         hover="bg-active" rounded p1
-        title="Restart terminal"
+        :title="$t('terminal.restart')"
         @click="play.restartServer()"
       >
         <div i-ph-arrow-clockwise-duotone />
       </button>
       <button
         hover="bg-active" rounded p1
-        title="Hide terminal"
+        :title="$t('terminal.hide')"
         @click="ui.toggleTerminal()"
       >
         <div i-ph-x-bold />

components/TheNav.vue

@@ -21,10 +21,12 @@ function downloadCurrentGuide() {
   downloadZip(play.webcontainer, guide.ignoredFiles)
 }
 
+const i18n = useI18n()
+
 addCommands(
   {
     id: 'download-zip',
-    title: 'Download playground as ZIP',
+    title: () => $t('download-zip'),
     visible: () => {
       return play.status === 'ready' && guide.features.download !== false
     },
@@ -35,12 +37,34 @@ addCommands(
   },
   {
     id: 'toggle-terminal',
-    title: 'Toggle terminal',
+    title: () => $t('terminal.toggle'),
     handler: () => {
       ui.toggleTerminal()
     },
     icon: 'i-ph-terminal-window-duotone',
   },
+  {
+    id: 'language-en',
+    title: 'Change to English',
+    handler: () => {
+      i18n.setLocale('en')
+    },
+    icon: 'i-ph-globe-duotone',
+    visible: () => {
+      return i18n.locale.value !== 'en'
+    },
+  },
+  {
+    id: 'language-ja',
+    title: '日本語に切り替える',
+    handler: () => {
+      i18n.setLocale('ja')
+    },
+    icon: 'i-ph-globe-duotone',
+    visible: () => {
+      return i18n.locale.value !== 'ja'
+    },
+  },
 )
 </script>
 
@@ -56,7 +80,7 @@ addCommands(
       target="_blank"
     >
       <div block translate-y--2 rounded bg-orange:10 px2 py1 text-xs text-orange>
-        Work in Progress
+        {{ $t('work-in-progress') }}
       </div>
     </NuxtLink>
 
@@ -65,10 +89,32 @@ addCommands(
       flex="~ gap-1 items-center"
       :class="guide.embeddedDocs ? 'z-embedded-docs-raised' : ''"
     >
+      <VDropdown :distance="6">
+        <button
+          rounded p2
+          hover="bg-active"
+          title="Languages"
+        >
+          <div i-ph-translate-duotone text-2xl />
+        </button>
+        <template #popper>
+          <div flex="~ col gap-y-1" p2>
+            <button
+              v-for="locale of i18n.locales.value" :key="locale.code"
+              rounded px2 py1
+              hover="bg-active"
+              :class="locale.code === i18n.locale.value ? 'text-primary' : ''"
+              @click="i18n.setLocale(locale.code)"
+            >
+              {{ locale.name }}
+            </button>
+          </div>
+        </template>
+      </VDropdown>
       <button
         rounded p2
         hover="bg-active"
-        title="Search"
+        :title="$t('search')"
         @click="commands.isShown = true"
       >
         <div i-ph-magnifying-glass-duotone text-2xl />
@@ -77,7 +123,7 @@ addCommands(
         v-if="play.status === 'ready' && !!guide.features.download"
         rounded p2
         hover="bg-active"
-        title="Download as ZIP"
+        :title="$t('download-zip')"
         @click="downloadCurrentGuide()"
       >
         <div i-ph-download-duotone text-2xl />
@@ -103,7 +149,7 @@ addCommands(
       </VDropdown>
       <button
         rounded p2
-        title="Toggle terminal"
+        :title="$t('terminal.toggle')"
         hover="bg-active"
         :class="ui.showTerminal ? '' : 'op50'"
         @click="ui.toggleTerminal()"

components/content/ButtonShowSolution.vue

@@ -10,6 +10,6 @@ const guide = useGuideStore()
   >
     <div v-if="!guide.showingSolution " i-ph-lightbulb-filament-duotone />
     <div v-else i-ph-arrow-counter-clockwise-duotone />
-    {{ guide.showingSolution ? 'Reset challenge' : 'Show solution' }}
+    {{ guide.showingSolution ? $t('reset-challenge') : $t('show-solution') }}
   </button>
 </template>

components/content/ContentCard.vue

@@ -19,7 +19,7 @@ defineProps<{
     <div class="my-0 text-lg font-semibold">
       {{ title }}
       <sup v-if="wip" rounded bg-primary:10 px1 text-sm text-primary font-normal>
-        Coming Soon
+        {{ $t('coming-soon') }}
       </sup>
     </div>
     <div class="mb-0 mt-1 text-[15px] op50">

content.config.ts

@@ -2,10 +2,17 @@ import { defineCollection, defineContentConfig } from '@nuxt/content'
 
 export default defineContentConfig({
   collections: {
-    tutorials: defineCollection({
+    en: defineCollection({
       type: 'page',
       source: {
-        include: '**',
+        include: 'en/**',
+        exclude: ['**/.template/**'],
+      },
+    }),
+    ja: defineCollection({
+      type: 'page',
+      source: {
+        include: 'ja/**',
         exclude: ['**/.template/**'],
       },
     }),

content/FOR_TRANSLATORS.md

@@ -0,0 +1,12 @@
+Hey! Thanks for being interested in helping translate the Nuxt Tutorial.
+
+However, please note that currently we are focusing only on the English version and Japanese version.
+
+We are NOT accepting translations for other languages at this moment due to the limited resources.
+
+Feel free to fork the repository and deploy your own version of the website.
+But please do not send translation PRs for now.
+
+After we finishing writing the content, we might start considering supporting other languages.
+
+Thank you for your understanding.

content/ja/.template/files/app.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const msg = 'Welcome to Nuxt Tutorial!'
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+</template>

content/ja/.template/index.ts

@@ -0,0 +1,10 @@
+import type { GuideMeta } from '~/types/guides'
+
+export const meta: GuideMeta = {
+  startingFile: 'app.vue',
+  features: {
+    terminal: false,
+    fileTree: false,
+    navigation: false,
+  },
+}

content/ja/.template/solutions/app.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+// TODO: remove this solution later
+const msg = 'This is the solution!'
+</script>
+
+<template>
+  <div>{{ msg.toUpperCase() }}</div>
+</template>