refactor: make all tools use the same ToolViewTemplate

package.json

@@ -19,7 +19,7 @@
     "format-check": "prettier --check src/",
     "prepare": "husky",
     "build:prepare": "run-p build:prepare:optimize-png-worker",
-    "build:prepare:optimize-png-worker": "esbuild --bundle --minify --sourcemap --target=es2018 --platform=node --outfile=src/tools/favicon/utils/image/optimize-png.worker.js src/tools/favicon/utils/image/optimize-png.worker.raw.ts"
+    "build:prepare:optimize-png-worker": "esbuild --bundle --minify --sourcemap --target=es2018 --platform=node --outfile=src/tools/favicon/favicon-generator/utils/image/optimize-png.worker.js src/tools/favicon/favicon-generator/utils/image/optimize-png.worker.raw.ts"
   },
   "dependencies": {
     "@faker-js/faker": "^9.0.3",
@@ -49,6 +49,7 @@
     "uuid": "^10.0.0",
     "validator": "^13.12.0",
     "vue": "^3.4.29",
+    "vue-i18n": "10",
     "vue-router": "^4.3.3",
     "webrtc-ips": "^0.2.0"
   },

src/components/layouts/tool-view-template/ToolViewTemplate.vue

@@ -0,0 +1,38 @@
+<template>
+  <main>
+    <BackButton />
+    <n-h1 prefix="bar" align-text>{{ title }}</n-h1>
+    <n-p v-if="description">
+      {{ description }}
+    </n-p>
+    <n-p>
+      <slot></slot>
+    </n-p>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { NH1, NP } from 'naive-ui'
+import BackButton from '@/components/navigate/BackButton.vue'
+import { useHeadFromRouteMeta } from '@/composables/head'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  title?: string
+  description?: string
+}>()
+
+const route = useRoute()
+const meta = route.meta
+
+const { t } = useI18n({
+  messages: meta?.locales
+})
+
+const title = computed(() => props.title ?? t('title'))
+const description = computed(() => props.description ?? t('description'))
+
+useHeadFromRouteMeta()
+</script>

src/components/layouts/tools-list-meta/ToolMetaItem.vue

@@ -0,0 +1,27 @@
+<template>
+  <router-link :to="{ name: toolName }" #="{ navigate, href }" custom>
+    <n-button tag="a" :href="href" @click="navigate" text>
+      <template #icon v-if="tool?.meta?.icon">
+        <n-icon :component="tool?.meta?.icon" />
+      </template>
+      {{ t('title') }}
+    </n-button>
+  </router-link>
+</template>
+
+<script setup lang="ts">
+import { NButton, NIcon } from 'naive-ui'
+import { routes } from '@/tools/routes'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps<{
+  toolName: string
+}>()
+
+const tool = computed(() => routes.find((route) => route.name === props.toolName))
+
+const { t } = useI18n({
+  messages: tool?.value?.meta?.locales
+})
+</script>

src/components/layouts/tools-list-meta/ToolsListMeta.vue

@@ -0,0 +1,16 @@
+<template>
+  <n-space vertical>
+    <template v-for="toolName in toolNames" :key="toolName">
+      <ToolMetaItem :tool-name="toolName" />
+    </template>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { NSpace } from 'naive-ui'
+import ToolMetaItem from './ToolMetaItem.vue'
+
+defineProps<{
+  toolNames: string[]
+}>()
+</script>

src/components/layouts/tools-list-meta/index.ts

@@ -0,0 +1 @@
+export { default as ToolsListMeta } from './ToolsListMeta.vue'

src/composables/head/index.ts

@@ -1,2 +1,3 @@
 export { useTitle } from './useTitle'
 export { useDescription } from './useDescription'
+export { useHeadFromRouteMeta } from './useHeadFromRouteMeta'

src/composables/head/useHeadFromRouteMeta.ts

@@ -0,0 +1,16 @@
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useTitle } from './useTitle'
+import { useDescription } from './useDescription'
+
+export function useHeadFromRouteMeta() {
+  const route = useRoute()
+  const meta = route.meta
+
+  const { t } = useI18n({
+    messages: meta?.locales
+  })
+
+  useTitle(t('title'))
+  useDescription(t('description'))
+}

src/locales/index.ts

@@ -0,0 +1,9 @@
+import { createI18n } from 'vue-i18n'
+
+const i18n = createI18n({
+  locale: navigator.language,
+  fallbackLocale: 'en',
+  messages: {}
+})
+
+export default i18n

src/locales/langs.ts

@@ -0,0 +1,27 @@
+export const langs = [
+  'en',
+  'zh',
+  'zh-CN',
+  'zh-TW',
+  'zh-HK',
+  'es',
+  'fr',
+  'de',
+  'it',
+  'ja',
+  'ko',
+  'ru',
+  'pt',
+  'ar',
+  'hi',
+  'tr',
+  'nl',
+  'sv',
+  'pl',
+  'vi',
+  'th',
+  'id',
+  'he',
+  'ms',
+  'no'
+] as const

src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import { createHead } from '@vueuse/head'
+import i18n from './locales'
 
 import App from './App.vue'
 import router from './router'
@@ -9,6 +10,7 @@ const app = createApp(App)
 
 app.use(createPinia())
 app.use(createHead())
+app.use(i18n)
 app.use(router)
 
 app.mount('#app')

src/router/index.ts

@@ -10,6 +10,11 @@ const router = createRouter({
       name: 'home',
       component: HomeView
     },
+    {
+      path: '/tags/:tag',
+      name: 'tag',
+      component: () => import('../views/TagView.vue')
+    },
     ...toolsRoutes
   ]
 })

src/router/router-meta.d.ts

@@ -0,0 +1,17 @@
+// This can be directly added to any of your `.ts` files like `router.ts`
+// It can also be added to a `.d.ts` file. Make sure it's included in
+// project's tsconfig.json "files"
+import 'vue-router'
+import type { Component } from 'vue'
+
+// To ensure it is treated as a module, add at least one `export` statement
+export {}
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    locales?: Record<string, Record<string, string>>
+    icon?: Component
+    tags?: string[]
+    hidden?: boolean
+  }
+}

src/tools/favicon/favicon-generator/index.ts

@@ -0,0 +1,14 @@
+import type { RouteRecordRaw } from 'vue-router'
+import { messages } from './locales'
+import { Icons20Regular } from '@vicons/fluent'
+
+export const route: RouteRecordRaw = {
+  path: '/tools/favicon-generator',
+  name: 'tools-favicon-generator',
+  component: () => import('./views/FaviconGeneratorView.vue'),
+  meta: {
+    locales: messages,
+    icon: Icons20Regular,
+    tags: ['favicon', 'icon', 'image']
+  }
+}