feat: adjust sidebar config

sanyuan0704 · Oct 5, 2022 · 9adcad2 · 9adcad2
1 parent ebcbfae
commit 9adcad2
Show file tree

Hide file tree

Showing 15 changed files with 88 additions and 150 deletions.
diff --git a/docs/en/api/config-theme.md b/docs/en/api/config-theme.md
@@ -71,13 +71,11 @@ export default defineConfig({
 
 - Type: `Array` | `Object`
 
-The sidebar of the site.
-
-`sidebar` config has two form: `array` and `object`.
-
-The `array` config is a list of `SidebarGroup`, which has following type:
+The sidebar of the site.The config is a map for `SidebarGroup`, which has following type:
 
 ```ts
+type Sidebar = Record<string, SidebarGroup[]>;
+
 interface SidebarGroup {
   // The text of the sidebar group
   text: string;
@@ -98,34 +96,6 @@ For example:
 ```js
 import { defineConfig } from 'islandjs';
 
-export default defineConfig({
-  themeConfig: {
-    sidebar: [
-      {
-        text: 'Guide',
-        items: [
-          {
-            text: 'Getting Started',
-            link: '/guide/getting-started'
-          }
-        ]
-      }
-    ]
-  }
-});
-```
-
-The `object` config is a map for `SidebarGroup`, which has following type:
-
-```ts
-Record<string, SidebarGroup[]>;
-```
-
-For example:
-
-```js
-import { defineConfig } from 'islandjs';
-
 export default defineConfig({
   themeConfig: {
     sidebar: {

diff --git a/docs/en/guide/configure-site.md b/docs/en/guide/configure-site.md
@@ -63,20 +63,21 @@ The sidebar config is used to config the sidebar of the site, which has followin
 
 ```ts
 import { defineConfig } from 'islandjs';
-
 export default defineConfig({
   themeConfig: {
-    sidebar: [
-      {
-        text: 'Guide',
-        items: [
-          {
-            text: 'Getting Started',
-            link: '/guide/getting-started'
-          }
-        ]
-      }
-    ]
+    sidebar: {
+      '/guide/': [
+        {
+          text: 'Guide',
+          items: [
+            {
+              text: 'Getting Started',
+              link: '/guide/getting-started'
+            }
+          ]
+        }
+      ]
+    }
   }
 });
 ```

diff --git a/docs/zh/api/config-theme.md b/docs/zh/api/config-theme.md
@@ -71,13 +71,11 @@ export default defineConfig({
 
 - Type: `Array` | `Object`
 
-网站的侧边栏。
-
-`sidebar` 配置有两种形式：`array` 和 `object`。
-
-`array` 配置是 `SidebarGroup` 的列表，具有以下类型：
+网站的侧边栏。配置是 `SidebarGroup` 的映射类型，具有以下类型：
 
 ```ts
+type Sidebar = Record<string, SidebarGroup[]>;
+
 interface SidebarGroup {
   text: string;
   items: SidebarItem[];
@@ -94,34 +92,6 @@ type SidebarItem = {
 ```js
 import { defineConfig } from 'islandjs';
 
-export default defineConfig({
-  themeConfig: {
-    sidebar: [
-      {
-        text: 'Guide',
-        items: [
-          {
-            text: 'Getting Started',
-            link: '/guide/getting-started'
-          }
-        ]
-      }
-    ]
-  }
-});
-```
-
-`object` 配置是 `SidebarGroup` 的映射类型，具有以下类型：
-
-```ts
-Record<string, SidebarGroup[]>;
-```
-
-比如:
-
-```js
-import { defineConfig } from 'islandjs';
-
 export default defineConfig({
   themeConfig: {
     sidebar: {

diff --git a/docs/zh/guide/configure-site.md b/docs/zh/guide/configure-site.md
@@ -1,7 +1,3 @@
----
-title: 'Configure your site'
----
-
 # 配置站点
 
 ## 创建配置文件
@@ -70,17 +66,19 @@ import { defineConfig } from 'islandjs';
 
 export default defineConfig({
   themeConfig: {
-    sidebar: [
-      {
-        text: 'Guide',
-        items: [
-          {
-            text: 'Getting Started',
-            link: '/guide/getting-started'
-          }
-        ]
-      }
-    ]
+    sidebar: {
+      '/guide/': [
+        {
+          text: 'Guide',
+          items: [
+            {
+              text: 'Getting Started',
+              link: '/guide/getting-started'
+            }
+          ]
+        }
+      ]
+    }
   }
 });
 ```

diff --git a/src/runtime/hooks.ts b/src/runtime/hooks.ts
@@ -2,6 +2,7 @@ import { createContext, useContext } from 'react';
 import { PageData } from '../shared/types';
 import { inBrowser } from '../shared/utils';
 import { routes } from 'virtual:routes';
+import { Route } from 'node/plugin-routes';
 
 export const DataContext = createContext({
   data: inBrowser() ? window?.ISLAND_PAGE_DATA : null,
@@ -21,9 +22,11 @@ export const useSetPageData = (data: PageData) => {
   }
 };
 
-export const getAllPages = (): Promise<PageData[]> => {
+export const getAllPages = (
+  filter: (route: Route) => boolean = () => true
+): Promise<PageData[]> => {
   return Promise.all(
-    routes.map(async (route) => {
+    routes.filter(filter).map(async (route) => {
       const mod = await route.preload();
       return {
         ...mod,

diff --git a/src/shared/types/default-theme.ts b/src/shared/types/default-theme.ts
@@ -91,7 +91,7 @@ export namespace DefaultTheme {
     title?: string;
     description?: string;
     head?: HeadConfig[];
-    label?: string;
+    label: string;
     selectText?: string;
     nav?: NavItem[];
     sidebar?: Sidebar;
@@ -139,7 +139,7 @@ export namespace DefaultTheme {
 
   // sidebar -------------------------------------------------------------------
 
-  export type Sidebar = SidebarGroup[] | SidebarMulti;
+  export type Sidebar = SidebarMulti;
 
   export interface SidebarMulti {
     [path: string]: SidebarGroup[];

diff --git a/src/shared/types/type.d.ts b/src/shared/types/type.d.ts
@@ -26,10 +26,11 @@ declare module 'island:site-data' {
 declare module 'island/client' {
   import { ComponentType, ReactElement } from 'react';
   import { PageData, SiteData } from 'shared/types';
+  import { Route } from 'node/plugin-routes';
 
   export const Content: ComponentType<{ fallback?: ReactElement }>;
   export const usePageData: () => PageData;
-  export const getAllPages: () => PageData[];
+  export const getAllPages: (filter?: (route: Route) => boolean) => PageData[];
   export const DataContext: React.Context<{
     data: PageData;
     setData: React.Dispatch<React.SetStateAction<PageData>>;

diff --git a/src/theme-default/components/DocFooter/index.tsx b/src/theme-default/components/DocFooter/index.tsx
@@ -2,19 +2,17 @@ import styles from './index.module.scss';
 import { usePageData } from 'island/client';
 import { useEditLink, useLocaleSiteData, usePrevNextPage } from '../../logic';
 import { normalizeHref } from '../../logic/index';
-import { useLocation } from 'react-router-dom';
 
 export function DocFooter() {
   const { siteData, relativePagePath, lastUpdatedTime } = usePageData();
-  const { prevPage, nextPage } = usePrevNextPage(siteData);
-  const { pathname } = useLocation();
+  const { prevPage, nextPage } = usePrevNextPage();
   const themeConfig = siteData.themeConfig;
   const {
     editLink: rawEditLink,
     lastUpdatedText,
     prevPageText = 'Previous Page',
     nextPageText = 'Next page'
-  } = useLocaleSiteData(themeConfig, pathname);
+  } = useLocaleSiteData();
 
   const editLink = useEditLink(
     rawEditLink! ?? themeConfig?.editLink,

diff --git a/src/theme-default/components/Nav/index.tsx b/src/theme-default/components/Nav/index.tsx
@@ -1,7 +1,6 @@
 import styles from './index.module.scss';
 import { SwitchAppearance } from '../SwitchAppearance/index';
 import { Search } from '../Search/index';
-import { useLocation } from 'react-router-dom';
 import { usePageData } from 'island/client';
 import { NavMenuSingleItem } from './NavMenuSingleItem';
 import { NavMenuGroup, NavMenuGroupItem } from './NavMenuGroup';
@@ -128,11 +127,10 @@ const NavSocialLinks = ({
 };
 
 export function Nav() {
-  const location = useLocation();
   const { siteData, pageType } = usePageData();
   const hasSidebar = pageType === 'doc';
   const hasAppearanceSwitch = siteData.appearance !== false;
-  const localeData = useLocaleSiteData(siteData.themeConfig, location.pathname);
+  const localeData = useLocaleSiteData();
   const localeLanguages = Object.values(siteData.themeConfig.locales || {});
   const hasMultiLanguage = localeLanguages.length > 1;
   const translationMenuData = hasMultiLanguage

diff --git a/src/theme-default/components/Search/index.tsx b/src/theme-default/components/Search/index.tsx
@@ -2,6 +2,7 @@ import { ChangeEvent, useCallback, useRef, useState } from 'react';
 import { MatchResultItem, PageSearcher } from '../../logic/search';
 import SearchSvg from './icons/search.svg';
 import { ComponentPropsWithIsland } from '../../../shared/types/index';
+import { useLocaleSiteData } from '../../logic';
 
 function SuggestionContent(props: {
   suggestion: MatchResultItem;
@@ -64,6 +65,7 @@ function SuggestionContent(props: {
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function Search(_props: ComponentPropsWithIsland) {
+  const localeData = useLocaleSiteData();
   const [suggestions, setSuggestions] = useState<MatchResultItem[]>([]);
   const [query, setQuery] = useState('');
   const [focused, setFocused] = useState(false);
@@ -73,12 +75,12 @@ export function Search(_props: ComponentPropsWithIsland) {
   const initPageSearcher = useCallback(() => {
     if (!psRef.current) {
       return import('../../logic/search').then(({ PageSearcher }) => {
-        psRef.current = new PageSearcher();
+        psRef.current = new PageSearcher(localeData.lang || 'en');
         psRef.current.init();
       });
     }
     return Promise.resolve();
-  }, []);
+  }, [localeData.lang]);
 
   const onQueryChanged = useCallback(
     async (e: ChangeEvent<HTMLInputElement>) => {

diff --git a/src/theme-default/components/Siderbar/index.tsx b/src/theme-default/components/Siderbar/index.tsx
@@ -2,24 +2,12 @@ import styles from './index.module.scss';
 import React from 'react';
 import { Link } from '../Link/index';
 import { DefaultTheme } from '../../../shared/types';
-import { usePageData } from 'island/client';
+import { normalizeHref, useSidebarData } from '../../logic/index';
 import { useLocation } from 'react-router-dom';
-import {
-  normalizeHref,
-  useSidebarData,
-  useLocaleSiteData
-} from '../../logic/index';
 
 export function SideBar() {
-  const location = useLocation();
-  const { siteData } = usePageData();
-  const localesData = useLocaleSiteData(
-    siteData.themeConfig,
-    location.pathname
-  );
-  const sidebar = localesData.sidebar || {};
-
-  const sidebarData = useSidebarData(sidebar, location.pathname);
+  const { pathname } = useLocation();
+  const { items: sidebarData } = useSidebarData(pathname);
 
   const renderGroupItem = (item: DefaultTheme.SidebarItem, depth = 0) => {
     const marginLeft = `${depth * 20}px`;

diff --git a/src/theme-default/layout/DocLayout/index.tsx b/src/theme-default/layout/DocLayout/index.tsx
@@ -5,13 +5,11 @@ import { Aside } from '../../components/Aside/index';
 import { DocFooter } from '../../components/DocFooter/index';
 import { Content, usePageData } from 'island/client';
 import { useLocaleSiteData } from '../../logic';
-import { useLocation } from 'react-router-dom';
 
 export function DocLayout() {
   const { toc: headers = [], siteData, pagePath } = usePageData();
-  const { pathname } = useLocation();
   const themeConfig = siteData.themeConfig;
-  const localesData = useLocaleSiteData(themeConfig, pathname);
+  const localesData = useLocaleSiteData();
   const sidebar = localesData.sidebar || [];
   const hasSidebar =
     (Array.isArray(sidebar) && sidebar.length > 0) ||

diff --git a/src/theme-default/logic/useLocaleSiteData.ts b/src/theme-default/logic/useLocaleSiteData.ts
@@ -1,16 +1,18 @@
 import { DefaultTheme } from 'shared/types';
 import { addLeadingSlash, removeTrailingSlash } from './index';
+import { usePageData } from '../../runtime';
+import { useLocation } from 'react-router-dom';
 
-export function useLocaleSiteData(
-  themeConfig: DefaultTheme.Config,
-  pathname: string
-): DefaultTheme.LocaleConfig {
+export function useLocaleSiteData(): DefaultTheme.LocaleConfig {
+  const { siteData } = usePageData();
+  const { pathname } = useLocation();
+  const { themeConfig } = siteData;
   const locales = themeConfig.locales;
   if (!locales || Object.keys(locales).length === 0) {
     return {
       nav: themeConfig.nav,
       sidebar: themeConfig.sidebar
-    };
+    } as DefaultTheme.LocaleConfig;
   }
   const localeKeys = Object.keys(locales);
   const localeKey =

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