website·Indexed 31 days ago
https://book.gemjs.orgA tool that renders Markdown content into a website and generates pages based on directory structure. Features include a CLI for previewing and building, support for custom themes, internationalization, document metadata via FrontMatter, and a plugin system with components like <gbp-code-group> and <gbp-raw>.
gem-book command followed by the directory path to write and preview your documentation.# Create docs directory and initial file
mkdir docs && echo '# Hello GemBook!' > docs/readme.md
# Write and preview the docs
gem-book docs<p> tags.# Import built-in plugin
gem-book docs --plugin raw
# Import local plugin
gem-book docs --plugin ./my-plugin.ts
# Import remote plugin
gem-book docs --plugin https://example.com/plugin.js<!-- Alternative HTML import -->
<script type="module" src="https://unpkg.com/gem-book/plugins/raw.js"></script>
<!-- Usage in Markdown -->
<gbp-raw src="/src/plugins/raw.ts"></gbp-raw>gem-book CLI to preview your content. You can optionally specify a project title, a logo image, and enable home-mode to render the readme or index file as the project homepage.# Create docs directory and initial content
mkdir docs && echo '# Hello GemBook!' > docs/readme.md
# Write and preview documentation
gem-book docs
# Preview with a specific title
gem-book docs -t MyApp
# Preview with a title and logo
gem-book docs -t MyApp -i logo.png
# Render readme.md/index.md as the project homepage
gem-book docs -t MyApp -i logo.png --home-mode
# Build front-end resources for production
gem-book docs -t MyApp -i logo.png --home-mode --buildindex.html and .js files) required for deployment, run the build command. Once the output directory is generated, you can host it using any static site hosting service. Note that because <gem-book> utilizes the History API, GitHub Pages is not supported by default without additional configuration.npx gem-book docs --build--i18n flag during build/execution. This enables automatic redirection based on browser settings if no language code is present in the URL. The site will serve content based on the language code in the URL path: /{lang}/path.gem-book build --i18nBy default, GemBook renders the directory name directly in the sidebar. To localize these names for different languages, you can use one of two methods:
docs/zh/guide to docs/zh/002-指南).config.yml file within that specific directory to define localization settings.gem-book CLI to preview content, specify project metadata, and build frontend resources.# Create a docs directory and a sample file
mkdir docs && echo '# Hello GemBook!' > docs/readme.md
# Write and preview documentation
gem-book docs
# Preview with a specific title
gem-book docs -t MyApp
# Preview with a title and logo
gem-book docs -t MyApp -i logo.png
# Render readme.md or index.md as the project homepage
gem-book docs -t MyApp -i logo.png --home-mode
# Build the final front-end resources
gem-book docs -t MyApp -i logo.png --home-mode --build--base flag to specify the location of the current working directory relative to the project root. This ensures correct path resolution for the repository.# Project structure: project/packages/module/docs
cd packages/module && npx gem-book docs --base packages/moduleThe <gem-book> sidebar follows specific default sorting rules to remain consistent with IDE and editor views. The default priority is:
readme.md and index.md are always placed first.To implement custom sorting, add a numerical prefix to the filename (e.g., 300-faq.md). Using gaps between numbers (e.g., 100, 200) allows for inserting new documents between existing ones later without renaming multiple files.
src/docs/
├── guide/
│ ├── README.md
│ └── installation.md
├── 300-faq.md
├── 400-about.md
└── README.mdGemBookPluginElement class. This class provides access to internal methods and the <gem-book> configuration. Use customElements.whenDefined('gem-book') to ensure the base element is available before defining your plugin.customElements.whenDefined('gem-book').then(({ GemBookPluginElement }) => {
customElements.define(
'gbp-example',
class extends GemBookPluginElement {
constructor() {
super();
console.log(GemBookPluginElement.config);
}
},
);
});en for English, zh for Chinese). GemBook will then map these folders to the corresponding language versions of the site.docs/
├── en/
│ ├── guide/
│ │ ├── README.md
│ │ └── installation.md
│ ├── 003-about.md
│ └── README.md
└── zh/
├── guide/
│ ├── README.md
│ └── installation.md
└── README.mdThe <gbp-docsearch> plugin integrates Algolia DocSearch. It is instantiated once and can be positioned using slots.
Note: renderJavaScript must be enabled in the Algolia DocSearch Crawler configuration.
Using docsearch?local enables a local search service powered by MiniSearch.