projview 1.0.0 → 1.1.1

package/README.md

@@ -2,7 +2,7 @@
 
 a fast, zero-config local viewer for **markdown** + **mermaid** files. run it in
 any directory, get a soft-dark cartoonish localhost view of every `.md` / `.mmd`
-under it - rendered diagrams, search, live reload - close it and nothing's left
+(plus `.json` / `.yaml`) under it - rendered diagrams, search, live reload - close it and nothing's left
 behind.
 
 that's the product. point it at a docs folder, read comfortably, ctrl-c, gone.
@@ -33,8 +33,9 @@ projview /path/to/notes --no-open
 
 | | |
 | --- | --- |
-| tree nav | every `.md` / `.mmd` under the root (skips `node_modules`, `dist`, dot-dirs) |
+| tree nav | every `.md` / `.mmd` / `.json` / `.yml` / `.yaml` under the root (skips `node_modules`, `dist`, dot-dirs, lockfiles) |
 | rendering | markdown + syntax-highlighted code + **mermaid diagrams** (with pan/zoom) |
+| data files | JSON pretty-printed (literals kept exact), YAML shown as written - both with line numbers + indent guides |
 | search | `⌘K` palette - fuzzy filenames + full-text content with line snippets |
 | live reload | edit a file, the browser updates |
 | ephemeral | in-memory by default; nothing written to disk, nothing left behind |

package/docs/README.md

@@ -16,6 +16,9 @@ faults. use this tree while iterating on the tool.
 | diagrams | [architecture](diagrams/architecture.mmd) | standalone valid flowchart |
 | diagrams | [sequence](diagrams/sequence.mmd) | standalone valid sequence |
 | diagrams | [broken diagram](diagrams/broken-diagram.mmd) | **invalid mermaid** - error card test |
+| data | [minified json](data/minified.json) | one-line JSON -> pretty-printed, big int kept exact |
+| data | [not-strict json](data/not-strict.jsonc.json) | JSONC with comments - shown as-is with a notice |
+| data | [values.yaml](data/values.yaml) | helm-style YAML - indent guides, block scalar, multi-doc |
 | reference | [api](reference/api.md) | long doc - TOC + scroll-spy |
 | reference | [glossary](reference/glossary.md) | cross-links + external links |
 | edge | [syntax stress](edge-cases/syntax-stress.md) | gnarly markdown + inline broken fence |

package/docs/data/minified.json

@@ -0,0 +1 @@
+{"name":"lgtm","version":"2.4.1","replicas":3,"bigId":12345678901234567890,"enabled":true,"labels":{"app.kubernetes.io/name":"lgtm","tier":"observability"},"ports":[{"name":"http","port":3000},{"name":"grpc","port":9095}],"empty":{},"tags":[],"note":"commas, colons: and {braces} inside strings stay put"}

package/docs/data/not-strict.jsonc.json

@@ -0,0 +1,4 @@
+{
+  // comments make this JSONC, not JSON - shown as-is with a note
+  "compilerOptions": { "strict": true },
+}

package/docs/data/values.yaml

