Closed #97

mantou132 · Dec 12, 2023 · 52b6b92 · 52b6b92
1 parent df19821
commit 52b6b92
Show file tree

Hide file tree

Showing 3 changed files with 151 additions and 126 deletions.
diff --git a/packages/gem-book/src/element/elements/main.ts b/packages/gem-book/src/element/elements/main.ts
@@ -12,11 +12,18 @@ import './pre';
 const parser = new DOMParser();
 
 const style = createCSSSheet(css`
+  :not(:defined) {
+    display: block;
+    font-size: 0;
+  }
+  :not(:defined) * {
+    display: none;
+  }
   :not(:defined)::before {
+    font-size: 1rem;
     display: block;
     content: 'The element is not defined';
     padding: 1em;
-    border-radius: 0.25rem;
     text-align: center;
     background: ${theme.borderColor};
   }
@@ -32,6 +39,28 @@ const style = createCSSSheet(css`
   :host > :first-child {
     margin-top: 0;
   }
+  details {
+    border: 1px dashed ${theme.borderColor};
+    padding: 0.5em 1em;
+  }
+  details p:first-of-type {
+    margin-block-start: 0;
+  }
+  details p:first-of-type {
+    margin-block-end: 0;
+  }
+  details[open] summary {
+    margin-block-end: 0.5em;
+    background: rgba(${theme.textColorRGB}, 0.02);
+    border-bottom: 1px dashed ${theme.borderColor};
+  }
+  summary {
+    margin: -0.5em -1em;
+    padding: 0.5em 1em;
+  }
+  summary:hover {
+    background: rgba(${theme.textColorRGB}, 0.02);
+  }
   a > img + svg {
     display: none;
   }
@@ -157,7 +186,6 @@ const style = createCSSSheet(css`
     background: rgba(${theme.textColorRGB}, 0.05);
     border: 1px solid ${theme.borderColor};
     border-bottom-width: 2px;
-    border-radius: 2px;
   }
   hr {
     height: 1px;
@@ -204,7 +232,6 @@ const style = createCSSSheet(css`
     padding: 0.15em 0.4em 0.1em;
     font-size: 0.9em;
     background: rgba(${theme.textColorRGB}, 0.05);
-    border-radius: 0.125em;
   }
   gem-book-pre {
     z-index: 2;
@@ -217,11 +244,6 @@ const style = createCSSSheet(css`
     h1 {
       font-size: 2.5rem;
     }
-    @media screen {
-      gem-book-pre {
-        border-radius: 0;
-      }
-    }
   }
 `);
 

diff --git a/packages/gem-book/src/element/elements/pre.ts b/packages/gem-book/src/element/elements/pre.ts
@@ -261,12 +261,6 @@ const style = createCSSSheet(css`
     outline: none;
     caret-color: ${theme.textColor};
   }
-  .gem-code::-webkit-scrollbar {
-    height: 0.5em;
-  }
-  .gem-code::-webkit-scrollbar-thumb {
-    border-radius: inherit;
-  }
   .token.comment,
   .token.prolog,
   .token.doctype,

diff --git a/packages/gem-book/src/element/elements/sidebar.ts b/packages/gem-book/src/element/elements/sidebar.ts
@@ -1,4 +1,14 @@
-import { html, GemElement, customElement, TemplateResult, connectStore, classMap } from '@mantou/gem';
+import {
+  html,
+  GemElement,
+  customElement,
+  TemplateResult,
+  connectStore,
+  classMap,
+  createCSSSheet,
+  css,
+  adoptedStyle,
+} from '@mantou/gem';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
 import { NavItem } from '../../common/config';
@@ -12,15 +22,119 @@ import '@mantou/gem/elements/link';
 import '@mantou/gem/elements/use';
 import './side-link';
 
+const style = createCSSSheet(css`
+  :host {
+    display: block;
+    overflow: auto;
+    overscroll-behavior: contain;
+    box-sizing: border-box;
+    position: sticky;
+    top: 0;
+    padding: 3rem 1rem 0;
+    margin: 0 -1rem;
+    font-size: 0.875rem;
+    scrollbar-width: thin;
+  }
+  @media ${mediaQuery.PHONE} {
+    :host {
+      position: static;
+      height: auto;
+      margin: 0;
+      padding: 0;
+      overflow: visible;
+      border-bottom: 1px solid ${theme.borderColor};
+    }
+  }
+  :host::after {
+    content: '';
+    display: block;
+    height: 2rem;
+  }
+  .link {
+    display: block;
+    color: inherit;
+    text-decoration: none;
+    line-height: 1.5;
+    padding: 0.15em 0;
+    color: inherit;
+  }
+  .file:where(:state(active), [data-active]) {
+    font-weight: bolder;
+  }
+  .link:where(:state(match), [data-match]) + .hash {
+    display: block;
+  }
+  .heading:not(:where(:state(active), [data-active])):not(:hover),
+  .file:not(:where(:state(active), [data-active])):hover {
+    opacity: 0.6;
+  }
+  .arrow {
+    width: 6px;
+    height: 10px;
+    margin-right: calc(1em - 6px);
+  }
+  .close + .links {
+    display: none;
+  }
+  .links {
+    position: relative;
+  }
+  .links::before {
+    position: absolute;
+    content: '';
+    height: 100%;
+    border-left: 1px solid ${theme.borderColor};
+    transform: translateX(0.15em);
+  }
+  .hash {
+    display: none;
+  }
+  .item {
+    cursor: pointer;
+  }
+  .item:not(.links) {
+    display: flex;
+    align-items: center;
+  }
+  .single {
+    display: flex;
+    align-items: center;
+  }
+  .single::before {
+    content: '';
+    display: block;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: currentColor;
+    margin-right: calc(1em - 4px);
+    opacity: 0.6;
+    flex-shrink: 0;
+  }
+  .item gem-use {
+    transform: rotate(90deg);
+  }
+  .item.close gem-use {
+    transform: rotate(0deg);
+  }
+  .item .item {
+    margin-left: 1rem;
+  }
+  .item + .item {
+    margin-top: 0.5rem;
+  }
+`);
+
 @customElement('gem-book-sidebar')
 @connectStore(bookStore)
+@adoptedStyle(style)
 export class SideBar extends GemElement {
-  toggleLinks = (e: MouseEvent) => {
+  #toggleLinks = (e: MouseEvent) => {
     const ele = e.target as HTMLDivElement;
     ele.classList.toggle('close');
   };
 
-  renderItem = (
+  #renderItem = (
     { type = 'file', link, title, children, sidebarIgnore }: NavItem,
     isTop = false,
   ): TemplateResult | null => {
@@ -34,11 +148,11 @@ export class SideBar extends GemElement {
         return html`<!-- No need for an empty directory -->`;
       }
       return html`
-        <div class="item" @click=${this.toggleLinks}>
+        <div class="item" @click=${this.#toggleLinks}>
           <gem-use class="arrow" selector="#arrow" .root=${container}></gem-use>
           ${capitalize(title)}
         </div>
-        <div class="links item">${children.map((item) => this.renderItem(item))}</div>
+        <div class="links item">${children.map((item) => this.#renderItem(item))}</div>
       `;
     } else {
       return html`
@@ -49,120 +163,15 @@ export class SideBar extends GemElement {
         >
           ${type === 'heading' ? '# ' : ''} ${title ? capitalize(title) : 'No title'}
         </gem-book-side-link>
-        ${children ? html`<div class="links item hash">${children.map((item) => this.renderItem(item))}</div>` : null}
+        ${children ? html`<div class="links item hash">${children.map((item) => this.#renderItem(item))}</div>` : null}
       `;
     }
   };
 
   render() {
     return html`
       <slot></slot>
-      <style>
-        :host {
-          display: block;
-          overflow: auto;
-          overscroll-behavior: contain;
-          box-sizing: border-box;
-          position: sticky;
-          top: 0;
-          padding: 3rem 1rem 0;
-          margin: 0 -1rem;
-          font-size: 0.875rem;
-          scrollbar-width: thin;
-        }
-        :host::-webkit-scrollbar {
-          width: 0;
-        }
-        @media ${mediaQuery.PHONE} {
-          :host {
-            position: static;
-            height: auto;
-            margin: 0;
-            padding: 0;
-            overflow: visible;
-            border-bottom: 1px solid ${theme.borderColor};
-          }
-        }
-        :host::after {
-          content: '';
-          display: block;
-          height: 2rem;
-        }
-        .link {
-          display: block;
-          color: inherit;
-          text-decoration: none;
-          line-height: 1.5;
-          padding: 0.15em 0;
-          color: inherit;
-        }
-        .file:where(:state(active), [data-active]) {
-          font-weight: bolder;
-        }
-        .link:where(:state(match), [data-match]) + .hash {
-          display: block;
-        }
-        .heading:not(:where(:state(active), [data-active])):not(:hover),
-        .file:not(:where(:state(active), [data-active])):hover {
-          opacity: 0.6;
-        }
-        .arrow {
-          width: 6px;
-          height: 10px;
-          margin-right: calc(1em - 6px);
-        }
-        .close + .links {
-          display: none;
-        }
-        .links {
-          position: relative;
-        }
-        .links::before {
-          position: absolute;
-          content: '';
-          height: 100%;
-          border-left: 1px solid ${theme.borderColor};
-          transform: translateX(0.15em);
-        }
-        .hash {
-          display: none;
-        }
-        .item {
-          cursor: pointer;
-        }
-        .item:not(.links) {
-          display: flex;
-          align-items: center;
-        }
-        .single {
-          display: flex;
-          align-items: center;
-        }
-        .single::before {
-          content: '';
-          display: block;
-          width: 4px;
-          height: 4px;
-          border-radius: 50%;
-          background: currentColor;
-          margin-right: calc(1em - 4px);
-          opacity: 0.6;
-          flex-shrink: 0;
-        }
-        .item gem-use {
-          transform: rotate(90deg);
-        }
-        .item.close gem-use {
-          transform: rotate(0deg);
-        }
-        .item .item {
-          margin-left: 1rem;
-        }
-        .item + .item {
-          margin-top: 0.5rem;
-        }
-      </style>
-      ${bookStore.currentSidebar?.map((item) => this.renderItem(item, true))}
+      ${bookStore.currentSidebar?.map((item) => this.#renderItem(item, true))}
     `;
   }