feat: 多语言、文档迁移测试、主页layout

.vitepress/config.mts

@@ -1,32 +1,101 @@
-import { fileURLToPath, URL } from 'node:url'
-import { defineConfig } from 'vitepress'
+import { fileURLToPath, URL } from "node:url";
+import { defineConfig } from "vitepress";
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  title: "Cococlass Help Documents",
+  title: "CocoBlockly帮助文档",
   description: "Cococlass help documents",
-  themeConfig: {
-    // https://vitepress.dev/reference/default-theme-config
-    search: {
-      provider: 'local'
-    },
-    nav: [
-      { text: 'Home', link: '/' },
-      { text: 'Examples', link: '/markdown-examples' }
-    ],
+  srcDir: "pages",
 
-    sidebar: [
-      {
-        text: 'Examples',
-        items: [
-          { text: 'Markdown Examples', link: '/markdown-examples' },
-          { text: 'Runtime API Examples', link: '/api-examples' }
-        ]
-      }
+  vite: {
+    publicDir: "../public",
+    plugins: [
+      /* ... */
+      VueI18nPlugin({
+        /* options */
+        // locale messages resource pre-compile option
+        // include: resolve(dirname(fileURLToPath(import.meta.url)), './path/to/src/locales/**'),
+      }),
     ],
-
-    socialLinks: [
-      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
-    ]
-  }
-})
+    resolve: {
+      alias: [
+        {
+          find: /^.*\/VPNavBar\.vue$/,
+          replacement: fileURLToPath(
+            new URL("../components/CustomNavBar.vue", import.meta.url)
+          ),
+        },
+        { find: '@/', replacement: fileURLToPath(new URL('../', import.meta.url)) },
+      ],
+    },
+  },
+  locales: {
+    root: {
+      label: "简体中文",
+      lang: "zh-CN",
+      themeConfig: {
+        logo: "/logo.png",
+        siteTitle: false,
+        // https://vitepress.dev/reference/default-theme-config
+        // search: {
+        //   provider: 'local'
+        // },
+        // nav: [
+        //   { text: 'Home', link: '/' },
+        //   { text: 'Examples', link: '/markdown-examples' }
+        // ],
+        sidebar: [
+          { text: "关于CocoBlockly X", link: "/docs" },
+          { text: "常见问题解答", link: "/docs/faq" },
+          {
+            text: "开始使用CocoBlockly X",
+            link: "/docs/start-using-cocoblockly-x",
+          },
+          {
+            text: "电子模块基本教学",
+            items: [
+              { text: "todo", link: "/docs" },
+            ],
+          },
+        ],
+        // socialLinks: [
+        //   { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
+        // ]
+      },
+    },
+    "zh-HK": {
+      label: "繁体中文",
+      lang: "zh-HK",
+      themeConfig: {
+        logo: "/logo.png",
+        siteTitle: false,
+        // https://vitepress.dev/reference/default-theme-config
+        // search: {
+        //   provider: 'local'
+        // },
+        // nav: [
+        //   { text: 'Home', link: '/' },
+        //   { text: 'Examples', link: '/markdown-examples' }
+        // ],
+        sidebar: [
+          { text: "什麽是CocoBlockly X", link: "/zh-HK/docs" },
+          { text: "常見問題解答", link: "/zh-HK/docs/faq" },
+          {
+            text: "開始使用CocoBlockly X",
+            link: "/zh-HK/docs/start-using-cocoblockly-x",
+          },
+          {
+            text: "電子模組基本教學",
+            items: [
+              { text: "todo", link: "/zh-HK/docs" },
+            ],
+          },
+        ],
+        // socialLinks: [
+        //   { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
+        // ]
+      },
+    },
+  },
+});

.vitepress/theme/index.ts

@@ -1,17 +1,15 @@
 // https://vitepress.dev/guide/custom-theme
-import { h } from 'vue'
-import type { Theme } from 'vitepress'
-import DefaultTheme from 'vitepress/theme'
-import './style.css'
+import type { Theme } from "vitepress";
+import DefaultTheme from "vitepress/theme";
+import CustomLayout from "../../components/CustomLayout.vue";
+import i18n from "../../plugins/i18n";
+import "./style.css";
 
 export default {
   extends: DefaultTheme,
-  Layout: () => {
-    return h(DefaultTheme.Layout, null, {
-      // https://vitepress.dev/guide/extending-default-theme#layout-slots
-    })
-  },
+  Layout: CustomLayout,
   enhanceApp({ app, router, siteData }) {
+    app.use(i18n);
     // ...
-  }
-} satisfies Theme
+  },
+} satisfies Theme;

.vitepress/theme/style.css

@@ -137,3 +137,6 @@
   --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
 
+:root {
+  --vp-nav-logo-height: 42px;
+}

api-examples.md

