summaryrefslogtreecommitdiffstats
path: root/docs/api
diff options
context:
space:
mode:
Diffstat (limited to 'docs/api')
-rw-r--r--docs/api/README.md24
-rw-r--r--docs/api/components.md86
-rw-r--r--docs/api/connect.md33
-rw-r--r--docs/api/i18n.md44
-rw-r--r--docs/api/navigation.md23
-rw-r--r--docs/api/node.md97
6 files changed, 307 insertions, 0 deletions
diff --git a/docs/api/README.md b/docs/api/README.md
new file mode 100644
index 0000000..66b05b6
--- /dev/null
+++ b/docs/api/README.md
@@ -0,0 +1,24 @@
+# Plugin Architecture
+
+A GitBook plugin is a NPM package that follows a defined convention.
+
+`gitbook-plugin` is a command line utility to help you create, test and release plugins.
+
+### Bootstrap your first plugin
+
+Install `gitbook-plugin` from NPM:
+
+```
+$ npm install gitbook-plugin -g
+```
+
+Then create your plugin:
+
+```
+$ gitbook-plugin create
+```
+
+You will be asked for a plugin name, and a few other things to complete the creation process.
+
+
+### Publish your plugin
diff --git a/docs/api/components.md b/docs/api/components.md
new file mode 100644
index 0000000..e323abc
--- /dev/null
+++ b/docs/api/components.md
@@ -0,0 +1,86 @@
+# Components
+
+
+## Injection
+
+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 |
+| ---- | ----------- | ----- |
+| `page:container` | DIV container for the page's content | `{ page: Page }` |
+| `summary:container` | DIV container for the whole summary | `{ summary: Summary }` |
+| `summary:parts` | DIV container for summary's parts | `{ parts: List<SummaryPart> }` |
+| `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.
+
+#### `GitBook.FlexLayout` and `GitBook.FlexBox`
+
+A simple wrapper that provides a Flexbox layout with the given direction and style. Any additional props you set on the Flexbox are rendered.
+
+```js
+<GitBook.FlexLayout column>
+ <GitBook.FlexBox>First column</GitBook.FlexBox>
+ <GitBook.FlexBox>Second column</GitBook.FlexBox>
+</GitBook.FlexLayout>
+```
diff --git a/docs/api/connect.md b/docs/api/connect.md
new file mode 100644
index 0000000..740deca
--- /dev/null
+++ b/docs/api/connect.md
@@ -0,0 +1,33 @@
+# Connect to the context
+
+`GitBook.connect(Component, [mapStateToProps], [mapActionsToProps])` connects a react component to the GitBook context.
+
+It does not modify the component class passed to it.
+Instead, it returns a new, connected component class, for you to use.
+
+### `mapStateToProps(state, [ownProps]): stateProps`
+
+If specified, the component will subscribe to GitBook store updates. Any time it updates, `mapStateToProps` will be called. Its result must be a plain object, and it will be merged into the component’s props.
+
+If you omit it, the component will not be subscribed to the GitBook store. If `ownProps` is specified as a second argument, its value will be the props passed to your component, and `mapStateToProps` will be additionally re-invoked whenever the component receives new props (e.g. if props received from a parent component have shallowly changed, and you use the `ownProps` argument, `mapStateToProps` is re-evaluated).
+
+For example to render the title of the current page:
+
+```js
+const GitBook = require('gitbook-core');
+
+let PageTitle = React.createClass({
+ render() {
+ const { page } = this.props;
+ return <h1>{page.title}</h1>;
+ }
+});
+
+function mapStateToProps(state) {
+ return { page: state.page };
+}
+
+PageTitle = GitBook.connect(PageTitle, mapStateToProps);
+```
+
+### `mapActionsToProps(actions, [dispatch])`
diff --git a/docs/api/i18n.md b/docs/api/i18n.md
new file mode 100644
index 0000000..b58f1e8
--- /dev/null
+++ b/docs/api/i18n.md
@@ -0,0 +1,44 @@
+# Internationalize your plugin
+
+GitBook has built-in support for internationalization. Plugins can register new languages and provide the right messages for different languages.
+
+### Register locale and messages
+
+The first step is to register messages for a language:
+
+```js
+module.exports = GitBook.createPlugin({
+ init: (dispatch, getState, { I18n }) => {
+ dispatch(I18n.registerLocale('en-US', {
+ MY_PLUGIN_MESSAGE: 'Hello World'
+ }));
+ }
+});
+```
+
+### Render a message in a component
+
+`GitBook.connect` adds a `i18n` prop to access the internationalization:
+
+```js
+const GitBook = require('gitbook-core');
+const { React } = GitBook;
+
+const MyButton = React.createClass({
+ propTypes: {
+ i18n: GitBook.Shapes.i18n
+ },
+
+ render() {
+ const { i18n } = this.props;
+
+ return (
+ <GitBook.Button>
+ {i18.t('MY_PLUGIN_MESSAGE')}
+ </GitBook.Button>
+ );
+ }
+});
+
+module.exports = GitBook.connect(MyButton);
+```
diff --git a/docs/api/navigation.md b/docs/api/navigation.md
new file mode 100644
index 0000000..b0a1d2d
--- /dev/null
+++ b/docs/api/navigation.md
@@ -0,0 +1,23 @@
+# Navigation
+
+### Listen to url change
+
+Listen for changes to the current location:
+
+```js
+const onLocationChanged = (location) => {
+ console.log(location.pathname);
+ console.log(location.query);
+ console.log(location.hash);
+};
+
+module.exports = GitBook.createPlugin({
+ init: (dispatch, getState, { Navigation }) => {
+ dispatch(Navigation.listen(onLocationChanged));
+ }
+});
+```
+
+The `onLocationChanged` will be triggered for initial state.
+
+### Changing the url
diff --git a/docs/api/node.md b/docs/api/node.md
new file mode 100644
index 0000000..be0cce2
--- /dev/null
+++ b/docs/api/node.md
@@ -0,0 +1,97 @@
+# Node APIs
+
+GitBooks provides different Node APIs and contexts to plugins. These APIs can vary according to the GitBook version being used, your plugin should specify the `engines.gitbook` field in `package.json` accordingly.
+
+#### Book instance
+
+The `Book` interface is the central point of GitBook, it centralize all access read methods.
+
+```js
+// Read configuration from book.json
+var value = book.config.get('title', 'Default Value');
+
+// Resolve a filename to an absolute path
+var filepath = book.resolve('README.md');
+
+// Render an inline markup string
+book.renderInline('markdown', 'This is **Markdown**')
+ .then(function(str) { ... })
+
+// Render a markup string (block mode)
+book.renderBlock('markdown', '* This is **Markdown**')
+ .then(function(str) { ... })
+```
+
+#### Output instance
+
+The `Output` class represent the output/write process.
+
+```js
+// Return root folder for the output
+var root = output.root();
+
+// Resolve a file in the output folder
+var filepath = output.resolve('myimage.png');
+
+// Convert a filename to an URL (returns a path to an html file)
+var fileurl = output.toURL('mychapter/README.md');
+
+// Write a file in the output folder
+output.writeFile('hello.txt', 'Hello World')
+ .then(function() { ... });
+
+// Copy a file to the output folder
+output.copyFile('./myfile.jpg', 'cover.jpg')
+ .then(function() { ... });
+
+// Verify that a file exists
+output.hasFile('hello.txt')
+ .then(function(exists) { ... });
+```
+
+#### Page instance
+
+A page instance represent the current parsed page.
+
+```js
+// Title of the page (from SUMMARY)
+page.title
+
+// Content of the page (Markdown/Asciidoc/HTML according to the stage)
+page.content
+
+// Relative path in the book
+page.path
+
+// Absolute path to the file
+page.rawPath
+
+// Type of parser used for this file
+page.type ('markdown' or 'asciidoc')
+```
+
+#### Context for Blocks and Filters
+
+Blocks and filters have access to the same context, this context is bind to the template engine execution:
+
+```js
+{
+ // Current templating syntax
+ "ctx": {
+ // For example, after a {% set message = "hello" %}
+ "message": "hello"
+ },
+
+ // Book instance
+ "book" <Book>,
+
+ // Output instance
+ "output": <Output>
+}
+```
+
+For example a filter or block function can access the current book using: `this.book`.
+
+#### Context for Hooks
+
+Hooks only have access to the `<Book>` instance using `this.book`.