fix menu styling

css/styles.css

@@ -99,7 +99,7 @@ html, body {
   position: relative;
   flex: 0 0 auto;
   /* only manually resize */
-  padding: 10px;
+  /*padding: 10px;*/
   width: 50%;
   /*min-height: 200px;*/
   height: 100%;
@@ -177,6 +177,13 @@ a:hover {
   text-decoration: none;
   color: #37b;
 }
+button {
+  padding: 10px;
+  border: none;
+  border-radius: 3px;
+  background: #fff;
+  color: #555;
+}
 button a {
   color: #fff;
 }
@@ -209,31 +216,49 @@ button:hover {
   border-bottom: 1px solid #aaa;
 }
 
+#navbar {
+  height: 49px;
+  border-bottom: 1px solid #ddd;
+  font-size: 26px;
+}
+#navbar button:hover {
+  color: #777;
+}
+
 #nav-menus {
   position: absolute;
-  top: 0;
+  top: 50px;
   bottom: 0;
   left: 0;
   width: 0;
   overflow: hidden;
-  transition: width 0.25s;
+  transition: all 0.2s;
   z-index: 100;
-  /*font-size: 16px;*/
+  color: #000;
+  background: rgba(248, 248, 248, 1);
+  padding: 0;
+}
+
+.cat-title {
+  text-transform: uppercase;
 }
 
 #nav-menus.in {
-  width: 800px;
+  width: 540px;
+  padding: 10px;
+}
+#nav-menus.in .pure-u-1 {
+  padding: 10px;
+  box-sizing: border-box;
 }
 
 #nav-menus ul {
   padding-left: 0;
+  margin-top: 5px;
 }
 
 /* Menus de nav */
 #nav-menus {
-  color: #000;
-  background: #f8f8f8;
-  padding: 10px;
 }
 #nav-menus li {
  list-style-type: none;

exemples/javascript/repo-config.json

@@ -1,3 +1,9 @@
 {
-  "title": "JavaScript"
+  "title": "JavaScript",
+  "categories": [
+    {
+      "slug": "array",
+      "title": "Tableaux"
+    }
+  ]
 }

html/index.mustache.html

@@ -7,7 +7,7 @@
 <!--     <link rel="stylesheet" href="css/qunit-2.4.1.css"> -->
     <link rel="stylesheet" href="/css/vendor/pure-grids-min.css">
     <link rel="stylesheet" href="/css/vendor/pure-grids-responsive-min.css">
-    <link rel="stylesheet" href="/css/vendor/styles.css">
+    <!-- <link rel="stylesheet" href="/css/vendor/styles.css"> -->
     <link rel="stylesheet" href="/css/styles.css">
 <style type="text/css" media="screen">
 
@@ -18,22 +18,32 @@
 <div class="panel-container">
 
     <div class="panel-left">
+
         <div id="nav-menus">
