Update theme for GitBook v4

.eslintignore

@@ -0,0 +1,3 @@
+node_modules/
+_assets/
+/index.js

.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"
-}
+    "extends": "gitbook"
+}

.gitignore

@@ -1,30 +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
-
-assets
+# Plugin assets
+_assets/

.npmignore

@@ -1,2 +1,2 @@
-# Allow _assets folder
-!assets
+# Publish assets on NPM
+!_assets/

index.js

@@ -1,108 +1,56 @@
-var _ = require('lodash');
-var Q = require('q-plus');
-var cheerio = require('cheerio');
+var _       = require('lodash');
+var Promise = require('q-plus');
 
 var DEFAULT_LANGUAGES = require('./languages');
 var configLanguages = [];
 
-function generateMethod(book, body, examples) {
-    // Main container
-    var $ = cheerio.load('<div class="api-method"></div>'),
-        $apiMethod = $('div.api-method'),
-    // Method definition
-        $apiDefinition = $('<div class="api-method-definition"></div>'),
-    // Method code
-        $apiCode = $('<div class="api-method-code"></div>');
-
-    // 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 = $('<div class="api-method-example"></div>');
-
-            }
-
-            // Example code snippet
-            if (example.type == 'sample') {
-                $example = $('<div class="api-method-sample" data-lang="'+example.lang+'" data-name="'+example.name+'"></div>');
-            }
-
-            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',
-        js: [
-            'theme-api.js'
-        ],
-        css: [
-            'theme-api.css'
-        ]
-    },
-
     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)
-                };
             }
         }
     },

languages.js

@@ -1027,4 +1027,4 @@ module.exports = [
         'lang': 'zep',
         'name': 'Zephir'
     }
-];
+];

package.json

@@ -3,25 +3,34 @@
   "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",
-    "gitbook-plugin-search": ">=2.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": {
-    "eslint": "2.9.0",
-    "less": "2.6.0",
+    "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"
+    "react-sticky": "5.0.5"
   },
   "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"

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
+};

src/actions/types.js

@@ -0,0 +1,4 @@
+module.exports = {
+    SELECT_LANGUAGE:     'theme-api/language/select',
+    TOGGLE_DISPLAY_MODE: 'theme-api/display/toggle'
+};

src/build.sh

@@ -1,13 +1,14 @@
 #! /bin/bash
 
+echo "Cleaning up folder..."
 # Cleanup folder
-rm -rf assets
+rm -rf _assets/website
 
 # Recreate folder
-mkdir -p assets
-
-# Compile JS
-uglifyjs -mc -- src/js/theme-api.js > assets/theme-api.js
+mkdir -p _assets/website
 
+echo "Compiling LESS sources..."
 # Compile Website CSS
-lessc -clean-css src/less/website.less assets/theme-api.css
+lessc -clean-css src/less/website.less _assets/website/theme-api.css
+
+echo "Done :)"

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 (
+            <StickyContainer>
+                {this.props.children}
+            </StickyContainer>
+        );
+    }
+});
+
+module.exports = BodyWrapper;

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 (
+            <GitBook.Button onClick={this.onClick}>
+                <GitBook.Icon id="columns" />
+            </GitBook.Button>
+        );
+    }
+});
+
+module.exports = GitBook.connect(DisplayButton);