Merge pull request #38 from cube-root/tailwind-local-fix

tailwind loader fix
cube-root · Nov 27, 2022 · d96cf7a · d96cf7a
2 parents 6a63daa + c3e04c8
commit d96cf7a
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -52,6 +52,7 @@ npx directory-serve /path-to-file
 | username | undefined |      Client auth username       |            `npx directory-serve /path-of-directory --username=my_username `             |
 | password | undefined | Client auth password (optional) | `npx directory-serve /path-of-directory --username=my_username --password=my_password ` |
 |  delete  |   false   |      To delete file/folder      |                 `npx directory-serve /path-of-directory --delete=true`                  |
+|  debug   |   false   |           Debug mode            |           `npx directory-serve /path-of-directory --delete=true --debug=true`           |
 
 ## Examples
 
@@ -91,11 +92,11 @@ npm i
 ```bash
 npm run dev /path-of-directory
 ```
+
 ## For Contributing
 
 [Contribution Guide](/docs/CONTRIBUTING.MD)
 
-
 ## Screenshot
 
 ### CLI

diff --git a/bin/index.js b/bin/index.js
@@ -23,6 +23,8 @@ Options
 --password ..... Client auth password
 
 --delete   ..... Delete file/folder
+
+--debug    ..... Debug mode
 * To serve a directory
 directory-serve /path-of-directory
 
@@ -35,25 +37,47 @@ directory-serve /path-of-file
 const options = yargs
   .usage(yargsMessage)
   .option('p', {
-    default: 8989, alias: 'port', describe: 'Change default port', type: 'integer', demandOption: false,
+    default: 8989,
+    alias: 'port',
+    describe: 'Change default port',
+    type: 'integer',
+    demandOption: false,
   })
   .option('u', {
-    default: true, alias: 'uploadFile', describe: 'File upload mode', type: 'boolean',
+    default: true,
+    alias: 'uploadFile',
+    describe: 'File upload mode',
+    type: 'boolean',
   })
   .options('username', {
-    default: undefined, describe: 'Client auth username', type: 'string', demandOption: false,
+    default: undefined,
+    describe: 'Client auth username',
+    type: 'string',
+    demandOption: false,
   })
   .options('password', {
-    default: undefined, describe: 'Client auth password', type: 'string', demandOption: false,
+    default: undefined,
+    describe: 'Client auth password',
+    type: 'string',
+    demandOption: false,
   })
   .options('delete', {
-    default: false, alias: 'deleteFile', describe: 'Delete file/folder', type: 'boolean', demandOption: false,
+    default: false,
+    alias: 'deleteFile',
+    describe: 'Delete file/folder',
+    type: 'boolean',
+    demandOption: false,
+  })
+  .options('debug', {
+    default: false,
+    describe: 'Debug mode',
+    type: 'boolean',
+    demandOption: false,
   })
