Fixes, styling

humphd · Apr 2, 2014 · 2a92035 · 2a92035
1 parent 7b8105e
commit 2a92035
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -2,23 +2,60 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <link href="styles/makerstrap.css" rel="stylesheet">
     <script data-main="src/main" src="lib/require.js"></script>
   </head>
   <body>
-    <div id="ui" style="display:none">
-      <h3>Filer bootloader</h3>
-      <p>This page is a bootloader capable of creating a Filer filesystem,
-         installing a zipped archive to that filesystem, and loading files from it.</p>
+    <div id="ui">
+      <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+        <div class="container">
+          <ul class="nav navbar-nav navbar-right">
+            <li><a href="https://github.com/humphd/nohost"><span class="fa fa-github"></span> humphd/nohost</a></li>
+          </ul>
+        </div>
+      </nav>
 
-      <p>Boot options are passed on the query string. Valid options include:</p>
-      <ul>
-        <li><code>?reset</code (e.g., <a href="?reset">format the current fs (wipe it)</a>
-        <li><code>?install={zipfile url}</code> (e.g., <a href="?install=webmaker-kits-gh-pages.zip">?install=webmaker-kits-gh-pages.zip</a>, <a href="?install=restaurant-gh-pages.zip">?install=restaurant-gh-pages.zip</a>)
-        <li><code>?/{path to file in filesystem}</code> (e.g., <a href="?/webmaker-kits-gh-pages">?/webmaker-kits-gh-pages</a>, <a href="?/restaurant-gh-pages.zip">?/restaurant-gh-pages.zip</a>)
-      </ul>
+      <div class="jumbotron">
+        <div class="container">
+          <h1>nohost</h1>
+          <p>A web server in your web browser</p>
+        </div>
+      </div>
 
-      <p>If you wnat to install your own .zip file, select it:<p>
-       <input type="file" accept="application/zip" id="upload"></p>
+      <div class="container">
+        <h2 class="page-header">Overview</h2>
+        <p>This page is a bootloader for a web-page based web server. It creates a persistent filesystem in your browser
+           (using <a href="https://github.com/js-platform/filer">Filer</a>). This filesystem is then used to host web sites
+           and applications, which are installed from zip archives (e.g., all GitHub repos have a <a href="http://stackoverflow.com/questions/2751227/how-to-download-source-in-zip-format-from-github/18583977#18583977">Download link</a> to create a zip).</p>
+
+        <p>The files in the filesystem can then be served using paths on the query string. The filesystem is shared across
+           all windows using the same origin, which means you can have an application in one tab editing files, and nohost
+           showing you those files in another.</p>
+
+        <h2 class="page-header">Boot Options</h2>
+        <p>Boot options are passed on the query string. Valid options include:</p>
+        <ul>
+          <li><code>?reset</code> (e.g., <a href="?reset">?reset</a> format the current fs, erasing all files)
+          <li><code>?install={zipfile.zip}</code> (e.g., <a href="?install=webmaker-kits-gh-pages.zip">?install=webmaker-kits-gh-pages.zip</a>, <a href="?install=restaurant-gh-pages.zip">?install=restaurant-gh-pages.zip</a>)
+          <li><code>?/{path/to/file/in/filesystem}</code> (e.g., serve the file at a given path, <a href="?/webmaker-kits-gh-pages">?/webmaker-kits-gh-pages</a>, <a href="?/restaurant-gh-pages.zip">?/restaurant-gh-pages</a>)
+        </ul>
+
+        <h2 class="page-header">Installing Files</h2>
+        <p>You can also install your own web site or application via a zip file. Use the button below to find one on your local computer.</p>
+        <p class="alert alert-info">NOTE: no files are ever uploaded to any server. Everything is local to your browser.</p>
+        <div class="panel panel-default">
+          <div class="panel-body">
+            <form role="form">
+              <div class="form-group">
+                <label for="exampleInputFile">File input</label>
+                <input type="file" id="upload" accept="application/zip">
+                <p class="help-block">If you want to install your own .zip file, select one here.</p>
+              </div>
+            </form>
+          </div>
+        </div>
+
+      </div>
     </div>
   </body>
 </html>
diff --git a/src/handlers.js b/src/handlers.js
@@ -146,14 +146,17 @@ function(Filer, Async, Log, Content) {
         var elems = doc.querySelectorAll('style');
 
         Async.eachSeries(elems, function(elem, cb) {
-          var content = elem.textContent;
-console.log(elems, elems[0].innerHTML);
+          var content = elem.innerHTML;
           if(!content) {
             cb();
             return;
           }
+
           _processCSS(content, path, fs, function(err, css) {
-            elem.textContent = css;
+            if(err) {
+              Log.error(err);
+            }
+            elem.innerHTML = css;
             cb();
           });
         }, function(err) {
@@ -171,6 +174,12 @@ console.log(elems, elems[0].innerHTML);
       },
       function sources(callback) {
         rewriteElements('source', 'src', null, callback);
+      },
+      function videos(callback) {
+        rewriteElements('video', 'src', null, callback);
+      },
+      function audios(callback) {
+        rewriteElements('audio', 'src', null, callback);
       }
     ], function(err, result) {
       // Return the processed HTML
@@ -182,7 +191,7 @@ console.log(elems, elems[0].innerHTML);
    * Given a CSS string, rewrite it to include external resources (imports, url())
    */
   function _processCSS(css, path, fs, callback) {
-    var dir = Path.basename(path);
+    var dir = Path.dirname(path);
 
     // Do a two stage pass of the css content, replacing all interesting url(...)
     // uses with the contents of files in the server root.
@@ -200,10 +209,13 @@ console.log(elems, elems[0].innerHTML);
           if(err) {
             return next("failed on " + path, replacements);
           }
+
           // Queue a function to do the replacement in the second pass
           replacements.push(function() {
             var mime = Content.mimeFromExt(Path.extname(filename));
-            content.replace(filename, Content.toDataURL(data, mime));
+            var filenameCleaned = filename.replace(/\./g, '\\.').replace(/\//g, '\\/');
+            var regex = new RegExp(filenameCleaned, 'gm');
+            return content.replace(regex, Content.toDataURL(data, mime));
           });
           fetch(input, replacements, next);
         });
@@ -228,8 +240,9 @@ console.log(elems, elems[0].innerHTML);
         return;
       }
       replacements.forEach(function(replacement) {
-        replacement();
+        css = replacement();
       });
+console.log('css', css);
       callback(null, css);
     });
   }
@@ -319,7 +332,7 @@ console.log(elems, elems[0].innerHTML);
         '    outline-width: 0;' +
         '  }' +
         '</style></head><body>' +
-        '<video src="' + path + '"></video></body></html>';
+        '<video src="' + path + '" controls></video></body></html>';
       _processHTML(syntheticDoc, path, fs, function(err, html) {
         if(err) {
           Log.error('unable to read `' + path + '`');

diff --git a/styles/makerstrap.css b/styles/makerstrap.css
diff --git a/test.zip b/test.zip
diff --git a/test/media/tree.jpg b/test/media/tree.jpg
diff --git a/test/video-test.html b/test/video-test.html
@@ -7,13 +7,13 @@
 <body>
   <div>
     <p>Video using source element</p>
-    <video id='video' controls>
+    <video id='video1' controls>
       <source id='mp4' src="media/trailer.mp4" type='video/mp4'>
     </video>
   </div>
   <div>
     <p>Video using src attribute</p>
-    <video id='video' src="media/trailer.mp4" controls></video>
+    <video id='video2' src="media/trailer.mp4" controls></video>
   </div>
 </body>
 </html>