Closed #181

mantou132 · Jul 28, 2024 · 954974a · 954974a
1 parent ba772b3
commit 954974a
Show file tree

Hide file tree

Showing 35 changed files with 1,416 additions and 1,372 deletions.
diff --git a/packages/gem-book/docs/zh/003-plugins.md b/packages/gem-book/docs/zh/003-plugins.md
@@ -95,10 +95,10 @@ yarn add gem-book
 将内容插入 `<gem-book>`，这允许在特定页面自定义 `<gem-book>` 内容，例如自定义侧边栏：
 
 ```md
-<gbp-content>
-  <div slot="sidebar-before">Test</div>
+<gbp-content slot="sidebar-before">
+  <div>Test</div>
   <style>
-    gem-book::part(sidebar-content) {
+    gem-book [part=sidebar-content] {
       display: none;
     }
   </style>

diff --git a/packages/gem-book/src/bin/builder.ts b/packages/gem-book/src/bin/builder.ts
@@ -237,7 +237,7 @@ export async function buildApp(dir: string, options: Required<CliUniqueConfig>,
         new CopyWebpackPlugin({
           patterns: [{ from: docsDir, to: outputDir }],
         }),
-    ],
+    ].filter((e) => !!e),
   });
   if (build) {
     webpackCompiler.run((err, stats) => {

diff --git a/packages/gem-book/src/element/elements/404.ts b/packages/gem-book/src/element/elements/404.ts
@@ -1,4 +1,4 @@
-import { customElement, GemElement, html, shadow } from '@mantou/gem';
+import { adoptedStyle, createCSSSheet, css, customElement, GemElement, html } from '@mantou/gem';
 
 import { getGithubPath } from '../lib/utils';
 import { bookStore, locationStore } from '../store';
@@ -11,8 +11,32 @@ import '@mantou/gem/elements/reflect';
 import '@mantou/gem/elements/title';
 import '@mantou/gem/elements/use';
 
+const styles = createCSSSheet(css`
+  :scope {
+    text-align: center;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+    margin: 0;
+  }
+  gem-link {
+    color: inherit;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+  }
+  gem-link:hover {
+    opacity: 0.8;
+  }
+  gem-use {
+    width: 18px;
+    height: 18px;
+    margin-right: 10px;
+  }
+`);
 @customElement('gem-book-404')
-@shadow()
+@adoptedStyle(styles)
 export class Meta extends GemElement {
   #getMdFullPath = () => {
     const { links = [] } = bookStore;
@@ -31,30 +55,6 @@ export class Meta extends GemElement {
     const noGithub = !github || !sourceBranch || !fullPath;
 
     return html`
