From da937158342959a9627382d693df1055d599ab07 Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Thu, 13 Oct 2016 23:03:12 +0200 Subject: [PATCH 01/30] Update package.json --- package.json | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index b81fa05..5383008 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "description": "Theme for using GitBook as an API documentation", "version": "1.1.2", "engines": { - "gitbook": ">=3.0.4" + "gitbook": ">=4.0.0-alpha" }, "dependencies": { "cheerio": "0.20.0", @@ -13,15 +13,22 @@ "q-plus": "0.0.8" }, "devDependencies": { - "eslint": "2.9.0", - "less": "2.6.0", + "eslint": "^3.7.1", + "eslint-config-gitbook": "^1.3.1", + "gitbook-plugin": "4.0.0", + "less": "^2.7.1", "less-plugin-clean-css": "^1.5.1", "preboot": "git+https://github.com/mdo/preboot.git#4aab4edd85f076d50609cbe28e4fe66cc0771701", "uglify-js": "2.6.1" }, "scripts": { - "prepublish": "./src/build.sh" + "build-js": "gitbook-plugin build ./src/index.js ./_assets/plugin.js", + "build-css": "./src/build.sh", + "prepublish": "npm run build-js && npm run build-css" }, + "browser": "./_assets/plugin.js", + "ebook": "./_assets/plugin.js", + "title": "API Theme", "repository": { "type": "git", "url": "https://github.com/GitbookIO/theme-api.git" From 7def3fd14dd482b1a7a5ac92b68db323b57fa0fa Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Thu, 13 Oct 2016 23:03:21 +0200 Subject: [PATCH 02/30] Update config files --- .eslintignore | 3 +++ .eslintrc | 21 ++------------------- .gitignore | 3 ++- .npmignore | 4 ++-- 4 files changed, 9 insertions(+), 22 deletions(-) create mode 100644 .eslintignore diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..2a73b4f --- /dev/null +++ b/.eslintignore @@ -0,0 +1,3 @@ +node_modules/ +_assets/ +/index.js diff --git a/.eslintrc b/.eslintrc index c306715..b6f4662 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,20 +1,3 @@ { - "rules": { - "no-extra-boolean-cast": [ 0 ], - "indent": [ 2, 4 ], - "quotes": [ 2, "single" ], - "linebreak-style": [ 2, "unix" ], - "semi": [ 2, "always" ], - "no-unused-vars": [ 2, { - "vars": "all", - "args": "none" - } ], - "spaced-comment": [ 2, "always" ] - }, - "env": { - "node": true, - "mocha": true, - "browser": true - }, - "extends": "eslint:recommended" -} \ No newline at end of file + "extends": "gitbook" +} diff --git a/.gitignore b/.gitignore index 87a4029..9f0b909 100644 --- a/.gitignore +++ b/.gitignore @@ -27,4 +27,5 @@ node_modules # vim swapfile *.swp -assets +# Plugin assets +_assets/ diff --git a/.npmignore b/.npmignore index ec955b5..7bc36b7 100644 --- a/.npmignore +++ b/.npmignore @@ -1,2 +1,2 @@ -# Allow _assets folder -!assets +# Publish assets on NPM +!_assets From 4a5a613788796dd32d92021eb170c93d326b500d Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Thu, 13 Oct 2016 23:03:57 +0200 Subject: [PATCH 03/30] Update build script to only compile LESS --- src/build.sh | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/build.sh b/src/build.sh index 99b3db5..9af3a50 100755 --- a/src/build.sh +++ b/src/build.sh @@ -1,13 +1,17 @@ #! /bin/bash +echo "Cleaning up folder..." # Cleanup folder -rm -rf assets +rm -rf _assets/website # Recreate folder -mkdir -p assets +mkdir -p _assets/website # Compile JS -uglifyjs -mc -- src/js/theme-api.js > assets/theme-api.js +# uglifyjs -mc -- src/js/theme-api.js > assets/theme-api.js +echo "Compiling LESS sources..." # Compile Website CSS -lessc -clean-css src/less/website.less assets/theme-api.css \ No newline at end of file +lessc -clean-css src/less/website.less _assets/website/theme-api.css + +echo "Done :)" From 3980a6795ce7e9238350e9dece06db1e1a68c67c Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Thu, 13 Oct 2016 23:06:04 +0200 Subject: [PATCH 04/30] Add base React components --- src/index.js | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 src/index.js diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..b75f8d8 --- /dev/null +++ b/src/index.js @@ -0,0 +1,85 @@ +const GitBook = require('gitbook-core'); +const { React } = GitBook; + +const exampleShape = React.PropTypes.shape({ + type: React.PropTypes.string.isRequired, + content: React.PropTypes.string, + language: React.PropTypes.string, + name: React.PropTypes.string +}); + +const ApiCommon = React.createClass({ + propTypes: { + content: React.PropTypes.string + }, + + render() { + const { content } = this.props; + return ( +
+ +
+ ); + } +}); + +const ApiSample = React.createClass({ + propTypes: { + example: exampleShape + }, + + render() { + const { example } = this.props; + return ( +
+ +
+ ); + } +}); + +const ApiExample = React.createClass({ + propTypes: { + example: exampleShape + }, + + render() { + const { example } = this.props; + + if (example.type == 'common') { + return ; + } + else { + return ; + } + } +}); + +const MethodBlock = React.createClass({ + propTypes: { + definition: React.PropTypes.string, + examples: React.PropTypes.arrayOf(exampleShape) + }, + + render() { + const { definition, examples } = this.props; + + return ( +
+ +
+ +
+
+ { examples.map((example, i) => ) } +
+
+ ); + } +}); + +module.exports = GitBook.createPlugin({ + activate: (dispatch, getState, { Components }) => { + dispatch(Components.registerComponent(MethodBlock, { role: 'block:method' })); + } +}); From 76853deaecb2661f07e10f2bd52854dffaf6ebcd Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Thu, 13 Oct 2016 23:06:26 +0200 Subject: [PATCH 05/30] Update server-side to return correct props for React --- index.js | 95 ++++++++++++++++---------------------------------------- 1 file changed, 27 insertions(+), 68 deletions(-) diff --git a/index.js b/index.js index a198a6d..b6a7f77 100644 --- a/index.js +++ b/index.js @@ -1,59 +1,10 @@ -var _ = require('lodash'); -var Q = require('q-plus'); +var _ = require('lodash'); +var Promise = require('q-plus'); var cheerio = require('cheerio'); var DEFAULT_LANGUAGES = require('./languages'); var configLanguages = []; -function generateMethod(book, body, examples) { - // Main container - var $ = cheerio.load('
'), - $apiMethod = $('div.api-method'), - // Method definition - $apiDefinition = $('
'), - // Method code - $apiCode = $('
'); - - // Append elements - $apiMethod.append($apiDefinition); - $apiMethod.append($apiCode); - - // Render method body - return Q() - .then(function() { - return book.renderBlock('markdown', body); - }) - .then(function(apiDefinition) { - $apiDefinition.html(apiDefinition); - - // Set method examples - return Q(examples).eachSeries(function(example) { - var $example; - - // Common text - if (example.type == 'common') { - $example = $('
'); - - } - - // Example code snippet - if (example.type == 'sample') { - $example = $('
'); - } - - return book.renderBlock('markdown', example.body) - .then(function(body) { - $example.html(body); - $apiCode.append($example); - }); - }); - }) - .then(function() { - // Return whole HTML - return $.html('div.api-method'); - }); -} - module.exports = { book: { assets: './assets', @@ -67,42 +18,50 @@ module.exports = { blocks: { method: { - blocks: ['sample', 'common'], - process: function(blk) { + blocks: [ 'sample', 'common' ], + process: function(block) { + var book = this; var examples = []; - _.each(blk.blocks, function(_blk) { + return Promise(block.blocks).eachSeries(function(_block) { var languageName; // Search if is user-defined language - if (_blk.name == 'sample') { + if (_block.name == 'sample') { // Sample blocks should have a lang argument - if (!_blk.kwargs.lang) { + if (!_block.kwargs.lang) { throw Error('sample blocks must provide a "lang" argument'); } - var language = _.find(configLanguages, { lang: _blk.kwargs.lang }); + var language = _.find(configLanguages, { lang: _block.kwargs.lang }); if (!!language) { languageName = language.name; } else { // Default to upper-cased lang - languageName = _blk.kwargs.lang.toUpperCase(); + languageName = _block.kwargs.lang.toUpperCase(); } } - examples.push({ - type: _blk.name, - body: _blk.body.trim(), - lang: _blk.kwargs.lang, - name: languageName + return book.renderBlock('markdown', _block.children.trim()) + .then(function(content) { + examples.push({ + type: _block.name, + content: content, + language: _block.kwargs.lang, + name: languageName + }); + }); + }) + .then(function() { + return book.renderBlock('markdown', block.children.trim()) + .then(function(definition) { + return { + definition: definition, + examples: examples + }; }); }); - - return { - parse: true, - body: generateMethod(this, blk.body.trim(), examples) - }; } } }, From 2ee3afba90c7d5a20aa1d093ec76f8d59e4b0130 Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Thu, 13 Oct 2016 23:06:41 +0200 Subject: [PATCH 06/30] Start updating LESS files --- src/less/website.less | 2 -- src/less/website/api-method.less | 20 ++++++++------------ 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/src/less/website.less b/src/less/website.less index e24b604..39e6198 100755 --- a/src/less/website.less +++ b/src/less/website.less @@ -18,5 +18,3 @@ .markdown-section { padding: @markdown-section-padding @api-method-padding 0; } - - diff --git a/src/less/website/api-method.less b/src/less/website/api-method.less index 334d4b4..ab9031f 100644 --- a/src/less/website/api-method.less +++ b/src/less/website/api-method.less @@ -1,15 +1,15 @@ -.api-method { +.ThemeApi-ApiMethod { margin: @api-method-padding -@api-method-padding; &:last-of-type { margin-bottom: 0; } - .api-method-definition { + .ThemeApi-ApiMethodDefinition { padding: 0 @api-method-padding; } - .api-method-code { + .ThemeApi-ApiMethodCode { padding: @api-method-padding @api-method-padding @api-method-padding/2; background-color: @api-code-background; border-top: @api-method-border; @@ -28,7 +28,7 @@ .book { &.two-columns { - .api-method { + .ThemeApi-ApiMethod { position: relative; width: calc(~"100% +" 2*@api-method-padding); @@ -39,16 +39,12 @@ clear: both; } - .api-method-title { - margin-top: 0; - } - - .api-method-definition { + .ThemeApi-ApiMethodDefinition { float: left; width: 50%; } - .api-method-code { + .ThemeApi-ApiMethodCode { position: relative; float: left; width: 50%; @@ -61,9 +57,9 @@ } .page-wrapper.comments-open-from-definition { - .api-method-code { + .ThemeApi-ApiMethodCode { opacity: 0.1; } } } -} \ No newline at end of file +} From 476ffc2642c167561ac921ce0f88d469c6830323 Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Sat, 15 Oct 2016 15:55:51 +0200 Subject: [PATCH 07/30] Move MethodBlock component to src/components --- src/{index.js => components/MethodBlock.js} | 36 +++++++++++++-------- 1 file changed, 23 insertions(+), 13 deletions(-) rename src/{index.js => components/MethodBlock.js} (63%) diff --git a/src/index.js b/src/components/MethodBlock.js similarity index 63% rename from src/index.js rename to src/components/MethodBlock.js index b75f8d8..8b39ba1 100644 --- a/src/index.js +++ b/src/components/MethodBlock.js @@ -25,13 +25,19 @@ const ApiCommon = React.createClass({ const ApiSample = React.createClass({ propTypes: { - example: exampleShape + example: exampleShape, + selectedLanguage: React.PropTypes.string }, render() { - const { example } = this.props; + const { example, selectedLanguage } = this.props; + // Don't display if is not selected language + if (selectedLanguage != example.language) { + return null; + } + return ( -
+
); @@ -40,7 +46,8 @@ const ApiSample = React.createClass({ const ApiExample = React.createClass({ propTypes: { - example: exampleShape + example: exampleShape, + selectedLanguage: React.PropTypes.string }, render() { @@ -57,12 +64,13 @@ const ApiExample = React.createClass({ const MethodBlock = React.createClass({ propTypes: { - definition: React.PropTypes.string, - examples: React.PropTypes.arrayOf(exampleShape) + definition: React.PropTypes.string, + examples: React.PropTypes.arrayOf(exampleShape), + selectedLanguage: React.PropTypes.string }, render() { - const { definition, examples } = this.props; + const { definition, examples, selectedLanguage } = this.props; return (
@@ -71,15 +79,17 @@ const MethodBlock = React.createClass({
- { examples.map((example, i) => ) } + { examples.map((example, i) => ) }
); } }); -module.exports = GitBook.createPlugin({ - activate: (dispatch, getState, { Components }) => { - dispatch(Components.registerComponent(MethodBlock, { role: 'block:method' })); - } -}); +function mapStateToProps({ themeApi }) { + return { + selectedLanguage: themeApi.get('selectedLanguage') + }; +} + +module.exports = GitBook.connect(MethodBlock, mapStateToProps); From 03578e8b2bde218ef146615a80f1c4a9e88b903e Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Sat, 15 Oct 2016 15:56:27 +0200 Subject: [PATCH 08/30] Add DisplayButton component --- src/components/DisplayButton.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 src/components/DisplayButton.js diff --git a/src/components/DisplayButton.js b/src/components/DisplayButton.js new file mode 100644 index 0000000..0aa2151 --- /dev/null +++ b/src/components/DisplayButton.js @@ -0,0 +1,25 @@ +const GitBook = require('gitbook-core'); +const { React } = GitBook; + +const toggleDisplayMode = require('../actions').toggleDisplayMode; + +const DisplayButton = React.createClass({ + propTypes: { + dispatch: React.PropTypes.func.isRequired + }, + + onClick() { + const { dispatch } = this.props; + dispatch(toggleDisplayMode()); + }, + + render() { + return ( + + + + ); + } +}); + +module.exports = GitBook.connect(DisplayButton); From ceb6699813c8758e162bd5419f55dc72883ca11e Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Sat, 15 Oct 2016 15:56:49 +0200 Subject: [PATCH 09/30] Add PageContainer component to handle CSS styling --- src/components/PageContainer.js | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 src/components/PageContainer.js diff --git a/src/components/PageContainer.js b/src/components/PageContainer.js new file mode 100644 index 0000000..4ab2531 --- /dev/null +++ b/src/components/PageContainer.js @@ -0,0 +1,33 @@ +const GitBook = require('gitbook-core'); +const { React } = GitBook; +const classNames = require('classnames'); + +const PageContainer = React.createClass({ + propTypes: { + page: GitBook.Shapes.Page, + split: React.PropTypes.bool + }, + + render() { + const { page, split } = this.props; + + const className = classNames({ + 'ThemeApi-TwoColumns': split + }); + + return ( +
+ +
+ ); + } +}); + +function mapStateToProps({ themeApi, page }) { + return { + split: themeApi.get('split'), + page + }; +} + +module.exports = GitBook.connect(PageContainer, mapStateToProps); From 7826eabdcc1a06779503a9463613eb5b8f5a227f Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Sat, 15 Oct 2016 15:57:00 +0200 Subject: [PATCH 10/30] Add classnames to dependencies --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 5383008..0570d90 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ }, "dependencies": { "cheerio": "0.20.0", + "classnames": "^2.2.5", "gitbook-plugin-search": ">=2.0.0", "lodash": "4.12.0", "q": "1.4.1", From a8278e7bb39e2eb0011fb2859b60c514a12de4b1 Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Sat, 15 Oct 2016 15:57:14 +0200 Subject: [PATCH 11/30] Add base actions --- src/actions/index.js | 26 ++++++++++++++++++++++++++ src/actions/types.js | 4 ++++ 2 files changed, 30 insertions(+) create mode 100644 src/actions/index.js create mode 100644 src/actions/types.js diff --git a/src/actions/index.js b/src/actions/index.js new file mode 100644 index 0000000..106168e --- /dev/null +++ b/src/actions/index.js @@ -0,0 +1,26 @@ +const ACTIONS_TYPES = require('./types'); + +/** + * Change language from toolbar + * @return {Action} + */ +function selectLanguage(language) { + return { + type: ACTIONS_TYPES.SELECT_LANGUAGE, + language + }; +} + +/** + * Toggle split display mode + */ +function toggleDisplayMode() { + return { + type: ACTIONS_TYPES.TOGGLE_DISPLAY_MODE + }; +} + +module.exports = { + selectLanguage, + toggleDisplayMode +}; diff --git a/src/actions/types.js b/src/actions/types.js new file mode 100644 index 0000000..9e8c73f --- /dev/null +++ b/src/actions/types.js @@ -0,0 +1,4 @@ +module.exports = { + SELECT_LANGUAGE: 'theme-api/language:select', + TOGGLE_DISPLAY_MODE: 'theme-api/split:toggle' +}; From 42330363aae39cbe384c894468a4a0048442590c Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Sat, 15 Oct 2016 15:57:42 +0200 Subject: [PATCH 12/30] Add base reducers --- src/reducers/index.js | 3 +++ src/reducers/themeApi.js | 25 +++++++++++++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 src/reducers/index.js create mode 100644 src/reducers/themeApi.js diff --git a/src/reducers/index.js b/src/reducers/index.js new file mode 100644 index 0000000..7e9aede --- /dev/null +++ b/src/reducers/index.js @@ -0,0 +1,3 @@ +const GitBook = require('gitbook-core'); + +module.exports = GitBook.createReducer('themeApi', require('./themeApi')); diff --git a/src/reducers/themeApi.js b/src/reducers/themeApi.js new file mode 100644 index 0000000..923942c --- /dev/null +++ b/src/reducers/themeApi.js @@ -0,0 +1,25 @@ +const GitBook = require('gitbook-core'); +const { Record } = GitBook.Immutable; + +const ACTIONS_TYPES = require('../actions/types'); + +const ThemeApiState = Record({ + // current displayed language + selectedLanguage: String(''), + // split display + split: Boolean(true) +}); + +module.exports = (state = ThemeApiState(), action) => { + switch (action.type) { + + case ACTIONS_TYPES.SELECT_LANGUAGE: + return state.set('selectedLanguage', action.language); + + case ACTIONS_TYPES.TOGGLE_DISPLAY_MODE: + return state.set('split', !state.get('split')); + + default: + return state; + } +}; From 41ad8acc3da83fe1e45af45d08501372ab4ea8d0 Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Sat, 15 Oct 2016 15:57:57 +0200 Subject: [PATCH 13/30] Update LESS style to handle splitting --- src/less/website/api-method.less | 58 +++++++++++++++----------------- 1 file changed, 28 insertions(+), 30 deletions(-) diff --git a/src/less/website/api-method.less b/src/less/website/api-method.less index ab9031f..bf36733 100644 --- a/src/less/website/api-method.less +++ b/src/less/website/api-method.less @@ -26,40 +26,38 @@ } } -.book { - &.two-columns { - .ThemeApi-ApiMethod { - position: relative; - width: calc(~"100% +" 2*@api-method-padding); - - &:after { - content: " "; - display: block; - visibility: hidden; - clear: both; - } +.ThemeApi-TwoColumns { + .ThemeApi-ApiMethod { + position: relative; + width: calc(~"100% +" 2*@api-method-padding); + + &:after { + content: " "; + display: block; + visibility: hidden; + clear: both; + } - .ThemeApi-ApiMethodDefinition { - float: left; - width: 50%; - } + .ThemeApi-ApiMethodDefinition { + float: left; + width: 50%; + } - .ThemeApi-ApiMethodCode { - position: relative; - float: left; - width: 50%; - padding: @api-method-padding @api-method-padding @api-method-padding/2; - border-left: @api-method-border; - border-top: none; - border-bottom: none; - transition: opacity 300ms ease; - } + .ThemeApi-ApiMethodCode { + position: relative; + float: left; + width: 50%; + padding: @api-method-padding @api-method-padding @api-method-padding/2; + border-left: @api-method-border; + border-top: none; + border-bottom: none; + transition: opacity 300ms ease; } + } - .page-wrapper.comments-open-from-definition { - .ThemeApi-ApiMethodCode { - opacity: 0.1; - } + .page-wrapper.comments-open-from-definition { + .ThemeApi-ApiMethodCode { + opacity: 0.1; } } } From 0bdc32afe1a175fe75793136fcfbd8b56bcae45c Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Sat, 15 Oct 2016 15:58:46 +0200 Subject: [PATCH 14/30] Correctly register components and set default language --- src/index.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 src/index.js diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..db05a30 --- /dev/null +++ b/src/index.js @@ -0,0 +1,30 @@ +const GitBook = require('gitbook-core'); +const MethodBlock = require('./components/MethodBlock'); +const PageContainer = require('./components/PageContainer'); +const DisplayButton = require('./components/DisplayButton'); +// const LanguageButtons = require('./components/LanguageButtons'); +const actions = require('./actions'); +const reduce = require('./reducers'); + +module.exports = GitBook.createPlugin({ + activate: (dispatch, getState, { Components }) => { + dispatch(Components.registerComponent(MethodBlock, { role: 'block:method' })); + dispatch(Components.registerComponent(PageContainer, { role: 'page:container' })); + dispatch(Components.registerComponent(DisplayButton, { role: 'toolbar:buttons:left' })); + + // Get default language in config + const configLanguages = getState().config.getIn(['pluginsConfig', 'theme-api', 'languages']); + let defaultLanguage = configLanguages.find((language) => { + return Boolean(language.get('default')); + }); + + // Or use first language in list + if (!defaultLanguage) { + defaultLanguage = configLanguages.get(0); + } + + // Set as selected language + dispatch(actions.selectLanguage(defaultLanguage.get('lang'))); + }, + reduce +}); From c65b26e0beac1207448444bbafbc6adfa6e5b614 Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Sat, 15 Oct 2016 16:16:57 +0200 Subject: [PATCH 15/30] Update page style for display --- src/less/website.less | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/less/website.less b/src/less/website.less index 39e6198..886b617 100755 --- a/src/less/website.less +++ b/src/less/website.less @@ -9,10 +9,14 @@ @import "website/comments.less"; @import "themes/themes.less"; -.page-inner { +.PageContainer { max-width: 100%; padding: 0; - margin-top: @header-height; +} + +.Page { + padding-left: @api-method-padding + 10; + padding-right: @api-method-padding + 10; } .markdown-section { From b79eb265405fa05b0b5f730dc02fcee12eb1d97e Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Sat, 15 Oct 2016 16:17:09 +0200 Subject: [PATCH 16/30] Move import of CSS to PageContainer component --- src/components/MethodBlock.js | 1 - src/components/PageContainer.js | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MethodBlock.js b/src/components/MethodBlock.js index 8b39ba1..f81ac5a 100644 --- a/src/components/MethodBlock.js +++ b/src/components/MethodBlock.js @@ -74,7 +74,6 @@ const MethodBlock = React.createClass({ return (
-
diff --git a/src/components/PageContainer.js b/src/components/PageContainer.js index 4ab2531..a7ff99f 100644 --- a/src/components/PageContainer.js +++ b/src/components/PageContainer.js @@ -17,6 +17,7 @@ const PageContainer = React.createClass({ return (
+
); From 49c4229cd0a46b15d7354a6d44497fc18e634058 Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Sat, 15 Oct 2016 16:46:56 +0200 Subject: [PATCH 17/30] Add base display for LanguagesButtons component --- src/components/LanguagesButtons.js | 56 ++++++++++++++++++++++++++++++ src/index.js | 3 +- src/less/website/langswitcher.less | 7 ++-- 3 files changed, 61 insertions(+), 5 deletions(-) create mode 100644 src/components/LanguagesButtons.js diff --git a/src/components/LanguagesButtons.js b/src/components/LanguagesButtons.js new file mode 100644 index 0000000..8535403 --- /dev/null +++ b/src/components/LanguagesButtons.js @@ -0,0 +1,56 @@ +const GitBook = require('gitbook-core'); +const { React } = GitBook; +const { List } = GitBook.Immutable; +const classNames = require('classnames'); + +const languageShape = React.PropTypes.shape({ + lang: React.PropTypes.string.isRequired, + name: React.PropTypes.string.isRequired, + default: React.PropTypes.bool +}); + +const LanguageButton = React.createClass({ + propTypes: { + language: languageShape, + active: React.PropTypes.bool + }, + + render() { + const { language, active } = this.props; + + const className = classNames('ThemeApi-LanguageButton', { + 'ThemeApi-ActiveButton': active + }); + + return ( + + { language.name } + + ); + } +}); + +const LanguagesButtons = React.createClass({ + propTypes: { + languages: React.PropTypes.arrayOf(languageShape).isRequired, + selectedLanguage: React.PropTypes.string.isRequired + }, + + render() { + const { languages, selectedLanguage } = this.props; + return ( + + { languages.map((language, i) => ) } + + ); + } +}); + +function mapStateToProps({ config, themeApi }) { + return { + languages: config.getIn(['pluginsConfig', 'theme-api', 'languages'], List()).toJS(), + selectedLanguage: themeApi.get('selectedLanguage') + }; +} + +module.exports = GitBook.connect(LanguagesButtons, mapStateToProps); diff --git a/src/index.js b/src/index.js index db05a30..f93b187 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,7 @@ const GitBook = require('gitbook-core'); const MethodBlock = require('./components/MethodBlock'); const PageContainer = require('./components/PageContainer'); const DisplayButton = require('./components/DisplayButton'); -// const LanguageButtons = require('./components/LanguageButtons'); +const LanguagesButtons = require('./components/LanguagesButtons'); const actions = require('./actions'); const reduce = require('./reducers'); @@ -11,6 +11,7 @@ module.exports = GitBook.createPlugin({ dispatch(Components.registerComponent(MethodBlock, { role: 'block:method' })); dispatch(Components.registerComponent(PageContainer, { role: 'page:container' })); dispatch(Components.registerComponent(DisplayButton, { role: 'toolbar:buttons:left' })); + dispatch(Components.registerComponent(LanguagesButtons, { role: 'toolbar:buttons:right' })); // Get default language in config const configLanguages = getState().config.getIn(['pluginsConfig', 'theme-api', 'languages']); diff --git a/src/less/website/langswitcher.less b/src/less/website/langswitcher.less index b249042..35880e1 100644 --- a/src/less/website/langswitcher.less +++ b/src/less/website/langswitcher.less @@ -1,11 +1,10 @@ -.book-header .btn.lang-switcher { - /*color: @button-hover-color;*/ +.ThemeApi-LanguageButton { text-transform: none; font-weight: 500; border-radius: 0; - &.active { + &.ThemeApi-ActiveButton { background-color: @lang-switcher-active-bg-color; color: @lang-switcher-active-color; } -} \ No newline at end of file +} From 671daef15638044aa00ebceb06542c1e93199e31 Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Sat, 15 Oct 2016 16:55:54 +0200 Subject: [PATCH 18/30] Update LESS files --- src/less/website.less | 8 ++------ src/less/website/{api-method.less => ApiMethod.less} | 0 .../website/{langswitcher.less => LanguageButton.less} | 4 ++-- src/less/website/variables.less | 8 ++++---- 4 files changed, 8 insertions(+), 12 deletions(-) rename src/less/website/{api-method.less => ApiMethod.less} (100%) rename src/less/website/{langswitcher.less => LanguageButton.less} (56%) diff --git a/src/less/website.less b/src/less/website.less index 886b617..a7770e8 100755 --- a/src/less/website.less +++ b/src/less/website.less @@ -2,9 +2,9 @@ @import "website/mixins.less"; @import "website/variables.less"; -@import "website/api-method.less"; +@import "website/ApiMethod.less"; @import "website/header.less"; -@import "website/langswitcher.less"; +@import "website/LanguageButton.less"; @import "website/search.less"; @import "website/comments.less"; @import "themes/themes.less"; @@ -18,7 +18,3 @@ padding-left: @api-method-padding + 10; padding-right: @api-method-padding + 10; } - -.markdown-section { - padding: @markdown-section-padding @api-method-padding 0; -} diff --git a/src/less/website/api-method.less b/src/less/website/ApiMethod.less similarity index 100% rename from src/less/website/api-method.less rename to src/less/website/ApiMethod.less diff --git a/src/less/website/langswitcher.less b/src/less/website/LanguageButton.less similarity index 56% rename from src/less/website/langswitcher.less rename to src/less/website/LanguageButton.less index 35880e1..c77cd96 100644 --- a/src/less/website/langswitcher.less +++ b/src/less/website/LanguageButton.less @@ -4,7 +4,7 @@ border-radius: 0; &.ThemeApi-ActiveButton { - background-color: @lang-switcher-active-bg-color; - color: @lang-switcher-active-color; + background-color: @language-button-active-bg-color; + color: @language-button-active-color; } } diff --git a/src/less/website/variables.less b/src/less/website/variables.less index 0ab25d2..a5a5b04 100644 --- a/src/less/website/variables.less +++ b/src/less/website/variables.less @@ -7,9 +7,9 @@ @api-code-background: @color-gray-lightest; @api-method-border: 1px solid @api-soft-grey; -// Language switchers -@lang-switcher-active-bg-color: #03677D; -@lang-switcher-active-color: #FFF; +// Language buttons +@language-button-active-bg-color: #03677D; +@language-button-active-color: #FFF; // Page @markdown-section-padding: 20px; @@ -22,4 +22,4 @@ // Sidebar @sidebar-transition-duration: 250ms; @sidebar-width: 300px; -@sidebar-breakpoint: 600px; \ No newline at end of file +@sidebar-breakpoint: 600px; From e1e687c971d9383c08c05272349f99a7c89201af Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Sat, 15 Oct 2016 16:56:17 +0200 Subject: [PATCH 19/30] Handle switching language from LanguageButton components --- src/components/LanguagesButtons.js | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/src/components/LanguagesButtons.js b/src/components/LanguagesButtons.js index 8535403..2bbcc15 100644 --- a/src/components/LanguagesButtons.js +++ b/src/components/LanguagesButtons.js @@ -1,7 +1,8 @@ -const GitBook = require('gitbook-core'); -const { React } = GitBook; -const { List } = GitBook.Immutable; -const classNames = require('classnames'); +const GitBook = require('gitbook-core'); +const { React } = GitBook; +const { List } = GitBook.Immutable; +const classNames = require('classnames'); +const selectLanguage = require('../actions').selectLanguage; const languageShape = React.PropTypes.shape({ lang: React.PropTypes.string.isRequired, @@ -11,19 +12,20 @@ const languageShape = React.PropTypes.shape({ const LanguageButton = React.createClass({ propTypes: { - language: languageShape, - active: React.PropTypes.bool + language: languageShape.isRequired, + active: React.PropTypes.bool, + onClick: React.PropTypes.func.isRequired }, render() { - const { language, active } = this.props; + const { language, active, onClick } = this.props; const className = classNames('ThemeApi-LanguageButton', { 'ThemeApi-ActiveButton': active }); return ( - + onClick(language.lang)}> { language.name } ); @@ -32,15 +34,21 @@ const LanguageButton = React.createClass({ const LanguagesButtons = React.createClass({ propTypes: { + dispatch: React.PropTypes.func.isRequired, languages: React.PropTypes.arrayOf(languageShape).isRequired, selectedLanguage: React.PropTypes.string.isRequired }, + onButtonClick(language) { + const { dispatch } = this.props; + dispatch(selectLanguage(language)); + }, + render() { const { languages, selectedLanguage } = this.props; return ( - { languages.map((language, i) => ) } + { languages.map((language, i) => ) } ); } From bdb59163515abc183346e2499b73bd865d638591 Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Sun, 16 Oct 2016 12:10:54 +0200 Subject: [PATCH 20/30] Add actions to call of createPlugin() --- src/index.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/index.js b/src/index.js index f93b187..8efe327 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,11 @@ -const GitBook = require('gitbook-core'); -const MethodBlock = require('./components/MethodBlock'); -const PageContainer = require('./components/PageContainer'); -const DisplayButton = require('./components/DisplayButton'); +const GitBook = require('gitbook-core'); +const MethodBlock = require('./components/MethodBlock'); +const PageContainer = require('./components/PageContainer'); +const DisplayButton = require('./components/DisplayButton'); const LanguagesButtons = require('./components/LanguagesButtons'); -const actions = require('./actions'); -const reduce = require('./reducers'); + +const actions = require('./actions'); +const reduce = require('./reducers'); module.exports = GitBook.createPlugin({ activate: (dispatch, getState, { Components }) => { @@ -27,5 +28,6 @@ module.exports = GitBook.createPlugin({ // Set as selected language dispatch(actions.selectLanguage(defaultLanguage.get('lang'))); }, - reduce + reduce, + actions }); From 3f0dc8bf9ded6a059b9190f62a441faed6701212 Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Sun, 16 Oct 2016 12:13:51 +0200 Subject: [PATCH 21/30] Set actions in ThemeApi namespace --- src/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 8efe327..9ff2371 100644 --- a/src/index.js +++ b/src/index.js @@ -29,5 +29,7 @@ module.exports = GitBook.createPlugin({ dispatch(actions.selectLanguage(defaultLanguage.get('lang'))); }, reduce, - actions + actions: { + ThemeApi: actions + } }); From fe0db8b54a5c4439a7f0db4fe2583fff2a07fa35 Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Mon, 17 Oct 2016 09:57:55 +0200 Subject: [PATCH 22/30] Delete extras from config files --- .gitignore | 26 -------------------------- .npmignore | 2 +- 2 files changed, 1 insertion(+), 27 deletions(-) diff --git a/.gitignore b/.gitignore index 9f0b909..390b049 100644 --- a/.gitignore +++ b/.gitignore @@ -1,31 +1,5 @@ -# Logs -logs -*.log - -# Runtime data -pids -*.pid -*.seed - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul -coverage - -# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# Compiled binary addons (http://nodejs.org/api/addons.html) -build/Release - # Dependency directory -# Deployed apps should consider commenting this line out: -# see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git node_modules -# vim swapfile -*.swp - # Plugin assets _assets/ diff --git a/.npmignore b/.npmignore index 7bc36b7..6fcb8dd 100644 --- a/.npmignore +++ b/.npmignore @@ -1,2 +1,2 @@ # Publish assets on NPM -!_assets +!_assets/ From df99918fb0e9a4de9648f20e0f529a8013b49625 Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Mon, 17 Oct 2016 09:58:36 +0200 Subject: [PATCH 23/30] Clean extra files and dependencies --- _layouts/website/page.html | 4 - index.js | 11 --- languages.js | 2 +- package.json | 8 +- src/build.sh | 3 - src/js/theme-api.js | 166 ------------------------------------- 6 files changed, 4 insertions(+), 190 deletions(-) delete mode 100644 _layouts/website/page.html delete mode 100644 src/js/theme-api.js diff --git a/_layouts/website/page.html b/_layouts/website/page.html deleted file mode 100644 index d62b780..0000000 --- a/_layouts/website/page.html +++ /dev/null @@ -1,4 +0,0 @@ -{% extends template.self %} - -{% block book_navigation %} -{% endblock %} \ No newline at end of file diff --git a/index.js b/index.js index b6a7f77..0710109 100644 --- a/index.js +++ b/index.js @@ -1,21 +1,10 @@ var _ = require('lodash'); var Promise = require('q-plus'); -var cheerio = require('cheerio'); var DEFAULT_LANGUAGES = require('./languages'); var configLanguages = []; module.exports = { - book: { - assets: './assets', - js: [ - 'theme-api.js' - ], - css: [ - 'theme-api.css' - ] - }, - blocks: { method: { blocks: [ 'sample', 'common' ], diff --git a/languages.js b/languages.js index ba5f097..1d64b4d 100644 --- a/languages.js +++ b/languages.js @@ -1027,4 +1027,4 @@ module.exports = [ 'lang': 'zep', 'name': 'Zephir' } -]; \ No newline at end of file +]; diff --git a/package.json b/package.json index 0570d90..eaa42c2 100644 --- a/package.json +++ b/package.json @@ -6,21 +6,19 @@ "gitbook": ">=4.0.0-alpha" }, "dependencies": { - "cheerio": "0.20.0", - "classnames": "^2.2.5", - "gitbook-plugin-search": ">=2.0.0", + "gitbook-core": "4.0.0", "lodash": "4.12.0", "q": "1.4.1", "q-plus": "0.0.8" }, "devDependencies": { + "classnames": "^2.2.5", "eslint": "^3.7.1", "eslint-config-gitbook": "^1.3.1", "gitbook-plugin": "4.0.0", "less": "^2.7.1", "less-plugin-clean-css": "^1.5.1", - "preboot": "git+https://github.com/mdo/preboot.git#4aab4edd85f076d50609cbe28e4fe66cc0771701", - "uglify-js": "2.6.1" + "preboot": "git+https://github.com/mdo/preboot.git#4aab4edd85f076d50609cbe28e4fe66cc0771701" }, "scripts": { "build-js": "gitbook-plugin build ./src/index.js ./_assets/plugin.js", diff --git a/src/build.sh b/src/build.sh index 9af3a50..6bd6995 100755 --- a/src/build.sh +++ b/src/build.sh @@ -7,9 +7,6 @@ rm -rf _assets/website # Recreate folder mkdir -p _assets/website -# Compile JS -# uglifyjs -mc -- src/js/theme-api.js > assets/theme-api.js - echo "Compiling LESS sources..." # Compile Website CSS lessc -clean-css src/less/website.less _assets/website/theme-api.css diff --git a/src/js/theme-api.js b/src/js/theme-api.js deleted file mode 100644 index b670345..0000000 --- a/src/js/theme-api.js +++ /dev/null @@ -1,166 +0,0 @@ -require(['gitbook', 'jquery'], function(gitbook, $) { - var buttonsId = [], - $codes, - themeApi; - - // Default themes - var THEMES = [ - { - config: 'light', - text: 'Light', - id: 0 - }, - { - config: 'dark', - text: 'Dark', - id: 3 - } - ]; - - // Instantiate localStorage - function init(config) { - themeApi = gitbook.storage.get('themeApi', { - split: config.split, - currentLang: null - }); - } - - // Update localStorage settings - function saveSettings() { - gitbook.storage.set('themeApi', themeApi); - updateDisplay(); - } - - // Update display - function updateDisplay() { - // Update layout - $('.book').toggleClass('two-columns', themeApi.split); - - // Update code samples elements - $codes = $('.api-method-sample'); - // Display corresponding code snippets - $codes.each(function() { - // Show corresponding - var hidden = !($(this).data('lang') == themeApi.currentLang); - $(this).toggleClass('hidden', hidden); - }); - } - - // Update code tabs - function updateCodeTabs() { - // Remove languages buttons - gitbook.toolbar.removeButtons(buttonsId); - buttonsId = []; - - // Update code snippets elements - $codes = $('.api-method-sample'); - - // Recreate languages buttons - var languages = [], - hasCurrentLang = false; - - $codes.each(function() { - var isDefault = false, - codeLang = $(this).data('lang'), - codeName = $(this).data('name'), - exists, - found; - - // Check if is current language - if (codeLang == themeApi.currentLang) { - hasCurrentLang = true; - isDefault = true; - } - - // Check if already added - exists = $.grep(languages, function(language) { - return language.name == codeName; - }); - - found = !!exists.length; - - if (!found) { - // Add language - languages.push({ - name: codeName, - lang: codeLang, - default: isDefault - }); - } - }); - - // Set languages in good order - languages.reverse(); - $.each(languages, function(i, language) { - // Set first (last in array) language as active if no default - var isDefault = language.default || (!hasCurrentLang && i == (languages.length - 1)), - buttonId; - - // Create button - buttonId = gitbook.toolbar.createButton({ - text: language.name, - position: 'right', - className: 'lang-switcher' + (isDefault? ' active': ''), - onClick: function(e) { - // Update language - themeApi.currentLang = language.lang; - saveSettings(); - - // Update active button - $('.btn.lang-switcher.active').removeClass('active'); - $(e.currentTarget).addClass('active'); - } - }); - - // Add to list of buttons - buttonsId.push(buttonId); - - // Set as current language if is default - if (isDefault) { - themeApi.currentLang = language.lang; - } - }); - } - - // Initialization - gitbook.events.bind('start', function(e, config) { - var opts = config['theme-api']; - - // Create layout button in toolbar - gitbook.toolbar.createButton({ - icon: 'fa fa-columns', - label: 'Change Layout', - onClick: function() { - // Update layout - themeApi.split = !themeApi.split; - saveSettings(); - } - }); - - // Initialize themes - gitbook.fontsettings.setThemes(THEMES); - - // Set to configured theme - gitbook.fontsettings.setTheme(opts.theme); - - // Init current settings - init(opts); - }); - - // Update state - gitbook.events.on('page.change', function() { - updateCodeTabs(); - // updateComments(); - updateDisplay(); - }); - - // Comments toggled event - gitbook.events.on('comment.toggled', function(e, $from, open) { - // If triggering element is in a definition - if (!!$from.parents('.api-method-definition').length) { - // Add class to wrapper only if comments are open and in two-columns mode - var $wrapper = gitbook.state.$book.find('.page-wrapper'); - $wrapper.toggleClass('comments-open-from-definition', open && themeApi.split); - } - }); -}); From 9c4b55cb48fc7ec9a39f9b1f49fadd9a98835a94 Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Mon, 17 Oct 2016 09:58:44 +0200 Subject: [PATCH 24/30] Rename actions properly --- src/actions/types.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/actions/types.js b/src/actions/types.js index 9e8c73f..a301e3f 100644 --- a/src/actions/types.js +++ b/src/actions/types.js @@ -1,4 +1,4 @@ module.exports = { - SELECT_LANGUAGE: 'theme-api/language:select', - TOGGLE_DISPLAY_MODE: 'theme-api/split:toggle' + SELECT_LANGUAGE: 'theme-api/language/select', + TOGGLE_DISPLAY_MODE: 'theme-api/display/toggle' }; From f9d1aa0b37a35df55de39b0821f8a9ac232255f9 Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Tue, 18 Oct 2016 11:05:02 +0200 Subject: [PATCH 25/30] Replace GitBook.Shapes with GitBook.PropTypes --- src/components/PageContainer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PageContainer.js b/src/components/PageContainer.js index a7ff99f..a56efcb 100644 --- a/src/components/PageContainer.js +++ b/src/components/PageContainer.js @@ -4,7 +4,7 @@ const classNames = require('classnames'); const PageContainer = React.createClass({ propTypes: { - page: GitBook.Shapes.Page, + page: GitBook.PropTypes.Page, split: React.PropTypes.bool }, From 863c05fe74976ccec48ef295e7fd957976ba2d34 Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Tue, 18 Oct 2016 11:13:42 +0200 Subject: [PATCH 26/30] Add BodyWrapper component --- src/components/BodyWrapper.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/components/BodyWrapper.js diff --git a/src/components/BodyWrapper.js b/src/components/BodyWrapper.js new file mode 100644 index 0000000..23acc4a --- /dev/null +++ b/src/components/BodyWrapper.js @@ -0,0 +1,19 @@ +const GitBook = require('gitbook-core'); +const { React } = GitBook; +const { StickyContainer } = require('react-sticky'); + +const BodyWrapper = React.createClass({ + propTypes: { + children: React.PropTypes.node.isRequired + }, + + render() { + return ( + + {this.props.children} + + ); + } +}); + +module.exports = BodyWrapper; From 147ff485ee77bbe9e21fdc93620b4faf266aac05 Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Tue, 18 Oct 2016 11:13:48 +0200 Subject: [PATCH 27/30] Add ToolbarWrapper component --- src/components/ToolbarWrapper.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/components/ToolbarWrapper.js diff --git a/src/components/ToolbarWrapper.js b/src/components/ToolbarWrapper.js new file mode 100644 index 0000000..ea48bbd --- /dev/null +++ b/src/components/ToolbarWrapper.js @@ -0,0 +1,19 @@ +const GitBook = require('gitbook-core'); +const { React } = GitBook; +const { Sticky } = require('react-sticky'); + +const ToolbarWrapper = React.createClass({ + propTypes: { + children: React.PropTypes.node.isRequired + }, + + render() { + return ( + + {this.props.children} + + ); + } +}); + +module.exports = ToolbarWrapper; From 1aede34d7bd5cd5f37a3d48ba99982b5bbffb83c Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Tue, 18 Oct 2016 11:14:08 +0200 Subject: [PATCH 28/30] Add react and react-dom to dependencies for react-sticky --- package.json | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index eaa42c2..a210247 100644 --- a/package.json +++ b/package.json @@ -6,19 +6,22 @@ "gitbook": ">=4.0.0-alpha" }, "dependencies": { - "gitbook-core": "4.0.0", + "gitbook-core": "^4.0.0", "lodash": "4.12.0", "q": "1.4.1", - "q-plus": "0.0.8" + "q-plus": "0.0.8", + "react": "^15.3.1", + "react-dom": "^15.3.1" }, "devDependencies": { "classnames": "^2.2.5", "eslint": "^3.7.1", "eslint-config-gitbook": "^1.3.1", - "gitbook-plugin": "4.0.0", + "gitbook-plugin": "^4.0.0", "less": "^2.7.1", "less-plugin-clean-css": "^1.5.1", - "preboot": "git+https://github.com/mdo/preboot.git#4aab4edd85f076d50609cbe28e4fe66cc0771701" + "preboot": "git+https://github.com/mdo/preboot.git#4aab4edd85f076d50609cbe28e4fe66cc0771701", + "react-sticky": "5.0.5" }, "scripts": { "build-js": "gitbook-plugin build ./src/index.js ./_assets/plugin.js", From 33319ea60a03fa3bd21b9ff09cf487f70587e8be Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Tue, 18 Oct 2016 11:14:20 +0200 Subject: [PATCH 29/30] Include components in theme --- src/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/index.js b/src/index.js index 9ff2371..0eb0482 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,6 @@ const GitBook = require('gitbook-core'); +const BodyWrapper = require('./components/BodyWrapper'); +const ToolbarWrapper = require('./components/ToolbarWrapper'); const MethodBlock = require('./components/MethodBlock'); const PageContainer = require('./components/PageContainer'); const DisplayButton = require('./components/DisplayButton'); @@ -9,6 +11,8 @@ const reduce = require('./reducers'); module.exports = GitBook.createPlugin({ activate: (dispatch, getState, { Components }) => { + dispatch(Components.registerComponent(BodyWrapper, { role: 'body:wrapper' })); + dispatch(Components.registerComponent(ToolbarWrapper, { role: 'toolbar:wrapper' })); dispatch(Components.registerComponent(MethodBlock, { role: 'block:method' })); dispatch(Components.registerComponent(PageContainer, { role: 'page:container' })); dispatch(Components.registerComponent(DisplayButton, { role: 'toolbar:buttons:left' })); From 7cfdb67f875aa3f4b6e8df992b4f0587636a09a7 Mon Sep 17 00:00:00 2001 From: Johan Preynat Date: Tue, 18 Oct 2016 11:14:36 +0200 Subject: [PATCH 30/30] Add styling for sticky toolbar --- src/less/website.less | 1 + src/less/website/Toolbar.less | 4 ++++ 2 files changed, 5 insertions(+) create mode 100644 src/less/website/Toolbar.less diff --git a/src/less/website.less b/src/less/website.less index a7770e8..347aa55 100755 --- a/src/less/website.less +++ b/src/less/website.less @@ -3,6 +3,7 @@ @import "website/mixins.less"; @import "website/variables.less"; @import "website/ApiMethod.less"; +@import "website/Toolbar.less"; @import "website/header.less"; @import "website/LanguageButton.less"; @import "website/search.less"; diff --git a/src/less/website/Toolbar.less b/src/less/website/Toolbar.less new file mode 100644 index 0000000..fc8332c --- /dev/null +++ b/src/less/website/Toolbar.less @@ -0,0 +1,4 @@ +.ThemeApi-Toolbar { + background-color: white; + z-index: 300; +}