fix: consumer-configurable brand logo across sidebar / header / footer - #15
Merged
Conversation
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
Second dogfood-driven fix (see
docs/SHELLUI_DOGFOOD_FIXES.md). The chrome components were rendering a hardcoded rounded-square dot placeholder next toOptions.SiteName, with no config path for a real brand mark — consumers had to resort to CSSbackground-imageoverrides with!importantto defeat Blazor scoped-CSS attribute-selector specificity.The fix
New
ShellDocsOptionssurfaceConsumers:
Shared
<BrandLogo />componentsrc/ShellDocs.Components/Chrome/BrandLogo.razor— renders both light + dark<img>tags as siblings when logos are configured;:root.dark .brand-logo-light { display: none }/:root.dark .brand-logo-dark { display: inline-block }handles per-theme visibility. Theme toggle is instant CSS — no re-render, no<picture>prefers-color-schememismatch with the class-based theme system.Falls back to the existing
<span class="brand-logo-dot">placeholder when no logos are set — backward-compatible for the preview app and any consumer that hasn't opted in.Chrome components consolidated
All three components (
DocsSidebarHeader,DocsHeader,DocsFooter) previously carried their own.docs-*-logo-dotmarkup + CSS block. Now they render<BrandLogo />and the three dot-block CSS rules are deleted. Net negative LOC.Test plan
dotnet build shelldocs.slnx— clean, 0 warnings, 0 errorsdotnet test shelldocs.slnx— 125 / 125 passing (+4 inBrandLogoOptionsTests)SetLogocall:<span class="brand-logo-dot">renders in sidebar, header, footer — backward-compatible with existing shelldocs-preview UXSetLogo("/img/logo-light.svg", "/img/logo-dark.svg", "ShellDocs")(temporarily wired, verified, reverted):<img class="brand-logo brand-logo-light">and<img class="brand-logo brand-logo-dark">land with correctsrc,alt="ShellDocs",style="height: 1.375rem":root.dark .brand-logo-light { display: none }hides the light img in dark modeProgram.csreverted to its zero-config state after verification — no ambient logo added to shelldocs-previewFiles touched
src/ShellDocs.Components/ShellDocsOptions.cs— logo props +SetLogooverloadssrc/ShellDocs.Components/Chrome/BrandLogo.razor(new) +.razor.css(new)src/ShellDocs.Components/Chrome/DocsSidebarHeader.razor+.razor.csssrc/ShellDocs.Components/Chrome/DocsHeader.razor+.razor.csssrc/ShellDocs.Components/Chrome/DocsFooter.razor+.razor.csstests/ShellDocs.Tests/BrandLogoOptionsTests.cs(new)docs/SHELLUI_DOGFOOD_FIXES.md— moved to Fixed