✨ Nuxt content tool chain

content/zh-CN/products/acefield.mdx

@@ -0,0 +1,9 @@
+---
+thumbnail: /thumbnails/products/acefield.webp
+title: AceField
+description: An experimental multiplayer top-down view shooting game that created by Solsynth LLC affiliation Highland Entertainment.
+url: https://files.solsynth.dev/production01/acefield
+---
+
+AceField which is stands for wonderful place to battle.
+We can't just use the name Battlefield because it already became a trademark of Electronic Arts.

content/zh-CN/products/roadsign.mdx

@@ -0,0 +1,6 @@
+---
+thumbnail: /thumbnails/products/roadsign.webp
+title: RoadSign
+description: The reserve proxy that powered our network. Powerful and easy to use.
+archived: true
+---

content/zh-CN/products/solar-network.mdx

@@ -0,0 +1,24 @@
+---
+thumbnail: /thumbnails/products/solar-network.webp
+title: Solar Network
+description: All-in-one 社交媒体平台
+url: https://sn.solsynth.dev
+---
+
+Solar Network 是一个创新的平台，它将社交互动、聊天和语音通话无缝整合到一个统一的体验中。通过 Solar Network，您可以毫不费力地建立和管理自己的社区。
+
+## Key Features
+
+- Social Integration: Connect and engage with others through a comprehensive social platform that brings together various forms of interaction.
+- Chat: Enjoy real-time messaging with individuals and groups, making communication smooth and efficient.
+- Voice Calls: Experience crystal-clear voice calls, enabling you to connect on a deeper level with your community.
+
+## Why Choose Solar Network?
+
+- User-Friendly: Designed with simplicity in mind, making it easy for anyone to create and manage their community.
+- All-in-One Solution: Combines essential communication tools into one platform, eliminating the need for multiple apps.
+- Customizable: Tailor the platform to suit your community’s unique needs and preferences.
+
+Join Solar Network today and start building your community with ease!
+
+Feel free to adjust any details to better fit your vision for the product.

nuxt.config.ts

@@ -71,6 +71,8 @@ export default defineNuxtConfig({
     highlight: {
       theme: "github-dark",
     },
+    locales: ["en", "zh-CN"],
+    defaultLocale: "en",
   },
 
   pinia: {

pages/index.vue

@@ -42,9 +42,13 @@
 </template>
 
 <script setup lang="ts">
+import { getLocale } from "~/utils/locale"
+
 const { t } = useI18n()
 
-const { data: products } = await useAsyncData("products", () => queryContent("/products").where({ archived: { $ne: true } }).limit(5).find())
+const { data: products } = await useAsyncData("products", () => {
+  return queryContent("/products").where({ _locale: getLocale(), archived: { $ne: true } }).limit(5).find()
+})
 </script>
 
 <style scoped>

pages/products/[...slug].vue

@@ -26,7 +26,7 @@
     </v-card>
 
     <article class="text-base prose xl:text-lg mx-auto">
-      <content-doc>
+      <content-renderer :value="page">
         <template #empty>
           <v-empty-state
             icon="mdi-image-broken-variant"
@@ -39,19 +39,9 @@
             </template>
           </v-empty-state>
         </template>
-        <template #not-found>
-          <v-empty-state
-            icon="mdi-flask-empty-remove-outline"
-            text="We haven't this product, yet."
-            title="Not Found"
-            class="no-content-placeholder"
-          >
-            <template #actions>
-              <v-btn prepend-icon="mdi-list-box" variant="plain" text="Back to index" to="/products" exact />
-            </template>
-          </v-empty-state>
-        </template>
-      </content-doc>
+
+        <content-renderer-markdown :value="page" />
+      </content-renderer>
     </article>
   </v-container>
 </template>
@@ -67,7 +57,14 @@
 const route = useRoute()
 
 const { t } = useI18n()
-const { data: page } = await useAsyncData("page", queryContent(route.path).findOne)
+const { data: page } = await useAsyncData<any>("page", queryContent(route.path).where({ _locale: getLocale() }).findOne)
+
+if (page.value == null) {
+  throw createError({
+    status: 404,
+    statusMessage: "Product Not Found",
+  })
+}
 </script>
 
 <style scoped>

pages/products/index.vue

@@ -28,13 +28,17 @@
 </template>
 
 <script setup lang="ts">
+import { getLocale } from "~/utils/locale"
+
 useHead({
   title: "Products",
 })
 
 const { t } = useI18n()
 
-const { data: products } = await useAsyncData("products", () => queryContent("/products").find())
+const { data: products } = await useAsyncData("products", () => {
+  return queryContent("/products").where({ _locale: getLocale() }).find()
+})
 </script>
 
 <style scoped>

utils/locale.ts

@@ -0,0 +1,7 @@
+export function getLocale() {
+  const fallbackLocale = "en"
+  const supportedLocales = ["en", "zh-CN"]
+  const { locale } = useI18n()
+
+  return supportedLocales.includes(locale.value) ? locale.value : fallbackLocale;
+}