VARASYS/ZDDC
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ZDDC/browse
History
ZDDC cb2cf1ebe3 fix(browse): re-implement markdown editor layout on CSS Grid 
The previous nested-flexbox layout produced indeterminate heights
inside the Toast UI editor host and made the TOC pane width fragile —
visually the editor and outline weren't laying out reliably. This
swaps the whole shell to CSS Grid, which gives every cell a definite
size.

Layout:
   ┌──────────────────────────────────────────────────────────────┐
   │  toolbar (Save | ● modified | status | source)               │
   ├─────────────────────────────────────┬────────────────────────┤
   │                                     │  Outline               │
   │   Toast UI Editor                   │  • Heading 1           │
   │   (md / wysiwyg / preview)          │    • Subheading        │
   │                                     ├────────────────────────┤
   │                                     │  Front matter          │
   │                                     │  title: …  rev: …      │
   └─────────────────────────────────────┴────────────────────────┘

Notes:
  - The shell mounts as a single child of #previewBody (not by
    re-classing previewBody itself), so the outer flex layout that
    fills the preview pane is preserved.
  - Sidebar is its own grid (outline 1fr + front-matter auto/max 40%),
    each section independently scrollable.
  - Resizer is a 6 px element on the grid column boundary; drag
    updates grid-template-columns. Keyboard left/right adjust by 24 px.
    Width persists across mounts (lastTocWidth) within a session.
  - parseHeadings now skips front-matter envelope + fenced code so a
    "##" inside ```bash``` doesn't show up as an outline entry.
  - scrollEditorToHeading uses findScrollParent + scrollTo({behavior:
    'smooth'}) so jumps feel less jarring.
  - Class names follow BEM: .md-shell__*, .md-side__*, .md-toc__*,
    .md-fm__*. Tests updated to the new selectors.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-11 11:30:33 -05:00
..
css fix(browse): re-implement markdown editor layout on CSS Grid 2026-05-11 11:30:33 -05:00
js fix(browse): re-implement markdown editor layout on CSS Grid 2026-05-11 11:30:33 -05:00
build.sh feat(typography): bake IBM Plex Sans + Source Serif 4 into every tool 2026-05-10 20:09:59 -05:00
README.md feat(browse): generic directory listing tool — default at folder URLs 2026-05-03 19:56:51 -05:00
template.html feat(browse): sort dropdown in the tree toolbar 2026-05-10 19:22:03 -05:00

README.md

browse — directory listing tool

Generic file browser for any directory. Designed to work with ZDDC archives but useful for any folder. Single-file HTML, no install.

How it's used

Two modes, auto-detected at page load:

  1. Online (zddc-server backed). When this HTML is served by zddc-server at a folder URL — which it is by default for any directory under ZDDC_ROOT that doesn't have an index.html — the JS queries the same URL with Accept: application/json to load the directory's listing and renders it as a sortable, filterable table.

  2. Local (FileSystemAccessAPI). Click "Select Directory" in the header to pick any folder on your computer. Works in Chromium-based browsers (Chrome, Edge, Brave, etc.). No server required; the directory is read directly from disk.

What it does

  • Lists files and folders with name, size, type (extension), and modified date.
  • Click a folder to expand inline. Children load lazily on first expand.
  • Click a column header to sort by that column. Click again to reverse.
  • Type in the filter to narrow to entries whose name contains the substring.
  • Click any file to open it in a new tab — for server-backed pages, this routes through zddc-server's normal handler (so an .archive redirect, an apps cascade override, etc. all work as expected).

Design notes

  • No ZDDC-specific filtering. This tool is intentionally domain-agnostic. The companion archive tool layers ZDDC parsing (project / status / revision filters, tracking-number resolution) on top of the same listing API. Use archive when you want ZDDC semantics; use browse when you just want to see what's in a folder.
  • Default at directory URLs. zddc-server's directory.go serves the embedded browse.html bytes for any directory request with Accept: text/html and no index.html present. This means a user navigating to any folder under ZDDC_ROOT gets a usable browser without anyone having to drop a file into the archive.
  • Apps cascade override. Like every other ZDDC tool, the served browse.html can be overridden per-folder via a .zddc apps: entry. The default is the embedded copy from the binary; operators can pin a specific version or URL if they want.