spa-ssi 0.0.2 → 0.0.3

package/README.md

@@ -29,3 +29,35 @@ Single Page App / Server Side Include Simple File Web Server
 
 If a page request doesn't resolve to a file, it defaults to /index.html
 
+## HMR Support
+
+Okay, it isn't true HMR, but in my experience it is as good as.
+
+Add this to index.html:
+
+```html
+<script>
+    const localhosts = ['localhost', '127.0.0.1', '[::1]'];
+    const {hostname} = location;
+    if(localhosts.includes(hostname)){
+        window.addEventListener("focus", () => {
+            location.reload();
+        });
+    }
+</script>
+```
+
+or:
+
+```html
+<script type=module>
+    import 'spa-ssi/hmr.js';
+</script>
+```
+
+
+
+## Directory Listing support
+
+/sitemap lists all the html links within the site.
+

package/hmr.js

@@ -0,0 +1,9 @@
+//@ts-check
+
+const localhosts = ['localhost', '127.0.0.1', '[::1]'];
+const {hostname} = location;
+if(localhosts.includes(hostname)){
+    window.addEventListener("focus", () => {
+        location.reload();
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spa-ssi",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Single Page App / Server Side Include Simple File Web Server",
   "keywords": [
     "single-page-app",
@@ -10,6 +10,9 @@
   "bugs": {
     "url": "https://github.com/bahrus/spa-ssi/issues"
   },
+  "files": [
+    "*.js"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bahrus/spa-ssi.git"

package/serve.js

@@ -30,6 +30,13 @@ class SimpleHTTPRequestHandler {
   async handleRequest(req, res) {
     try {
       const parsedUrl = url.parse(req.url);
+      if(parsedUrl.pathname?.toLowerCase() === '/sitemap'){
+        const siteMapContent = await this.renderSiteMap();
+          // Send response
+        res.writeHead(200, { "Content-Type": 'text/html' });
+        res.end(siteMapContent);
+        return;
+      }
       let pathname = decodeURIComponent(parsedUrl.pathname);
 
       // Normalize path to prevent directory traversal
@@ -73,6 +80,105 @@ class SimpleHTTPRequestHandler {
     }
   }
 
+  /**
+   * Recursively find all .html files
+   * @param {*} dir 
+   * @returns 
+   */
+  async findHtmlFiles(dir) {
+    /** @type {string[]} */
+    const results = [];
+    const dirEntris = await fs.readdir(dir, { withFileTypes: true });
+    for (const entry of dirEntris) {
+      const fullPath = path.join(dir, entry.name);
+
+      if (entry.isDirectory()) {
+        const subFiles = await this.findHtmlFiles(fullPath);
+        results.push(...subFiles);
+      } else if (entry.isFile() && entry.name.endsWith('.html')) {
+        results.push(fullPath);
+      }
+    }
+
+    return results;
+  }
+
+  /**
+   * Extract <title> from HTML file
+   * @param {string} filePath 
+   * @returns 
+   */
+  async extractTitle(filePath) {
+    try {
+      const content = await fs.readFile(filePath, 'utf8');
+      const match = content.match(/<title>(.*?)<\/title>/i);
+      return match ? match[1] : path.basename(filePath);
+    } catch {
+      return path.basename(filePath);
+    }
+  }
+
+  /**
+   * Build HTML list
+   * @param {string[]} files 
+   * @param {string} baseDir 
+   */
+  buildHtmlList(files, baseDir) {
+    /**
+     * @type {any}
+     */
+    const tree = {};
+
+    // Build nested structure
+    for (const file of files) {
+      const relativePath = path.relative(baseDir, file);
+      const parts = relativePath.split(path.sep);
+      let current = tree;
+
+      for (let i = 0; i < parts.length; i++) {
+        const part = parts[i];
+        if (i === parts.length - 1) {
+          current[part] = file; // Leaf node: file path
+        } else {
+          current[part] = current[part] || {};
+          current = current[part];
+        }
+      }
+    }
+    return this.renderTree(tree, baseDir);
+  }
+
+  // Render HTML
+  /**
+   * 
+   * @param {any} node 
+   * @param {string} baseDir
+   * @returns 
+   */
+  async renderTree(node, baseDir) {
+    let html = '<ul>';
+    for (const key in node) {
+      const value = node[key];
+      if (typeof value === 'string') {
+        const title = await this.extractTitle(value);
+        const href = path.relative(baseDir, value).replace(/\\/g, '/');
+        html += `<li><a href="${href}">${title}</a></li>`;
+      } else {
+        html += `<li>${key}${await this.renderTree(value, baseDir)}</li>`;
+      }
+    }
+    html += '</ul>';
+    return html;
+  }
+
+  async renderSiteMap(){
+    // Run it
+    const baseDir = process.cwd();
+    const htmlFiles = await this.findHtmlFiles(baseDir);
+    const htmlOutput = this.buildHtmlList(htmlFiles, baseDir);
+    return htmlOutput;
+  }
+
   /**
    * Process SSI includes
    * @param {string} html 
@@ -95,7 +201,7 @@ class SimpleHTTPRequestHandler {
     return html;
   }
 
- 
+
   /**
    * Basic MIME type mapping
    * @param {string} ext 
@@ -113,26 +219,26 @@ class SimpleHTTPRequestHandler {
  * @returns 
  */
 function getAvailablePort(startingAt) {
-    /**
-     * 
-     * @param {number} currentPort 
-     * @param {(value: any) => void} cb 
-     */
-    function getNextAvailablePort(currentPort, cb) {
-        const server = net.createServer();
-        server.listen(currentPort, () => {
-            server.once('close', () => {
-                cb(currentPort);
-            });
-            server.close();
-        });
-        server.on('error', _ => {
-            getNextAvailablePort(++currentPort, cb);
-        });
-    }
-    return new Promise(resolve => {
-        getNextAvailablePort(startingAt, resolve);
+  /**
+   * 
+   * @param {number} currentPort 
+   * @param {(value: any) => void} cb 
+   */
+  function getNextAvailablePort(currentPort, cb) {
+    const server = net.createServer();
+    server.listen(currentPort, () => {
+      server.once('close', () => {
+        cb(currentPort);
+      });
+      server.close();
+    });
+    server.on('error', _ => {
+      getNextAvailablePort(++currentPort, cb);
     });
+  }
+  return new Promise(resolve => {
+    getNextAvailablePort(startingAt, resolve);
+  });
 }
 
 /**

package/about.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-16">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-    <link rel="stylesheet" href="test.css">
-</head>
-<body>
-<p>ssi_server is like Python's SimpleHTTPServer, but with minimal support for <a href="http://en.wikipedia.org/wiki/Server_Side_Includes">Server Side Includes</a> (SSI).</p>
-    
-</body>
-</html>

package/index.html

@@ -1,9 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>ssi_server demo</title>
-  </head>
-  <body>
-    <!--#include virtual="about.html"-->
-  </body>
-</html>

package/test.css

@@ -1,4 +0,0 @@
-@charset "UTF-8";
-p {
-    color: green;
-}