Move Sign In / Sign Up to the top right of the page - #2510
Conversation
The maple theme hides the desktop header and puts navbar links at the bottom of the sidebar. Add a small script that renders Sign In and the Sign Up button fixed in the top right on desktop, and hide the sidebar copies. Mobile keeps the theme's own header. Also tag the Sign Up link with ?s=docs so docs signups are attributed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Automations to automatically generate PRs for you. |
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
kcmartin
left a comment
kcmartin
left a comment
There was a problem hiding this comment.
Nice fix for the bottom-left problem, and the plumbing all checks out. One blocker.
Verified working. auth-nav.js sits beside docs.json, so Mintlify loads it, and both it and the CSS are inlined into the page payload. The li ids on the preview match the selectors exactly, including ?s=docs. On geometry, the three things you flagged are all clear: #content-area has lg:mt-12 so the page title starts where the 3rem nav band ends, #content-side-layout is top-[6rem] rising to top-[8rem] with the banner, and there is no "Copy page" control in this theme at all, the string appears zero times in the served HTML.
The ?s=docs reasoning is right, and for the reason you give. FlyWeb.Plugs.UserSignupTracker reads params["s"], sanitizes and records it, then strips it. Before the cutover the fallback was sanitize_source(conn.request_path), so docs visitors were attributed docs-postgres and the like. That plug cannot run on a separate host. Worth knowing the granularity goes with it: everything is flat docs now rather than per-page.
The blocker is inline, the sidebar-hiding rule falling outside the media query.
Two smaller things, neither blocking.
The nav renders on Sprites pages too, since the CSS and JS apply site-wide across all three sources. /sprites and /sprites/quickstart both carry it. Probably fine, but nobody has said whether a fly.io Sign Up button belongs on Sprites docs.
The MutationObserver watches the whole document with subtree: true, so every DOM change anywhere fires ensure(), including search typing and syntax highlighting. Each call is one getElementById so it is cheap, but dropping subtree still catches a body replacement for a fraction of the work.
The sidebar-hiding rule sat outside the lg media query, so below 1024px both links were hidden with nothing replacing them. Move it inside, match on URL prefix so a query string change can't leave a duplicate, and stop observing the whole DOM subtree. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
Feedback addressed @kcmartin |
There was a problem hiding this comment.
All three addressed in ca68e3bf, and I confirmed on the preview that Log In and Sign Up are visible at narrow widths. Clearing my changes request.
The blocker. The sidebar rule now sits inside the @media (min-width: 1024px) block, so below that width the drawer keeps both links. Verified in the served payload, not just the diff.
The selector coupling. [id^="https://fly.io/app/sign-in/"] and [id^="https://fly.io/app/sign-up/"] instead of exact matches, so a query string change in docs.json can no longer leave a duplicate behind silently. The old exact-match selectors are gone from the payload.
The observer. Now watches documentElement and body for childList only, with a re-observe in the callback to pick up a replaced <body>. Re-observing the same node replaces its registration rather than stacking, and ensure() is a no-op once the node exists, so the append it makes cannot loop. The one remaining subtree: true on the page belongs to an unrelated script watching document.head for viewport meta changes.
Everything from the first pass still holds: the script loads, both files inline into the payload, the li ids match, the page title clears the 3rem band via lg:mt-12, the table of contents sits at top-[6rem], and there is no "Copy page" control in this theme to collide with.
This branch was successfully deployed
2 participants
The maple theme doesn't show a desktop header, so
navbarlinks (including Sign In and the Sign Up button) render at the bottom left of the sidebar. This moves them to the top right.auth-nav.js: renders Sign In + Sign Up, fixed top right, desktop only (lg:). It reuses the theme's own classes, so it follows light/dark mode. A MutationObserver re-adds it if client-side navigation re-renders the body.styles.css: positions it and hides the Sign In / Sign Up entries in the sidebar footer. Pricing and Support stay there.docs.json: Sign Up now points tohttps://fly.io/app/sign-up/?s=docsso docs signups get attributed. Since the Mintlify cutover, only an explicit?s=docssets the docs signup source.Mobile is unchanged. The theme's mobile header already shows both links.
To check on the preview: the fixed buttons don't overlap the page title, the "Copy page" control, or the top of the right-hand table of contents at common desktop widths (1024, 1280, 1536).
🤖 Generated with Claude Code