Add style for plugin hint

7 files changed, 59 insertions, 55 deletions

diff --git a/packages/gitbook-plugin-hints/.gitignore b/packages/gitbook-plugin-hints/.gitignore
index 7c6f0eb..ef47881 100644
--- a/packages/gitbook-plugin-hints/.gitignore
+++ b/packages/gitbook-plugin-hints/.gitignore
@@ -28,4 +28,4 @@ node_modules
 *.swp
 
 # Plugin assets
-_assets
+_assets/plugin.js
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/package.json b/packages/gitbook-plugin-hints/package.json
index bd9f65b..1635d36 100644
--- a/packages/gitbook-plugin-hints/package.json
+++ b/packages/gitbook-plugin-hints/package.json
@@ -2,7 +2,7 @@
   "name": "gitbook-plugin-hints",
   "description": "Defines four types of styled hint blocks: info, danger, tip, working.",
   "main": "index.js",
-  "browser": "./_assets/theme.js",
+  "browser": "./_assets/plugin.js",
   "version": "2.0.0",
   "dependencies": {
     "classnames": "^2.2.5",
@@ -15,7 +15,7 @@
     "gitbook": ">=4.0.0"
   },
   "scripts": {
-    "build-js": "gitbook-plugin build ./src/index.js ./_assets/theme.js",
+    "build-js": "gitbook-plugin build ./src/index.js ./_assets/plugin.js",
     "prepublish": "npm run build-js"
   },
   "homepage": "https://github.com/GitBookIO/gitbook",
diff --git a/packages/gitbook-plugin-hints/src/index.js b/packages/gitbook-plugin-hints/src/index.js
index be29f1b..2ee8a1f 100644
--- a/packages/gitbook-plugin-hints/src/index.js
+++ b/packages/gitbook-plugin-hints/src/index.js
@@ -3,8 +3,9 @@ const GitBook = require('gitbook-core');
 const { React } = GitBook;
 
 const STYLE_TO_ICON = {
-    info:    'info',
+    info:    'info-circle',
     tip:     'question',
+    success: 'check-circle',
     danger:  'exclamation-circle',
     warning: 'exclamation-triangle'
 };
@@ -18,14 +19,18 @@ const HintAlert = React.createClass({
 
     render() {
         const { children, style, icon } = this.props;
-        const className = classNames('HintAlert', 'alert', `alert-${style}`);
+        const className = classNames(
+            'HintAlert', `HintAlert-Style-${style}`,
+            'alert', `alert-${style}`
+        );
 
         return (
             <div className={className}>
-                <div className="HintAlert/Icon">
+                <GitBook.ImportCSS href="gitbook/hints/plugin.css" />
+                <div className="HintAlert-Icon">
                     <GitBook.Icon id={icon || STYLE_TO_ICON[style]} />
                 </div>
-                <div className="HintAlert/Content">
+                <div className="HintAlert-Content">
                     {children}
                 </div>
             </div>
diff --git a/packages/gitbook-plugin-theme-default/src/components/Theme.js b/packages/gitbook-plugin-theme-default/src/components/Theme.js
index b71e409..25f8e1d 100644
--- a/packages/gitbook-plugin-theme-default/src/components/Theme.js
+++ b/packages/gitbook-plugin-theme-default/src/components/Theme.js
@@ -22,7 +22,7 @@ const Theme = React.createClass({
                 <GitBook.Head
                     title={page.title}
                     titleTemplate="%s - GitBook" />
-                <GitBook.ImportCSS href="gitbook/theme.css" />
+                <GitBook.ImportCSS href="gitbook/theme-default/theme.css" />
 
                 <GitBook.FlexBox>
                     <GitBook.FlexLayout>
diff --git a/packages/gitbook-plugin/template/.npmignore b/packages/gitbook-plugin/template/.npmignore
new file mode 100644
index 0000000..a0e53cf
--- /dev/null
+++ b/packages/gitbook-plugin/template/.npmignore
@@ -0,0 +1,2 @@
+# Publish assets on NPM
+!_assets/plugin.js
diff --git a/packages/gitbook/src/output/website/copyPluginAssets.js b/packages/gitbook/src/output/website/copyPluginAssets.js
index bf5f488..41c377a 100644
--- a/packages/gitbook/src/output/website/copyPluginAssets.js
+++ b/packages/gitbook/src/output/website/copyPluginAssets.js
@@ -28,7 +28,6 @@ function copyPluginAssets(output) {
 
     return Promise.forEach(plugins, function(plugin) {
         return copyAssets(output, plugin)
-        .then(() => copyResources(output, plugin))
         .then(() => copyBrowserJS(output, plugin));
     })
     .then(() => copyCoreJS(output))
@@ -47,10 +46,10 @@ function copyAssets(output, plugin) {
     const options = output.getOptions();
 
     const outputRoot = options.get('root');
-    const assetOutputFolder = path.join(outputRoot, 'gitbook');
     const prefix = options.get('prefix');
 
     const assetFolder = path.join(pluginRoot, ASSET_FOLDER, prefix);
+    const assetOutputFolder = path.join(outputRoot, 'gitbook', plugin.getName());
 
     if (!fs.existsSync(assetFolder)) {
         return Promise();
@@ -113,49 +112,4 @@ function copyCoreJS(output) {
     .then(() => fs.copy(inputFile, outputFile));
 }
 
-/**
- * Copy resources from a plugin
- *
- * @param {Plugin}
- * @return {Promise}
- */
-function copyResources(output, plugin) {
-    const logger = output.getLogger();
-
-    const options    = output.getOptions();
-    const outputRoot = options.get('root');
-
-    const state = output.getState();
-    const resources = state.getResources();
-
-    const pluginRoot      = plugin.getPath();
-    const pluginResources = resources.get(plugin.getName());
-
-    let assetsFolder = pluginResources.get('assets');
-    const assetOutputFolder = path.join(outputRoot, 'gitbook', plugin.getNpmID());
-
-    if (!assetsFolder) {
-        return Promise();
-    }
-
-    // Resolve assets folder
-    assetsFolder = path.resolve(pluginRoot, assetsFolder);
-    if (!fs.existsSync(assetsFolder)) {
-        logger.warn.ln('assets folder for plugin "' + plugin.getName() + '" doesn\'t exist');
-        return Promise();
-    }
-
-    logger.debug.ln('copy resources from plugin', assetsFolder);
-
-    return fs.copyDir(
-        assetsFolder,
-        assetOutputFolder,
-        {
-            deleteFirst: false,
-            overwrite: true,
-            confirm: true
-        }
-    );
-}
-
 module.exports = copyPluginAssets;