fix: preview fidelity : Razor child content, prose isolation, stretch layout, theme sync - #29
Merged
Merged
Conversation
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.
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
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
Fixes the four highest-priority issues found while building the ShellUI docs on 0.1.9.
Fixed
.shelldocs-proserule now skips.not-prosesubtrees through a zero-specificity:where().PreviewFramecarries the class, and consumers can add it anywhere else.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.shelldocs.jswatches<html class="dark">, saves every change undershelldocs-themeand pushes it toThemeState.ThemeToggleis now a static-host-friendly[data-theme-toggle]button, with CSS choosing the icon.enhancedloadhandlers never ran. Blazor raises the event throughBlazor.addEventListener, not as a DOM event.shelldocsOnEnhancedLoad(fn)now wires the theme re-apply, TOC re-init and mobile-nav close.Added
razor:preview stretchandLayout="stretch"onPreviewFrame/DemoPreview/ComponentPreview, so block-level examples can fill the frame.Behaviour change
razor:previewcomponent bodies are Razor, not markdown, so markdown syntax inside them now renders literally.Testing
dotnet build: 0 warnings.dotnet test: 274 passing;PreviewFidelityTestsis new.