Used to display several pieces of code with similar functionality:
npm i gem-book pnpm add gem-book yarn add gem-book <gbp-code-group>
```bash npm
npm i gem-book
```
```bash pnpm
pnpm add gem-book
```
```bash yarn
yarn add gem-book
```
</gbp-code-group> Used to display remote code. If the provided src only contains a path, it will read content from the current project's GitHub (affected by sourceDirsourceBranch
{
"name": "gem-book",
"version": "2.2.3",
"description": "Create your document website easily and quickly",
"keywords": [
"doc",
"docs",
"documentation",
"creator",
"generator"
],
"main": "index.js",
"module": "index.js",
"bin": {
"gem-book": "bin/index.js"
},
"typings": "index.d.ts",
"files": [
"schema.json",
"/bin/",
"/common/",
"/element/",
"/plugins/",
"/public/",
"/website/",
"/themes/",
"/index.*"
],
"scripts": {
"schema": "npx ts-json-schema-generator@1.5 -p src/common/config.ts -t CliConfig -o schema.json",
"build:cli": "esbuild ./src/bin/index.ts --tsconfig=./tsconfig.cli.json --outdir=./bin --platform=node --sourcemap --bundle --packages=external",
"start:cli": "pnpm build:cli --watch",
"docs": "node ./bin docs",
"start:docs": "cross-env GEM_BOOK_DEV=true nodemon --watch bin --exec \"pnpm run docs\"",
"start": "concurrently npm:start:cli npm:start:docs",
"build:website": "pnpm build:cli && pnpm run docs --build --ga G-7X2Z4B2KV0",
"build": "pnpm build:cli && tsc -p ./tsconfig.build.json",
"test": "cross-env wtr",
"prepublishOnly": "pnpm build"
},
"dependencies": {
"@aaroon/workbox-rspack-plugin": "^0.3.2",
"@mantou/gem": "^2.2.2",
"@rspack/cli": "^1.0.5",
"@rspack/core": "^1.0.5",
"@rspack/dev-server": "^1.0.5",
"anymatch": "^3.1.3",
"chalk": "^2.4.2",
"cheerio": "^1.0.0-rc.12",
"chokidar": "^3.5.3",
"commander": "^7.2.0",
"express": "^4.17.3",
"front-matter": "^4.0.2",
"git-remote-origin-url": "^3.1.0",
"git-repo-info": "^2.1.1",
"jimp": "^0.16.1",
"marked": "^10.0.0",
"mkdirp": "^1.0.4",
"parse-github-url": "^1.0.2",
"sitemap-rspack-plugin": "^1.1.1",
"string-replace-loader": "^3.1.0",
"ts-loader": "^9.5.1",
"tslib": "^2.7.0",
"typescript": "^5.6.2",
"yaml": "^1.10.2"
},
"devDependencies": {
"@codesandbox/sandpack-client": "^2.18.2",
"@gemjs/config": "^2.1.2",
"@types/express": "^4.17.3",
"@types/jsdom": "^16.2.10",
"@types/marked": "^2.0.2",
"@types/mkdirp": "^1.0.1",
"@types/mocha": "^10.0.7",
"@types/parse-github-url": "^1.0.0",
"@types/prismjs": "^1.16.5",
"@web/dev-server-esbuild": "^1.0.2",
"@web/test-runner": "^0.18.1",
"gem-analyzer": "^2.2.2",
"nodemon": "^2.0.7",
"ts-morph": "^12.0.0"
},
"author": "mantou132",
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/mantou132/gem.git",
"directory": "packages/gem-book"
},
"bugs": {
"url": "https://github.com/mantou132/gem/issues"
},
"homepage": "https://github.com/mantou132/gem#readme"
}
<!-- `range` specifies the display range, supporting negative numbers and string matching, `highlight` format is the same -->
<gbp-raw src="package.json" range="2-3,-4--6,author-license" highlight="-5,author"></gbp-raw> Reference global variable: hello
<gbp-var>hello</gbp-var> The variable needs to be defined in the configuration file .
Displays remote multimedia content, such as images or videos, using the same resource retrieval method as <gbp-raw>:
<gbp-media src="preview.png"></gbp-media> Dynamically loads Markdown snippets:
NOTE
This is [!NOTE]
<!-- `range` syntax is the same as `<gbp-raw>`, here `range` uses string matching -->
<gbp-include src="./guide/007-extension.md" range="[!NOTE]->"></gbp-include> Dynamically imports modules, which can be used to load plugins on demand. For example, the following custom element is dynamically loaded (the .ts file will be compiled using esm.sh
):
Hello, World
<gbp-import src="docs/hello.ts"></gbp-import>
<my-plugin-hello></my-plugin-hello> Insert content into <gem-book>, allowing customization of <gem-book> content on specific pages, such as a custom sidebar:
<gbp-content slot="sidebar-before">
<div>Test</div>
<style>
gem-book [part=sidebar-content] {
display: none;
}
</style>
</gbp-content> Use Algolia DocSearch
to provide search for the website, instantiated only once, and can be placed using slots :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<style>
gem-book:not(:defined) * {
display: none;
}
</style>
<gem-book>
<gbp-docsearch
slot="nav-inside"
app-id="05KK61XW6A"
api-key="b6738e2ef6d977e01ab3a325b91937e1"
index-name="book-gemjs"
></gbp-docsearch>
</gem-book>
</body>
</html>
WARNING
renderJavaScript must be enabled in the configuration
for Algolia DocSearch Crawler.
Using docsearch?local can provide local search service (thanks to MiniSearch
), example
.
It uses Gitalk
to bring comment functionality to the website, similar to the usage of <gbp-docsearch>:
<gem-book>
<gbp-comment
slot="main-after"
client-id="xxx"
client-secret="xxx"
></gbp-comment>
</gem-book> <gbp-sandpack> Use Sandpack
to create interactive examples:
import { render, html } from '@mantou/gem';
import 'duoyun-ui/elements/button';
render(
html`<dy-button>Time: ${new Date().toLocaleString()}</dy-button>`,
document.getElementById('root'),
); <gbp-sandpack dependencies="@mantou/gem, duoyun-ui">
```ts
import { render, html } from '@mantou/gem';
import 'duoyun-ui/elements/button';
render(
html`<dy-button>Time: ${new Date().toLocaleString()}</dy-button>`,
document.getElementById('root'),
);
```
</gbp-sandpack> Generate examples for any custom element, for example:
{
"src": "https://api.dicebear.com/5.x/bottts-neutral/svg",
"status": "positive",
"size": "large",
"square": true
} <gbp-example name="dy-avatar" src="https://esm.sh/duoyun-ui/elements/avatar">
```json
{
"src": "https://api.dicebear.com/5.x/bottts-neutral/svg",
"status": "positive",
"size": "large",
"square": true
}
```
</gbp-example> Use gem-analyzer
GemElement, such as GemBookElement API ;
