@noy4/docserve 0.1.0 → 0.1.2

package/index.html

@@ -35,7 +35,7 @@
     background: var(--bg);
     color: var(--text);
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
-    padding: 40px 24px;
+    padding: 40px 80px;
   }
 
   h1 {
@@ -134,12 +134,20 @@
     flex: 1;
     flex-direction: column;
     justify-content: space-between;
-    gap: 6px;
+    gap: 8px;
     padding: 10px 12px;
     border-top: 1px solid var(--border);
   }
 
   .meta .title { font-size: 0.85rem; font-weight: 600; line-height: 1.4; }
+  .meta .title .favicon {
+    width: 16px;
+    height: 16px;
+    margin-right: 6px;
+    vertical-align: -3px;
+    border-radius: 4px;
+    object-fit: contain;
+  }
   .date { font-size: 0.7rem; color: var(--muted); }
 
   .empty {
@@ -289,7 +297,18 @@
         }),
       ]),
       el("div", { class: "meta" }, [
-        el("div", { class: "title", text: file.title }),
+        el("div", { class: "title" }, [
+          file.favicon
+            ? el("img", {
+                class: "favicon",
+                src: file.favicon,
+                alt: "",
+                loading: "lazy",
+                onerror: (e) => e.currentTarget.remove(),
+              })
+            : null,
+          el("span", { text: file.title }),
+        ]),
         el("div", { class: "date", text: displayDate(file.created) }),
       ]),
     ])
