implement hot-reload

Author: guFalcon

app.js

@@ -156,6 +156,46 @@ function getStartPage() {
   return url;
 }
 
+// --- SSE Hot Reload ---
+const clients = [];
+app.get('/hot-reload', (req, res) => {
+  res.set({
+    'Content-Type': 'text/event-stream',
+    'Cache-Control': 'no-cache',
+    'Connection': 'keep-alive',
+  });
+  res.flushHeaders();
+  res.write('\n');
+  clients.push(res);
+
+  req.on('close', () => {
+    const idx = clients.indexOf(res);
+    if (idx !== -1) clients.splice(idx, 1);
+  });
+});
+
+function broadcastReloadSSE() {
+  console.log("Broadcasting reload to", clients.length, "clients");
+  for (const client of clients) {
+    client.write('event: reload\ndata: now\n\n');
+  }
+}
+
+const basePath = process.env.NEXT_PUBLIC_IS_APP_FOLDER ? '/app/' : '.';
+
+// Watch md/ folder and trigger scanFiles on changes if NEXT_AUTOSCAN is true
+const isAutoScan = process.env.NEXT_AUTOSCAN === "true";
+console.log(`AutoScan is set to ${isAutoScan}`);
+if (isAutoScan) {
+  const mdPath = path.join(basePath, "md");
+  const watcher = chokidar.watch(mdPath, { ignoreInitial: true, persistent: true, depth: 99 });
+  watcher.on("all", (event, pathChanged) => {
+    console.log(`[Watcher] Detected ${event} in ${pathChanged}. Triggering scanFiles...`);
+    scanFiles("md/", mdPath);
+    broadcastReloadSSE();
+  });
+}
+
 app.use(express.urlencoded({ extended: true }));
 app.use(express.json());
 
@@ -316,27 +356,13 @@ initKeycloak(app).then(() => {
     }
   });
 
-  const basePath = process.env.NEXT_PUBLIC_IS_APP_FOLDER ? '/app/' : '.';
-
   // Initial scan
   scanFiles("md/", path.join(basePath, "md")).then(() => {
     scanFonts(path.join(basePath, "assets")).then(() => {
       app.listen(process.env.NEXT_PUBLIC_PORT, "0.0.0.0");
     });
   });
 
-  // Watch md/ folder and trigger scanFiles on changes if NEXT_AUTOSCAN is true
-  const isAutoScan = process.env.NEXT_AUTOSCAN === "true";
-  console.log(`AutoScan is set to ${isAutoScan}`);
-  if (isAutoScan) {
-    const mdPath = path.join(basePath, "md");
-    const watcher = chokidar.watch(mdPath, { ignoreInitial: true, persistent: true, depth: 99 });
-    watcher.on("all", (event, pathChanged) => {
-      console.log(`[Watcher] Detected ${event} in ${pathChanged}. Triggering scanFiles...`);
-      scanFiles("md/", mdPath);
-    });
-  }
-
   // If file is not found, redirect to the start page.
   app.use((_, res) => res.redirect(getStartPage()));
 });

obsidian.js

@@ -1339,7 +1339,7 @@ function getMermaidScriptEntry() {
     return txt.value;
   }
 
-  // wenn Reveal „ready“ ist, oder einfach bei DOMContentLoaded
+  // If reveal is ready, or simply on DOMContentLoaded
   document.addEventListener("DOMContentLoaded", () => {
     document.querySelectorAll("pre.mermaid").forEach(async (el, i) => {
       const raw = el.textContent;
@@ -1355,6 +1355,51 @@ function getMermaidScriptEntry() {
 </script>`;
 }
 
+function getAutoReloadScript() {
+  return `<script>
+(function() {
+  let scrollY = 0;
+  let slideIndices = null;
+  const es = new EventSource('/hot-reload');
+  es.addEventListener('reload', function() {
+    if (window.Reveal && Reveal.getIndices) {
+      slideIndices = Reveal.getIndices();
+      sessionStorage.setItem("revealSlide", JSON.stringify(slideIndices));
+    } else {
+      scrollY = window.scrollY;
+      sessionStorage.setItem("scrollY", scrollY);
+    }
+    location.reload();
+  });
+
+  window.addEventListener("DOMContentLoaded", function() {
+    // Hide body until slide/scroll is restored
+    document.body.style.display = "none";
+    if (window.Reveal && Reveal.slide) {
+      const saved = sessionStorage.getItem("revealSlide");
+      if (saved) {
+        const idx = JSON.parse(saved);
+        Reveal.slide(idx.h, idx.v || 0);
+        sessionStorage.removeItem("revealSlide");
+        setTimeout(function() {
+          document.body.style.display = "";
+        }, 0); // Reveal.slide is synchronous, but just in case
+      } else {
+        document.body.style.display = "";
+      }
+    } else {
+      const savedY = sessionStorage.getItem("scrollY");
+      if (savedY) {
+        window.scrollTo(0, parseInt(savedY, 10));
+        sessionStorage.removeItem("scrollY");
+      }
+      document.body.style.display = "";
+    }
+  });
+})();
+</script>`
+}
+
 export async function wrapInPage(html, startPage, req) {
   const pre = `
       <!DOCTYPE html>
@@ -1385,6 +1430,7 @@ export async function wrapInPage(html, startPage, req) {
         </div>
         <script src="/obsidian-page.js"></script>
         ${getMermaidScriptEntry()}
+        ${getAutoReloadScript()}
         <script lang="javascript">
         initFonts('${JSON.stringify(mainFontsArray)}', '${JSON.stringify(
     navFontsArray
@@ -1420,6 +1466,7 @@ export async function wrapAsDocument(html, req) {
         </div>
         <script src="/obsidian-page.js"></script>
         ${getMermaidScriptEntry()}
+        ${getAutoReloadScript()}
         <script lang="javascript">
         initFonts('${JSON.stringify(mainFontsArray)}', '${JSON.stringify(
     navFontsArray
@@ -1503,6 +1550,7 @@ export async function wrapInReveal(reveal, req) {
     <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/tomorrow.min.css"> -->
 
     ${getMermaidScriptEntry()}
+    ${getAutoReloadScript()}
 
     <!-- Printing and PDF exports -->
     <script>