Add Made with Manicule badge to sidebar footer#22
Open
naman06dev wants to merge 4 commits into
Open
Conversation
Small, monospace, bottom of the sidebar next to the theme toggle. Picks up Manicule's brand signature: bracket wrapping (`[ ... ]`) and the signal red `#f9452d` on the wordmark. The rest of the chrome (uppercase mono, muted-foreground color, 70% opacity that goes to 100% on hover) matches the existing sidebar-banner CLI hint links so the badge doesn't read as an external graft. Links to https://manicule.dev in a new tab. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Replacing the earlier bracketed-text version in the sidebar footer with a proper Mintlify-style "Made with Manicule" badge at the bottom of every docs page's content column. - components/made-with-manicule.tsx: small inline SVG of the two-parallelogram Manicule mark (lifted from manicule.dev's logo-white.svg, currentColor so it inherits theme color) + "Made with" label + "Manicule" wordmark. Link to manicule.dev. - app/docs/layout.tsx: renders MadeWithManicule after MDX children inside DocsLayout, so every docs page picks it up. - app/global.css: scoped .made-with-manicule styles. Right-aligned, border-top separator, monospace, muted at 70% opacity going to 100% on hover. On hover the SVG paths fill with #f9452d (the Manicule signal red). - docs.config.tsx: dropped the earlier bracketed-text badge from sidebar.footer; the theme toggle stays there alone now. Inherits theme color (`currentColor`) so it sits comfortably in both light and dark modes without overriding. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bumps the page-footer badge from a quiet text link into a small pill-shaped chip: - Wrap the lockup in a bordered chip with rounded corners and a subtle background tint (var(--color-fd-secondary)) so it registers as a deliberate element instead of trailing footer text. - 12.5px font (was 11px), 700 weight on the Manicule wordmark (was 600), tighter letter-spacing. - Mark always renders in #f9452d signal red instead of only on hover. The red against the muted chip background pulls the eye without being loud. - Hover treatment moves the chip up 1px and tints the border with signal red so the affordance is clear. Same right-aligned, border-top-separated placement. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two issues with the previous prominent-chip version: 1. Source-order rendering put the badge before the article's feedback section. The framework lays out the article's children with `flex flex-col`, but the badge was nested inside the `.prose` child div so CSS order couldn't push it past the feedback or page-footer siblings. 2. Naman wants a plain-text style, not the chip-with-border. Fix: - Convert MadeWithManicule into a client component that portals itself into `<article id="nd-page">` on mount, so it lands at the very bottom of the article after the Was-this-guide-helpful feedback and the Edit-on-GitHub / Last-updated footer. - Drop the chip styling: no background, no border, no rounded corners, no hover lift. Plain text link, centered horizontally. - Bump font to 14px (was 12.5px) and SVG to 16x13 (was 15x12), keeping the signal-red mark. - Add comfortable vertical padding (1.75rem top, 2.5rem bottom) so the badge breathes. Layout.tsx puts MadeWithManicule outside DocsLayout; the portal target handles the actual DOM placement, so the wrapper just needs to exist somewhere in the React tree. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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.
Summary
Adds a small "Made with Manicule" badge to the docs sidebar footer, sitting alongside the existing theme toggle.
Design
Pulls Manicule's brand signature:
[ ... ]shows up across manicule.dev (taglines, section headings, CTAs); using it here makes the badge read as their wordmark instead of generic footer chrome.#f9452don the "Manicule" word is the brand accent token from manicule.dev's CSS (--signal: #f9452d).--color-fd-muted-foreground, 70% opacity that goes to 100% on hover) matches the existing sidebar-banner CLI-style links (Get your free API key,View on GitHub) so the badge sits comfortably with the rest of the sidebar footer.Renders the same in light and dark because the muted-foreground variable resolves to a readable gray in both modes; only the Manicule wordmark stays the red accent.
Test plan
/docsand other pages render200on dev server.Made with Maniculeis in the DOM with themanicule.devhref.🤖 Generated with Claude Code