@@ -1,49 +0,0 @@
----
-outline: deep
----
-
-# Runtime API Examples
-
-This page demonstrates usage of some of the runtime APIs provided by VitePress.
-
-The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
-
-```md
-<script setup>
-import { useData } from 'vitepress'
-
-const { theme, page, frontmatter } = useData()
-</script>
-
-## Results
-
-### Theme Data
-<pre>{{ theme }}</pre>
-
-### Page Data
-<pre>{{ page }}</pre>
-
-### Page Frontmatter
-<pre>{{ frontmatter }}</pre>
-```
-
-<script setup>
-import { useData } from 'vitepress'
-
-const { site, theme, page, frontmatter } = useData()
-</script>
-
-## Results
-
-### Theme Data
-<pre>{{ theme }}</pre>
-
-### Page Data
-<pre>{{ page }}</pre>
-
-### Page Frontmatter
-<pre>{{ frontmatter }}</pre>
-
-## More
-
-Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).

components/CustomLayout.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { watchEffect } from "vue";
+
+import DefaultTheme from "vitepress/theme";
+import { useI18n } from "vue-i18n";
+import { useData } from "vitepress";
+import i18n from "@/plugins/i18n";
+
+const Layout = DefaultTheme.Layout;
+
+const { lang } = useData();
+const { t } = useI18n();
+watchEffect(() => {
+  i18n.global.locale.value = lang.value;
+});
+</script>
+<template>
+  <Layout>
+    <template #nav-bar-content-before>
+      <div class="content-before">{{ t("帮助中心") }}</div>
+    </template>
+  </Layout>
+</template>
+<i18n locale="zh-HK">
+{
+  "帮助中心": "幫助中心"
+}
+</i18n>
+<style scoped>
+.content-before {
+  color: #2e5aa8;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  margin-left: 14px;
+}
+</style>

components/CustomNavBar.vue

