Skip to content

fix: preview fidelity : Razor child content, prose isolation, stretch layout, theme sync - #29

Merged
Shewart merged 7 commits into
mainfrom
fix/preview-fidelity
Oct 2, 2026
Merged

Shewart merged 7 commits into
mainfrom
fix/preview-fidelity

Conversation

@Shewart

@Shewart Shewart commented Oct 2, 2026

Copy link
Copy Markdown
Contributor

Summary

Fixes the four highest-priority issues found while building the ShellUI docs on 0.1.9.

Fixed

  • Prose styles leaked into previews. Every .shelldocs-prose rule now skips .not-prose subtrees through a zero-specificity :where(). PreviewFrame carries the class, and consumers can add it anywhere else.
  • Nested markup in preview child content was mangled. Inside razor:preview, and in <ComponentPreview> bodies, children are parsed as Razor (MarkdownRenderer.ParseRazor → SlotRenderer.FromRazor), recursively. Wrappers around nested components survive and nothing is wrapped in <p>. Inline tags in prose keep markdown bodies.
  • Theme state only followed ShellDocs' own toggle. shelldocs.js watches <html class="dark">, saves every change under shelldocs-theme and pushes it to ThemeState. ThemeToggle is now a static-host-friendly [data-theme-toggle] button, with CSS choosing the icon.
  • enhancedload handlers never ran. Blazor raises the event through Blazor.addEventListener, not as a DOM event. shelldocsOnEnhancedLoad(fn) now wires the theme re-apply, TOC re-init and mobile-nav close.

Added

  • razor:preview stretch and Layout="stretch" on PreviewFrame / DemoPreview / ComponentPreview, so block-level examples can fill the frame.

Behaviour change

  • razor:preview component bodies are Razor, not markdown, so markdown syntax inside them now renders literally.

Testing

  • dotnet build: 0 warnings. dotnet test: 274 passing; PreviewFidelityTests is new.
  • Example app: every page returns 200 with no preview errors and no console errors. Nested and stretch previews were checked in the DOM. The theme follows both the toggle and an outside class flip, and the saved theme and both icons update.

The .shelldocs-prose rules (paragraph margins, list padding, heading sizes, link underlines) also matched components inside preview frames and, being unlayered, beat Tailwind's layered utilities. Every prose rule now skips .not-prose subtrees through a zero-specificity :where(), and PreviewFrame carries the class. Consumers can add it to any other element.
Child content went through markdown and SlotSplitter, so <Navbar><div><a/>…<ThemeToggle/></div></Navbar> closed the div before the nested component and wrapped loose text in <p>. Inside a razor:preview, and in ComponentPreview bodies, children are now parsed with PreviewParser (MarkdownRenderer.ParseRazor) and emitted as real elements, recursively. Inline component tags in prose keep markdown bodies.
Preview content is centred in a flex row, so charts, inputs and selects shrank to their text. razor:preview stretch (fence info string) or Layout="stretch" on PreviewFrame, DemoPreview and ComponentPreview lays the example out in one column at the frame's width. Center stays the default.
Blazor raises enhancedload through its own event registry, not as a DOM event, so the document listeners that re-apply the theme, re-attach the TOC and close the mobile nav after enhanced navigation never ran. shelldocsOnEnhancedLoad(fn) attaches them once blazor.web.js has loaded.
ThemeState and the shelldocs-theme key only changed when ShellDocs' own toggle was clicked, so a component library flipping <html class="dark"> left them stale. shelldocs.js now watches the class, saves every change and pushes it to subscribed ThemeToggles. The toggle itself is a [data-theme-toggle] button handled by shelldocs.js with both icons rendered and CSS picking one, so it works without a Blazor runtime.
…theme toggle

Covers nested markup around components inside razor:preview and ComponentPreview, markdown bodies for inline tags in prose, center/stretch layout from the fence and the parameter, the not-prose exclusion on every prose rule, and the toggle's static markup.
…heme toggle

CHANGELOG Unreleased entries; README preview bullets and static-export list; ARCHITECTURE on Razor child content, PreviewFrame layout and not-prose, the theme row and enhancedload; example pages for markdown syntax, ComponentPreview, theming and installation.
@Shewart
Shewart merged commit 67df229 into main Oct 2, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant