feat(web): mobile header, refreshed landing grid, and example fixes#100
Merged
Conversation
The "react-call v2" wordmark was hidden below sm, leaving only the logomark on phones. Keep it visible at every width and collapse the secondary header links into a single hamburger menu below md. - The wordmark is now always shown; the logomark already was. - One breakpoint (md): below it Why, Examples, Concepts and Full reference move into an anchored dropdown; above it the desktop layout is unchanged. - The Star CTA stays in the bar as an icon-only button — it's the primary OSS conversion target, so it shouldn't hide behind a tap. - MobileNav is a React island following the ThemeToggle idiom. It uses the ARIA disclosure pattern (aria-expanded, Escape + click-outside to close, focus stays on the trigger) and always renders its links, toggling visibility via CSS so they remain in the static HTML and stay crawlable.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Re-curate the six featured Callables so the grid stops duplicating concepts the rest of the landing already covers and instead showcases the widest spread of distinct surfaces. The hero already demonstrates a confirm, and the Stack and Mutation-flow sections own those concepts — so confirm-dialog (a hero clone) and image-lightbox make way for bottom-sheet (drawer) and wizard (flow), two categories the page did not surface anywhere else. Final order: command-palette, bottom-sheet, wizard, color-picker, context-menu, progress-toast.
desko27
changed the title
- Toast: offset each active call by call.index so concurrent toasts stack upward instead of overlapping at the same fixed corner (same pattern as error-banner). The upsert-driven singleton case is unaffected — index 0 keeps the original bottom offset. - Command palette + wizard: the inputs autofocus on open, and at < 16px iOS Safari auto-zooms on focus. Bump them to text-base (16px) on mobile with md:text-sm to keep the compact size on desktop.
…weep - Landing toast card: disable the "Try it" button while the call is in flight (matches the example page's DownloadButton) so the upsert singleton can't be re-triggered mid-run. - Wizard: give the dialog a lateral gutter (p-4 on the overlay) so it no longer sits flush against the screen edges on mobile. - Landing wizard result badge: include the email — it was showing only name · plan. - iOS zoom sweep: apply the 16px-on-mobile fix (text-base md:text-sm) to the remaining example text inputs (save-form, prompt-input) and the side-drawer select.
desko27
changed the title
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.
Several related web-site changes, all touching the public landing and its examples.
1. Keep the wordmark on mobile (hamburger menu)
The
react-call v2wordmark was hidden belowsm, leaving only the●logomark on phones. This keeps the wordmark visible at every resolution and collapses the secondary header links into a single hamburger menu belowmd.md)● react-call v2···★ 🌙 ☰— menu holds Why / Examples / Concepts / Full reference ↗Decisions (from a grilling session):
mdswitch replaces the old fragmented400 / 640 / 768breakpoints — nothing gets orphaned mid-resize.MobileNav.tsx), consistent with the existingThemeToggleidiom. React already hydrates on every page, so the marginal cost is ~nil.role=menuwidget, which APG discourages for site nav):aria-expanded/aria-controls, Escape + click-outside to close, focus stays on the trigger, no focus-trap / scroll-lock / scrim.{open && …}— so they stay in the static HTML and remain crawlable. (The footer also links them statically as a safety net.)2. Refresh the landing example grid
Re-curated the six featured Callables in
NotJustConfirmationsso the grid stops duplicating concepts the rest of the landing already covers, and instead showcases the widest spread of distinct surfaces.The hero already demonstrates a confirm, and the Stack and Mutation-flow sections own those concepts — so
confirm-dialog(a hero clone) andimage-lightboxmake way for bottom-sheet (drawer) and wizard (flow), two categories the page did not surface anywhere else.Out:
confirm-dialog,image-lightbox. Each card still fires a real.call()on the page; the two new ones were wired with their Callables, Roots and result badges.3. Example bug fixes
Surfaced while testing the refreshed grid on a phone:
ToastCallable rendered every active call at the same fixed corner. It now offsets each bycall.index(same pattern aserror-banner), so concurrent toasts stack upward. The landing card stays aupsertsingleton by design — and its "Try it" button is now disabled while the call is in flight, mirroring the example page'sDownloadButton.text-base(16px) on mobile withmd:text-smto keep the compact size on desktop.p-4so the panel keeps a 16px lateral margin.name · email · plan); it previously showed onlyname · plan.Verification
★ 🌙 ☰(hamburger last), controls height-aligned. Dropdown opens anchored top-right with the 4 links, icon morphs to✕. Desktop (1280px): full inline nav, hamburger hidden — unchanged.share); the wizard runs its 3 steps and resolves with the structured form (Ada · ada@example.com · team). No console errors.biome checkclean; pre-commit lint + type-check green on every commit. (The 2 pre-existingastro checkerrors inastro.config.tsandexamples/[slug].astroare unrelated.)