Fix #7: inline icon images as base64 strings

humphd · Jan 22, 2019 · 3be0122 · 3be0122
1 parent 8ac92f6
commit 3be0122
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 24 deletions.
diff --git a/icons/icons.js b/icons/icons.js
diff --git a/src/html-formatter.js b/src/html-formatter.js
@@ -1,13 +1,6 @@
 const { isMedia, isImage, getMimeType } = require('./content-type');
 const { path } = require('filer');
-
-const iconImage = require('../icons/image2.png');
-const iconFolder  = require('../icons/folder.png');
-const iconMovie = require('../icons/movie.png');
-const iconText = require('../icons/text.png');
-const iconUnknown = require('../icons/unknown.png');
-const iconBack = require('../icons/back.png');
-const iconBlank = require('../icons/blank.png');
+const { getDataUri } = require('../icons/icon.js');
 
 // 20-Apr-2004 17:14
 const formatDate = d => {
@@ -29,21 +22,15 @@ const formatSize = s => {
 };
 
 const formatRow = (
-  icon = iconUnknown,
   alt = '[   ]',
   href,
   name,
   modified,
   size
-) => {
-  modified = formatDate(new Date(modified));
-  size = formatSize(size);
-
-  return `<tr><td valign='top'><img src='${icon}' alt='${alt}'></td><td>
-          <a href='${href}'>${name}</a></td>
-          <td align='right'>${modified}</td>
-          <td align='right'>${size}</td><td>&nbsp;</td></tr>`;
-};
+) => `<tr><td valign='top'><img src='${getDataUri('unknown')}' alt='${alt}'></td><td>
+      <a href='${href}'>${name}</a></td>
+      <td align='right'>${formatDate(new Date(modified))}</td>
+      <td align='right'>${formatSize(size)}</td><td>&nbsp;</td></tr>`;
 
 const footerClose = '<address>nohost (Web Browser Server)</address></body></html>';
 
@@ -103,11 +90,11 @@ function formatDir(route, dirPath, entries) {
     <!DOCTYPE html>
     <html><head><title>Index of ${dirPath}</title></head>
     <body><h1>Index of ${dirPath}</h1>
-    <table><tr><th><img src='${iconBlank}' alt='[ICO]'></th>
+    <table><tr><th><img src='${getDataUri('blank')}' alt='[ICO]'></th>
     <th><b>Name</b></th><th><b>Last modified</b></th>
     <th><b>Size</b></th><th><b>Description</b></th></tr>
     <tr><th colspan='5'><hr></th></tr>
-    <tr><td valign='top'><img src='${iconBack}' alt='[DIR]'></td>
+    <tr><td valign='top'><img src='${getDataUri('back')}' alt='[DIR]'></td>
     <td><a href='/${route}${parent}'>Parent Directory</a></td><td>&nbsp;</td>
     <td align='right'>  - </td><td>&nbsp;</td></tr>`;
   const footer = `<tr><th colspan='5'><hr></th></tr></table>${footerClose}`;
@@ -118,18 +105,19 @@ function formatDir(route, dirPath, entries) {
     let icon;
     let alt;
 
+    // TODO: switch this to entry.isDirectory() if possible
     if (entry.type === 'DIRECTORY') {
-      icon = iconFolder;
+      icon = getDataUri('folder');
       alt = '[DIR]';
     } else {
       if (isImage(ext)) {
-        icon = iconImage;
+        icon = getDataUri('image2');
         alt = '[IMG]';
       } else if (isMedia(ext)) {
-        icon = iconMovie;
+        icon = getDataUri('movie');
         alt = '[MOV]';
       } else {
-        icon = iconText;
+        icon = getDataUri('text');
         alt = '[TXT]';
       }
     }