md-explorer 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "md-explorer",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Web-based file explorer for Markdown & HTML",
   "bin": {
     "md-explorer": "server.js"
@@ -27,7 +27,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/iamthemovie/md-explorer.git"
+    "url": "git+https://github.com/iamthemovie/md-explorer.git"
   },
   "dependencies": {
     "express": "^4.21.0",

package/public/app.js

@@ -5,6 +5,9 @@
   const sidebar = document.getElementById('sidebar');
   let activeLabel = null;
 
+  // Map from file path to { label, node } for tree restoration
+  const treeNodes = {};
+
   // --- Toggle sidebar ---
   collapseBtn.addEventListener('click', () => {
     sidebar.classList.toggle('collapsed');
@@ -43,17 +46,11 @@
         childUl.className = 'tree-children';
         let loaded = false;
 
+        // Store directory node for programmatic expansion
+        treeNodes[node.path] = { label, node, childUl, loaded: () => loaded, setLoaded: () => { loaded = true; } };
+
         label.addEventListener('click', async () => {
-          const opening = !childUl.classList.contains('open');
-          if (opening && !loaded) {
-            const children = await fetchEntries(node.path);
-            const freshUl = buildTreeUl(children);
-            while (freshUl.firstChild) childUl.appendChild(freshUl.firstChild);
-            loaded = true;
-          }
-          childUl.classList.toggle('open');
-          label.querySelector('.tree-icon').innerHTML =
-            childUl.classList.contains('open') ? '▾' : '▸';
+          await expandDir(node.path);
         });
 
         li.appendChild(label);
@@ -67,6 +64,9 @@
           '<span class="tree-icon">' + icon + '</span>' +
           escapeHtml(node.name);
 
+        // Store file node for highlight restoration
+        treeNodes[node.path] = { label, node };
+
         label.addEventListener('click', () => handleFileClick(node, label));
         li.appendChild(label);
       }
@@ -77,6 +77,52 @@
     return ul;
   }
 
+  // Expand a directory in the tree (toggle or force open)
+  async function expandDir(dirPath, forceOpen) {
+    const entry = treeNodes[dirPath];
+    if (!entry || !entry.childUl) return;
+
+    const { label, childUl } = entry;
+    const isOpen = childUl.classList.contains('open');
+
+    if (forceOpen && isOpen) return; // already open
+
+    if (!isOpen && !entry.loaded()) {
+      const children = await fetchEntries(dirPath);
+      const freshUl = buildTreeUl(children);
+      while (freshUl.firstChild) childUl.appendChild(freshUl.firstChild);
+      entry.setLoaded();
+    }
+
+    if (!forceOpen || !isOpen) {
+      childUl.classList.toggle('open');
+      label.querySelector('.tree-icon').innerHTML =
+        childUl.classList.contains('open') ? '&#9662;' : '&#9656;';
+    }
+  }
+
+  // Expand all ancestor directories for a given file path and highlight it
+  async function expandToFile(filePath) {
+    const segments = filePath.split('/');
+    // Walk directory segments, expanding each
+    for (let i = 1; i < segments.length; i++) {
+      const dirPath = segments.slice(0, i).join('/');
+      // If the directory node isn't loaded in the tree yet, we need to wait
+      // for the parent to load first (which buildTreeUl handles via fetchEntries)
+      if (!treeNodes[dirPath]) break;
+      await expandDir(dirPath, true);
+    }
+
+    // Highlight the file
+    const fileEntry = treeNodes[filePath];
+    if (fileEntry) {
+      if (activeLabel) activeLabel.classList.remove('active');
+      fileEntry.label.classList.add('active');
+      activeLabel = fileEntry.label;
+      fileEntry.label.scrollIntoView({ block: 'nearest' });
+    }
+  }
+
   // --- File click handlers ---
   function handleFileClick(node, label) {
     const ext = node.name.split('.').pop().toLowerCase();
@@ -84,14 +130,20 @@
     if (ext === 'html' || ext === 'htm') {
       window.open('/raw/' + node.path, '_blank');
     } else if (ext === 'md') {
-      loadMarkdown(node.path, label);
+      loadMarkdown(node.path, label, true);
     }
   }
 
-  async function loadMarkdown(filePath, label) {
-    if (activeLabel) activeLabel.classList.remove('active');
-    label.classList.add('active');
-    activeLabel = label;
+  async function loadMarkdown(filePath, label, pushHistory) {
+    if (label) {
+      if (activeLabel) activeLabel.classList.remove('active');
+      label.classList.add('active');
+      activeLabel = label;
+    }
+
+    if (pushHistory) {
+      history.pushState(null, '', '/' + filePath);
+    }
 
     try {
       const res = await fetch('/api/file?path=' + encodeURIComponent(filePath));
@@ -107,6 +159,27 @@
     }
   }
 
+  // --- Back/forward navigation ---
+  window.addEventListener('popstate', () => {
+    const filePath = decodeURIComponent(location.pathname).replace(/^\//, '');
+    if (filePath) {
+      const entry = treeNodes[filePath];
+      const label = entry ? entry.label : null;
+      if (label) {
+        if (activeLabel) activeLabel.classList.remove('active');
+        label.classList.add('active');
+        activeLabel = label;
+      }
+      loadMarkdown(filePath, null, false);
+    } else {
+      // Navigated back to root
+      if (activeLabel) activeLabel.classList.remove('active');
+      activeLabel = null;
+      contentEl.innerHTML = '<p class="placeholder">Select a file from the sidebar</p>';
+      document.title = 'MarkdownX';
+    }
+  });
+
   // --- Utilities ---
   function escapeHtml(str) {
     const el = document.createElement('span');
@@ -115,5 +188,16 @@
   }
 
   // --- Init ---
-  loadTree();
+  async function init() {
+    await loadTree();
+
+    // Restore file from URL if present
+    const filePath = decodeURIComponent(location.pathname).replace(/^\//, '');
+    if (filePath && filePath.toLowerCase().endsWith('.md')) {
+      await expandToFile(filePath);
+      loadMarkdown(filePath, null, false);
+    }
+  }
+
+  init();
 })();

package/server.js

@@ -179,6 +179,12 @@ app.get('/raw/*', (req, res) => {
   });
 });
 
+// --- SPA catch-all (deep URL support) ---
+
+app.get('*', (req, res) => {
+  res.sendFile(path.join(__dirname, 'public', 'index.html'));
+});
+
 // --- Start ---
 
 const server = app.listen(PORT, () => {