@@ -0,0 +1,36 @@
+# a helm-style values file - indentation is meaning, so it's shown as written
+replicaCount: 2
+
+image:
+  repository: ghcr.io/example/alloy
+  tag: "v1.4.2"
+  pullPolicy: IfNotPresent
+
+resources:
+  limits:
+    cpu: 500m
+    memory: 512Mi
+  requests:
+    cpu: 100m
+    memory: 128Mi
+
+config: |
+  logging {
+    level = "info"
+  }
+
+  discovery.kubernetes "pods" {
+    role = "pod"
+  }
+
+tolerations:
+  - key: dedicated
+    operator: Equal
+    value: observability
+    effect: NoSchedule
+---
+# second document in the same file
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: {{ .Release.Name }}-extra

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projview",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Ephemeral local previewer for markdown + mermaid files in any directory",
   "type": "module",
   "bin": {

package/public/icons.js

@@ -4,4 +4,10 @@ export const SVG_FOLDER = `<svg viewBox="0 0 24 24" fill="none" stroke="currentC
 export const SVG_FILE = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg>`;
 export const SVG_DIAGRAM = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="2.6"/><circle cx="6" cy="12" r="2.6"/><circle cx="18" cy="19" r="2.6"/><line x1="8.4" y1="10.7" x2="15.6" y2="6.3"/><line x1="8.4" y1="13.3" x2="15.6" y2="17.7"/></svg>`;
 
-export const fileIcon = (ext) => (ext === '.mmd' ? SVG_DIAGRAM : SVG_FILE);
+export const SVG_DATA = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5a2 2 0 0 0 2 2h1"/><path d="M16 21h1a2 2 0 0 0 2-2v-5a2 2 0 0 1 2-2 2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"/></svg>`;
+
+// The client's one list of previewable types: ext -> kind (null if not previewable).
+const KINDS = { '.md': 'md', '.mmd': 'mmd', '.json': 'data', '.yml': 'data', '.yaml': 'data' };
+export const fileKind = (name) => KINDS[(name.match(/\.[^./]+$/)?.[0] || '').toLowerCase()] || null;
+
+export const fileIcon = (name) => ({ mmd: SVG_DIAGRAM, data: SVG_DATA }[fileKind(name)] || SVG_FILE);

package/public/links.js

@@ -5,6 +5,7 @@ import { state } from './store.js';
 import { resolveRelative } from './paths.js';
 import { openFile, scrollToFragment } from './viewer.js';
 import { toast } from './toast.js';
+import { fileKind } from './icons.js';
 
 const contentEl = $('content');
 
@@ -26,6 +27,6 @@ contentEl.addEventListener('click', (e) => {
 
   const [pathPart, frag] = href.split('#');
   const target = resolveRelative(state.currentPath, pathPart);
-  if (/\.(md|mmd)$/i.test(target)) openFile(target, frag);
-  else toast(`can't preview "${pathPart}" - only .md / .mmd for now`);
+  if (fileKind(target)) openFile(target, frag);
+  else toast(`can't preview "${pathPart}" - only .md / .mmd / .json / .yaml for now`);
 });

package/public/search.js

@@ -1,7 +1,7 @@
 /* projview cmd+K search palette - fuzzy filenames + full-text contents */
 
 import { $, esc } from './dom.js';
-import { SVG_FILE, SVG_DIAGRAM } from './icons.js';
+import { fileIcon as icon } from './icons.js';
 import { openFile } from './viewer.js';
 
 const paletteEl = $('palette');
@@ -9,8 +9,6 @@ const inputEl = $('palette-input');
 const resultsEl = $('palette-results');
 const openBtn = $('open-palette');
 
-const icon = (name) => (name.endsWith('.mmd') ? SVG_DIAGRAM : SVG_FILE);
-
 let selectable = [];     // flat list of openable results
 let selected = 0;
 let debounce;

package/public/style.css

@@ -143,6 +143,7 @@ body {
 .row.dir .ico { color: var(--subtext); }
 .row .ico-md { color: var(--overlay); }
 .row .ico-mmd { color: var(--mauve); }
+.row .ico-data { color: var(--peach); }
 .row .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .row.dir .label { font-weight: 600; color: var(--text); }
 
@@ -276,6 +277,40 @@ body {
 
 .markdown-body ul, .markdown-body ol { padding-left: 1.5em; }
 
+/* json / yaml code view: line numbers + one indent guide per level */
+.markdown-body pre.code-view { padding: 14px 0; line-height: 1.6; counter-reset: ln; }
+.markdown-body pre.code-view code { display: block; min-width: max-content; }
+.code-view .cl { display: flex; min-height: 1.6em; padding-right: 18px; }
+.code-view .cl::before {
+  counter-increment: ln;
+  content: counter(ln);
+  flex: 0 0 5ch;
+  padding-right: 1.5ch;
+  margin-right: 1.5ch;
+  text-align: right;
+  color: var(--surface2);
+  border-right: 1px solid var(--surface0);
+  user-select: none;
+}
+.code-view .cl:hover { background: rgba(180, 190, 254, 0.05); }
+.code-view .cl:hover::before { color: var(--overlay); }
+.code-view .lc {
+  white-space: pre;
+  background-image: repeating-linear-gradient(90deg,
+    var(--surface2) 0 1px, transparent 1px calc(var(--step) * 1ch));
+  background-size: calc(var(--i) * 1ch) 100%;
+  background-repeat: no-repeat;
+}
+.data-notice {
+  margin: 0 0 12px;
+  padding: 8px 14px;
+  border: 1px solid var(--peach);
+  border-radius: var(--radius-sm);
+  background: rgba(250, 179, 135, 0.06);
+  color: var(--peach);
+  font-size: 0.85em;
+}
+
 /* mermaid card */
 .mermaid {
   display: flex;

package/public/tree.js

@@ -1,7 +1,7 @@
 /* left-nav file tree: render, expand/collapse, reveal */
 
 import { $, esc, cssEsc } from './dom.js';
-import { SVG_FOLDER, fileIcon } from './icons.js';
+import { SVG_FOLDER, fileIcon, fileKind } from './icons.js';
 import { state } from './store.js';
 import { openFile } from './viewer.js';
 
@@ -70,7 +70,7 @@ function renderFileRow(node) {
   row.dataset.path = node.path;
   row.innerHTML =
     `<span class="twist"></span>` +
-    `<span class="ico ico-${node.ext === '.mmd' ? 'mmd' : 'md'}">${fileIcon(node.ext)}</span>` +
+    `<span class="ico ico-${fileKind(node.name)}">${fileIcon(node.name)}</span>` +
     `<span class="label">${esc(node.name)}</span>`;
   row.addEventListener('click', () => openFile(node.path));
   return row;

package/src/render.js

@@ -92,6 +92,144 @@ export function renderMermaid(content) {
   return `<div class="mermaid">${escapeHtml(content)}</div>\n`;
 }
 
+// Re-indent JSON by walking its tokens rather than parse -> stringify, so the
+// original literals survive untouched (big ints, 1.0, duplicate keys, key order).
+// Assumes the input is already valid JSON (callers check with JSON.parse first).
+export function formatJson(src, indent = 2) {
+  const pad = (n) => '\n' + ' '.repeat(n * indent);
+  let out = '';
+  let depth = 0;
+  for (let i = 0; i < src.length; i++) {
+    const c = src[i];
+    if (c === '"') {
+      let j = i + 1;
+      while (j < src.length && src[j] !== '"') j += src[j] === '\\' ? 2 : 1;
+      out += src.slice(i, j + 1);
+      i = j;
+    } else if (c === '{' || c === '[') {
+      // keep empty containers compact: {} / []
+      let j = i + 1;
+      while (/\s/.test(src[j] || '')) j++;
+      if (src[j] === (c === '{' ? '}' : ']')) { out += c + src[j]; i = j; continue; }
+      out += c + pad(++depth);
+    } else if (c === '}' || c === ']') {
+      out += pad(--depth) + c;
+    } else if (c === ',') {
+      out += ',' + pad(depth);
+    } else if (c === ':') {
+      out += ': ';
+    } else if (!/\s/.test(c)) {
+      out += c;
+    }
+  }
+  return out;
+}
+
+// Split highlight.js output into lines, closing + reopening any <span> that
+// crosses a newline so each line is self-contained HTML.
+function splitHighlightedLines(html) {
+  const lines = [];
+  const open = [];
+  let cur = '';
+  for (const m of html.matchAll(/<span[^>]*>|<\/span>|\n|[^<\n]+/g)) {
+    const tok = m[0];
+    if (tok === '\n') {
+      lines.push(cur + '</span>'.repeat(open.length));
+      cur = open.join('');
+    } else {
+      if (tok.startsWith('<span')) open.push(tok);
+      else if (tok === '</span>') open.pop();
+      cur += tok;
+    }
+  }
+  lines.push(cur + '</span>'.repeat(open.length));
+  return lines;
+}
+
+const leadingIndent = (line) => line.match(/^[ \t]*/)[0].replace(/\t/g, '  ').length;
+
+// The file's indent unit: the most common step between a line and a deeper next
+// line. A mode, not a gcd, so one oddly indented line can't skew it. Default 2.
+function indentStep(indents) {
+  const counts = new Map();
+  let prev = 0;
+  for (const n of indents) {
+    if (n === -1) continue;
+    const d = n - prev;
+    if (d >= 2 && d <= 8) counts.set(d, (counts.get(d) || 0) + 1);
+    prev = n;
+  }
+  let best = 2, bestCount = 0;
+  for (const [d, c] of counts) if (c > bestCount || (c === bestCount && d < best)) { best = d; bestCount = c; }
+  return best;
+}
+
+// Big files skip syntax highlighting - hljs gets slow and nobody reads 2MB of JSON by colour.
+const HIGHLIGHT_LIMIT = 2_000_000;
+// Past this many lines only the head is rendered - the DOM, not the server, is the limit.
+export const LINE_LIMIT = 50_000;
+
+// A code view with line numbers and indent guides. Each line carries its
+// indent depth (--i) so CSS can draw one guide per level (--step columns apart).
+function renderCodeView(code, lang, note = '') {
+  let rawLines = code.replace(/\r\n?/g, '\n').replace(/\n$/, '').split('\n');
+  if (rawLines.length > LINE_LIMIT) {
+    note += notice(`showing the first ${LINE_LIMIT.toLocaleString('en')} of ${rawLines.length.toLocaleString('en')} lines`);
+    rawLines = rawLines.slice(0, LINE_LIMIT);
+  }
+  const raw = rawLines.join('\n');
+  const html = raw.length <= HIGHLIGHT_LIMIT && hljs.getLanguage(lang)
+    ? hljs.highlight(raw, { language: lang, ignoreIllegals: true }).value
+    : escapeHtml(raw);
+  const lines = splitHighlightedLines(html);
+
+  // blank lines borrow the shallower neighbour's indent so guides don't break
+  const indents = rawLines.map((l) => (l.trim() ? leadingIndent(l) : -1));
+  const step = indentStep(indents);
+  const next = new Array(indents.length);
+  for (let i = indents.length - 1, n = 0; i >= 0; i--) next[i] = n = indents[i] === -1 ? n : indents[i];
+  for (let i = 0, prev = 0; i < indents.length; i++) {
+    if (indents[i] === -1) indents[i] = Math.min(prev, next[i]);
+    else prev = indents[i];
+  }
+
+  const body = lines
+    .map((l, i) => `<span class="cl" style="--i:${indents[i]}"><span class="lc">${l}</span></span>`)
+    .join('');
+  return `${note}<pre class="hljs code-view" data-lang="${lang}" style="--step:${step}"><code>${body}</code></pre>\n`;
+}
+
+const notice = (msg) => `<div class="data-notice">${escapeHtml(msg)}</div>\n`;
+
+// The text a JSON file is displayed as: re-indented when valid, as written when
+// not (e.g. JSONC). Shared with the search index so snippet line numbers match
+// the viewer's. A leading BOM is dropped - JSON.parse rejects it.
+export function jsonDisplayText(content) {
+  const src = content.replace(/^\uFEFF/, '');
+  if (!src.trim()) return { text: '' };
+  try {
+    JSON.parse(src);
+  } catch (err) {
+    return { text: src, error: err.message };
+  }
+  return { text: formatJson(src) };
+}
+
+// JSON: pretty-printed when valid; shown as-is (with a note) when it isn't.
+export function renderJson(content) {
+  const { text, error } = jsonDisplayText(content);
+  return renderCodeView(text, 'json', error ? notice(`not strict JSON, shown as-is - ${error}`) : '');
+}
+
+// YAML: indentation is meaning, so it's shown exactly as written (highlighted,
+// with guides) rather than re-serialised - which would also choke on Helm templates.
+export function renderYaml(content) {
+  return renderCodeView(content, 'yaml');
+}
+
 export function renderFile(ext, content) {
-  return ext === '.mmd' ? renderMermaid(content) : renderMarkdown(content);
+  if (ext === '.mmd') return renderMermaid(content);
+  if (ext === '.json') return renderJson(content);
+  if (ext === '.yml' || ext === '.yaml') return renderYaml(content);
+  return renderMarkdown(content);
 }

package/src/search.js

@@ -1,6 +1,7 @@
 import fsp from 'node:fs/promises';
 import path from 'node:path';
 import { buildTree } from './walk.js';
+import { jsonDisplayText } from './render.js';
 import { createStore } from './store.js';
 
 // In-memory index: relPath -> { path, name, content, lower }. Search always runs
@@ -17,6 +18,8 @@ function flattenFiles(nodes, acc = []) {
 }
 
 function addToIndex(rel, content) {
+  // index JSON as displayed (re-indented) so snippet line numbers match the viewer
+  if (rel.toLowerCase().endsWith('.json')) content = jsonDisplayText(content).text;
   index.set(rel, { path: rel, name: rel.split('/').pop(), content, lower: content.toLowerCase() });
 }
 

package/src/server.js

@@ -5,7 +5,7 @@ import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import chokidar from 'chokidar';
 
-import { buildTree, isIgnoredDir, isPreviewable } from './walk.js';
+import { buildTree, isHiddenPath, isIgnoredDir, isPreviewable } from './walk.js';
 import { renderFile } from './render.js';
 import { buildIndex, updateFile, removeFile, search } from './search.js';
 import { createStore, gitOrOsUser } from './store.js';
@@ -116,7 +116,7 @@ export async function startServer(root, { port = 4321, host = '127.0.0.1', store
     if (pathname === '/api/file') {
       const rel = url.searchParams.get('p') || '';
       const abs = resolveInRoot(root, rel);
-      if (!abs || !isPreviewable(abs)) {
+      if (!abs || !isPreviewable(abs) || isHiddenPath(path.relative(root, abs))) {
         sendJson(res, { error: 'invalid path' }, 400);
         return;
       }

package/src/walk.js

@@ -7,14 +7,24 @@ const IGNORED_DIRS = new Set([
   '.cache', '.turbo', 'vendor', '.venv', '__pycache__'
 ]);
 
-export const PREVIEWABLE_EXTS = new Set(['.md', '.mmd']);
+export const PREVIEWABLE_EXTS = new Set(['.md', '.mmd', '.json', '.yml', '.yaml']);
+
+// Previewable by extension but machine-generated noise - huge, never read.
+const IGNORED_FILES = new Set(['package-lock.json', 'pnpm-lock.yaml']);
 
 // True if a path segment should stop the walk (ignored name or any dot-dir).
 export function isIgnoredDir(name) {
   return IGNORED_DIRS.has(name) || name.startsWith('.');
 }
 
+// True if any directory in a root-relative path is one the walk skips - so a
+// file hidden from the tree can't be fetched by typing its path either.
+export function isHiddenPath(relPath) {
+  return relPath.split(/[\\/]/).slice(0, -1).some(isIgnoredDir);
+}
+
 export function isPreviewable(filePath) {
+  if (IGNORED_FILES.has(path.basename(filePath).toLowerCase())) return false;
   return PREVIEWABLE_EXTS.has(path.extname(filePath).toLowerCase());
 }