feat: use nav and sidebar data

sanyuan0704 · Sep 5, 2022 · 2d67ca7 · 2d67ca7
1 parent 4144cc3
commit 2d67ca7
Show file tree

Hide file tree

Showing 7 changed files with 148 additions and 78 deletions.
diff --git a/playground/.island/config.ts b/playground/.island/config.ts
@@ -11,6 +11,99 @@ export default defineConfig({
         activeMatch: '^/build/'
       },
       { text: '生态', link: '/eco/plugin-vue', activeMatch: '^/eco/' }
-    ]
+    ],
+    sidebar: {
+      '/build/': getBuildSidebar(),
+      '/eco/': getEcosystemSidebar(),
+      '/': getArchSidebar()
+    }
   }
 });
+
+function getArchSidebar() {
+  return [
+    {
+      text: '前言',
+      items: [{ text: '为什么写这本书？', link: '/arch/why' }]
+    },
+    {
+      text: '架构',
+      items: [
+        { text: '内置双引擎', link: '/arch/engine' },
+        { text: 'CLI 工具', link: '/arch/cli' },
+        { text: '配置解析服务', link: '/arch/config' },
+        { text: 'Dev Server 架构', link: '/arch/server-mode' },
+        { text: '插件容器机制', link: '/arch/plugin-container' },
+        { text: '仓库工作流', link: '/arch/workflow' }
+      ]
+    }
+  ];
+}
+
+function getBuildSidebar() {
+  return [
+    {
+      text: '预构建',
+      items: [{ text: 'Esbuild 预构建', link: '/build/1-pre-bundle/esbuild' }]
+    },
+    {
+      text: 'Dev Server 构建核心',
+      items: [
+        { text: 'HTTP 请求处理', link: '/build/2-dev/http' },
+        { text: '模块图谱', link: '/build/2-dev/module-graph' },
+        { text: '基于 ESM 的 HMR 实现', link: '/build/2-dev/esm-hmr' }
+      ]
+    },
+    {
+      text: '路径解析系统',
+      items: [
+        { text: 'Node Resolve 算法重写', link: '/build/3-resolve/node' },
+        { text: 'Glob 语法糖', link: '/build/3-resolve/glob' },
+        { text: '支持动态 import', link: '/build/3-resolve/dynamic-import' },
+        { text: '开发环境路径分析流程', link: '/build/3-resolve/dev' },
+        { text: '生产环境路径分析流程', link: '/build/3-resolve/prod' }
+      ]
+    },
+    {
+      text: '资源处理',
+      items: [
+        {
+          text: 'Esbuild Transform 能力',
+          link: '/build/4-resource/esbuild-transform'
+        },
+        { text: 'CSS 构建能力', link: '/build/4-resource/css' },
+        { text: '静态资源打包', link: '/build/4-resource/asset' },
+        { text: '模块预加载', link: '/build/4-resource/module-preload' }
+      ]
+    },
+    {
+      text: '生产环境打包',
+      items: [{ text: 'HTML 产物构建', link: '/build/5-bundle/html' }]
+    },
+    {
+      text: 'SSR 构建',
+      items: [
+        { text: 'ESM 代码转换', link: '/build/6-ssr/transform' },
+        { text: 'External 依赖', link: '/build/6-ssr/external' },
+        { text: 'Manifest 资源', link: '/build/6-ssr/manifest' },
+        { text: 'SourceMap 错误栈追溯', link: '/build/6-ssr/error-stack' }
+      ]
+    }
+  ];
+}
+
+function getEcosystemSidebar() {
+  return [
+    {
+      text: '官方插件实现',
+      items: [
+        { text: 'plugin-vue 实现', link: '/eco/plugin-vue' },
+        { text: 'plugin-react 实现', link: '/eco/plugin-react' }
+      ]
+    },
+    {
+      text: '第三方插件',
+      items: []
+    }
+  ];
+}
diff --git a/src/client/theme/components/Nav/index.tsx b/src/client/theme/components/Nav/index.tsx
@@ -4,33 +4,32 @@ import { Link } from '../Link/index';
 import { SwitchAppearance } from '../SwitchAppearance/index';
 import GithubSvg from './icons/github.svg';
 import { Search } from '../Search/index';
