7 files changed, 203 insertions, 0 deletions
diff --git a/packages/gitbook-plugin-hints/.gitignore b/packages/gitbook-plugin-hints/.gitignore
new file mode 100644
index 0000000..ef47881
--- /dev/null
+++ b/packages/gitbook-plugin-hints/.gitignore
@@ -0,0 +1,31 @@
+# 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/plugin.js
diff --git a/packages/gitbook-plugin-hints/.npmignore b/packages/gitbook-plugin-hints/.npmignore
new file mode 100644
index 0000000..a0e53cf
--- /dev/null
+++ b/packages/gitbook-plugin-hints/.npmignore
@@ -0,0 +1,2 @@
+# Publish assets on NPM
+!_assets/plugin.js
diff --git a/packages/gitbook-plugin-hints/README.md b/packages/gitbook-plugin-hints/README.md
new file mode 100644
index 0000000..9952b97
--- /dev/null
+++ b/packages/gitbook-plugin-hints/README.md
@@ -0,0 +1,41 @@
+Styled hint blocks in your docs
+==============
+
+This plugins requires gitbook `>=4.0.0`.
+
+### Install
+
+Add the below to your `book.json` file, then run `gitbook install` :
+
+```json
+{
+    "plugins": ["hints"]
+}
+```
+
+### Usage
+
+You can now provide hints in various ways using the `hint` tag.
+
+```markdown
+{% hint style='info' %}
+Important info: this note needs to be highlighted
+{% endhint %}
+```
+
+##### Styles
+
+Available styles are:
+
+- `info` (default)
+- `tip`
+- `danger`
+- `warning`
+
+##### Custom Icons
+
+```markdown
+{% hint style='info' icon="mail" %}
+Important info: this note needs to be highlighted
+{% endhint %}
+```
diff --git a/packages/gitbook-plugin-hints/_assets/website/plugin.css b/packages/gitbook-plugin-hints/_assets/website/plugin.css
new file mode 100644
index 0000000..343201b
--- /dev/null
+++ b/packages/gitbook-plugin-hints/_assets/website/plugin.css
@@ -0,0 +1,43 @@
+.HintAlert {
+    padding: 10px;
+    border-radius: 3px;
+    display: flex;
+    margin-bottom: 1.275em;
+}
+
+.HintAlert-Icon {
+    flex: 0;
+    padding: 10px 20px;
+    font-size: 24px;
+}
+
+.HintAlert-Content {
+    flex: auto;
+    padding: 10px;
+    padding-left: 0px;
+}
+
+/* Styles */
+.HintAlert-Style-info, .HintAlert-Style-tip {
+    color: #31708f;
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+
+.HintAlert-Style-success {
+    color: #3c763d;
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+
+.HintAlert-Style-danger {
+    color: #a94442;
+    background-color: #f2dede;
+    border-color: #ebccd1;
+}
+
+.HintAlert-Style-warning {
+    color: #8a6d3b;
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
diff --git a/packages/gitbook-plugin-hints/index.js b/packages/gitbook-plugin-hints/index.js
new file mode 100644
index 0000000..c762232
--- /dev/null
+++ b/packages/gitbook-plugin-hints/index.js
@@ -0,0 +1,12 @@
+
+module.exports = {
+    blocks: {
+        hint: ({ kwargs, children }) => {
+            return {
+                children,
+                style: kwargs.style || 'info',
+                icon:  kwargs.icon
+            };
+        }
+    }
+};
diff --git a/packages/gitbook-plugin-hints/package.json b/packages/gitbook-plugin-hints/package.json
new file mode 100644
index 0000000..3afad4d
--- /dev/null
+++ b/packages/gitbook-plugin-hints/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "gitbook-plugin-hints",
+  "description": "Defines four types of styled hint blocks: info, danger, tip, working.",
+  "main": "index.js",
+  "browser": "./_assets/plugin.js",
+  "version": "4.0.0",
+  "dependencies": {
+    "classnames": "^2.2.5",
+    "gitbook-core": "4.0.0"
+  },
+  "devDependencies": {
+    "gitbook-plugin": "4.0.0"
+  },
+  "engines": {
+    "gitbook": ">=4.0.0"
+  },
+  "scripts": {
+    "build-js": "gitbook-plugin build ./src/index.js ./_assets/plugin.js",
+    "prepublish": "npm run build-js"
+  },
+  "homepage": "https://github.com/GitBookIO/gitbook",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GitBookIO/gitbook.git"
+  },
+  "bugs": {
+    "url": "https://github.com/GitBookIO/gitbook/issues"
+  }
+}
diff --git a/packages/gitbook-plugin-hints/src/index.js b/packages/gitbook-plugin-hints/src/index.js
new file mode 100644
index 0000000..2ee8a1f
--- /dev/null
+++ b/packages/gitbook-plugin-hints/src/index.js
@@ -0,0 +1,45 @@
+const classNames = require('classnames');
+const GitBook = require('gitbook-core');
+const { React } = GitBook;
+
+const STYLE_TO_ICON = {
+    info:    'info-circle',
+    tip:     'question',
+    success: 'check-circle',
+    danger:  'exclamation-circle',
+    warning: 'exclamation-triangle'
+};
+
+const HintAlert = React.createClass({
+    propTypes: {
+        icon:     React.PropTypes.string,
+        style:    React.PropTypes.string,
+        children: React.PropTypes.node
+    },
+
+    render() {
+        const { children, style, icon } = this.props;
+        const className = classNames(
+            'HintAlert', `HintAlert-Style-${style}`,
+            'alert', `alert-${style}`
+        );
+
+        return (
+            <div className={className}>
+                <GitBook.ImportCSS href="gitbook/hints/plugin.css" />
+                <div className="HintAlert-Icon">
+                    <GitBook.Icon id={icon || STYLE_TO_ICON[style]} />
+                </div>
+                <div className="HintAlert-Content">
+                    {children}
+                </div>
+            </div>
+        );
+    }
+});
+
+module.exports = GitBook.createPlugin({
+    activate: (dispatch, getState, { Components }) => {
+        dispatch(Components.registerComponent(HintAlert, { role: 'block:hint' }));
+    }
+});