feat: sidebar-main layout and fix grid detection inside containers#81
Open
teezeit wants to merge 5 commits into
Open
feat: sidebar-main layout and fix grid detection inside containers#81teezeit wants to merge 5 commits into
teezeit wants to merge 5 commits into
Conversation
- Add `{.grid-N card}` boolean modifier — grid items render with card
chrome (border/shadow/bg) without changing the structural syntax
- Add `{.col-span-N}` on child headings to span multiple grid columns
- Fix: col-span items now reset to span 1 on mobile across all 7 CSS
themes, preventing overflow when the grid collapses to 1 column
- Grid heading label is declaration-only and never rendered in output
- Add migration script (scripts/migrate-v0.2.sh) for existing files
- Update all examples, docs, and quick reference
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
feat: grid card modifier, col-span, and responsive fix
… routing (#2) * feat: render button with href as <a> tag [Button]{href:./page.md} now renders as a styled <a> anchor instead of a non-navigating <button>. Checks both node.href and node.props.href so the attribute form {href:url} works naturally. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: support [[Button](url)] linked-button syntax [[Text](url)] renders as a button-styled <a> anchor. CommonMark parses this as text:"[" + link + text:"]" — the transformer now detects that 3-child pattern and hoists the link url to button.href. Supports variants: [[Label](url)]* for primary, [[Label](url)]{.cls} for attributes. Also fixes {href:url} attribute form which was stored in props.href but renderer only checked node.href. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: reset link styling on buttons rendered as <a> tags a.wmd-button gets text-decoration:none and color:inherit so button-links look identical to regular buttons — no underline, no browser link color. Applied once in getStyleCSS() so all 7 themes inherit it automatically. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: multi-file routing in dev server The dev server now renders any .md file on demand when its URL is requested, enabling button-links like [[Docs](./docs.md)] to navigate between wireframe files in the browser. - startServer() accepts renderFile callback and rootDir - GET /page.md → calls renderFile(path) and serves result - GET /page.html → serves cached HTML or renders from .md - GET / → serves main watched file (unchanged) - GET unknown → 404 - startServer() now returns the server instance (testability) - CLI passes renderFile and rootDir to startServer - Add href? to button node type Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: redirect / to entry file for symmetric navigation GET / now redirects to /{inputFile} (e.g. /agency-site.md) so there is no special root — every file is addressed by its own path. Links back to the entry file work the same as links to any other file. Fallback: when no inputFile is set (programmatic use), / still serves the pre-rendered outputPath as before. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: nav link support, active state, and multi-button-link inline Nav `[[ ]]` items now fully support links and active states: - `[text](url)` inside `[[ ]]` creates a navigable nav item with real href. Previously the link URL was silently dropped (remark parses links as `link` nodes with no `.value`; the inline-containers plugin was using `c.value || ''` which discarded them). Fix: added `serializeChild` to reconstruct `[text](url)` from MDAST link nodes before splitting items on `|`. - `*text*` inside `[[ ]]` is now treated as the active/current-page item (strips asterisks, adds `.active` class with theme-matched styling). Previously rendered as literal `*text*`. - `[text](url)*` in nav renders as a primary-styled button link. - Multiple `[[Btn](url)]` patterns on the same line now render correctly. Previously the second button's URL was dropped and brackets showed as literal text. Root cause: `transformParagraph`'s 3-child detection only handled a single button-link. For two buttons on one line remark produces 5 children (`[`, link, `]* [`, link, `]`). Fix: new `tryParseButtonLinkSequence` generalises detection to n ≥ 1 (replaces the old 3-child check); multiple matches return a `button-group` container. Also adds: - Active nav-item CSS for all 6 themes (`.wmd-nav-item.wmd-active`) - `docs/guide/syntax.md` — Button Links section - `QUICK-REFERENCE.md` — nav link and active-state rows - `examples/gallery/multi-page/` — three-page navigable prototype (home/about/contact sharing a nav with live button-link navigation) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add renderSidebarMainLayout() to html-renderer — groups children by
{.sidebar}/{.main} heading markers into wmd-layout-sidebar/main divs
- Add sidebar + layout CSS to all 7 style themes (nav-matching backgrounds,
full-width buttons, section label styling)
- Fix grid detection inside containers: extract processNodeList() shared
helper so both transformToWiremdAST and transformContainer detect
{.grid-N} headings — previously grids inside :::layout, :::card etc.
were silently rendered as plain headings
- Add examples/sidebar-layout.md
- Add parser and renderer tests for sidebar layout and nested grids
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…tyle own it
Sidebar layout columns had redundant padding/background/border/box-shadow
baked into .layout-sidebar across all 7 themes. These fight with the
:::sidebar container's own styling when nested inside a sidebar-main layout.
Remove per-theme overrides from .layout-sidebar and add a single
.container-sidebar { width: 100% } rule so the sidebar fills its column.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
:::layout {.sidebar-main}renders a two-column grid with a styled sidebar panel and main content area. Sidebar background matches each theme's nav (e.g.#87CEEBin sketch). Buttons inside the sidebar span full width.:::card,:::layout, etc.) were silently rendered as plain headings. ExtractedprocessNodeList()shared helper so both the top-level document pass andtransformContainerdetect{.grid-N}headings correctly.examples/sidebar-layout.md— project management workspace wireframe demonstrating the layout with a 3-column stats grid inside the main section.Test plan
npm test— 510 tests passgridAST node; sidebar-main layout structurewiremd examples/sidebar-layout.md --serve 3002 --style sketch— sidebar styled like navbar, 3-column stats grid renders correctly🤖 Generated with Claude Code