-            <ul id="menu-repo" class="nav-menu">{{#menuRepo}}
-              <li><a href="/{{slug}}">{{title}}</a></li>{{/menuRepo}}
-            </ul>
+            <div id="menu-repo" class="pure-g">
+              <div class="pure-u-1">
+                <span class="cat-title">Collections d'examples</span>
+                <ul class="nav-menu">{{#menuRepo}}
+                  <li><a href="/{{slug}}">{{title}}</a></li>{{/menuRepo}}
+                </ul>
+              </div>
+            </div>
 
             <div id="menu-example" class="pure-g nav-menu">{{#menuExample}}
-              <div class="pure-u-1 pure-u-md-1-2">{{category.title}}
+              <div class="pure-u-1 pure-u-md-1-2">
+              <span class="cat-title">{{category.title}}</span>
               <ul>{{#examples}}
               <li><a href="/{{{slug}}}">{{title}}</a></li>{{/examples}}</ul>
             </div>{{/menuExample}}</div>
         </div>
 
+        <div id="navbar">
+            <button id="menu-btn" class="icon-menu"></button>
+        </div>
+
         <div id="notification"></div>
         <div class="panel-inner">
 
-            <button id="menu-btn" class="icon-menu"></button>
 
             <button id="add-example-btn" class="icon-plus rounded blue"></button>
             <form id="add-example-form" style="display: none;">
@@ -54,7 +64,7 @@
         <script type="text/html" id="editor-javascript"></script>
         <script type="text/html" id="editor-html"></script>
         <script type="text/html" id="editor-css"></script>
-        <button id="revert-editor">!</button>
+        <!-- <button id="revert-editor">!</button> -->
     </div>
 
     <div class="splitter">

lib/ExampleStore.js

@@ -49,16 +49,20 @@ ExampleStore.prototype.getRepoMenu = function(path) {
 
 ExampleStore.prototype.getExampleMenu = function(path) {
   const repo = _.find(this.repos, { path });
-  console.log('repo examples', repo.examples)
+  if(! repo.categories) {
+    console.error('Repo ' + repo.title + 'has no categories key');
+    return [];
+  }
+  // console.log('repo examples', repo.examples)
   const menu = repo.categories.map(category => {
     const examplesInCat = repo.examples.filter(ex => (ex.category === category.slug));
-    console.log('examples in cat', category, examplesInCat);
+    // console.log('examples in cat', category, examplesInCat);
     const examples = examplesInCat.map(
     ({ title, slug }) => ({ title, slug: repo.path + '/' + slug }) 
   );
     return { category, examples };
   });
-  console.log(menu);
+  // console.log(menu);
   return menu;
   // return repo.examples.map(
   //   ({ title, slug }) => ({ title, slug: repo.path + '/' + slug }) 

lib/fsio.js

@@ -25,8 +25,20 @@ function scandirAsync(path, excludes) {
 }
 
 function readFileAsync(file) {
+  console.log('readFileAsync', file);
+  // var fs = {
+  //   readFileAsync: function() {
+  //     return new Promise((resolve, reject) => {
+  //       // resolve('pouet');
+  //       reject(new Error('pouet error'))
+  //     });
+  //   }
+  // }
   return fs.readFileAsync(file)
   .then(buf => (buf.toString()));
+  // .then(str => {
+  //   console.log('read file: ', str); return str;
+  // });
 }
 
 function readFilesAsync(fullPath, files) {

lib/indexHandlers.js

@@ -4,23 +4,42 @@ var _             = require('lodash');
 var Mustache      = require('mustache');
 var path          = require('path');
 var fs            = require('fs');
+var chokidar      = require('chokidar');
 var indexTmplPath = path.normalize(__dirname + '/../html/index.mustache.html');
-var indexTpml     = fs.readFileSync(indexTmplPath).toString();
+var indexTpml;
 var {
   readFilesAsync
 }                 = require('../lib/fsio');
 
-function readExampleFiles(repoSlug, exampleSlug, config) {
-  const exampleDir = path.normalize(__dirname + '/../exemples/' + repoSlug + '/' + exampleSlug);
-  const libsCssDir = path.normalize(__dirname + '/../css/vendor');
-  const libsJsDir  = path.normalize(__dirname + '/../js/vendor');
-  const { html, js, css } = config; // libsCss, libsJs 
-  const files = [].concat(html, js, css);
-  return readFilesAsync(exampleDir, files);
-}
+
+// One-liner for current directory, ignores .dotfiles
+chokidar.watch('./html', {ignored: /(^|[\/\\])\../}).on('all', (event, path) => {
+  // console.log(event, path);
+  if(path === 'html/index.mustache.html') {
+    console.log('reload index html');
+    indexTpml = fs.readFileSync(indexTmplPath).toString();
+  }
+});
+
+
+module.exports = function(exStore, exDir) {
+
+  function readExampleFiles(repoSlug, exampleSlug, config) {
+    const exampleDir = exDir + '/' + repoSlug + '/' + exampleSlug;
+    const libsCssDir = path.normalize(__dirname + '/../css/vendor');
+    const libsJsDir  = path.normalize(__dirname + '/../js/vendor');
+    const { html, js, css } = config; // libsCss, libsJs 
+
+    const files = [].concat(html, js, css);
+          // console.log('#2', exampleDir, html, js, css, files);
+    return readFilesAsync(exampleDir, files);
+    // .then(files => {
+    //   console.log('#### files', files);
+    //   return files;
+    // });
+  }
 
 
-module.exports = function(exStore) {
 
   return {
 
@@ -50,7 +69,7 @@ module.exports = function(exStore) {
       const menuRepo = exStore.getRepoMenu();
       const menuExample = exStore.getExampleMenu(repo.path);
       // const title    = 'Home';
-      console.log(menuExample);
+      // console.log(menuExample);
       res.send(Mustache.render(indexTpml, {
         // title,
         menuRepo,
@@ -64,6 +83,7 @@ module.exports = function(exStore) {
      * Get index with selected repo&example
      */
     getIndexExample: function(req, res) {
+      console.log('getIndexExample', req.params);
       const repo = exStore.getRepo(req.params.repoSlug);
       if(! repo) {
         return res.status(404).send('Repo ' + req.params.repoSlug + ' not found');
@@ -74,12 +94,13 @@ module.exports = function(exStore) {
       if(! example) {
         return res.status(404).send('Example ' + req.params.repoSlug + '/' + req.params.exampleSlug + ' not found');
       }
+      // console.log('#1');
       // const title    = 'Home';
-      console.log(menuExample);
+      // console.log(menuExample);
       const { repoSlug, exampleSlug } = req.params;
       readExampleFiles(repoSlug, exampleSlug, example)
       .then(files => {
-        // console.log('example files', html, js, css);
+        console.log('example files', files);
         res.send(Mustache.render(indexTpml, {
           // title,
           menuRepo,

package.json

@@ -3,6 +3,7 @@
   "dependencies": {
     "bluebird": "^3.5.1",
     "body-parser": "^1.18.2",
+    "chokidar": "^1.7.0",
     "cors": "^2.8.4",
     "express": "^4.16.2",
     "json-beautify": "^1.0.1",

sandboxApp.js

@@ -13,7 +13,10 @@ var fs            = require('fs');
 var Promise       = require('bluebird'); Promise.promisifyAll(fs);
 var sandboxTpml   = fs.readFileSync(__dirname + '/html/template.mustache.html').toString();
 var ExampleStore  = require('./lib/ExampleStore');
-var exStore       = new ExampleStore(__dirname + '/exemples');
+var examplesDir   = __dirname + '/exemples';
+// var examplesDir   = __dirname + '/test/integration/test-examples';
+
+var exStore       = new ExampleStore(examplesDir);
 var {
   readFileAsync,
   readFilesAsync
@@ -22,7 +25,7 @@ var {
   getIndexBare,
   getIndexRepo,
   getIndexExample
-}                 = require('./lib/indexHandlers')(exStore);
+}                 = require('./lib/indexHandlers')(exStore, examplesDir);
 
 
 /**

test/integration/render-index.test.js

@@ -5,7 +5,7 @@ const cheerio       = require('cheerio');
 const minify        = require('html-minifier').minify;
 const ExampleStore  = require('../../lib/ExampleStore');
 const exStore       = new ExampleStore(__dirname + '/test-examples');
-const indexHandlers = require('../../lib/indexHandlers')(exStore);
+const indexHandlers = require('../../lib/indexHandlers')(exStore, __dirname + '/test-examples');
 
 function invokeHandler(url, handler, options) {
   options = options || {};
@@ -121,4 +121,47 @@ describe('render index', () => {
       );
   });
 
+  /**
+   * Index with existent repo and example
+   */
+  it('with selected repo and example', () => {
+
+    const { $, body, statusCode } = invokeHandler(
+      '/example-repo1/repo1-example1',
+      indexHandlers.getIndexExample,
+      {
+        params: {
+          repoSlug: 'example-repo1',
+          exampleSlug: 'repo1-example1'
+        }
+      }
+    );
+    statusCode.should.equal(200);
+console.log('body', body);
+    const inlineJsData = "let window = {};" +
+      $('#inline-js-data').html();
+    try {
+      eval(inlineJsData);
+    } catch(e) {
+      throw new Error('injected script in #inline-js-data throws an error: "' + e.message + '');
+    }
+    console.log('inlineJsData', inlineJsData);
+
+    // const $menuRepoItems = $('#menu-repo li');
+    // $menuRepoItems.length.should.equal(2);
+    // const repo1Link = $($menuRepoItems[0]).html();
+    // const repo2Link = $($menuRepoItems[1]).html();
+    // repo1Link.should.equal('<a href="/example-repo1">Example Repo 1</a>');
+    // repo2Link.should.equal('<a href="/example-repo2">Example Repo 2</a>');
+
+    // const $menuExampleItems = $('#menu-example div');
+    // var minifiedMenu = minify($('#menu-example').html(), {
+    //   collapseWhitespace: true
+    // });
+    // $menuExampleItems.length.should.equal(2);
+    // minifiedMenu.should.equal(
+    //   '<div class="pure-u-1 pure-u-md-1-2">Test Stuff<ul><li><a href="/example-repo1/repo1-example1">Test Example</a></li></ul></div>' +
+    //   '<div class="pure-u-1 pure-u-md-1-2">Empty Category<ul></ul></div>'
+    //   );
+  });
 });