add embedded js templating

Author: ridaeh

.npmignore

@@ -0,0 +1,14 @@
+preview.png
+.gitignore
+.*.swp
+._*
+.DS_Store
+.git
+.hg
+.npmrc
+.lock-wscript
+.svn
+.wafpickle-*
+config.gypi
+CVS
+npm-debug.log

README.md

@@ -1,16 +1,15 @@
 
 <div align="center">
  <h1> Terminull </h1>
- <p>Terminull is a gitbook plugin allows you to create a modern terminal for your gitbook pages in order to documente your commands and it gives you a fast way to copy the command .</p>
+ <p>Terminull is a <a href="https://www.npmjs.com/package/gitbook">gitbook</a> plugin allows you to create a modern terminal for your gitbook pages in order to documente your commands and it gives you a fast way to copy the command .</p>
   <br>
   <br>
-	<a href="https://www.npmjs.com/package/gitbook-plugin-terminull"><img src="https://badge.fury.io/js/1.0.3.svg" alt="npm version" height="18"></a>
+	<a href="https://www.npmjs.com/package/gitbook-plugin-terminull"><img  src="https://img.shields.io/npm/v/gitbook-plugin-terminull/latest?color=green" alt="npm version"></a>
   <br>
   <br>
-  <img src="./resources/terminull.png">
+  <img src="https://raw.githubusercontent.com/ridaeh/gitbook-plugin-terminull/master/preview.png">
 </div>
 
-
 ## How to use it?
 To use Terminull plugin in your Gitbook project, add the terminull plugin to the `book.json` file of your project, then install plugins using `gitbook install`.
 
@@ -30,10 +29,13 @@ First, you need to create a terminal. Each terminal should have a directory wher
 ~/gitbook-plugin-terminull
 {% command %}
 echo "Hello terminull"
+{% comment %}
+This will print 'Hello terminull' in the screen
 {% output %}
 Hello terminull
 {% endterm %}
 ```
+
 ## You like my work :exclamation:
 In case you were wondering how you can thanks me for my work, coffee :coffee: is the way to my heart.   
 
@@ -42,4 +44,10 @@ In case you were wondering how you can thanks me for my work, coffee :coffee: is
 
 
 ## Contributing
-Bug reports and pull requests are welcome.
+Bug reports and pull requests are welcome.
+
+1. Fork it!
+2. Create your feature branch: git checkout -b my-new-feature
+3. Commit your changes: git commit -am 'Add some feature'
+4. Push to the branch: git push origin my-new-feature
+5. Submit a pull request :smile:

assets/terminull.css

@@ -26,7 +26,6 @@
 
 .terminullComment {
   color: seagreen;
-  font-weight: bold;
   font-style: italic;
 }
 
@@ -63,3 +62,6 @@
 .terminullOutput {
   display: block;
 }
+
+.terminullCopyBtn { transition: all .2s ease-in-out; }
+.terminullCopyBtn:hover { transform: scale(1.1); }

assets/terminull.js

@@ -1,5 +1,4 @@
 function copyCommandTerminull(command) {
-    console.log('clicked',command)
     var dummy = document.createElement("textarea");
     document.body.appendChild(dummy);
     dummy.value=command;

index.js

@@ -1,21 +1,25 @@
+var ejs = require('ejs');
+const path = require('path');
+
 function processBlock(rootBlock) {
-  var term = {};
-  var blocks = [rootBlock].concat(rootBlock.blocks);
-  blocks.forEach(_blk => {
+  var terminulls = [];
+  var term = {}
+  rootBlock.blocks.forEach(_blk => {
+    if(term[_blk.name]){
+      terminulls.push(term)
+      term = {}
+    } 
     term[_blk.name] = _blk.body.trim();
   });
-  return '<div class="terminull">' +
-          '<div class="terminullMenu">' +
-            '<div class="terminullButtons terminullClose"></div>' +
-            '<div class="terminullButtons terminullMinimize"></div>' +
-            '<div class="terminullButtons terminullZoom"></div>' +
-          '</div>' +
-          '<div class="terminullScreen">' +
-            '<span class="terminullDirectory">~/' + term.directory + '</span>$ ' +
-            '<span class="terminullCommand">' + term.command + '</span>' +
-            '<span class="terminullOutput">' + term.output + '</span>' +
-          '</div>'+
-        '</div>';
+  terminulls.push(term)
+  return new Promise(function(resolve, reject){
+           ejs.renderFile(path.join(__dirname, './src/terminull.html.ejs'),{terminulls:terminulls},function(err, str){
+             if(err) {
+               throw err
+             }
+             resolve(str)
+           })
+        })
 }
 
 module.exports = {
@@ -26,7 +30,7 @@ module.exports = {
   },
   blocks: {
     term: {
-      blocks: ['directory', 'command', 'output'],
+      blocks: ['directory', 'command','comment', 'output'],
       process: processBlock
     }
   }

package.json

@@ -9,15 +9,20 @@
   },
   "keywords": [
     "terminal",
-    "gitbook"
+    "gitbook",
+    "gitbook-plugin",
+    "plugin"
   ],
   "author": "Ridae HAMDANI",
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/ridaeh/gitbook-plugin-terminull/issues"
   },
-  "homepage": "https://github.com/ridaeh/gitbook-plugin-terminull#readme",
+  "homepage": "https://github.com/ridaeh/gitbook-plugin-terminull",
   "engines": {
     "gitbook": ">2.5.0"
+  },
+  "dependencies": {
+    "ejs": "^3.0.1"
   }
 }

preview.png

@@ -0,0 +1,18 @@
+<div class="terminull">
+    <div class="terminullMenu">
+      <div class="terminullButtons terminullClose"></div>
+      <div class="terminullButtons terminullMinimize"></div>
+      <div class="terminullButtons terminullZoom"></div>
+    </div>
+    <div class="terminullScreen">
+        <% terminulls.forEach(function(terminull){ %>
+          <span class="terminullDirectory">~/<%= terminull.directory %></span>$ 
+          <span class="terminullCommand"><%= terminull.command%></span>
+          <% if (terminull.comment) { %> 
+            <span class="terminullComment"># <%= terminull.comment%></span>
+          <% } %>
+          <i class="fa fa-clone t-copy terminullCopyBtn" onclick="copyCommandTerminull(`<%= terminull.command%>`)"></i>
+          <span class="terminullOutput"><%= terminull.output%></span>
+        <% }); %>
+    </div>
+</div>