- ${this.logo ? html`
` : ''} ${internals.map(this.renderInternalItem)}
+
+ ${this.logo ? html`
` : ''}
+
+ ${internals.map((item) => this.renderInternalItem(item))}
+ ${externals.map((item) => this.renderExternalItem(item))}
- ${externals.map(this.renderExternalItem)} ${githubLink} ${this.renderI18nSelect()}
-
+
+ ${this.renderI18nSelect()} ${githubLink}
`;
}
diff --git a/packages/gem-book/src/element/elements/pre.ts b/packages/gem-book/src/element/elements/pre.ts
index 77bbb1fd..daf875b5 100644
--- a/packages/gem-book/src/element/elements/pre.ts
+++ b/packages/gem-book/src/element/elements/pre.ts
@@ -362,7 +362,6 @@ export class Pre extends GemElement {
display: block;
font-size: 0.875em;
background: rgba(${theme.textColorRGB}, 0.05);
- border-radius: ${theme.normalRound};
--comment-color: var(--code-comment-color, #6e6e6e);
--section-color: var(--code-section-color, #c9252d);
--title-color: var(--code-title-color, #4646c6);
diff --git a/packages/gem-book/src/element/elements/sidebar.ts b/packages/gem-book/src/element/elements/sidebar.ts
index e4c3a74b..fd6f637b 100644
--- a/packages/gem-book/src/element/elements/sidebar.ts
+++ b/packages/gem-book/src/element/elements/sidebar.ts
@@ -1,8 +1,21 @@
-import { html, GemElement, customElement, TemplateResult, connectStore, classMap } from '@mantou/gem';
+import {
+ html,
+ GemElement,
+ customElement,
+ TemplateResult,
+ connectStore,
+ classMap,
+ state,
+ createStore,
+ connect,
+ updateStore,
+ history,
+ disconnect,
+} from '@mantou/gem';
import { mediaQuery } from '@mantou/gem/helper/mediaquery';
import { NavItem } from '../../common/config';
-import { capitalize } from '../lib/utils';
+import { capitalize, isSameOrigin } from '../lib/utils';
import { theme } from '../helper/theme';
import { bookStore } from '../store';
@@ -13,9 +26,17 @@ import '@mantou/gem/elements/use';
import './side-link';
import './nav-logo';
+export const sidebarStore = createStore({ open: false });
+
+const closeSidebar = () => updateStore(sidebarStore, { open: false });
+export const toggleSidebar = () => updateStore(sidebarStore, { open: !sidebarStore.open });
+
@customElement('gem-book-sidebar')
@connectStore(bookStore)
+@connectStore(sidebarStore)
export class SideBar extends GemElement {
+ @state open: boolean;
+
#toggleLinks = (e: MouseEvent) => {
const ele = e.target as HTMLDivElement;
ele.classList.toggle('close');
@@ -72,6 +93,8 @@ export class SideBar extends GemElement {
};
render() {
+ this.open = sidebarStore.open;
+ const topNavList = bookStore.nav?.filter((e) => isSameOrigin(e.link));
return html`
+ ${mediaQuery.isPhone && topNavList?.length
+ ? html`
+
+ ${topNavList.map(
+ ({ link, navTitle, title }) => html`
+
+ ${capitalize(navTitle || title)}
+
+ `,
+ )}
+
+ `
+ : ''}
${bookStore.currentSidebar?.map((item) => this.#renderItem(item, true))}
@@ -208,4 +265,9 @@ export class SideBar extends GemElement {
};
removeCloseClass(activeEle);
}
+
+ mounted() {
+ connect(history.store, closeSidebar);
+ return () => disconnect(history.store, closeSidebar);
+ }
}
diff --git a/packages/gem-book/src/element/elements/toc.ts b/packages/gem-book/src/element/elements/toc.ts
index 6b787627..5d250933 100644
--- a/packages/gem-book/src/element/elements/toc.ts
+++ b/packages/gem-book/src/element/elements/toc.ts
@@ -20,6 +20,7 @@ export const tocStore = createStore<{ elements: HTMLHeadingElement[] }>({
const style = createCSSSheet(css`
:host {
+ font-size: 0.875rem;
padding: 2rem 1.5rem;
box-sizing: border-box;
height: min-content;
@@ -109,6 +110,7 @@ export class GemBookTocElement extends GemElement
{
};
render = () => {
+ if (!tocStore.elements.length) return html``;
return html`
CONTENTS
diff --git a/packages/gem-book/src/element/index.ts b/packages/gem-book/src/element/index.ts
index 827cf330..6d32c69a 100644
--- a/packages/gem-book/src/element/index.ts
+++ b/packages/gem-book/src/element/index.ts
@@ -171,6 +171,7 @@ export class GemBookElement extends GemElement {
grid-area: auto / content / auto / toc;
}
}
+ /* 404, homepage */
@media ${renderFullWidth ? 'all' : 'not all'} {
gem-book-nav {
grid-area: 1 / aside / 2 / toc;
@@ -180,7 +181,6 @@ export class GemBookElement extends GemElement {
main {
grid-area: auto / aside / auto / toc;
}
- gem-book-sidebar,
gem-book-edit-link,
gem-book-rel-link {
display: none;
@@ -188,6 +188,9 @@ export class GemBookElement extends GemElement {
gem-book-footer {
text-align: center;
}
+ gem-book-toc {
+ display: none;
+ }
}
@media ${mediaQuery.PHONE} {
:host {
@@ -197,11 +200,6 @@ export class GemBookElement extends GemElement {
main {
padding-inline: 1rem;
}
- gem-book-nav ~ gem-book-sidebar {
- margin-top: 0;
- height: auto;
- max-height: none;
- }
slot[name='${this.mainBefore}'] {
margin-top: 1rem;
}
@@ -230,14 +228,18 @@ export class GemBookElement extends GemElement {
${hasNavbar
? html`
-
+
`
: null}
-
-
-
+ ${mediaQuery.isPhone || !renderFullWidth
+ ? html`
+
+
+
+ `
+ : null}
${renderHomePage ? html`` : ''}
${renderHomePage ? '' : html``}
diff --git a/packages/gem-book/src/plugins/code-group.ts b/packages/gem-book/src/plugins/code-group.ts
index 8e5f9712..b038b096 100644
--- a/packages/gem-book/src/plugins/code-group.ts
+++ b/packages/gem-book/src/plugins/code-group.ts
@@ -69,8 +69,9 @@ customElements.whenDefined('gem-book').then(() => {
}
::slotted(*) {
display: none;
- margin: 0 !important;
background: rgba(${theme.textColorRGB}, 0.03);
+ margin: 0 !important;
+ border-radius: 0 !important;
}
`);
diff --git a/packages/gem-book/src/plugins/docsearch.ts b/packages/gem-book/src/plugins/docsearch.ts
index 1666b8d7..5e197504 100644
--- a/packages/gem-book/src/plugins/docsearch.ts
+++ b/packages/gem-book/src/plugins/docsearch.ts
@@ -7,7 +7,7 @@ const styleLink = 'https://esm.sh/@docsearch/css@3.0.0-alpha.50/dist/style.css';
customElements.whenDefined('gem-book').then(async () => {
const { GemBookPluginElement } = customElements.get('gem-book') as typeof GemBookElement;
- const { Gem, theme } = GemBookPluginElement;
+ const { Gem, theme, mediaQuery } = GemBookPluginElement;
const { css, html, customElement, attribute, refobject } = Gem;
@customElement('gbp-docsearch')
@@ -37,6 +37,12 @@ customElements.whenDefined('gem-book').then(async () => {
.DocSearch-Button {
margin: 0;
}
+ @media ${mediaQuery.PHONE} {
+ .DocSearch-Button {
+ background: none;
+ opacity: 0.6;
+ }
+ }
`;
diff --git a/packages/gem-book/src/plugins/raw.ts b/packages/gem-book/src/plugins/raw.ts
index 8d246666..b5ad94f2 100644
--- a/packages/gem-book/src/plugins/raw.ts
+++ b/packages/gem-book/src/plugins/raw.ts
@@ -38,6 +38,7 @@ customElements.whenDefined('gem-book').then(() => {
}
gem-book-pre {
margin: 2rem 0px;
+ border-radius: ${theme.normalRound};
animation: display 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
`);
diff --git a/packages/gem-book/src/plugins/sandpack.ts b/packages/gem-book/src/plugins/sandpack.ts
index 76c87b9f..68c27894 100644
--- a/packages/gem-book/src/plugins/sandpack.ts
+++ b/packages/gem-book/src/plugins/sandpack.ts
@@ -92,9 +92,11 @@ customElements.whenDefined('gem-book').then(() => {
}
::slotted(*) {
display: none;
+ max-height: 60vh;
grid-area: code;
- margin: 0 !important;
background: rgba(${theme.textColorRGB}, 0.03);
+ margin: 0 !important;
+ border-radius: 0 !important;
}
.preview {
display: flex;
@@ -127,7 +129,7 @@ customElements.whenDefined('gem-book').then(() => {
.sandbox {
background: transparent;
}
- .fork.btn {
+ .actions {
display: none;
}
}
@@ -369,7 +371,7 @@ customElements.whenDefined('gem-book').then(() => {
Reset
-
+
Fork ${forking ? '...' : ''}
diff --git a/packages/gem-examples/package.json b/packages/gem-examples/package.json
index 365a479b..670a97f3 100644
--- a/packages/gem-examples/package.json
+++ b/packages/gem-examples/package.json
@@ -9,7 +9,7 @@
},
"dependencies": {
"@mantou/gem": "^1.7.6",
- "duoyun-ui": "^1.1.6"
+ "duoyun-ui": "^1.1.7"
},
"devDependencies": {
"@gemjs/config": "^1.6.11",
diff --git a/packages/gem/docs/en/001-guide/002-advance/005-i18n.md b/packages/gem/docs/en/001-guide/002-advance/005-i18n.md
index 440f3f36..8cdf1717 100644
--- a/packages/gem/docs/en/001-guide/002-advance/005-i18n.md
+++ b/packages/gem/docs/en/001-guide/002-advance/005-i18n.md
@@ -118,7 +118,7 @@ const i18n = new I18n({
```
> [!TIP]
-> When `urlParamsType` is `path`, then the links in the page and the [`history`](../../003-api/004-history) routing switch need to be modified,
+> When `urlParamsType` is `path`, then the links in the page and the [`history`](../../003-api/004-history.md) routing switch need to be modified,
> this operation can be defined globally by setting `history.basePath`:
>
> ```ts
diff --git a/packages/gem/docs/en/README.md b/packages/gem/docs/en/README.md
index 7144cdbf..2a103639 100644
--- a/packages/gem/docs/en/README.md
+++ b/packages/gem/docs/en/README.md
@@ -31,6 +31,13 @@ features:
## TodoApp
+
+
```ts
diff --git a/packages/gem/docs/zh/001-guide/002-advance/005-i18n.md b/packages/gem/docs/zh/001-guide/002-advance/005-i18n.md
index 0ca2584f..8cf62106 100644
--- a/packages/gem/docs/zh/001-guide/002-advance/005-i18n.md
+++ b/packages/gem/docs/zh/001-guide/002-advance/005-i18n.md
@@ -118,7 +118,7 @@ const i18n = new I18n({
```
> [!TIP]
-> 当 `urlParamsType` 为 `path`，那么页面中的链接、[`history`](../../003-api/004-history) 路由切换都需要修改，
+> 当 `urlParamsType` 为 `path`，那么页面中的链接、[`history`](../../003-api/004-history.md) 路由切换都需要修改，
> 可以通过设置 `history.basePath` 来全局定义此操作：
>
> ```ts
diff --git a/packages/gem/docs/zh/README.md b/packages/gem/docs/zh/README.md
index c18dc0bb..0d087402 100644
--- a/packages/gem/docs/zh/README.md
+++ b/packages/gem/docs/zh/README.md
@@ -31,6 +31,13 @@ features:
## 待办事项 App
+
+
```ts
diff --git a/packages/gem/src/elements/base/title.ts b/packages/gem/src/elements/base/title.ts
index 527ac3df..4cb71219 100644
--- a/packages/gem/src/elements/base/title.ts
+++ b/packages/gem/src/elements/base/title.ts
@@ -14,13 +14,13 @@
*/
import { GemElement, html } from '../../lib/element';
-import { attribute, connectStore } from '../../lib/decorators';
-import { updateStore, connect } from '../../lib/store';
+import { attribute, boolattribute } from '../../lib/decorators';
+import { updateStore, connect, disconnect } from '../../lib/store';
import { titleStore } from '../../lib/history';
const defaultTitle = document.title;
-function updateTitle(str?: string | null, prefix = '', suffix = '') {
+function setDocumentTitle(str?: string | null, prefix = '', suffix = '') {
const title = titleStore.title || str;
if (title && title !== defaultTitle) {
GemTitleElement.title = title;
@@ -31,18 +31,20 @@ function updateTitle(str?: string | null, prefix = '', suffix = '') {
}
}
+connect(titleStore, setDocumentTitle);
+
export const PREFIX = `${defaultTitle} | `;
export const SUFFIX = ` - ${defaultTitle}`;
/**
- * 允许声明式设置 `document.title`
+ * 映射到 `document.title`
* @attr prefix
* @attr suffix
*/
-@connectStore(titleStore)
export class GemTitleElement extends GemElement {
@attribute prefix: string;
@attribute suffix: string;
+ @boolattribute inert: boolean;
// 没有后缀的当前标题
static title = document.title;
@@ -64,15 +66,19 @@ export class GemTitleElement extends GemElement {
});
}
+ mounted = () => {
+ this.effect(
+ () => {
+ if (!this.inert) connect(titleStore, this.update);
+ return () => disconnect(titleStore, this.update);
+ },
+ () => [this.inert],
+ );
+ };
+
render() {
// 多个 时，最终 document.title 按执行顺序决定
- updateTitle(this.textContent, this.prefix, this.suffix);
-
- if (this.hidden) {
- return html``;
- }
+ setDocumentTitle(this.textContent?.trim(), this.prefix, this.suffix);
return html`${GemTitleElement.title}`;
}
}
-
-connect(titleStore, updateTitle);
diff --git a/packages/gem/src/lib/history.ts b/packages/gem/src/lib/history.ts
index 95ea12bb..78afe6f5 100644
--- a/packages/gem/src/lib/history.ts
+++ b/packages/gem/src/lib/history.ts
@@ -85,6 +85,7 @@ function updateHistory(p: UpdateHistoryParams, native: typeof nativeHistory.push
$hasOpenHandle: !!open,
$hasShouldCloseHandle: !!shouldClose,
$key: getKey(),
+ $title: title,
...data,
};
paramsMap.set(state.$key, params);
@@ -100,6 +101,7 @@ function updateHistoryByNative(data: any, title: string, originUrl: string, nati
validData(data);
const state = {
$key: getKey(),
+ $title: title,
...(data || {}),
};
const { pathname, search, hash } = new URL(originUrl, location.origin + location.pathname);
@@ -251,7 +253,7 @@ if (!window._GEMHISTORY) {
path: pathname,
query: new QueryString(search),
hash,
- title: document.title, // 浏览器缓存的 title
+ title: newState.$title, // document.title 是导航前的
data: newState,
});
}