feat: add locale change navbar

sanyuan0704 · Sep 30, 2022 · 9cd5883 · 9cd5883
1 parent 8615a61
commit 9cd5883
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 18 deletions.
diff --git a/docs/.island/config.ts b/docs/.island/config.ts
@@ -25,7 +25,7 @@ export default defineConfig({
   themeConfig: {
     locales: {
       '/zh/': {
-        lang: 'zh-CN',
+        lang: 'zh',
         label: '简体中文',
         selectText: '语言',
         ariaLabel: '语言',
@@ -36,7 +36,7 @@ export default defineConfig({
         description: '基于孤岛架构的 SSG 框架'
       },
       '/en/': {
-        lang: 'en-US',
+        lang: 'en',
         label: 'English',
         selectText: 'Languages',
         ariaLabel: 'Languages',

diff --git a/docs/.island/index.html b/docs/.island/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Island.js</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="description" content="">
+  <script>
+    var langPrefixList = ['/zh', '/en'];
+    var isIncludeLangPrefix = langPrefixList.some(function (langPrefix) {
+      return window.location.pathname.startsWith(langPrefix);
+    });
+    if (!isIncludeLangPrefix)
+    {
+      if (typeof window !== 'undefined' && window.navigator)
+      {
+        var langs = window.navigator.languages || [window.navigator.language]
+        if (langs.some(function (lang) { return lang.includes('zh') }))
+        {
+          window.location.href = '/zh/';
+        } else
+        {
+          window.location.href = '/en/';
+        }
+      } else
+      {
+        window.location.href = '/zh/';
+      }
+    }
+  </script>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+
+</html>
diff --git a/docs/zh/index.md b/docs/zh/index.md
@@ -3,27 +3,27 @@ pageType: home
 
 hero:
   name: Island
-  text: Vite & Islands Arch Static Site Generator
-  tagline: Simple, powerful, and performant. Meet the modern SSG framework you've always wanted.
+  text: 基于 Vite & 孤岛架构的静态站点生成器
+  tagline: 简单、强大、高性能的现代化 SSG 方案
   image:
     src: /island.png
     alt: Island
   actions:
     - theme: brand
-      text: Get Started
-      link: /guide/getting-started
+      text: 快速开始
+      link: /zh/guide/getting-started
     - theme: alt
-      text: View on GitHub
+      text: GitHub 地址
       link: https://github.com/sanyuan0704/island
 
 features:
-  - title: "Vite: The DX that can't be beat"
-    details: With Markdown-centered content, it's built to help you focus on writing and deployed with minimum configuration.
+  - title: 'Vite: 极速的开发响应速度'
+    details: 基于 Vite 构建，开发时的响应速度极快，即时的热更新，带给你极致的开发体验。
     icon: 🚀
-  - title: 'MDX: The flexible way to write content'
-    details: MDX is a powerful way to write content. You can use React components in Markdown.
+  - title: 'MDX: Markdown & React 组件来写内容'
+    details: MDX 是一种强大的方式来写内容。你可以在 Markdown 中使用 React 组件。
     icon: 📦
-  - title: 'Islands Arch: The higher performance in production'
-    details: Designed to be islands architecture, means less javascript bundle, partial hydration and better performance about FCP, TTI.
+  - title: '孤岛架构: 更高的生产性能'
+    details: 采用 Islands 架构，意味着更少的 JavaScript 代码、局部 hydration， 从而带来更好的首屏性能。
     icon: ✨
 ---
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "dev": "tsup --watch --format=cjs,esm",
     "build": "NODE_ENV=production tsup --format=cjs,esm && tsx scripts/pre-bundle.cts",
     "dev:docs": "node ./bin/island docs",
-    "build:docs": "node ./bin/island build docs",
+    "build:docs": "node ./bin/island build docs && cp -r ./docs/.island/index.html ./docs/.island/dist",
     "start:docs": "node ./bin/island start docs",
     "lint": "eslint --ext .ts,.tsx,.js,.jsx ./",
     "lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx --quiet ./",

diff --git a/src/node/plugin-island/indexHtml.ts b/src/node/plugin-island/indexHtml.ts
@@ -51,7 +51,7 @@ export function pluginIndexHtml(config: SiteConfig): Plugin {
           if (res.writableEnded) {
             return next();
           }
-          if (req.url?.replace(/\?.*/, '').endsWith('.html')) {
+          if (req.url?.replace(/\?.*/, '')) {
             let html = fs.readFileSync(DEFAULT_HTML_PATH, 'utf8');
 
             try {

diff --git a/src/theme-default/components/Nav/index.module.scss b/src/theme-default/components/Nav/index.module.scss
@@ -204,3 +204,9 @@
 
 .menuGroup {
 }
+
+.translations {
+  display: flex;
+  font-weight: bold;
+  font-size: 14px;
+}
diff --git a/src/theme-default/components/Nav/index.tsx b/src/theme-default/components/Nav/index.tsx
@@ -18,6 +18,7 @@ export function Nav() {
   const hasSidebar = pageType === 'doc';
   const hasAppearanceSwitch = siteData.appearance !== false;
   const localeData = useLocaleSiteData(siteData.themeConfig, location.pathname);
+  const lang = localeData.lang || 'zh';
   const menuItems = localeData.nav || [];
   const socialLinks = siteData?.themeConfig?.socialLinks || [];
   const title =
@@ -71,11 +72,17 @@ export function Nav() {
           <div className={styles.content}>
             <div className={styles.search}>{/* <Search /> */}</div>
             <div className={styles.menu}>{renderMenuList()}</div>
+            <div className={styles.translations}>
+              <Link href={lang === 'zh' ? '/en/' : '/zh/'}>
+                {lang === 'zh' ? 'English' : '中文版'}
+              </Link>
+            </div>
             {hasAppearanceSwitch && (
               <div className={styles.appearance}>
                 <SwitchAppearance __island />
               </div>
             )}
+
             <div className={styles.socialLinks}>
               <div className={styles.socialLink}>
                 {socialLinks.map((item) => {

diff --git a/src/theme-default/logic/usePrevNextPage.ts b/src/theme-default/logic/usePrevNextPage.ts
@@ -1,11 +1,12 @@
 import { DefaultTheme, SiteData } from 'shared/types';
 import { useLocation } from 'react-router-dom';
+import { useLocaleSiteData } from './useLocaleSiteData';
 
 export function usePrevNextPage(siteData: SiteData<DefaultTheme.Config>) {
-  const themeConfig = siteData.themeConfig || {};
-  const sidebar = themeConfig.sidebar || [];
-  const flattenTitles: DefaultTheme.SidebarItem[] = [];
   const { pathname } = useLocation();
+  const localesData = useLocaleSiteData(siteData.themeConfig, pathname);
+  const sidebar = localesData.sidebar || {};
+  const flattenTitles: DefaultTheme.SidebarItem[] = [];
 
   const walkThroughSidebar = (sidebar: DefaultTheme.Sidebar) => {
     if (Array.isArray(sidebar)) {

diff --git a/template.html b/template.html
@@ -12,4 +12,5 @@
   <div id="root"></div>
 </body>
 
+
 </html>