[gem-book] Fixed large docs site

mantou132 · Dec 30, 2023 · adcdf6f · adcdf6f
1 parent 65bdcbe
commit adcdf6f
Show file tree

Hide file tree

Showing 20 changed files with 187 additions and 101 deletions.
diff --git a/packages/gem-book/docs/zh/003-plugins.md b/packages/gem-book/docs/zh/003-plugins.md
@@ -54,6 +54,20 @@ yarn add gem-book
 <gbp-media src="/preview.png"></gbp-media>
 ```
 
+## `<gbp-import>`
+
+动态导入模块，这可以用来按需加载插件。
+
+```md
+<gbp-import src="docs/hello.ts"></gbp-import>
+
+<my-plugin-hello></my-plugin-hello>
+```
+
+<gbp-import src="docs/hello.ts"></gbp-import>
+
+<my-plugin-hello></my-plugin-hello>
+
 ## `<gbp-docsearch>`
 
 使用 [DocSearch](https://docsearch.algolia.com/) 为网站提供搜索，只需要实例化一次，可以使用[插槽](./002-guide/007-extension.md#插槽)放在想要放置的位置：

diff --git a/packages/gem-book/gem-book.cli.json b/packages/gem-book/gem-book.cli.json
@@ -4,7 +4,7 @@
   "i18n": true,
   "homeMode": true,
   "sourceBranch": "docs",
-  "plugin": ["raw", "docsearch", "api", "sandpack", "code-group"],
+  "plugin": ["raw", "docsearch", "api", "sandpack", "code-group", "import"],
   "template": "docs/template.html",
   "ga": "G-PZYZ441YD3",
   "debug": true

diff --git a/packages/gem-book/src/bin/index.ts b/packages/gem-book/src/bin/index.ts
@@ -55,6 +55,7 @@ const cliConfig: Required<CliUniqueConfig> = {
   build: false,
   json: false,
   debug: false,
+  onlyFile: false,
 };
 
 function readConfig(configPath: string) {
@@ -97,25 +98,20 @@ function readFiles(filenames: string[], dir: string, link: string, config?: Fron
           if (cliConfig.debug) {
             checkRelativeLink(fullPath, docsRootDir);
           }
-          const {
-            title,
-            headings: children,
-            isNav,
-            navTitle,
-            sidebarIgnore,
-            hero,
-            features,
-            redirect,
-          } = getMetadata(fullPath, bookConfig.displayRank);
+          const { title, headings, isNav, navTitle, navOrder, sidebarIgnore, hero, features, redirect } = getMetadata(
+            fullPath,
+            bookConfig.displayRank,
+          );
           const item: NavItem = {
             title,
             type: 'file',
             link: `${link}${filename}`,
             hash: getHash(fullPath),
-            children,
+            children: cliConfig.onlyFile ? undefined : headings,
             isNav,
             navTitle,
             sidebarIgnore,
+            navOrder,
             hero,
             features,
           };
@@ -128,17 +124,18 @@ function readFiles(filenames: string[], dir: string, link: string, config?: Fron
           }
         }
       } else {
-        const { title, isNav, navTitle, sidebarIgnore, groups } = getMetadata(fullPath, false);
+        const { title, isNav, navTitle, navOrder, sidebarIgnore, groups } = getMetadata(fullPath, false);
         const newDir = fullPath;
         const newLink = path.join(link, filename) + '/';
         const subFilenameSet = new Set([...fs.readdirSync(fullPath)]);
         result.push({
           type: 'dir',
           link: `${link}${filename}/`,
           title,
-          children: groups
+          children: groups?.map
             ? groups
                 .map(({ title, members }) => {
+                  if (!members?.forEach) return [];
                   members.forEach((filename) => subFilenameSet.delete(filename));
                   const children = readFiles(members, newDir, newLink, config);
                   if (!title) return children;
@@ -154,6 +151,7 @@ function readFiles(filenames: string[], dir: string, link: string, config?: Fron
             : readDir(newDir, newLink),
           isNav,
           navTitle,
+          navOrder,
           sidebarIgnore,
         });
       }
@@ -298,6 +296,9 @@ program
   .option('--json', `only output \`${DEFAULT_FILE}\``, () => {
     cliConfig.json = true;
   })
+  .option('--only-file', 'not include heading navigation', () => {
+    cliConfig.debug = true;
+  })
   .option('--debug', 'enabled debug mode', () => {
     cliConfig.debug = true;
   })