-      <style>
-        :host {
-          text-align: center;
-        }
-        h1 {
-          font-size: 2em;
-          font-weight: bold;
-          margin: 0;
-        }
-        gem-link {
-          color: inherit;
-          text-decoration: none;
-          display: inline-flex;
-          align-items: center;
-        }
-        gem-link:hover {
-          opacity: 0.8;
-        }
-        gem-use {
-          width: 18px;
-          height: 18px;
-          margin-right: 10px;
-        }
-      </style>
       <h1><gem-title inert>Not Found</gem-title></h1>
       ${noGithub
         ? ''

diff --git a/packages/gem-book/src/element/elements/edit-link.ts b/packages/gem-book/src/element/elements/edit-link.ts
@@ -1,4 +1,4 @@
-import { html, GemElement, customElement, connectStore, shadow } from '@mantou/gem';
+import { html, GemElement, customElement, connectStore, css, adoptedStyle, createCSSSheet } from '@mantou/gem';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
 import { getGithubPath } from '../lib/utils';
@@ -10,6 +10,41 @@ import { icons } from './icons';
 import '@mantou/gem/elements/link';
 import '@mantou/gem/elements/use';
 
+const styles = createCSSSheet(css`
+  :scope {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+    padding-block: 6rem 2rem;
+    box-sizing: border-box;
+    justify-content: space-between;
+    line-height: 1.5;
+  }
+  gem-link {
+    color: inherit;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+  }
+  gem-link:hover {
+    opacity: 0.8;
+  }
+  gem-use {
+    width: 18px;
+    height: 18px;
+    margin-right: 10px;
+  }
+  .last-updated gem-link {
+    opacity: 0.5;
+  }
+  @media ${mediaQuery.PHONE} {
+    gem-link,
+    .last-updated {
+      white-space: nowrap;
+    }
+  }
+`);
+
 interface State {
   lastUpdated: string;
   message: string;
@@ -26,7 +61,7 @@ const fetchData = async (api: string) => {
 
 @customElement('gem-book-edit-link')
 @connectStore(locationStore)
-@shadow()
+@adoptedStyle(styles)
 export class EditLink extends GemElement<State> {
   state = {
     lastUpdated: '',
@@ -62,40 +97,6 @@ export class EditLink extends GemElement<State> {
     const { github, sourceBranch = '' } = config || {};
     if (!github || !sourceBranch || !this.#fullPath) return;
     return html`
-      <style>
-        :host {
-          display: flex;
-          gap: 1rem;
-          flex-wrap: wrap;
-          padding-block: 6rem 2rem;
-          box-sizing: border-box;
-          justify-content: space-between;
-          line-height: 1.5;
-        }
-        gem-link {
-          color: inherit;
-          text-decoration: none;
-          display: inline-flex;
-          align-items: center;
-        }
-        gem-link:hover {
-          opacity: 0.8;
-        }
-        gem-use {
-          width: 18px;
-          height: 18px;
-          margin-right: 10px;
-        }
-        .last-updated gem-link {
-          opacity: 0.5;
-        }
-        @media ${mediaQuery.PHONE} {
-          gem-link,
-          .last-updated {
-            white-space: nowrap;
-          }
-        }
-      </style>
       <gem-link href=${`${github}/edit/${sourceBranch}${this.#fullPath}`}>
         <gem-use .element=${icons.compose}></gem-use>
         <span>${selfI18n.get('editOnGithub')}</span>

diff --git a/packages/gem-book/src/element/elements/footer.ts b/packages/gem-book/src/element/elements/footer.ts
@@ -1,4 +1,4 @@
-import { html, GemElement, customElement, connectStore, css, shadow } from '@mantou/gem';
+import { html, GemElement, customElement, connectStore, css, createCSSSheet, adoptedStyle } from '@mantou/gem';
 
 import { selfI18n } from '../helper/i18n';
 import { theme } from '../helper/theme';
@@ -7,31 +7,32 @@ import { unsafeRenderHTML } from '../lib/renderer';
 
 import '@mantou/gem/elements/link';
 
+const styles = createCSSSheet(css`
+  :scope {
+    display: block;
+    padding-block: 2rem;
+    box-sizing: border-box;
+    border-top: 1px solid ${theme.borderColor};
+    font-style: italic;
+    line-height: 1.5;
+    color: rgb(from ${theme.textColor} r g b / 0.5);
+  }
+  gem-link {
+    color: ${theme.textColor};
+    text-decoration: none;
+  }
+  gem-link:hover {
+    opacity: 0.8;
+  }
+`);
+
 @customElement('gem-book-footer')
 @connectStore(bookStore)
-@shadow()
+@adoptedStyle(styles)
 export class Footer extends GemElement {
   render() {
     const { config } = bookStore;
     return html`
-      <style>
-        :host {
-          display: block;
-          padding-block: 2rem;
-          box-sizing: border-box;
-          border-top: 1px solid ${theme.borderColor};
-          font-style: italic;
-          line-height: 1.5;
-          color: rgba(${theme.textColorRGB}, 0.5);
-        }
-        gem-link {
-          color: ${theme.textColor};
-          text-decoration: none;
-        }
-        gem-link:hover {
-          opacity: 0.8;
-        }
-      </style>
       ${config?.footer
         ? unsafeRenderHTML(
             config.footer,