diff --git a/README.md b/README.md index 4b0c562..d2ef756 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ Add the below to your `book.json` file, then run `gitbook install` : ```json { - "plugins": ["hints"] + "plugins": [ "hints" ] } ``` @@ -26,7 +26,7 @@ The above example will produce a styled alert, with an icon: ``` html
-
+

Important info: this note needs to be highlighted

@@ -35,25 +35,7 @@ The above example will produce a styled alert, with an icon: Available styles are: -- `info` (default) -- `tip` - `danger` -- `working` - -### Configuration - -You can specify custom classes for the icons (or none) in your `book.json`: - -```json -{ - "plugins": ["hints"], - "pluginsConfig": { - "hints": { - "info": "fa fa-info-circle", - "tip": "fa fa-mortar-board", - "danger": "fa fa-exclamation-cicle", - "working": "fa fa-wrench" - } - } -} -``` +- `info` (default) +- `success` +- `warning` diff --git a/assets/fonts/icomoon.eot b/assets/fonts/icomoon.eot new file mode 100644 index 0000000..be99f5a Binary files /dev/null and b/assets/fonts/icomoon.eot differ diff --git a/assets/fonts/icomoon.svg b/assets/fonts/icomoon.svg new file mode 100644 index 0000000..dcd875f --- /dev/null +++ b/assets/fonts/icomoon.svg @@ -0,0 +1,14 @@ + + + +Generated by IcoMoon + + + + + + + + + + \ No newline at end of file diff --git a/assets/fonts/icomoon.ttf b/assets/fonts/icomoon.ttf new file mode 100644 index 0000000..9099ee8 Binary files /dev/null and b/assets/fonts/icomoon.ttf differ diff --git a/assets/fonts/icomoon.woff b/assets/fonts/icomoon.woff new file mode 100644 index 0000000..c0f42a2 Binary files /dev/null and b/assets/fonts/icomoon.woff differ diff --git a/assets/icons.css b/assets/icons.css new file mode 100644 index 0000000..2e2c864 --- /dev/null +++ b/assets/icons.css @@ -0,0 +1,38 @@ +@font-face { + font-family: 'icomoon'; + src: url('fonts/icomoon.eot?ocmtqn'); + src: url('fonts/icomoon.eot?ocmtqn#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?ocmtqn') format('truetype'), + url('fonts/icomoon.woff?ocmtqn') format('woff'), + url('fonts/icomoon.svg?ocmtqn#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"], [class*=" icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icomoon' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-danger:before { + content: "\e901"; +} +.icon-info:before { + content: "\e903"; +} +.icon-success:before { + content: "\e902"; +} +.icon-warning:before { + content: "\e900"; +} diff --git a/assets/plugin-hints.css b/assets/plugin-hints.css index ed4480c..aa8ef66 100644 --- a/assets/plugin-hints.css +++ b/assets/plugin-hints.css @@ -1,9 +1,55 @@ +.alert { + border-left: 4px solid; + border-bottom: 0; + color: #444444; + overflow: auto; + padding-bottom: 0; +} + +.alert-danger { + background: #fdf7f7; + border-color: #d9534f; +} + +.alert-danger i { + color: #d9534f; +} + +.alert-info { + background: #eff5ff; + border-color: #42acf3; +} + +.alert-info i { + color: #42acf3; +} + +.alert-success { + background: #f3f8f3; + border-color: #50af51; +} + +.alert-success i { + color: #50af51; +} + +.alert-warning { + background: #fcf8f2; + border-color: #f0ad4e; +} + +.alert-warning i { + color: #f0ad4e; +} + +i[class^="icon-"] { + font-size: 1.5em; +} + .hints-icon { - display: table-cell; - padding-right: 15px; - padding-left: 5px; + position: absolute; } .hints-container { - display: table-cell; + padding-left: 40px; } diff --git a/index.js b/index.js index 0e88ace..1aff08f 100644 --- a/index.js +++ b/index.js @@ -1,8 +1,8 @@ var ALERT_STYLES = { - info:'info', - tip:'success', - danger:'danger', - working:'warning' + danger: 'danger', + info: 'info', + success: 'success', + warning: 'warning' }; /** @@ -12,7 +12,7 @@ var ALERT_STYLES = { */ function makeIcon(style, pluginConfig) { var id = pluginConfig[style]; - return '
'; + return '
'; } /** @@ -27,6 +27,7 @@ module.exports = { book: { assets: './assets', css: [ + 'icons.css', 'plugin-hints.css' ] }, @@ -34,14 +35,14 @@ module.exports = { blocks: { hint: { process: function (block) { - // Available styles: info, danger, tip, working + // Available styles: info, danger, success, warning var style = block.kwargs.style || 'info'; var pluginConfig = this.config.get('pluginsConfig.hints'); return this .renderBlock('markdown', block.body) .then(function(renderedBody) { - return '
' + return '
' + makeIcon(style, pluginConfig) + wrapInContainer(renderedBody) + '
'; diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..54a8795 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,5 @@ +{ + "name": "gitbook-plugin-hints", + "version": "1.0.2", + "lockfileVersion": 1 +} diff --git a/package.json b/package.json index c5874e5..5483c50 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "name": "gitbook-plugin-hints", - "description": "Defines four types of styled hint blocks: info, danger, tip, working.", + "description": "Defines four types of styled hint blocks: info, danger, success, warning.", "main": "index.js", - "version": "1.0.2", + "version": "2.0.0", "engines": { "gitbook": ">2.x.x" }, @@ -14,25 +14,21 @@ }, "gitbook": { "properties": { - "info": { + "danger": { "type": "string", - "title": "CSS class for the 'info' icons", - "default": "fa fa-info-circle" + "title": "CSS class for the 'danger' icons" }, - "tip": { + "info": { "type": "string", - "title": "CSS class for the 'tip' icons", - "default": "fa fa-mortar-board" + "title": "CSS class for the 'info' icons" }, - "danger": { + "success": { "type": "string", - "title": "CSS class for the 'danger' icons", - "default": "fa fa-exclamation-circle" + "title": "CSS class for the 'success' icons" }, - "working": { + "warning": { "type": "string", - "title": "CSS class for the 'working' icons", - "default": "fa fa-wrench" + "title": "CSS class for the 'warning' icons" } } }