RDoc-4096 - redesign Quill's start page - #2655
Merged
Merged
Conversation
- New hero (QuillHero) with QuillWidgetDemo: a non-interactive re-creation of the real chat widget that types a question, shows the thinking dots and streams the answer, cycling through scripted conversations. - IntegrationBlobField: floating channel blobs behind the hero over three depth layers. Slots are offsets from the widget card (multiples of its half-width/half-height) measured at runtime, so the field hugs the panel at any hero width instead of drifting to the corners. Falls back to a plain ChannelRow below md. - Channel marks (Telegram, Slack, Discord, chat widget) as inline SVG. The Telegram and Discord viewBoxes are padded past their artwork, which is drawn tangent to the box edges and otherwise renders with flat, clipped sides. - QuillHowItWorks: 4-node data path and 3 getting-started cards. - Suppress the one-item breadcrumb on /quill, reusing the /samples mechanism. - Drop the unused gradient banner SVGs and the hero screenshot.
mateuszbartosik
force-pushed
the
RDoc-4096
branch
from
September 7, 2026 12:59
51a8409 to
d24fd38
Compare
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
There’s an SSR-hostile useLayoutEffect usage in the new widget demo component and an updated CSS comment block that no longer matches the actual implementation.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR redesigns the Quill start page (/quill) to replace the previous static layout with a richer hero (animated widget mock), decorative channel “blob” field, and a clearer “How it works” + “Getting started” structure, while also suppressing the redundant breadcrumb on the hub page.
Changes:
- Rebuilds the Quill start page content (
quill/home.mdx) around newQuillHero,QuillWidgetDemo, and “How it works / steps” components. - Adds the decorative integration blob field (SVG marks + positioning + animation) and a reusable
ShineBordereffect. - Updates global styling and breadcrumb suppression logic; removes the old Quill home card SVG banner assets.
File summaries
| File | Description |
|---|---|
| static/img/quill/home_card-sign-up.svg | Removes legacy Quill home card background asset. |
| static/img/quill/home_card-security.svg | Removes legacy Quill home card background asset. |
| static/img/quill/home_card-overview.svg | Removes legacy Quill home card background asset. |
| static/img/quill/home_card-getting-started.svg | Removes legacy Quill home card background asset. |
| static/img/quill/home_card-developer-access.svg | Removes legacy Quill home card background asset. |
| static/img/quill/home_card-dashboard.svg | Removes legacy Quill home card background asset. |
| src/theme/DocBreadcrumbs/index.tsx | Hides default breadcrumbs on /quill (and normalizes matching) similar to /samples. |
| src/css/custom.css | Adds Tailwind animation tokens; updates Quill home background + prose styling. |
| src/components/Quill/QuillWidgetDemo.tsx | Adds animated, non-interactive chat-widget demo component for the hero. |
| src/components/Quill/QuillWidgetDemo.module.css | Styles the widget demo to match the widget theme and reset Infima bleed-through. |
| src/components/Quill/QuillHowItWorks.tsx | Adds “How it works” flow strip and “Three steps” card components. |
| src/components/Quill/QuillHero.tsx | Adds new Quill start-page hero layout including actions + visual slot + blob field. |
| src/components/Quill/quillDemoConversations.ts | Adds scripted demo conversations used by the widget mock. |
| src/components/Quill/marks/TelegramMark.tsx | Adds inline Telegram SVG mark (with padded viewBox). |
| src/components/Quill/marks/SlackMark.tsx | Adds inline Slack SVG mark. |
| src/components/Quill/marks/EmbedMark.tsx | Adds inline Quill widget channel mark. |
| src/components/Quill/marks/DiscordMark.tsx | Adds inline Discord SVG mark (with padded viewBox). |
| src/components/Quill/IntegrationBlobField.tsx | Adds decorative floating channel blob field with runtime placement + dev assertions. |
| src/components/Quill/IntegrationBlobField.module.css | Adds blob field styling (glass/glow, drift wrappers, mobile chip sizes). |
| src/components/Quill/channels.ts | Defines channel metadata (id/name/tint/icon) for blob field + row. |
| src/components/Quill/ChannelRow.tsx | Adds mobile fallback row of channel chips (below md). |
| src/components/Quill/blobPositions.ts | Defines slot tables, layer styling, and placement constants for blob composition. |
| src/components/Common/ShineBorder.tsx | Adds reusable animated shine border component (Magic UI-inspired). |
| quill/home.mdx | Rewrites Quill home page to use new components and updated structure/content. |
Review details
- Files reviewed: 18/24 changed files
- Comments generated: 2
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
mateuszbartosik
force-pushed
the
RDoc-4096
branch
from
September 8, 2026 10:06
921693c to
252775c
Compare
Scooletz
requested changes
Sep 8, 2026
mateuszbartosik
force-pushed
the
RDoc-4096
branch
from
September 8, 2026 11:02
252775c to
ff8d17e
Compare
Scooletz
approved these changes
Sep 8, 2026
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
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.
Issue link
https://issues.hibernatingrhinos.com/issue/RDoc-4096
Additional description
Redesign of the Quill start page (
/quill), after the feedback that the previous version looked weak.Hero. New
QuillHerobuilt aroundQuillWidgetDemo— a non-interactive re-creation of the real chat widget that types a question, shows the thinking dots, streams the answer, then cycles through the scripted conversations inquillDemoConversations.ts. It replaces the static screenshot. Its palette is the widget's own--rq-*tokens for the default theme, so it stays faithful topackages/widgetrather than inventing a look.Channel blob field.
IntegrationBlobFieldfloats the channel marks (Telegram, Slack, Discord, chat widget) behind the hero across three depth layers — two crisp in front, the rest progressively blurred and faded — so the hero reads as "many channels" without asking the reader to identify each one. It is decorative only:aria-hidden, nothing interactive.The positioning is worth a note for reviewers. Slot coordinates in
blobPositions.tsare offsets from the widget card, expressed in multiples of its half-width and half-height and measured from live geometry at runtime, not percentages of the hero. The hero is fluid, so percentages could not hold one composition across widths — the blobs collided with the card when narrow and flew to the corners when wide. Anchored to the card, the field hugs the panel at any width. Verified at 800 / 900 / 1100 / 1280 / 1440 / 1920px: every blob lands where the slot table specifies, stays inside the hero, and keeps a visible sliver clear of the card. Belowmdthe field is replaced byChannelRow, a plain row of chips.A development-only assertion warns in the console if a blob could drift so far behind the card that it disappears.
Channel marks. The four vendor marks are inline SVG. The Telegram and Discord
viewBoxes are deliberately padded past their artwork: Simple Icons draws both tangent to the box edges (Telegram is a full-bleed disc,r=12at12,12) and a fraction of a unit beyond, so an exact0 0 24 24box clips the rim and they render with flat sides. Both files carry a comment so the padding is not "tidied" away.Rest of the page.
QuillHowItWorksadds the 4-node data path and the three getting-started cards, followed by the existing Learn / Operate / Build card grids.Housekeeping. The one-item "Quill" breadcrumb is suppressed on
/quill— it only repeated the sidebar's "Home" entry — reusing the mechanism already in place for/samples. The unused gradient banner SVGs and the old hero screenshot are deleted.Type of change
/templatesor readme)Changes in docs URLs
/scripts/redirects.jsonfile, setDocuments MovedPR label)Changes in UX/UI
The whole start page above the fold is new: animated widget mockup in place of the screenshot, floating channel blobs behind the hero, and the flow strip. Described in full above. Screenshots to follow.
