Repository navigation
feat: code variants on previews, page switch, IframePreview (0.1.13-alpha) - #35
Merged
Merged
Conversation
<Badge>v0.3.2 stable</Badge> in prose rendered a <p> inside the badge, so the page's paragraph margin and colour overrode it. As in MDX, a body on the same line as its tags now renders inline; a body on its own lines still becomes paragraphs.
…nd a caption
<DemoPreview> and <ComponentPreview> take <CodeTab Label> children with a fence inside (or CodeTabs from .razor); the Code panel shows them as tabs instead of the Razor source, e.g. MAUI and Avalonia XAML for a cross-platform library. CodeTabParser reads them from the raw body with RazorTagScanner and the CommonMark fence regex. SyncKey uses the [data-tabs] contract, so blocks switch together and remember the choice; a block without the chosen tab shows "Not available on {label} yet" and keeps its height (panels share one grid cell). Copy copies the visible tab. Caption, or ShellDocsOptions.PreviewCaption, adds a muted note to the toolbar. xaml/axaml fences highlight as XML, and the init template loads Shiki's xml grammar.
o.AddSyncSwitch("platform", "MAUI", "Avalonia") adds underlined tabs, like shadcn/ui's library switch, to pages whose blocks use that key: under the page header, or just above the first such block. <SyncSwitch SyncKey> places one by hand. It is a [data-tabs] group without panels, so it drives the same saved choice; until a reader picks, blocks follow its first option.
<IframePreview Src Height Lazy SyncKey Caption Title Id> shows another page (a live Avalonia app on WebAssembly, for instance) in the Preview panel with the same toolbar and code tabs. shelldocs.js sets the iframe's src, with ?theme=light|dark, when it scrolls into view (default), on a Run live preview button (Lazy="click") or at once ("none"), and posts { type: "shelldocs-theme", theme } to the frame's origin when the theme changes. The Code tab is hidden when there's no code.
Example site: a Code variants page covering code tabs, the missing-tab note, the page switch, captions and IframePreview with its URL and message contract, plus wwwroot/preview/index.html, a test page that follows that contract. CHANGELOG [Unreleased], README and ARCHITECTURE describe the new features and the inline-body fix.
Cuts the Unreleased section as 0.1.13-alpha and records the release in the ROADMAP's hardening list.
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
Code variants for cross-platform libraries, first for the ShellUI Native docs: one live preview with code for several platforms (MAUI and Avalonia XAML), like shadcn/ui's library tabs. Also fixes one-line component bodies being wrapped in
<p>. Bumps to 0.1.13-alpha.Added
<DemoPreview>,<ComponentPreview>and<IframePreview>take<CodeTab Label="…">children with a fence inside, orCodeTabsfrom.razor.SyncKeyswitches blocks together across pages and remembers the choice.o.AddSyncSwitch("platform", "MAUI", "Avalonia")adds shadcn-style underlined tabs to pages whose blocks use that key: under the page header, or above the first such block.<SyncSwitch SyncKey>places one by hand.Caption="…"adds a muted note to the toolbar;o.PreviewCaptionsets a site default.<IframePreview Src Height Lazy SyncKey Caption>shows another page, e.g. Avalonia on WebAssembly.Lazy="click") or at once (none).?theme=light|darkand posts{ type: "shelldocs-theme", theme }on theme change.xaml/axamlhighlight as XML. Theinittemplate loads Shiki'sxml; existing sites add'xml'tolangs.Fixed
<Badge>v0.3.2</Badge>in prose no longer wraps its text in<p>. As in MDX, a body on the same line as its tags renders inline; multi-line bodies keep their paragraphs.Notes
data-*attributes,shelldocs.js, no@onclick.razor:previewfences can't take code tabs, since their body is Razor.Testing
shelldocs buildstatic export:?theme=, and the theme message;<p>.