From 96865bcf1ca5c4124118d85f1d8a20230ec20efa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Moreno=20Garc=C3=ADa?= Date: Fri, 26 Jan 2018 10:10:14 +0100 Subject: [PATCH] Update plugin to look like callouts in beta --- README.md | 28 ++++---------------- assets/fonts/icomoon.eot | Bin 0 -> 2296 bytes assets/fonts/icomoon.svg | 14 ++++++++++ assets/fonts/icomoon.ttf | Bin 0 -> 2132 bytes assets/fonts/icomoon.woff | Bin 0 -> 2208 bytes assets/icons.css | 38 +++++++++++++++++++++++++++ assets/plugin-hints.css | 54 +++++++++++++++++++++++++++++++++++--- index.js | 15 ++++++----- package-lock.json | 5 ++++ package.json | 24 +++++++---------- 10 files changed, 130 insertions(+), 48 deletions(-) create mode 100644 assets/fonts/icomoon.eot create mode 100644 assets/fonts/icomoon.svg create mode 100644 assets/fonts/icomoon.ttf create mode 100644 assets/fonts/icomoon.woff create mode 100644 assets/icons.css create mode 100644 package-lock.json 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 0000000000000000000000000000000000000000..be99f5a054bc24666e9968fbf6041ddfc5b47051 GIT binary patch literal 2296 zcmd5;&2Jk;6o0d0&)RO*abw4uhLCKW*p^Zf^5NJ;qE(B8rItoSp|Mb*C7Z<95wRWR z0}_E$9}tHMiCi0`oDf0{<-iefh|~i@;)Im`1Dv89dZ>_)NNj#HyCHTH^@hY~XXp2R z?_+1*yq(#o~J~LOcm(1Mn z_hHlp`BuSRS;82CEJt5qapOaS4t|8ZPUQK#n78Lc1E0o-yob=Iiy-tz{8u88g4|y$ zt*%FjzK8rSWNWc9XY+0CW61EQwvxTRLIIhc1B+kPnNifwT5`{it47Ue-P-%<6xb9{4rJWyE0B+Q6YWGOsC<6T2649=cfH z<9obHFHwfF^ggB@(}PSG?Gdw^nbEP)%oUbNkEfDDEScajHH@beIX0?H+9S$=$HdDl z0*CZvmP+*TAZw3AVE_Ww_#hQvy+WD+|d!1 zy<6zI(2YRAz@Q5wX7FmfzdD_>Rg`#KMYMC%)&BV5&gnQ#Ol{hXJdBv?R@*)ar=J(% zylxmW>BtF|>VV&-Zsg=mdXFg1}q$TJ-QHvZW>41gT>B(9u7xd=?wK5cQGxGKNiw%^MK!P9DU1M z1d__0nc*E7ZzpWlwnZ@D55ivvJRX+`tBbI+5$Gmc9>3X|49 zzKM@cHhyp%$x-9(b2N@D-5_6V>`D`$2)@?uSc?6my#Yqf$49en*yE=uQ}-66AKYg# z(p?W(<2uc_JO@s@*aN)gVlPg)b{7lqZ@D-?opfLB(H=jTAT$ovfD10>z?WU@0shRz zUL3ZTiv{>87Y8Us-z>~kN|j2v`NYoUmsb`lWou+;`0Qi)Os_M^seEB=(Ozyo|If6{ zR?4eZAz#if+pGC`Yj(rBK3AE*+=g&=$X|q2yhQ;&4Q2J?U_;L16t=Ju8@OLrzZ?_p OFUJtFE>FT2w0{8LIbJ^i literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..9099ee863604dd00198d38cd6d1d6affd8d83f29 GIT binary patch literal 2132 zcmd5-O>Y}T7=CBRp0(YqvyC_2G=ya1#J1FskPpW$60HgnmRg9Y3b9aul1*alh}e$u z0f|7W4~RpBM6V4}P6(lza^Q$KMB;#uI3cBffK!wMhl&%4%`>wb;wTX}B*vbd=lz_S zcb=UkMno5=PMpSHf8+Vd&aU9k(ENx#w@`6c?80yNiC7=xH%so?3PuyM97Cn$t@jN& z_#W~mQQ*^Z(Oonzf1Dr+9>Sh2L!m$BzYvKGj8IGe}IsmD2jllx_&|o5k+T_?ZHkFOrte$ta;bMRZuE%e zc5mNk$AGClxioIZtUxI88kTl+S%ihD3-$pQ+#CvHWIV*1ANj?ZI8&Ql?QVQP7sAkO z<7j8J+#AtjG3&WrbI7=hWd*_sQ@g_>;jnS^HSZ88Dtl_j8ZuuaW;b_4G!l*?UIHIXN^9pI+Hr3)^34RPw;#7id|KRC|hnehyH7EhL8kVo3PvP8(j z+xiX5uphLSp^@te(Y&AbcsAwgKce)VKNln2kB}VKY0lSk;H-}Wz#Bde;w#tfV*&lE zK8{c?-IsTCAPh|u77uH{B_DI(t3D0@f8ygH#mVupfd00RBb1@9mKJK2TCGY;v_Lhg zpx3BcD6Xz8)vC_K*fm7O~I`TE^?Wdah@_ zR$X^W#cFZYT`w*=^IOi1h1v|(HimD9oO>O!myo8aR^&o1;w$XnB)0Ipp*Aq%Z2)V; Kfwv#YS^PI8vrN(e literal 0 HcmV?d00001 diff --git a/assets/fonts/icomoon.woff b/assets/fonts/icomoon.woff new file mode 100644 index 0000000000000000000000000000000000000000..c0f42a23ba382f564dffebc0a8da7b84885beb3a GIT binary patch literal 2208 zcmd5-O>7%Q6n?Yg%zC$3XB#`-G=#))Vp~c`$d6+eiB<&(ix#3*rSYLa={hlXL~K|2 zp^ZSQ4~RoA^x7ar94drr;J^`ah}23I5+|fo+&NV_aHx=wXl%Zj-88NeaYJJ4H}k!p zd2i;;o7wBM-2?F5lK7VPamBrXxZ*cyqsXGgs#_^S_7`G*F6quW+X8alXlJQwNcDNBaf*7v9KrX@(i#+Z(gnIf>5@J?4D7wM}O@2oeU`Z!rZ_6rg_S zB<@Eqt@YqcOFU{aX1es==?45dKFh{38$dGTZ#QT7!T`XK(l z%K|jk+TlCAPA^cFa`YbD#`O@>MNh;TU`}*qI(wRBGqdT`1WP4(Tn)2nC7hX7COr`~ zfyc#*EP@G{Q!Jev<{{P-iNXK^SkI=DsbpN&s4$4t~`KN&gCw& z<8W_pSki#db)j3PX<^WX6}NajF;bt;yUI%QxP?TIoP#h{zz4CX0n-(y~-oiZ@V$hYDhJE@cl1z0)4QI@4Z29(KZe zPf#0{Rrd~;H99-NH&+YnX>T~$URfUQw&4m6BhKM!N``w4xQbhKnF-cVj^Rqx$bWQi zQvb_)!|okaM|*LE3^OE)!+&pHyZ`3UT`%!xx61kor6@0h*(Uhs*h3I=f z79-uCA!}U6*Uj4v2hR970KD$w4tyzld@LY;%f}}5(JlE#2MkC;(0Et_F8P=PpYm}4 z_){NuP?Tam7LZ@`u}NvVyR=ZN)M`~)q6Ml^1yrMIzPPfwRIA3OCMGFQMOvX%7(f9( zQ#3)7N6tD@c(GVoUv^gzw1|bS(=x92%8{12T6HZ}Dprdt?pkp%R@jK0U8v1rZ4>x* m$k=O$UV@vdT9FIBNQ;maXaoIOwShTr16U&ty!}WH<9`4g2~tu3 literal 0 HcmV?d00001 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" } } }