+import { usePageData } from 'island:client';
+import { DefaultTheme } from '../../../../shared/types';
+
+interface NavBarProps {
+  nav: DefaultTheme.NavItem[];
+}
+
+export function NavBar(props: NavBarProps) {
+  const menuItems = props.nav;
 
-export function NavBar() {
-  const menuItems = [
-    {
-      text: 'Home',
-      href: '/'
-    },
-    {
-      text: 'Home',
-      href: '/'
-    },
-    {
-      text: 'Home',
-      href: '/'
-    }
-  ];
   const renderMenuList = () => {
     return (
       <div className={styles.menu}>
-        {menuItems.map((item) => (
-          <div
-            key={item.text}
-            className={`${styles.menuLink} ${styles.active}`}
-          >
-            <Link href="/">123</Link>
-          </div>
-        ))}
+        {menuItems.map((item) => {
+          const isActive = new RegExp(item.activeMatch || '').test(
+            window.location.pathname
+          );
+          return (
+            <div
+              key={item.text}
+              className={`${styles.menuLink} ${isActive ? styles.active : ''}`}
+            >
+              <Link href="/">{item.text}</Link>
+            </div>
+          );
+        })}
       </div>
     );
   };
@@ -64,9 +63,11 @@ export function NavBar() {
 }
 
 export function Nav() {
+  const pageData = usePageData();
+  const nav = pageData.themeConfig.nav || [];
   return (
     <header className={styles.nav}>
-      <NavBar />
+      <NavBar nav={nav} />
     </header>
   );
 }
diff --git a/src/client/theme/components/Siderbar/index.module.scss b/src/client/theme/components/Siderbar/index.module.scss
@@ -87,7 +87,7 @@
   padding-top: 6px;
   padding-bottom: 6px;
   line-height: 20px;
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 700;
   color: var(--island-c-text-1);
 }
@@ -150,8 +150,8 @@
 }
 
 .link {
+  padding: 5px;
   display: block;
-  margin: 4px 0;
   color: var(--island-c-text-2);
   transition: color 0.5s;
   line-height: 20px;
@@ -164,7 +164,8 @@
 }
 
 .link:hover {
-  color: var(--island-c-text-1);
+  background-color: var(--island-c-blue-1);
+  transition: background-color 0.5s;
 }
 
 .link.active {

diff --git a/src/client/theme/components/Siderbar/index.tsx b/src/client/theme/components/Siderbar/index.tsx
@@ -1,64 +1,40 @@
 import styles from './index.module.scss';
 import React from 'react';
-import MinusSvg from './icons/minus.svg';
-import PlusSvg from './icons/plus.svg';
 import { Link } from '../Link/index';
-
-export type SidebarItem =
-  | { text: string; link: string }
-  | { text: string; link?: string; items: SidebarItem[] };
-
-interface SideBarData {
-  text: string;
-  items: SidebarItem[];
-  collapsible?: boolean;
-  collapsed?: boolean;
-}
+import { DefaultTheme } from '../../../../shared/types';
+import { usePageData } from 'island:client';
 
 export function SideBar() {
-  const data: SideBarData[] = [
-    {
-      text: 'Home',
-      items: [{ text: 'Home', link: '/' }]
-    },
-    {
-      text: 'Docs',
-      items: [
-        {
-          text: 'Getting Started',
-          link: '/docs/getting-started'
-        },
-        {
-          text: 'Guides',
-          items: [
-            {
-              text: 'Introduction',
-              link: '/docs/guides/introduction'
-            }
-          ]
-        }
-      ]
-    }
-  ];
-  const renderGroupItem = (item: SidebarItem, depth = 0) => {
+  const pageData = usePageData();
+  const sidebar = pageData.themeConfig.sidebar || {};
+  const sidebarData = Object.keys(sidebar)
+    .filter((item) => window.location.pathname.startsWith(item))
+    .map((item) => sidebar[item])[0] as DefaultTheme.SidebarGroup[];
+
+  const renderGroupItem = (item: DefaultTheme.SidebarItem, depth = 0) => {
     const marginLeft = `${depth * 20}px`;
     let children: React.ReactElement[] = [];
     if ('items' in item) {
       children = item.items.map((child) => renderGroupItem(child, depth + 1));
     }
+    const isActive = item.text.includes('CLI');
     return (
       <div style={{ marginLeft }}>
-        <div className={styles.link}>
+        <div className={`${styles.link} ${isActive ? styles.active : ''}`}>
           <Link>{item.text}</Link>
         </div>
         {children}
       </div>
     );
   };
 
-  const renderGroup = (item: SideBarData) => {
+  const renderGroup = (item: DefaultTheme.SidebarGroup) => {
+    console.log(item);
     return (
-      <section className={`${styles.sideBarGroup} ${styles.collapsible}`}>
+      <section
+        key={item.text}
+        className={`${styles.sideBarGroup} ${styles.collapsible}`}
+      >
         <div className={styles.title}>
           <h2 className={styles.titleText}>{item.text}</h2>
           {/* <div className={styles.action}>
@@ -79,7 +55,7 @@ export function SideBar() {
     <aside className={styles.sidebar}>
       <nav className={styles.nav}>
         <div className={styles.group}>
-          {data.map((item) => renderGroup(item))}
+          {sidebarData.map((item) => renderGroup(item))}
         </div>
       </nav>
     </aside>

diff --git a/src/client/theme/layout/DocLayout/index.tsx b/src/client/theme/layout/DocLayout/index.tsx
@@ -1,12 +1,9 @@
 import React from 'react';
 import { SideBar } from '../../components/Siderbar/index';
 import styles from './index.module.scss';
-import { Content } from 'island:client/Content';
 import { Aside } from '../../components/Aside/index';
 import { DocFooter } from '../../components/DocFooter/index';
-import { usePageData } from 'island:client/data';
-
-console.log(usePageData());
+import { Content } from 'island:client';
 
 export function DocLayout() {
   return (

diff --git a/src/client/theme/styles/vars.css b/src/client/theme/styles/vars.css
@@ -50,10 +50,10 @@
   --island-c-indigo-dark: #1d2f3f;
   --island-c-indigo-darker: #14212e;
 
-  --island-c-blue: #40ccf2;
+  --island-c-blue: #3aadcc;
   --island-c-blue-light: #6ae5fd;
   --island-c-blue-lighter: #92eaf8;
-  --island-c-blue-dark: #3ac7eb;
+  --island-c-blue-dark: #2d97b2;
   --island-c-blue-darker: #1ddaeb;
   --island-c-blue-dimm-1: rgba(55, 172, 239, 0.5);
   --island-c-blue-dimm-2: rgba(26, 150, 221, 0.25);

diff --git a/src/client/type.d.ts b/src/client/type.d.ts
@@ -14,11 +14,13 @@ declare module 'island:page-data' {
   export default any;
 }
 
-declare module 'island:client*' {
+declare module 'island:client' {
   import { ComponentType } from 'react';
+  import { DefaultTheme } from '../shared/types/default-theme';
+  import { PageData } from '../shared/types/index';
 
   export const Content: ComponentType<any>;
-  export const usePageData: () => any;
+  export const usePageData: <T = DefaultTheme.Config>() => PageData<T>;
 }
 
 declare module 'virtual:routes' {