diff --git a/packages/gem-book/src/bin/utils.ts b/packages/gem-book/src/bin/utils.ts
@@ -150,7 +150,7 @@ export function getMetadata(fullPath: string, displayRank: boolean | undefined):
     const h2s = window.document.querySelectorAll('h2');
     return {
       ...(attributes as FileMetadata),
-      title: attributes.title || h1?.textContent || getTitle(),
+      title: (attributes.title || h1?.textContent || getTitle()).match(CUSTOM_HEADING_REG)![1],
       headings: h2s.length
         ? [...h2s].map((heading) => {
             const [, text, customId] = (heading.textContent as string).match(CUSTOM_HEADING_REG) as RegExpMatchArray;
@@ -204,12 +204,15 @@ export function inspectObject(obj: any) {
   console.log(util.inspect(obj, { colors: true, depth: null }));
 }
 
-export async function getIconDataUrl(path: string) {
+export async function getIconDataUrl(filePath: string) {
+  if (filePath.endsWith('.svg')) {
+    return `data:image/svg+xml;base64,${btoa(readFileSync(path.resolve(process.cwd(), filePath), 'utf-8'))}`;
+  }
   try {
-    const image = await Jimp.read(path);
+    const image = await Jimp.read(filePath);
     return await image.clone().resize(Jimp.AUTO, 100).getBase64Async(Jimp.MIME_PNG);
   } catch (err) {
-    if (isURL(path)) return path;
+    if (isURL(filePath)) return filePath;
     throw err;
   }
 }
diff --git a/packages/gem-book/src/common/config.ts b/packages/gem-book/src/common/config.ts
@@ -44,6 +44,7 @@ export interface CliUniqueConfig {
   theme?: string;
   build?: boolean;
   json?: boolean;
+  onlyFile?: boolean;
   debug?: boolean;
 }
 

diff --git a/packages/gem-book/src/common/frontmatter.ts b/packages/gem-book/src/common/frontmatter.ts
@@ -2,6 +2,7 @@ export interface FrontMatter {
   title?: string;
   isNav?: boolean;
   navTitle?: string;
+  navOrder?: number;
   sidebarIgnore?: boolean;
 
   /** only file */

diff --git a/packages/gem-book/src/element/elements/homepage.ts b/packages/gem-book/src/element/elements/homepage.ts
@@ -48,7 +48,7 @@ export class Homepage extends GemElement {
         }
         gem-link {
           display: flex;
-          gap: 1rem;
+          gap: 0.7rem;
           color: ${theme.primaryColor};
           text-decoration: none;
           transition: all 0.3s;
@@ -67,6 +67,7 @@ export class Homepage extends GemElement {
           filter: brightness(1.2);
         }
         gem-use {
+          width: 1.2rem;
           margin-left: 0.3rem;
           transform: scale(1.3);
         }
@@ -92,7 +93,7 @@ export class Homepage extends GemElement {
             ${actions?.map(
               ({ link, text }, index) =>
                 html`<gem-link href=${getUserLink(link)}>
-                  ${text}${index ? html`<gem-use .element=${icons.arrow}></gem-use>` : ''}
+                  ${text}${index ? html`<gem-use .element=${icons.forward}></gem-use>` : ''}
                 </gem-link>`,
             )}
           </div>

diff --git a/packages/gem-book/src/element/elements/icons.ts b/packages/gem-book/src/element/elements/icons.ts
@@ -1,6 +1,16 @@
 import { raw } from '@mantou/gem';
 
 export const icons = {
+  twitter: raw`
+    <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="vt-social-link-icon">
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
+    </svg>
+  `,
+  discord: raw`
+    <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="vt-social-link-icon">
+      <path d="M20.222 0c1.406 0 2.54 1.137 2.607 2.475V24l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205H3.71c-1.402 0-2.54-1.065-2.54-2.476V2.48C1.17 1.142 2.31.003 3.715.003h16.5L20.222 0zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.27.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02zm.168 4.413c.703 0 1.27.6 1.27 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334.002-.74.573-1.338 1.27-1.338zm-4.543 0c.7 0 1.266.6 1.266 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334 0-.74.57-1.338 1.27-1.338z"></path>
+    </svg>
+  `,
   github: raw`
     <svg width="16" height="16" viewBox="0 0 16 16">
       <path fill="currentColor" d="M8 0a8.1 8.1 0 0 0-8 8.2c0 3.63 2.3 6.7 5.47 7.79l.14.01c.3 0 .4-.22.4-.4v-1.4c-.3.06-.57.1-.81.1-1.54 0-1.89-1.2-1.89-1.2-.36-.95-.89-1.2-.89-1.2-.7-.5 0-.5.05-.5.8.06 1.23.84 1.23.84.4.7.94.9 1.41.9.38 0 .72-.12.92-.21.07-.53.28-.9.5-1.1-1.77-.2-3.64-.91-3.64-4.05 0-.9.31-1.63.82-2.2-.08-.21-.35-1.05.08-2.18l.18-.01c.3 0 .94.1 2.02.86a7.5 7.5 0 0 1 4.01 0c1.08-.75 1.73-.86 2.02-.86l.18.01c.44 1.13.16 1.97.08 2.18.5.57.82 1.3.82 2.2 0 3.15-1.87 3.84-3.65 4.04.28.25.54.75.54 1.52l-.01 2.25c0 .2.1.41.4.41l.15-.01A8.19 8.19 0 0 0 16 8.2 8.1 8.1 0 0 0 8 0Z"/>

diff --git a/packages/gem-book/src/element/elements/main.ts b/packages/gem-book/src/element/elements/main.ts
@@ -89,7 +89,7 @@ export class Main extends GemElement {
 
   #updateToc = () =>
     updateTocStore({
-      elements: [...this.shadowRoot!.querySelectorAll<HTMLHeadingElement>('.markdown-header')].slice(1),
+      elements: [...this.shadowRoot!.querySelectorAll<HTMLHeadingElement>('h2,h3')],
     });
 
   render() {
@@ -155,7 +155,7 @@ export class Main extends GemElement {
         }
         h1 {
           font-size: 3rem;
-          margin: 0 0 1.4rem;
+          margin: 0 0 3rem;
         }
         h2 {
           font-size: 2rem;
@@ -177,7 +177,7 @@ export class Main extends GemElement {
         p {
           margin: 1rem 0;
         }
-        li > p {
+        li > p:first-of-type {
           margin: 0;
         }
         .table-wrap {
@@ -304,6 +304,7 @@ export class Main extends GemElement {
           }
           h1 {
             font-size: 2.3rem;
+            margin: 0 0 1rem;
           }
         }
       </style>

diff --git a/packages/gem-book/src/element/elements/nav.ts b/packages/gem-book/src/element/elements/nav.ts
@@ -59,7 +59,7 @@ export class Nav extends GemElement {
   renderExternalItem = ({ navTitle, title, link }: NavItem, icon?: string | Element | DocumentFragment) => {
     if (link) {
       return html`
-        <gem-link class=${classMap({ item: true, icon: !!icon })} href=${link} title=${title}>
+        <gem-link class=${classMap({ item: true, icon: !!icon, external: true })} href=${link} title=${title}>
           <span>${capitalize(navTitle || title)}</span>
           <gem-use .element=${icon || icons.link}></gem-use>
         </gem-link>
@@ -83,6 +83,8 @@ export class Nav extends GemElement {
     const githubLink = config ? this.renderExternalItem({ title: 'github', link: github }, icons.github) : null;
     const internals = nav?.filter((e) => isSameOrigin(e.link)) || [];
     const externals = nav?.filter((e) => !isSameOrigin(e.link)) || [];
+    const textExternals = externals.filter((e) => !(e.title.toLowerCase() in icons));
+    const iconExternals = externals?.filter((e) => e.title.toLowerCase() in icons) || [];
 
     return html`
       <style>
@@ -100,11 +102,14 @@ export class Nav extends GemElement {
           align-items: center;
           position: relative;
           cursor: pointer;
-          overflow: hidden;
         }
         :where(.item + .item) {
           margin-left: 1rem;
         }
+        .external:not(.icon) gem-use {
+          width: 1em;
+          margin-left: 0.3rem;
+        }
         .item select {
           -webkit-appearance: none;
           appearance: none;
@@ -141,27 +146,31 @@ export class Nav extends GemElement {
           background: currentColor;
           width: 100%;
         }
-        .item:not(.icon) gem-use {
-          width: 1em;
-          margin-left: 0.3rem;
+        .icon {
+          padding-left: 0.5rem;
+          opacity: 0.6;
+        }
+        .icon:hover {
+          opacity: 0.8;
         }
         .icon span {
           display: none;
         }
         .icon gem-use {
-          opacity: 0.6;
           width: 1.5em;
         }
-        .icon:hover gem-use {
-          opacity: 0.8;
-        }
         .menu {
           display: none;
           opacity: 0.8;
           width: 1.5em;
           padding-inline: 1rem;
           margin-inline-start: -1rem;
         }
+        @media not ${`(${mediaQuery.DESKTOP})`} {
+          .external:not(.icon) {
+            display: none;
+          }
+        }
         @media ${mediaQuery.PHONE} {
           .menu {
             display: block;
@@ -179,10 +188,12 @@ export class Nav extends GemElement {
       ${this.logo ? html`<gem-book-nav-logo></gem-book-nav-logo>` : ''}
       <div class="left">
         ${internals.map((item) => this.renderInternalItem(item))}
-        ${externals.map((item) => this.renderExternalItem(item))}
+        ${textExternals.map((item) => this.renderExternalItem(item))}
       </div>
       <slot class="item"></slot>
-      ${this.renderI18nSelect()} ${githubLink}
+      ${this.renderI18nSelect()}
+      ${iconExternals.map((item) => this.renderExternalItem(item, (icons as any)[item.title.toLowerCase()]))}
+      ${githubLink}
     `;
   }
 

diff --git a/packages/gem-book/src/element/elements/plugin.ts b/packages/gem-book/src/element/elements/plugin.ts
@@ -54,5 +54,23 @@ export class GemBookPluginElement<T = any> extends GemElement<T> {
   static get currentLink() {
     return bookStore.getCurrentLink?.();
   }
-  @globalemitter error: Emitter<ErrorEvent | Event>;
+
+  @globalemitter error: Emitter<ErrorEvent | Event> = console.error;
+
+  /**获取资源的远端 GitHub raw 地址，如果使用 `DEV_MODE`，则返回本机服务的 URL */
+  getRemoteURL(originSrc = '') {
+    const config = GemBookPluginElement.config;
+    let url = originSrc;
+    if (originSrc && !/^(https?:)?\/\//.test(originSrc)) {
+      if (!config.github || !config.sourceBranch) return '';
+      const rawOrigin = 'https://raw.githubusercontent.com';
+      const repo = new URL(config.github).pathname;
+      const src = `${originSrc.startsWith('/') ? '' : '/'}${originSrc}`;
+      const basePath = config.base ? `/${config.base}` : '';
+      url = GemBookPluginElement.devMode
+        ? `/_assets${src}`
+        : `${rawOrigin}${repo}/${config.sourceBranch}${basePath}${src}`;
+    }
+    return url;
+  }
 }
diff --git a/packages/gem-book/src/element/elements/sidebar.ts b/packages/gem-book/src/element/elements/sidebar.ts
@@ -141,6 +141,7 @@ export class SideBar extends GemElement {
         }
         .top-nav {
           display: flex;
+          flex-wrap: wrap;
           gap: 1em;
           margin-block-end: 2rem;
         }
@@ -160,7 +161,8 @@ export class SideBar extends GemElement {
           display: block;
           color: inherit;
           text-decoration: none;
-          line-height: 2;
+          line-height: 1.5;
+          padding: 0.25em 0;
         }
         .file:where(:state(active), [data-active]) {
           color: ${theme.primaryColor};
@@ -227,7 +229,7 @@ export class SideBar extends GemElement {
           margin-left: 1rem;
         }
         .item + .item {
-          margin-top: 0.5rem;
+          margin-top: 0.25rem;
         }
         .item + .dir-title {
           margin-top: 2rem;

diff --git a/packages/gem-book/src/element/helper/default-theme.ts b/packages/gem-book/src/element/helper/default-theme.ts
@@ -3,7 +3,9 @@ export const defaultTheme = {
   codeFont:
     'Source Code Pro, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',
 
-  sidebarWidth: '280px',
+  sidebarWidthSmall: '270px',
+
+  sidebarWidth: '304px',
   maxMainWidth: '46rem',
   headerHeight: '56px',
   normalRound: '0.5rem',

diff --git a/packages/gem-book/src/element/helper/theme.ts b/packages/gem-book/src/element/helper/theme.ts
@@ -1,4 +1,4 @@
-import { createTheme, getThemeStore, updateTheme } from '@mantou/gem/helper/theme';
+import { createTheme, getThemeProps, getThemeStore, updateTheme } from '@mantou/gem/helper/theme';
 
 import { defaultTheme } from './default-theme';
 
@@ -33,6 +33,7 @@ function generateTheme(theme: Theme) {
 
 export const theme = createTheme(generateTheme(defaultTheme));
 export const themeStore = getThemeStore(theme);
+export const themeProps = getThemeProps(theme);
 
 export function changeTheme(newTheme?: Partial<Theme>) {
   if (newTheme) {