-  .help(true)
-  .argv;
+  .help(true).argv;
 
 const {
-  uploadFile, username, password, deleteFile,
+  uploadFile, username, password, deleteFile, debug,
 } = options;
 let path = options._[0];
 if (!path) {
@@ -85,7 +109,8 @@ if (isFile) {
  * Auth
  */
 app.use((req, res, next) => authMiddleware(req, res, next, {
-  username, password,
+  username,
+  password,
 }));
 /**
  * SERVER
@@ -94,6 +119,7 @@ app.use((req, res) => handler(req, res, {
   path,
   uploadFile,
   deleteFile,
+  debug,
 }));
 
 app.listen(options.port, () => {

diff --git a/lib/helper/html.js b/lib/helper/html.js
@@ -1,13 +1,23 @@
-// const fs = require('fs-extra');
+const fs = require('fs-extra');
 
-// const cssLoader = () => fs.readFileSync('lib/helper/style.css', 'utf8');
-const createHtmlResponse = (body) => '<!DOCTYPE html>\n'
+const cssLoader = (debug) => {
+  try {
+    return `<style>${fs.readFileSync(`${__dirname}/style.css`, 'utf8')}</style>`;
+  } catch (error) {
+    if (debug) {
+      console.log('Failed to load stylesheet');
+      console.log(error);
+    }
+  }
+  return '<script src="https://cdn.tailwindcss.com"></script>';
+};
+const createHtmlResponse = (body, { debug = false } = {}) => '<!DOCTYPE html>\n'
   + '<html lang="en">\n'
-  + '<head>\n'
-  + '<script src="https://cdn.tailwindcss.com"></script>'
+  + `<head>\n${
+  // + '<script src="https://cdn.tailwindcss.com"></script>'
   // + '<link rel="stylesheet" type="text/css" href="lib/helper/style.css" />'
-  // + `<style>${cssLoader()}</style>`
-  + `<script type="text/javascript">
+    cssLoader(debug)
+  }<script type="text/javascript">
         function beforeFileUpload(evnt){
           var files = document.getElementsByName('filetoupload')[0].files;
           if(!(files && files.length > 0 && files[0])){

diff --git a/lib/middleware/directory.js b/lib/middleware/directory.js
@@ -8,8 +8,18 @@ const {
   generateDeleteButton,
 } = require('../helper');
 
-const directory = (req, res, { path, uploadFile = true, deleteFile = false } = {}) => {
-  const stream = send(req, parseUrl(req).pathname, { index: false, root: path, dotfiles: 'allow' });
+const directory = (
+  req,
+  res,
+  {
+    path, uploadFile = true, deleteFile = false, debug = false,
+  } = {},
+) => {
+  const stream = send(req, parseUrl(req).pathname, {
+    index: false,
+    root: path,
+    dotfiles: 'allow',
+  });
   stream.on('directory', async (resp, dirPath) => {
     const directoryPath = appendSlash(dirPath);
     let htmlResponse = '';
@@ -33,33 +43,37 @@ const directory = (req, res, { path, uploadFile = true, deleteFile = false } = {
             htmlResponse
               += '<li class="flex items-center space-x-2">'
               + '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 text-amber-500 flex-shrink-0"><path d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0016.5 9h-1.875a1.875 1.875 0 01-1.875-1.875V5.25A3.75 3.75 0 009 1.5H5.625z" /><path d="M12.971 1.816A5.23 5.23 0 0114.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 013.434 1.279 9.768 9.768 0 00-6.963-6.963z" /></svg>'
-              + `<a href="${encodeURIComponent(file)
-              }">${file
-              }</a>`
+              + `<a href="${encodeURIComponent(file)}">${file}</a>`
               + '<div>'
-              + `<a target="_blank" download="${file}" class="text-blue-600 text-sm px-3 py-1 bg-blue-100 rounded-full inline-flex space-x-1" href='${encodeURIComponent(file)}'>`
+              + `<a target="_blank" download="${file}" class="text-blue-600 text-sm px-3 py-1 bg-blue-100 rounded-full inline-flex space-x-1" href='${encodeURIComponent(
+                file,
+              )}'>`
               + '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4"><path d="M10.75 2.75a.75.75 0 00-1.5 0v8.614L6.295 8.235a.75.75 0 10-1.09 1.03l4.25 4.5a.75.75 0 001.09 0l4.25-4.5a.75.75 0 00-1.09-1.03l-2.955 3.129V2.75z" /><path d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z" /></svg>'
               + '<span>Download</span>'
-              + `</a>${generateDeleteButton(file, deleteFile, 'Remove')
-              }</div>`
+              + `</a>${generateDeleteButton(file, deleteFile, 'Remove')}</div>`
               + '</li>';
           } else {
             htmlResponse
               += '<li class="flex items-center space-x-2">'
               + '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 text-blue-500 flex-shrink-0"><path d="M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 00-3-3h-3.879a.75.75 0 01-.53-.22L11.47 3.66A2.25 2.25 0 009.879 3H6a3 3 0 00-3 3v3.162A3.756 3.756 0 014.094 9h15.812zM4.094 10.5a2.25 2.25 0 00-2.227 2.568l.857 6A2.25 2.25 0 004.951 21H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-2.227-2.568H4.094z"/></svg>'
               + `<span>${file}</span>`
-              + `<a class="text-blue-800 text-sm px-2 py-1 bg-blue-200 rounded-full" href="${appendSlash(req.url)}${encodeURIComponent(file)}/">`
+              + `<a class="text-blue-800 text-sm px-2 py-1 bg-blue-200 rounded-full" href="${appendSlash(
+                req.url,
+              )}${encodeURIComponent(file)}/">`
               + 'Open folder'
-              + `</a>${generateDeleteButton(file, deleteFile, 'Remove folder')
-              }</li>`;
+              + `</a>${generateDeleteButton(
+                file,
+                deleteFile,
+                'Remove folder',
+              )}</li>`;
           }
         });
         htmlResponse += '</ul></section>';
         resolve(htmlResponse);
       });
     });
     resp.setHeader('Content-Type', 'text/html; charset=UTF-8');
-    return resp.end(createHtmlResponse(htmlResponse));
+    return resp.end(createHtmlResponse(htmlResponse, { debug }));
   });
   stream.pipe(res);
 };

diff --git a/lib/middleware/index.js b/lib/middleware/index.js
@@ -7,7 +7,9 @@ const { authMiddleware } = require('./auth');
 const handler = (
   req,
   res,
-  { path, uploadFile = true, deleteFile = false } = {},
+  {
+    path, uploadFile = true, deleteFile = false, debug = false,
+  } = {},
 ) => {
   if (
     req.query.file
@@ -34,7 +36,12 @@ const handler = (
     });
   }
 
-  return directory(req, res, { path, uploadFile, deleteFile });
+  return directory(req, res, {
+    path,
+    uploadFile,
+    deleteFile,
+    debug,
+  });
 };
 
 module.exports = {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "directory-serve",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "description": "Command line tool to share the directory",
   "main": "./bin/index.js",
   "scripts": {