diff options
-rw-r--r-- | docs/api/components.md | 64 | ||||
-rw-r--r-- | packages/gitbook-plugin-theme-default/.gitignore | 1 | ||||
-rw-r--r-- | packages/gitbook-plugin-theme-default/.npmignore | 1 |
3 files changed, 65 insertions, 1 deletions
diff --git a/docs/api/components.md b/docs/api/components.md index 77f1bb1..64185a2 100644 --- a/docs/api/components.md +++ b/docs/api/components.md @@ -1,7 +1,21 @@ +# Components +## Injection -### Roles +Plugins can inject components by registering react components to some roles. + +#### Register a components + +During the initialization phase of your plugin, dispatch the `GitBook.registerComponent` action: + +```js +dispatch(GitBook.registerComponent(MyCustomButton, { role: 'toolbar:buttons:left' })); +``` + +#### Roles + +Custom roles can be use for interopability with other plugins, but GitBook and the default theme set a convention for common roles: | Role | Description | Props | | ---- | ----------- | ----- | @@ -10,3 +24,51 @@ | `summary:part` | DIV for a specific part | `{ part: SummaryPart }` | | `summary:articles` | UL container for a part's articles | `{ articles: List<SummaryArticle> }` | | `summary:article` | LI for a specific article | `{ article: SummaryArticle }` | + +## Default Components + +#### `GitBook.Head` + +Extends the meta tags of the page. This is an alias for [react-helmet](https://github.com/nfl/react-helmet). + +```js +<GitBook.Head + title="My page" + /> +``` + +#### `GitBook.ImportCSS` + +Import a CSS file by resolving the path correctly according to the current page: + +```js +<GitBook.ImportCSS href="myfile.css" /> +``` + +#### `GitBook.ImportJS` + +Import a JS file by resolving the path correctly according to the current page: + +```js +<GitBook.ImportJS src="mylib.js" /> +``` + +#### `GitBook.InjectedComponent` + +Inject a component matching a specific role: + +```js +<GitBook.InjectedComponent matching={{ role: 'mycustomrole' }} props={{ someProp: 1 }}> + <b>Inner content</b> +</GitBook.InjectedComponent> +``` + +#### `GitBook.InjectedComponentSet` + +Same API as `InjectedComponentSet` but render the matching components in chain instead of composed: + +```js +<GitBook.InjectedComponentSet matching={{ role: 'mytoolbar' }} /> +``` + +**Warning:** Children are discarded. diff --git a/packages/gitbook-plugin-theme-default/.gitignore b/packages/gitbook-plugin-theme-default/.gitignore new file mode 100644 index 0000000..d352d3c --- /dev/null +++ b/packages/gitbook-plugin-theme-default/.gitignore @@ -0,0 +1 @@ +assets/theme.js diff --git a/packages/gitbook-plugin-theme-default/.npmignore b/packages/gitbook-plugin-theme-default/.npmignore new file mode 100644 index 0000000..6838c3e --- /dev/null +++ b/packages/gitbook-plugin-theme-default/.npmignore @@ -0,0 +1 @@ +!assets/theme.js |