@@ -0,0 +1,267 @@
+<script lang="ts" setup>
+import { useWindowScroll } from '@vueuse/core'
+import { ref, watchPostEffect } from 'vue'
+import { useData } from 'vitepress/dist/client/theme-default/composables/data'
+import { useSidebar } from 'vitepress/dist/client/theme-default/composables/sidebar'
+import VPNavBarAppearance from 'vitepress/dist/client/theme-default/components/VPNavBarAppearance.vue'
+import VPNavBarExtra from 'vitepress/dist/client/theme-default/components/VPNavBarExtra.vue'
+import VPNavBarHamburger from 'vitepress/dist/client/theme-default/components/VPNavBarHamburger.vue'
+import VPNavBarMenu from 'vitepress/dist/client/theme-default/components/VPNavBarMenu.vue'
+import VPNavBarSearch from 'vitepress/dist/client/theme-default/components/VPNavBarSearch.vue'
+import VPNavBarSocialLinks from 'vitepress/dist/client/theme-default/components/VPNavBarSocialLinks.vue'
+import VPNavBarTitle from 'vitepress/dist/client/theme-default/components/VPNavBarTitle.vue'
+import VPNavBarTranslations from 'vitepress/dist/client/theme-default/components/VPNavBarTranslations.vue'
+
+defineProps<{
+  isScreenOpen: boolean
+}>()
+
+defineEmits<{
+  (e: 'toggle-screen'): void
+}>()
+
+const { y } = useWindowScroll()
+const { hasSidebar } = useSidebar()
+const { frontmatter } = useData()
+
+const classes = ref<Record<string, boolean>>({})
+
+watchPostEffect(() => {
+  classes.value = {
+    'has-sidebar': hasSidebar.value,
+    'home': frontmatter.value.layout === 'home',
+    'top': y.value === 0,
+  }
+})
+</script>
+
+<template>
+  <div class="VPNavBar" :class="classes">
+    <div class="wrapper">
+      <div class="container">
+        <div class="title">
+          <VPNavBarTitle>
+            <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
+            <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
+          </VPNavBarTitle>
+        </div>
+
+        <div class="content">
+          <div class="content-body">
+            <slot name="nav-bar-content-before" />
+            <VPNavBarSearch class="search" />
+            <VPNavBarMenu class="menu" />
+            <VPNavBarTranslations class="translations" />
+            <VPNavBarAppearance class="appearance" />
+            <VPNavBarSocialLinks class="social-links" />
+            <VPNavBarExtra class="extra" />
+            <slot name="nav-bar-content-after" />
+            <VPNavBarHamburger class="hamburger" :active="isScreenOpen" @click="$emit('toggle-screen')" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="divider">
+      <div class="divider-line" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPNavBar {
+  position: relative;
+  height: var(--vp-nav-height);
+  pointer-events: none;
+  white-space: nowrap;
+  transition: background-color 0.5s;
+}
+
+.VPNavBar:not(.home) {
+  background-color: var(--vp-nav-bg-color);
+}
+
+@media (min-width: 960px) {
+  .VPNavBar:not(.home) {
+    background-color: transparent;
+  }
+
+  .VPNavBar:not(.has-sidebar):not(.home.top) {
+    background-color: var(--vp-nav-bg-color);
+  }
+}
+
+.wrapper {
+  padding: 0 8px 0 24px;
+}
+
+@media (min-width: 768px) {
+  .wrapper {
+    padding: 0 32px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPNavBar.has-sidebar .wrapper {
+    padding: 0;
+  }
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto;
+  max-width: calc(var(--vp-layout-max-width) - 64px);
+  height: var(--vp-nav-height);
+  pointer-events: none;
+}
+
+.container > .title,
+.container > .content {
+  pointer-events: none;
+}
+
+.container :deep(*) {
+  pointer-events: auto;
+}
+
+@media (min-width: 960px) {
+  .VPNavBar.has-sidebar .container {
+    max-width: 100%;
+  }
+}
+
+.title {
+  flex-shrink: 0;
+  height: calc(var(--vp-nav-height) - 1px);
+  transition: background-color 0.5s;
+}
+
+@media (min-width: 960px) {
+  .VPNavBar.has-sidebar .title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    padding: 0 32px;
+    width: var(--vp-sidebar-width);
+    height: var(--vp-nav-height);
+    background-color: transparent;
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPNavBar.has-sidebar .title {
+    padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
+    width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
+  }
+}
+
+.content {
+  flex-grow: 1;
+}
+
+@media (min-width: 960px) {
+  .VPNavBar.has-sidebar .content {
+    position: relative;
+    z-index: 1;
+    padding-right: 32px;
+    padding-left: var(--vp-sidebar-width);
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPNavBar.has-sidebar .content {
+    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);
+    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+  }
+}
+
+.content-body {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: var(--vp-nav-height);
+  transition: background-color 0.5s;
+}
+
+@media (min-width: 960px) {
+  .VPNavBar:not(.home.top) .content-body {
+    position: relative;
+    background-color: var(--vp-nav-bg-color);
+  }
+
+  .VPNavBar:not(.has-sidebar):not(.home.top) .content-body {
+    background-color: transparent;
+  }
+}
+
+@media (max-width: 767px) {
+  .content-body {
+    column-gap: 0.5rem;
+  }
+}
+
+.menu + .translations::before,
+.menu + .appearance::before,
+.menu + .social-links::before,
+.translations + .appearance::before,
+.appearance + .social-links::before {
+  margin-right: 8px;
+  margin-left: 8px;
+  width: 1px;
+  height: 24px;
+  background-color: var(--vp-c-divider);
+  content: "";
+}
+
+.menu + .appearance::before,
+.translations + .appearance::before {
+  margin-right: 16px;
+}
+
+.appearance + .social-links::before {
+  margin-left: 16px;
+}
+
+.social-links {
+  margin-right: -8px;
+}
+
+.divider {
+  width: 100%;
+  height: 1px;
+}
+
+@media (min-width: 960px) {
+  .VPNavBar.has-sidebar .divider {
+    padding-left: var(--vp-sidebar-width);
+  }
+}
+
+@media (min-width: 1440px) {
+  .VPNavBar.has-sidebar .divider {
+    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+  }
+}
+
+.divider-line {
+  width: 100%;
+  height: 1px;
+  transition: background-color 0.5s;
+}
+
+.VPNavBar:not(.home) .divider-line {
+  background-color: var(--vp-c-gutter);
+}
+
+@media (min-width: 960px) { 
+  .VPNavBar:not(.home.top) .divider-line {
+    background-color: var(--vp-c-gutter);
+  }
+
+  .VPNavBar:not(.has-sidebar):not(.home.top) .divider {
+    background-color: var(--vp-c-gutter);
+  }
+}
+</style>

components/HomeContent.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const count = ref(0);
+</script>
+<template>
+  <div class="home-content">
+    <span>{{ count }}</span>
+    <button @click="count++">test</button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.home-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>

index.md

@@ -1,24 +0,0 @@
----
-# https://vitepress.dev/reference/default-theme-home-page
-layout: home
-
-hero:
-  name: "Cococlass Help Documents"
-  text: "Cococlass help documents"
-  tagline: My great project tagline
-  actions:
-    - theme: brand
-      text: Markdown Examples
-      link: /markdown-examples
-    - theme: alt
-      text: API Examples
-      link: /api-examples
-
-features:
-  - title: Feature A
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature B
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature C
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
----

markdown-examples.md

@@ -1,85 +0,0 @@
-# Markdown Extension Examples
-
-This page demonstrates some of the built-in markdown extensions provided by VitePress.
-
-## Syntax Highlighting
-
-VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
-
-**Input**
-
-````md
-```js{4}
-export default {
-  data () {
-    return {
-      msg: 'Highlighted!'
-    }
-  }
-}
-```
-````
-
-**Output**
-
-```js{4}
-export default {
-  data () {
-    return {
-      msg: 'Highlighted!'
-    }
-  }
-}
-```
-
-## Custom Containers
-
-**Input**
-
-```md
-::: info
-This is an info box.
-:::
-
-::: tip
-This is a tip.
-:::
-
-::: warning
-This is a warning.
-:::
-
-::: danger
-This is a dangerous warning.
-:::
-
-::: details
-This is a details block.
-:::
-```
-
-**Output**
-
-::: info
-This is an info box.
-:::
-
-::: tip
-This is a tip.
-:::
-
-::: warning
-This is a warning.
-:::
-
-::: danger
-This is a dangerous warning.
-:::
-
-::: details
-This is a details block.
-:::
-
-## More
-
-Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).