Merge pull request #173 from vu3th/feat/i18n

feat(app): support i18n

app/content/zh-TW/overview.md

@@ -0,0 +1,52 @@
+---
+name: 'a'
+description: ''
+head:
+  meta:
+    - name: 'keywords'
+      content: 'vue-dapp, overview'
+---
+
+# 概覽
+
+<a href="/images/overview.png" target="_blank"><img src="/images/overview.png" alt="overview" /></a>
+
+
+## Wallet & isConnected
+
+These two states will be frequently used in development.
+
+The `isConnected` is a [computed](https://vuejs.org/api/reactivity-core.html#computed){:target="_blank"}, and the `wallet` is a [readonly](https://vuejs.org/api/reactivity-core.html#readonly) [reactive](https://vuejs.org/api/reactivity-core.html#reactive){:target="_blank"}.
+
+The types are defined [here](https://github.com/vu3th/vue-dapp/blob/main/packages/core/src/types/wallet.ts){:target="_blank"}.
+
+```ts
+const { isConnected, wallet } = useVueDapp()
+
+if(isConnected.value) {
+  console.log(wallet.status) // 'idle' | 'connecting' | 'connected'
+  console.log(wallet.error)
+  console.log(wallet.connectorName)
+  console.log(wallet.provider)
+  console.log(wallet.providerInfo) // see EIP-6963
+  console.log(wallet.connector)
+  console.log(wallet.address)
+  console.log(wallet.chainId)
+}
+```
+
+The wallet comprises 8 properties, each of which can be obtained from the `useVueDapp` as a [computed](https://vuejs.org/api/reactivity-core.html#computed){:target="_blank"}.
+
+```ts
+const { error, chainId } = useVueDapp()
+
+console.log(error.value)
+console.log(chainId.value)
+```
+
+
+
+
+
+
+

app/i18n.config.ts

@@ -0,0 +1,12 @@
+export default defineI18nConfig(() => ({
+	legacy: false,
+	locale: 'en',
+	messages: {
+		en: {
+			subtitle: 'Empower dapp developers with Vue integration for crypto wallets',
+		},
+		'zh-TW': {
+			subtitle: '使用 Vue 串接加密貨幣錢包，增進 DApp 開發體驗',
+		},
+	},
+}))

app/layouts/default.vue

@@ -2,6 +2,7 @@
 import { Icon, NuxtLink } from '#components'
 import packageJsonCore from '../../packages/core/package.json'
 import { sidebarMenu } from '~/core/sidebar'
+import { NPopselect, NButton } from 'naive-ui'
 
 const headerLeftMenu = [
 	{
@@ -18,7 +19,36 @@ const headerLeftMenu = [
 	},
 ]
 
+const { locale, locales, setLocale } = useI18n()
+
+const localeOptions = computed(() => {
+	return locales.value.map(l => ({
+		label: l.label,
+		value: l.code,
+	}))
+})
+
 const headerRightMenu = [
+	{
+		label: () =>
+			h(
+				NPopselect,
+				{
+					value: locale.value,
+					'onUpdate:value': setLocale,
+					options: localeOptions.value,
+				},
+				{
+					default: () =>
+						h(
+							NButton,
+							{ size: 'small', text: true, class: 'flex justify-center items-center', focusable: false },
+							{ default: () => h(Icon, { name: 'i-ion-language', class: 'w-5 h-5' }) },
+						),
+				},
+			),
+		key: 'language',
+	},
 	{
 		label: () =>
 			h(

app/nuxt.config.ts

@@ -18,6 +18,7 @@ export default defineNuxtConfig({
 		'@vueuse/nuxt',
 		'nuxt-icon',
 		'@nuxt/content',
+		'@nuxtjs/i18n',
 	],
 	// naiveui ssr: https://www.naiveui.com/en-US/os-theme/docs/ssr
 	build: {
@@ -46,6 +47,22 @@ export default defineNuxtConfig({
 			langs: ['json', 'js', 'ts', 'html', 'css', 'vue', 'shell', 'mdc', 'md', 'yaml', 'solidity'],
 		},
 	},
+	i18n: {
+		vueI18n: './i18n.config.ts',
+		strategy: 'no_prefix',
+		locales: [
+			{
+				label: 'English',
+				code: 'en',
+				iso: 'en',
+			},
+			{
+				label: '繁體中文',
+				code: 'zh-TW',
+				iso: 'zh-TW',
+			},
+		],
+	},
 	postcss: {
 		plugins: {
 			tailwindcss: {},

app/package.json

@@ -15,6 +15,7 @@
 	"dependencies": {
 		"@ethers-ext/provider-multicall": "6.0.0-beta.1",
 		"@nuxt/content": "^2.12.1",
+		"@nuxtjs/i18n": "^8.3.1",
 		"@pinia-plugin-persistedstate/nuxt": "^1.2.0",
 		"@pinia/nuxt": "^0.5.1",
 		"@tailwindcss/typography": "^0.5.12",

app/pages/[...slug].vue

@@ -2,14 +2,35 @@
 /**
 	- https://github.com/tailwindlabs/tailwindcss-typography
  */
+
+const route = useRoute()
+const { locale } = useI18n()
+
+/**
+ * @docs queryContent https://content.nuxt.com/composables/query-content
+ */
+async function fetchContent() {
+	try {
+		return await queryContent(locale.value.toLowerCase(), route.path).findOne()
+	} catch (err: any) {
+		return await queryContent(route.path).findOne()
+	}
+}
+
+/**
+ * @docs https://nuxt.com/docs/api/composables/use-async-data
+ */
+const { data } = await useAsyncData('content', () => fetchContent(), {
+	watch: [locale],
+})
 </script>
 
 <template>
 	<main class="py-5 px-5 sm:px-10 break-words">
-		<ContentDoc class="prose prose-zinc">
-			<template #not-found>
+		<ContentRenderer class="prose prose-zinc" :value="data">
+			<template #empty>
 				<p>Stay tuned; it will be added later 😉</p>
 			</template>
-		</ContentDoc>
+		</ContentRenderer>
 	</main>
 </template>

app/pages/index.vue

@@ -83,9 +83,7 @@ const items = computed<Item[]>(() => [
 		<!-- banner -->
 		<div class="mt-5 flex flex-col items-center justify-center">
 			<img class="w-90" src="/logo.png" alt="logo" />
-			<p class="bold text-md md:text-xl px-4 text-gray-500 text-center">
-				{{ pkg.description }}
-			</p>
+			<p class="bold text-md md:text-xl px-4 text-gray-500 text-center">{{ $t('subtitle') }}</p>
 		</div>
 
 		<div class="mt-10 px-10 flex flex-col items-center justify-center gap-5">