fix: match Webjs UI/blog logo to webjs.dev + add Preview/Code toggle to component docs#862
Merged
Merged
Conversation
6 tasks
The Webjs UI docs site and the example blog painted their logo mark with a color-mix of the accent and the foreground, which muddied the gradient and diverged from webjs.dev. Adopt the same --logo-from / --logo-to warm-orange stops the main site and docs app already use (light and dark), so the brand mark reads identically everywhere.
Every preview pane on a component docs page (the hero Preview plus the Variants / Sizes / Icon panes, across Tier 1 and Tier 2 components) now has a shadcn-style Preview / Code segmented toggle so readers can flip a live demo to the source snippet that produced it. <preview-tabs> uses shadow DOM plus slots on purpose: the live demo is projected through slot=preview, so it stays in light DOM (Tailwind and the shadcn preview tokens apply) and is projected once, never rebuilt. That keeps the ui-* custom elements it contains upgraded exactly once, so an interactive demo (tabs, dialog) keeps working after a toggle. The shadow root owns only the segmented control and hides the inactive slot.
The Preview/Code toggle's Code tab showed the fully-expanded Tailwind class
string (the helper output baked in at module load), not the call an end user
writes. It now shows the composition verbatim, e.g. class=${buttonClass()} and
class="${cardClass()} w-full max-w-sm", across every Tier 1 and Tier 2
component.
Single source of truth: each example freezes its class-helper holes as literal
${xClass(...)} text (leading ${ backslash-escaped, so the string keeps the
call instead of interpolating it). renderExample() evaluates the frozen holes
for the live preview; codeExample() shows them as calls for the Code tab, and
drops the quotes when a hole is the whole attribute value so it reads as the
idiomatic unquoted form. Structural holes (${type}/${position}) and
${ICON_SETTINGS} stay live. Verified across all 32 component pages: previews
render real classes, no eval failures, no leftover holes.
Audit of all Tier 1 + Tier 2 previews for the idiomatic-usage gap: the
aspect-ratio example was the one that hand-wrote raw Tailwind (aspect-[16/9]
w-full ...) instead of its exported helper, so its Code view taught raw classes
rather than aspectRatioClass(). Rewrite it the way the registry documents
(inline aspect-ratio style + class=${aspectRatioClass()}).
Every other component checks out: Tier 1 examples use their class helpers,
Tier 2 examples use the <ui-*> tags, and native-select keeps bare <option> on
purpose (the registry auto-applies Canvas colours; the option helper is an
opt-in override). Re-verified across all 32 component pages.
vivek7405
force-pushed
the
fix/ui-website-branding-and-code-toggle
branch
from
53cf8e1 to
0618394
Compare
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.
Closes #866
What
Two Webjs UI docs-site gaps found while comparing it to webjs.dev.
1. Logo brand mark now matches webjs.dev
The Webjs UI docs site (and the example blog) painted their logo mark with a
color-mixof the accent and the foreground, which muddied the gradient and diverged from the main site. Both now use the same--logo-from/--logo-towarm-orange stops thatwebsite/and the docs app already ship (light + dark), so the brand mark reads identically everywhere. Accent tokens were already in sync; only the logo gradient diverged.2. Preview / Code toggle on every component preview
Every preview pane on a component docs page (the hero Preview plus the Variants / Sizes / Icon panes, across Tier 1 and Tier 2 components) now has a shadcn-style Preview / Code segmented toggle, so readers can flip a live demo to the source snippet that produced it.
<preview-tabs>(new, inapp/_components/) uses shadow DOM + slots on purpose: the live demo is projected throughslot="preview", so it stays in light DOM (Tailwind + the shadcn preview tokens still apply) and is projected once, never rebuilt. That keeps theui-*custom elements upgraded exactly once, so an interactive demo (tabs, dialog) keeps working after toggling. The shadow root owns only the segmented control and hides the inactive slot.Verification
<ui-tabs>) still switches panels after being slottedwebjs check: all checks passNotes
tailwind.cssis gitignored in both apps (built bywebjs.dev.before/webjs.start.before); the new arbitrary utilities regenerate on build.