@@ -324,12 +343,14 @@
   }
 
   function connectLiveReload() {
-    // Reload when the set of files changes; a dropped socket recovers after restart.
+    // Reload when the set of files or the gallery template itself changes;
+    // a dropped socket recovers after restart.
     const ws = new WebSocket(`${location.protocol === "https:" ? "wss:" : "ws:"}//${location.host}/__reload`)
     ws.addEventListener("message", (e) => {
       let change
       try { change = JSON.parse(e.data) } catch { return }
-      if (change?.type === "change" && change.contentSetChanged) location.reload()
+      if (change?.type === "change" && (change.contentSetChanged || change.templateChanged))
+        location.reload()
     })
     ws.addEventListener("close", () => setTimeout(() => location.reload(), 1000))
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noy4/docserve",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Serves a folder of HTML as a card gallery with live reload.",
   "type": "module",
   "bin": {

package/server/files.mjs

@@ -1,11 +1,11 @@
 // File metadata for /api/files: recursive *.html listing (excluding index.html),
-// <title> / <meta name="created_at"> extraction, and git date maps cached per
-// repo root.
+// <title> / <meta name="created_at"> / <link rel="icon"> extraction, and git date
+// maps cached per repo root.
 //
 // Created-date priority: meta created_at > oldest git add commit > birthtime.
 import { open, readdir, stat } from "node:fs/promises"
 import { realpathSync } from "node:fs"
-import { basename, isAbsolute, join, relative, sep } from "node:path"
+import { basename, dirname, isAbsolute, join, relative, sep } from "node:path"
 import { execFile } from "node:child_process"
 import { promisify } from "node:util"
 
@@ -43,7 +43,7 @@ export async function apiFiles(docsDir) {
     } catch {
       continue // deleted between listing and stat
     }
-    const { title, date } = await metaOf(full, st.mtimeMs)
+    const { title, date, favicon } = await metaOf(full, st.mtimeMs, docsDir)
     let key
     try {
       key = realpathSync(full)
@@ -55,6 +55,7 @@ export async function apiFiles(docsDir) {
       title: title ?? basename(full),
       url: `/${rel}`,
       path: full,
+      favicon: favicon ?? undefined,
       created: date ?? created.get(key) ?? Math.floor(st.birthtimeMs / 1000),
       modified: modified.get(key) ?? Math.floor(st.mtimeMs / 1000),
     })
@@ -63,20 +64,21 @@ export async function apiFiles(docsDir) {
   return files
 }
 
-// <title> + <meta name="created_at"> extracted from the head of a report; cached by
-// path + mtime so repeated /api/files calls only re-read files that changed.
-const metaCache = new Map() // "path:mtimeMs" -> { title, created }
+// <title>, <meta name="created_at"> and <link rel="icon"> extracted from the head
+// of a report; cached by path + mtime so repeated /api/files calls only re-read
+// files that changed.
+const metaCache = new Map() // "path:mtimeMs" -> { title, date, favicon }
 
-async function metaOf(full, mtimeMs) {
+async function metaOf(full, mtimeMs, docsDir) {
   const key = `${full}:${mtimeMs}`
   const cached = metaCache.get(key)
   if (cached !== undefined) return cached
-  const meta = await extractMeta(full)
+  const meta = await extractMeta(full, docsDir)
   metaCache.set(key, meta)
   return meta
 }
 
-async function extractMeta(full) {
+async function extractMeta(full, docsDir) {
   const findTitle = (text) => text.match(/<title>([^<]*)<\/title>/)?.[1]?.trim() ?? null
   const findDate = (text) => {
     for (const tag of text.match(/<meta\b[^>]*>/gi) ?? []) {
@@ -86,6 +88,31 @@ async function extractMeta(full) {
     }
     return null
   }
+  // Attribute value from a tag string ("v", 'v', or bare); null when absent.
+  const attrOf = (tag, name) => {
+    const m = tag.match(new RegExp(`(?<![\\w-])${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)'|([^\\s>]+))`, "i"))
+    return m?.[1] ?? m?.[2] ?? m?.[3] ?? null
+  }
+  // First <link rel="...icon..."> href resolved to a URL served from docsDir;
+  // data: and absolute http(s) URLs are kept as-is.
+  const findFavicon = (text) => {
+    // Quoted values may contain ">" (inline SVG data URIs), so scan links
+    // value-aware instead of with a plain [^>]* tag match.
+    for (const tag of text.match(/<link\b(?:"[^"]*"|'[^']*'|[^>])*>/gi) ?? []) {
+      const rel = attrOf(tag, "rel")
+      if (!rel || !/\bicon\b/i.test(rel)) continue
+      const href = attrOf(tag, "href")?.trim()
+      if (!href) continue
+      if (/^data:/i.test(href)) return href.replaceAll("#", "%23")
+      if (/^(https?:|\/\/)/i.test(href)) return href
+      const target = href.startsWith("/")
+        ? join(docsDir, href.split(/[?#]/)[0])
+        : join(dirname(full), href.split(/[?#]/)[0])
+      if (!isWithin(docsDir, target)) return null
+      return `/${normalizedRelative(docsDir, target)}`
+    }
+    return null
+  }
   try {
     const handle = await open(full, "r")
     try {
@@ -95,13 +122,14 @@ async function extractMeta(full) {
       }
       // Titles and meta tags live in <head>; read only the first 4 KB.
       const head = await read(4096, 0)
-      let meta = { title: findTitle(head), date: findDate(head) }
-      if (meta.title === null || meta.date === null) {
+      let meta = { title: findTitle(head), date: findDate(head), favicon: findFavicon(head) }
+      if (meta.title === null || meta.date === null || meta.favicon === null) {
         // Fallback for documents with a long preamble (inline favicon etc.)
         const text = await read(1 << 20, 0)
         meta = {
           title: meta.title ?? findTitle(text),
           date: meta.date ?? findDate(text),
+          favicon: meta.favicon ?? findFavicon(text),
         }
       }
       return meta
@@ -109,7 +137,7 @@ async function extractMeta(full) {
       await handle.close()
     }
   } catch {
-    return { title: null, date: null }
+    return { title: null, date: null, favicon: null }
   }
 }
 

package/server/index.mjs

@@ -48,7 +48,7 @@ const MIME = {
 
 export async function runServer({ docsDir, port: initialPort, open = false }) {
   const wss = new WebSocketServer({ path: WS_PATH })
-  const updateListener = new UpdateListener({ wss, docsDir })
+  const updateListener = new UpdateListener({ wss, docsDir, templatePath: INDEX_TEMPLATE })
   let port = initialPort // actually bound port (may fall back +1 on conflict)
 
   const cleanup = () => {

package/server/watch.mjs

@@ -1,18 +1,22 @@
 // UpdateListener: watch docsDir recursively for *.html changes and broadcast
-// debounced batches over the reload socket.
+// debounced batches over the reload socket. The gallery template is watched
+// too; its edits set templateChanged so gallery tabs pick them up even though
+// nothing in docsDir changed.
 //
 // The gallery list is every *.html except any index.html; files outside that
 // set never flip contentSetChanged.
 import { existsSync, watch } from "node:fs"
-import { basename, resolve } from "node:path"
+import { basename, dirname, resolve } from "node:path"
 import { isWithin, listHtmlFiles, normalizedRelative } from "./files.mjs"
 
 const DEBOUNCE_MS = 50 // like livePreview.previewDebounceDelay
+const TEMPLATE_TOUCH = "\u0000template" // sentinel: never a real docsDir-relative path
 
 export class UpdateListener {
   constructor(options = {}) {
     this.wss = options.wss
     this.docsDir = options.docsDir
+    this.templatePath = options.templatePath
     this.debounceMs = options.debounceMs ?? DEBOUNCE_MS
     this.knownFiles = new Set()
     this.broadcastQueue = Promise.resolve()
@@ -42,12 +46,25 @@ export class UpdateListener {
         this.queueBroadcast(normalizedRelative(this.docsDir, full))
       }).on("error", () => {}),
     )
+
+    if (this.templatePath) {
+      // Watch the template's directory: atomic saves replace the file, so the
+      // file itself would miss events.
+      const templateName = basename(this.templatePath)
+      this.watchers.push(
+        watch(dirname(this.templatePath), (event, filename) => {
+          if (filename === templateName) this.queueBroadcast(TEMPLATE_TOUCH)
+        }).on("error", () => {}),
+      )
+    }
   }
 
   async broadcastChanges(touched) {
     let contentSetChanged = false
+    const templateChanged = touched.includes(TEMPLATE_TOUCH)
+    const pages = touched.filter((rel) => rel !== TEMPLATE_TOUCH)
 
-    for (const rel of touched) {
+    for (const rel of pages) {
       if (basename(rel) === "index.html") continue // never a gallery card
       const full = resolve(this.docsDir, rel)
       const exists = existsSync(full)
@@ -62,7 +79,7 @@ export class UpdateListener {
       }
     }
 
-    this.wss.broadcast({ type: "change", pages: touched, contentSetChanged })
+    this.wss.broadcast({ type: "change", pages, contentSetChanged, templateChanged })
   }
 
   close() {