docs: add reusable Invent callout bubble - #776
Conversation
A styled bubble for pointing readers at Invent as a faster path through
whatever a page teaches by hand. Blobby, the Invent mascot, sits on the
left and tracks the cursor.
Usage is a plain div with a class, so only the copy differs between
pages and all styling stays in style.css:
<div className="invent-callout">
<strong>Invent can do this for you.</strong> Ask Invent to...
</div>
Snippet props were the obvious route but Mintlify renders snippet
variables as empty in this version, and importing a component out of a
snippet doesn't render at all — hence the class plus a root script.
The seal is the pd/inventor sprite lifted from relevance-api-node, and
the eye behaviour is ported from its useInventorEyes composable so the
gaze, blink, and hover greeting match the product. invent-callout.js
builds him; images/invent-blobby.svg is the static fallback when JS is
off. --blobby-size and --blobby-gap on .invent-callout control his size
and the spacing around him, for both the live badge and the fallback.
No page uses it yet — the bubbles get placed in a follow-up.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Workflows to automatically generate PRs for you. |
jordanc-relevanceai
assigned
jordanc-relevanceai and
NiamhRelevance and unassigned
NiamhRelevance
🎯 Vibe checkReviewed: 3 files (2 with issues, 1 clean) — no Scores
Score key: 🟢 9–10, 🟡 6–8, 🔴 1–5. ✨ Overall vibe: Solid implementation — the JS handles prefers-reduced-motion, SPA navigation, no-JS fallback, and gradient ID namespacing correctly. The two issues are real and worth fixing before writers start using the component: text in the callout can't be selected (frustrating when readers want to copy a prompt), and CLAUDE.md gives writers no guidance on the new pattern. 🔧 Issues (2)
🧩 Component suggestions (1)
✅ Clean files (1)
🔋 Credit usage
Files read: |
2 participants
Adds a reusable bubble for telling readers Invent can do the thing a page is teaching them to do by hand. Blobby, the Invent mascot, sits on the left and tracks the cursor.
No doc page uses it yet. This PR is the component only — the bubbles get placed in a follow-up.
How a page uses it
Three lines at the top level of any
.mdx, blank line either side. No import, no<Snippet>, nodocs.jsonentry:Only the copy changes between usages. The markup, class name, and
<strong>lead-in stay identical, so one edit instyle.cssrestyles every bubble in the docs.Why a class and not a snippet
Snippet props were the obvious route, but this version of Mintlify renders snippet variables as empty —
<Snippet file="x.mdx" text="hello" />reaches the snippet with{text}blank. Importing an exported component out of a snippet doesn't render at all, on either the/_snippets/or/snippets/path. So per-instance text rules out a snippet, and the pattern is a class plus a root script.Files
style.css.invent-calloutand.invent-blobby— all geometry and colour, both themesinvent-callout.jsimages/invent-blobby-seal.svgpd/inventorsprite, lifted from relevance-api-nodeimages/invent-blobby.svgCLAUDE.md## Invent calloutsection with the usage block and rules, so agents working in this repo reach for it instead of inventing a new patternDetails worth knowing
^ ^hover greeting are ported from the product'suseInventorEyescomposable, down to the 0.14 lerp and the occasional double blink. The bubble wears the same four layers the seal is built from — white sheen and cyan off the top-left, magenta off the bottom-right, indigo base — so it reads as one big soft Blobby.--blobby-sizeand--blobby-gapon.invent-calloutdrive his size, his position, and the bubble's padding, for both the live badge and the static fallback. The text gap either side of him is computed, so it stays even at any size.prefers-reduced-motionholds his eyes open and still.user-select: none, so it can't be highlighted or copied — deliberate, since readers tend to drag at Blobby.🤖 Generated with Claude Code