repoview 0.1.4 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "repoview",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "private": false,
   "type": "module",
   "description": "GitHub-like repo browsing for local Git repositories (Markdown, live reload, broken link scanner).",

package/public/app.css

@@ -1,5 +1,5 @@
 :root {
-  color-scheme: light;
+  color-scheme: light dark;
   --bg: #ffffff;
   --panel: #ffffff;
   --text: #24292f;
@@ -11,6 +11,20 @@
   --accent: #0969da;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0d1117;
+    --panel: #151b23;
+    --text: #f0f6fc;
+    --muted: #9198a1;
+    --border: #3d444d;
+    --subtleBg: #151b23;
+    --btn: #21262d;
+    --btnHover: #30363d;
+    --accent: #4493f8;
+  }
+}
+
 html,
 body {
   height: 100%;
@@ -39,7 +53,7 @@ a {
   position: sticky;
   top: 0;
   z-index: 10;
-  background: rgba(255, 255, 255, 0.92);
+  background: color-mix(in srgb, var(--bg) 92%, transparent);
   backdrop-filter: saturate(180%) blur(8px);
   border-bottom: 1px solid var(--border);
 }
@@ -75,6 +89,88 @@ a {
   align-items: center;
 }
 
+.conn-status {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--muted);
+  flex-shrink: 0;
+}
+
+.conn-status[data-status="connected"] {
+  background: #2da44e;
+}
+
+.conn-status[data-status="polling"] {
+  background: #bf8700;
+}
+
+.conn-status[data-status="disconnected"] {
+  background: #cf222e;
+}
+
+.pdf-wrap {
+  display: flex;
+  flex-direction: column;
+}
+
+.pdf-frame {
+  width: 100%;
+  height: 80vh;
+  border: none;
+  border-radius: 6px;
+}
+
+.image-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+  background: var(--subtleBg);
+  border-radius: 6px;
+  min-height: 200px;
+}
+
+.image-preview {
+  max-width: 100%;
+  max-height: 80vh;
+  object-fit: contain;
+}
+
+.csv-wrap {
+  overflow: auto;
+}
+
+.csv-table-wrap {
+  overflow-x: auto;
+}
+
+.csv-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+}
+
+.csv-table th,
+.csv-table td {
+  padding: 6px 12px;
+  border: 1px solid var(--border);
+  text-align: left;
+  white-space: nowrap;
+}
+
+.csv-table th {
+  background: var(--subtleBg);
+  font-weight: 600;
+  position: sticky;
+  top: 0;
+}
+
+.csv-table tr:hover td {
+  background: var(--subtleBg);
+}
+
 .meta-menu {
   display: none;
   position: relative;
@@ -117,7 +213,7 @@ a {
   padding: 3px 8px;
   border: 1px solid var(--border);
   border-radius: 999px;
-  background: #fff;
+  background: var(--panel);
 }
 
 .mono {
@@ -149,7 +245,8 @@ a {
 }
 
 .crumb-sep {
-  color: rgba(31, 35, 40, 0.28);
+  color: var(--muted);
+  opacity: 0.5;
 }
 
 .panel {
@@ -247,8 +344,26 @@ a {
   width: 160px;
 }
 
+.tz-toggle {
+  margin-left: 6px;
+  padding: 2px 6px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--muted);
+  background: var(--btn);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.tz-toggle:hover {
+  background: var(--btnHover);
+  color: var(--text);
+}
+
 .file-table tr:hover td {
-  background: #f6f8fa;
+  background: var(--subtleBg);
 }
 
 .item {
@@ -300,19 +415,25 @@ a {
   margin: 0;
   padding: 16px;
   overflow: auto;
-  background: #f6f8fa;
+  background: var(--subtleBg);
 }
 
 .note {
   padding: 12px;
   border: 1px solid var(--border);
   border-radius: 6px;
-  background: #f6f8fa;
+  background: var(--subtleBg);
 }
 
 .error {
   padding: 12px;
-  color: #cf222e;
+  color: var(--error, #cf222e);
+}
+
+@media (prefers-color-scheme: dark) {
+  .error {
+    color: #f85149;
+  }
 }
 
 .markdown-body .markdown-alert {
@@ -321,7 +442,7 @@ a {
   border: 1px solid var(--border);
   border-left-width: 4px;
   border-radius: 6px;
-  background: #f6f8fa;
+  background: var(--subtleBg);
 }
 
 .markdown-body .markdown-alert-title {
@@ -353,7 +474,7 @@ a {
   padding: 12px;
   border: 1px solid var(--border);
   border-radius: 12px;
-  background: #f6f8fa;
+  background: var(--subtleBg);
   overflow: auto;
 }
 

package/public/app.js

@@ -1,6 +1,23 @@
 (() => {
   const shouldWatch = new URLSearchParams(location.search).get("watch") !== "0";
-  if (!shouldWatch) return;
+  const statusEl = document.getElementById("conn-status");
+
+  function setStatus(state) {
+    if (!statusEl) return;
+    statusEl.dataset.status = state;
+    const titles = {
+      connected: "Live reload: connected",
+      connecting: "Live reload: connecting...",
+      polling: "Live reload: polling",
+      disconnected: "Live reload: disconnected",
+    };
+    statusEl.title = titles[state] || "";
+  }
+
+  if (!shouldWatch) {
+    if (statusEl) statusEl.style.display = "none";
+    return;
+  }
 
   let pollingTimer = null;
   let lastRevision = null;
@@ -14,6 +31,7 @@
 
   async function ensurePolling() {
     if (pollingTimer) return;
+    setStatus("polling");
     try {
       lastRevision = await fetchRevision();
     } catch {
@@ -32,10 +50,14 @@
 
   try {
     const es = new EventSource("/events");
+    es.addEventListener("open", () => {
+      setStatus("connected");
+    });
     es.addEventListener("reload", () => {
       location.reload();
     });
     es.addEventListener("error", () => {
+      setStatus("disconnected");
       // Some environments/proxies break SSE; fall back to polling.
       void ensurePolling();
     });
@@ -113,8 +135,49 @@ function renderMath() {
   }
 }
 
+function formatDateTime(ms, useUtc) {
+  const d = new Date(ms);
+  const opts = {
+    year: "numeric",
+    month: "short",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    timeZone: useUtc ? "UTC" : undefined,
+  };
+  const formatted = d.toLocaleString(undefined, opts);
+  return useUtc ? `${formatted} UTC` : formatted;
+}
+
+function initTimezoneToggle() {
+  const toggle = document.querySelector(".tz-toggle");
+  if (!toggle) return;
+
+  const cells = document.querySelectorAll(".mtime[data-ts]");
+  if (!cells.length) return;
+
+  let useUtc = localStorage.getItem("tz") === "utc";
+
+  function update() {
+    toggle.textContent = useUtc ? "UTC" : "Local";
+    for (const cell of cells) {
+      const ts = Number(cell.dataset.ts);
+      if (ts) cell.textContent = formatDateTime(ts, useUtc);
+    }
+  }
+
+  toggle.addEventListener("click", () => {
+    useUtc = !useUtc;
+    localStorage.setItem("tz", useUtc ? "utc" : "local");
+    update();
+  });
+
+  update();
+}
+
 window.addEventListener("load", () => {
   preserveQueryParamsOnInternalLinks(["ignored", "watch"]);
   renderMath();
   renderMermaid();
+  initTimezoneToggle();
 });

package/src/markdown.js

@@ -16,6 +16,26 @@ function escapeHtml(s) {
     .replaceAll("'", "'");
 }
 
+// CommonMark only allows "1." to interrupt a paragraph, but GitHub allows any number.
+// This preprocessor adds blank lines before ordered lists starting with numbers other than 1.
+function normalizeOrderedLists(text) {
+  const lines = text.split("\n");
+  const result = [];
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const prevLine = i > 0 ? lines[i - 1] : "";
+    // Check if current line starts an ordered list with number > 1
+    if (/^[2-9]\d*\. /.test(line)) {
+      // Insert blank line if previous line is non-empty and not a list item
+      if (prevLine.trim() && !/^\d+\. /.test(prevLine) && !/^[-*+] /.test(prevLine)) {
+        result.push("");
+      }
+    }
+    result.push(line);
+  }
+  return result.join("\n");
+}
+
 function isExternalHref(href) {
   return /^(?:[a-z]+:)?\/\//i.test(href) || href.startsWith("mailto:") || href.startsWith("tel:");
 }

package/src/server.js

@@ -12,6 +12,7 @@ import { createMarkdownRenderer } from "./markdown.js";
 import { loadGitIgnoreMatcher } from "./gitignore.js";
 import { createRepoLinkScanner } from "./linkcheck.js";
 import {
+  escapeHtml,
   renderBrokenLinksPage,
   renderErrorPage,
   renderFilePage,
@@ -35,6 +36,63 @@ function isWithinRoot(rootReal, candidateReal) {
   return candidateReal.startsWith(rootWithSep);
 }
 
+function parseCsv(text, delimiter = ",") {
+  const rows = [];
+  let current = [];
+  let cell = "";
+  let inQuotes = false;
+
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i];
+    if (inQuotes) {
+      if (ch === '"' && text[i + 1] === '"') {
+        cell += '"';
+        i++;
+      } else if (ch === '"') {
+        inQuotes = false;
+      } else {
+        cell += ch;
+      }
+    } else {
+      if (ch === '"') {
+        inQuotes = true;
+      } else if (ch === delimiter) {
+        current.push(cell);
+        cell = "";
+      } else if (ch === "\n" || (ch === "\r" && text[i + 1] === "\n")) {
+        if (ch === "\r") i++;
+        current.push(cell);
+        rows.push(current);
+        current = [];
+        cell = "";
+      } else if (ch === "\r") {
+        current.push(cell);
+        rows.push(current);
+        current = [];
+        cell = "";
+      } else {
+        cell += ch;
+      }
+    }
+  }
+  if (cell || current.length) {
+    current.push(cell);
+    rows.push(current);
+  }
+  return rows;
+}
+
+function renderCsvTable(rows, escFn) {
+  if (!rows.length) return "<p>Empty file</p>";
+  const header = rows[0];
+  const body = rows.slice(1);
+  const ths = header.map((h) => `<th>${escFn(h)}</th>`).join("");
+  const trs = body
+    .map((row) => `<tr>${row.map((c) => `<td>${escFn(c)}</td>`).join("")}</tr>`)
+    .join("\n");
+  return `<div class="csv-table-wrap"><table class="csv-table"><thead><tr>${ths}</tr></thead><tbody>${trs}</tbody></table></div>`;
+}
+
 async function getGitInfo(repoRootReal) {
   const gitDir = path.join(repoRootReal, ".git");
   try {
@@ -311,6 +369,7 @@ export async function startServer({ repoRoot, host, port, watch }) {
               href,
               size: isDir ? "" : formatBytes(info.size),
               mtime: formatDate(info.mtimeMs),
+              mtimeMs: info.mtimeMs,
             };
           }),
       );
@@ -388,7 +447,51 @@ export async function startServer({ repoRoot, host, port, watch }) {
       const fileName = path.basename(resolved);
       const ext = path.extname(fileName).toLowerCase();
       const isMarkdown = [".md", ".markdown", ".mdown", ".mkd", ".mkdn"].includes(ext);
+      const isPdf = ext === ".pdf";
+      const isImage = [".png", ".jpg", ".jpeg", ".gif", ".webp", ".svg", ".ico", ".bmp"].includes(ext);
+      const isCsv = [".csv", ".tsv"].includes(ext);
       const maxBytes = 2 * 1024 * 1024;
+      const rawSrc = `/raw/${encodePathForUrl(toPosixPath(stripped))}`;
+
+      if (isPdf) {
+        res.status(200).send(
+          renderFilePage({
+            title: `${repoName}/${stripped}`,
+            repoName,
+            gitInfo,
+            brokenLinks: linkScanner.getState(),
+            relPathPosix: toPosixPath(stripped),
+            querySuffix,
+            toggleIgnoredHref,
+            showIgnored,
+            fileName,
+            isMarkdown: false,
+            mediaType: "pdf",
+            renderedHtml: `<iframe class="pdf-frame" src="${rawSrc}"></iframe>`,
+          }),
+        );
+        return;
+      }
+
+      if (isImage) {
+        res.status(200).send(
+          renderFilePage({
+            title: `${repoName}/${stripped}`,
+            repoName,
+            gitInfo,
+            brokenLinks: linkScanner.getState(),
+            relPathPosix: toPosixPath(stripped),
+            querySuffix,
+            toggleIgnoredHref,
+            showIgnored,
+            fileName,
+            isMarkdown: false,
+            mediaType: "image",
+            renderedHtml: `<img class="image-preview" src="${rawSrc}" alt="${escapeHtml(fileName)}" />`,
+          }),
+        );
+        return;
+      }
 
       if (st.size > maxBytes) {
         res.status(200).send(
@@ -417,7 +520,13 @@ export async function startServer({ repoRoot, host, port, watch }) {
       const text = raw.toString("utf8");
 
       let renderedHtml;
-      if (isMarkdown) {
+      let mediaType;
+      if (isCsv) {
+        const delimiter = ext === ".tsv" ? "\t" : ",";
+        const rows = parseCsv(text, delimiter);
+        renderedHtml = renderCsvTable(rows, escapeHtml);
+        mediaType = "csv";
+      } else if (isMarkdown) {
         const baseDir = toPosixPath(path.posix.dirname(toPosixPath(stripped)));
         renderedHtml = md.render(text, { baseDirPosix: baseDir === "." ? "" : baseDir });
       } else {
@@ -438,6 +547,7 @@ export async function startServer({ repoRoot, host, port, watch }) {
           showIgnored,
           fileName,
           isMarkdown,
+          mediaType,
           renderedHtml,
         }),
       );

package/src/views.js

@@ -1,6 +1,6 @@
 import path from "node:path";
 
-function escapeHtml(s) {
+export function escapeHtml(s) {
   return String(s)
     .replaceAll("&", "&")
     .replaceAll("<", "&lt;")
@@ -44,8 +44,9 @@ function pageTemplate({ title, repoName, gitInfo, relPathPosix, bodyHtml }) {
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>${escapeHtml(title)}</title>
-    <link rel="stylesheet" href="/static/vendor/github-markdown-css/github-markdown-light.css" />
-    <link rel="stylesheet" href="/static/vendor/highlight.js/styles/github.css" />
+    <link rel="stylesheet" href="/static/vendor/github-markdown-css/github-markdown.css" />
+    <link rel="stylesheet" href="/static/vendor/highlight.js/styles/github.css" media="(prefers-color-scheme: light)" />
+    <link rel="stylesheet" href="/static/vendor/highlight.js/styles/github-dark.css" media="(prefers-color-scheme: dark)" />
     <link rel="stylesheet" href="/static/vendor/katex/katex.min.css" />
     <link rel="stylesheet" href="/static/app.css" />
   </head>
@@ -138,8 +139,9 @@ function pageTemplateWithLinks({
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>${escapeHtml(title)}</title>
-    <link rel="stylesheet" href="/static/vendor/github-markdown-css/github-markdown-light.css" />
-    <link rel="stylesheet" href="/static/vendor/highlight.js/styles/github.css" />
+    <link rel="stylesheet" href="/static/vendor/github-markdown-css/github-markdown.css" />
+    <link rel="stylesheet" href="/static/vendor/highlight.js/styles/github.css" media="(prefers-color-scheme: light)" />
+    <link rel="stylesheet" href="/static/vendor/highlight.js/styles/github-dark.css" media="(prefers-color-scheme: dark)" />
     <link rel="stylesheet" href="/static/vendor/katex/katex.min.css" />
     <link rel="stylesheet" href="/static/app.css" />
   </head>
@@ -154,6 +156,7 @@ function pageTemplateWithLinks({
             ${brokenPill}
             ${ignoredPill}
           </span>
+          <span id="conn-status" class="conn-status" title="Live reload: connecting..."></span>
           ${metaMenu}
         </div>
       </div>
@@ -185,9 +188,10 @@ export function renderTreePage({
     .map((r) => {
       const icon = r.isDir ? "dir" : "file";
       const name = escapeHtml(r.name);
+      const tsAttr = r.mtimeMs ? ` data-ts="${r.mtimeMs}"` : "";
       return `<tr>
   <td class="name"><a class="item ${icon}" href="${r.href}">${name}</a></td>
-  <td class="mtime">${escapeHtml(r.mtime)}</td>
+  <td class="mtime"${tsAttr}>${escapeHtml(r.mtime)}</td>
   <td class="size">${escapeHtml(r.size)}</td>
 </tr>`;
     })
@@ -205,7 +209,7 @@ export function renderTreePage({
   <div class="table-wrap">
     <table class="file-table">
       <thead>
-        <tr><th class="name">Name</th><th class="mtime">Last modified</th><th class="size">Size</th></tr>
+        <tr><th class="name">Name</th><th class="mtime">Last modified <button type="button" class="tz-toggle" title="Toggle local/UTC time">Local</button></th><th class="size">Size</th></tr>
       </thead>
       <tbody>
         ${tableRows || `<tr><td colspan="3" class="empty">Empty directory</td></tr>`}
@@ -239,6 +243,7 @@ export function renderFilePage({
   relPathPosix,
   fileName,
   isMarkdown,
+  mediaType,
   renderedHtml,
 }) {
   const relDir = path.posix.dirname(relPathPosix || "");
@@ -246,6 +251,7 @@ export function renderFilePage({
   const rawHref = `/raw/${encodePathForUrl(relPathPosix || "")}${suffix}`;
   const treeHref = `/tree/${encodePathForUrl(relDir === "." ? "" : relDir)}${suffix}`;
 
+  const wrapClass = mediaType ? `${mediaType}-wrap` : isMarkdown ? "markdown-body markdown-wrap" : "code-wrap";
   const body = `<section class="panel">
   <div class="panel-title">
     <span class="filename">${escapeHtml(fileName)}</span>
@@ -253,7 +259,7 @@ export function renderFilePage({
     <a class="btn" href="${treeHref}">Back</a>
     <a class="btn" href="${rawHref}">Raw</a>
   </div>
-  <div class="${isMarkdown ? "markdown-body markdown-wrap" : "code-wrap"}">
+  <div class="${wrapClass}">
     ${renderedHtml}
   </div>
 </section>`;