docs: integrations page update #386
Conversation
WalkthroughReplaces many plain anchor tags with Docusaurus Link components across docs UI, adds optional Changes
Sequence Diagram(s)%%{init: {"themeVariables": {"actorBkg":"#f8fafc","actorBorder":"#94a3b8","signalColor":"#2563eb"}}}%%
sequenceDiagram
participant User
participant UI as IntegrationsBlocks
participant Router as Docusaurus Router
Note over UI: Card rendering decision
User->>UI: Click card
alt card has `link`
UI->>Router: Docusaurus Link navigates to card.link
Router-->>User: Load target page
else card has no `link`
UI-->>User: Card is static (no navigation)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings, 1 inconclusive)
✨ Finishing touches
🧪 Generate unit tests (beta)
Tip 📝 Customizable high-level summaries are now available in beta!You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.
Example instruction:
Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/docs/src/components/IntegrationsBlocks/index.tsx (2)
4-6: Link integration and optionallinkprop look good; consider a tiny conditional simplificationThe introduction of the optional
link?: stringplusisLinkableand theLinkwrapper is consistent with Docusaurus usage, and keepinglinkoptional avoids breaking existing callers. The reuse ofcardClassNameinsidelinkClassNameis also a nice way to keep visual parity between linked and non‑linked cards.You could simplify the branching slightly by relying directly on
integration.linkinstead of bothisLinkableandintegration.linkin theif:- const isLinkable = !!integration.link; + const isLinkable = !!integration.link; … - if (isLinkable && integration.link) { + if (integration.link) { return ( <Link key={integrationIndex} to={integration.link} className={linkClassName}> {cardContent} </Link> ); }This keeps the styling logic (
isLinkable) intact while avoiding redundant checks in the conditional.Please quickly verify in the browser that both internal (
/docs/...) and external (https://...) URLs passed vialinkbehave as expected with@docusaurus/Linkin your current version.Also applies to: 20-21, 65-66, 94-106
67-85: Arrow icon is a nice affordance; consider marking it decorative for screen readersThe shared
cardContentblock and conditional rendering of<ArrowRightIcon>for linkable cards is a clean way to keep layouts consistent and give users a visual cue when a card is clickable.If the arrow is purely decorative (no extra meaning beyond “this is a link”), it’s worth marking it as hidden from assistive tech to avoid noisy announcements:
- {isLinkable && <ArrowRightIcon className="w-4 h-4 *:stroke-white shrink-0" />} + {isLinkable && ( + <ArrowRightIcon + className="w-4 h-4 *:stroke-white shrink-0" + aria-hidden="true" + focusable="false" + /> + )}This keeps the visual behavior while improving a11y.
Also applies to: 76-83
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (9)
apps/docs/docs/integrations/overview.md(2 hunks)apps/docs/src/components/DXPIntegrationsSection/index.tsx(3 hunks)apps/docs/src/components/FooterSection/index.tsx(3 hunks)apps/docs/src/components/HomepageArchitectureSection/index.tsx(2 hunks)apps/docs/src/components/HomepageFeaturesSection/index.tsx(2 hunks)apps/docs/src/components/HomepageStartersSection/index.tsx(2 hunks)apps/docs/src/components/IntegrationsBlocks/index.tsx(3 hunks)apps/docs/src/pages/product/features.tsx(3 hunks)apps/docs/src/pages/product/integrations.tsx(10 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
apps/docs/src/components/IntegrationsBlocks/index.tsx (1)
apps/docs/src/components/Typography/index.tsx (2)
H3(17-19)BodySmall(33-35)
apps/docs/src/components/DXPIntegrationsSection/index.tsx (1)
apps/docs/src/components/Typography/index.tsx (1)
H3(17-19)
🔇 Additional comments (14)
apps/docs/src/components/HomepageFeaturesSection/index.tsx (1)
3-3: LGTM!The migration from anchor to Docusaurus Link component is correct and maintains the existing styling and behavior.
Also applies to: 128-130
apps/docs/src/components/HomepageArchitectureSection/index.tsx (1)
3-3: LGTM!The anchor-to-Link migration is clean and correctly simplifies the markup by removing the unnecessary inner span wrapper.
Also applies to: 25-27
apps/docs/src/components/HomepageStartersSection/index.tsx (1)
3-4: LGTM!Consistent migration to Docusaurus Link component for internal navigation.
Also applies to: 62-64
apps/docs/src/components/DXPIntegrationsSection/index.tsx (3)
15-15: Good Tailwind shorthand usage.The change from
flex-shrink-0toshrink-0uses the more concise Tailwind utility while maintaining identical behavior.
67-69: LGTM!The migration to Link component with
shrink-0utility prevents the button from shrinking in the flex layout.
64-64: Verify that theleading-normaloverride actually applies to the rendered output.The H3 component (apps/docs/src/components/Typography/index.tsx) defines
leading-9as a base style without an!importantflag. Your override addsleading-normal(also without!important). Both utilities have equal CSS specificity, so the actual applied value depends on Tailwind's CSS generation order. Confirm the rendered line-height is 1.5 (not 2.25) and matches the intended design.apps/docs/src/pages/product/features.tsx (2)
4-5: LGTM!Clean migration to Link component that maintains all styling and attributes.
Also applies to: 350-358
379-380: LGTM!Inline Link usage in the footer description is correct and idiomatic for Docusaurus.
apps/docs/src/components/FooterSection/index.tsx (1)
3-4: LGTM!The FooterSection component correctly migrates both primary and secondary buttons to use Link components while preserving all props and behavior. The use of
hrefprop with Link is valid for Docusaurus.Also applies to: 39-43, 46-57
apps/docs/docs/integrations/overview.md (2)
22-29: LGTM!The single-line formatting for DocLinkTiles items is more concise and maintains the same data structure.
37-41: The /contact route exists and is properly configured.Verification confirms the contact page is available at
apps/docs/src/pages/contact/index.tsx. In the Docusaurus structure, this file automatically maps to the/contactroute. The page is fully functional with a contact form and layout configuration. The navigation change to internal/contactlinks is valid.apps/docs/src/pages/product/integrations.tsx (2)
37-37: LGTM!The optional
linkfield is correctly typed and allows integration items to specify documentation or contact links.
50-50: Verification confirmed: IntegrationsBlocks properly implements link handling and hover effects.The IntegrationsBlocks component fully supports the link field additions:
- Link support: The component interface includes
link?: stringand conditionally renders cards as clickable<Link>elements when a link is present- Hover darkening: Implemented via pseudo-element with
bg-black/20 opacity-0 hover:opacity-100transition on linkable cards- Arrow icon: Conditionally rendered for cards with links
- Non-interactive fallback: Cards without links render as plain
<div>elements without hover effectsAll PR requirements are properly implemented. No changes needed.
apps/docs/src/components/IntegrationsBlocks/index.tsx (1)
87-99: Card and focus styling are robust and accessibleThe
cardClassNamecomposition with thebefore:overlay and the dedicatedlinkClassNamethat addsno-underlineplusfocus-visibleoutlines provides good hover affordances while maintaining an accessible focus state for keyboard users.No changes needed here; this is a solid implementation.
Please confirm in your docs preview that keyboard tab focus on linkable cards shows the expected outline and that the hover overlay doesn’t interfere with clicking (it shouldn’t, thanks to
before:pointer-events-none).
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/docs/src/components/HeroBannerSection/index.tsx (1)
112-123: Consider adding "noreferrer" to rel attribute for enhanced privacy.While
rel="noopener"prevents the tabnapping attack, addingrel="noopener noreferrer"also prevents the Referer header from being sent to the target page, improving user privacy.Apply this diff to enhance privacy:
<Link href={secondaryLink.url} className={clsx('button button-ultra', cliCommand && 'w-1/2')} target={secondaryLink.target} - rel="noopener" + rel="noopener noreferrer" > <span className="label flex items-center justify-center gap-2"> {secondaryLink.iconLeft} {secondaryLink.text} {secondaryLink.iconRight} </span> </Link>Apply the same change to tertiaryLink:
<Link href={tertiaryLink.url} className={clsx('button button-special', cliCommand && 'w-1/2')} target={tertiaryLink.target} - rel="noopener" + rel="noopener noreferrer" > <span className="label flex items-center justify-center gap-2"> {tertiaryLink.iconLeft} {tertiaryLink.text} {tertiaryLink.iconRight} </span> </Link>Also applies to: 127-138
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
apps/docs/src/components/HeroBannerSection/index.tsx(4 hunks)apps/docs/src/components/HoverCard/index.tsx(2 hunks)apps/docs/src/pages/product/starters.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
apps/docs/src/pages/product/starters.tsx (1)
apps/docs/src/components/StarterInfoSection/index.tsx (1)
StarterInfoSection(29-68)
🔇 Additional comments (3)
apps/docs/src/components/HoverCard/index.tsx (1)
3-3: LGTM: Clean migration to Docusaurus Link component.The replacement of the anchor tag with Docusaurus
Linkaligns with the framework's best practices for internal navigation and client-side routing. The component correctly preserves all necessary props.Note: Since
HoverCardPropsdoesn't include atargetproperty, all links will open in the same tab, which reduces the need forrelattributes. However, if you plan to support external links opening in new tabs in the future, ensure you addrel="noopener noreferrer"for security.Also applies to: 74-82
apps/docs/src/pages/product/starters.tsx (1)
346-346: LGTM: Improves anchor navigation UX.Adding
scroll-m-24(6rem scroll margin) to both starter sections ensures that when users navigate via anchor links (e.g.,#customer-portal-starter), the content won't be hidden behind a fixed header. This is a good accessibility and UX improvement.Also applies to: 349-349
apps/docs/src/components/HeroBannerSection/index.tsx (1)
4-4: No action needed — Docusaurus Link already handles external link security attributes.Docusaurus Link automatically adds rel="noopener noreferrer" for external links with target="_blank", so this import and its usage are secure as-is.
… docs/integrations-page-update
… docs/integrations-page-update
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/docs/src/pages/product/integrations.tsx (1)
79-83: Add missing link for Zendesk integration.Zendesk is marked as
'available'but has nolinkfield, making it inconsistent with other available integrations like SurveyJS (line 76) and the second Zendesk entry (lines 149-153, marked as 'planned').Consider adding an appropriate link:
{ name: 'Zendesk', status: 'available', description: 'External ticketing and support knowledge base system.', icon: <ZendeskIcon />, + link: '/docs/integrations/customer-support/zendesk', // or '/contact' if docs aren't ready },
🧹 Nitpick comments (1)
apps/docs/src/pages/product/integrations.tsx (1)
53-58: Consider clarifying integration status or link target.Contentful is marked as
'available'but links to/contactrather than documentation. This differs from the pattern where other'available'integrations link to their docs. If documentation isn't ready yet, consider either:
- Using status
'internal'to match other contact-linked integrations, or- Adding a comment explaining the link choice
This helps maintain user expectations about what "available" means.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (1)
apps/docs/src/pages/product/integrations.tsx(10 hunks)
🔇 Additional comments (2)
apps/docs/src/pages/product/integrations.tsx (2)
29-38: LGTM!The addition of the optional
linkfield to the integration item type is clean and maintains backward compatibility.
45-243: All documentation paths have been verified and exist:
- ✓
/docs/integrations/cms/strapi/overview→ apps/docs/docs/integrations/cms/strapi/overview.md- ✓
/docs/integrations/forms/surveyjs→ apps/docs/docs/integrations/forms/surveyjs.md- ✓
/docs/main-components/frontend-app/authentication→ apps/docs/docs/main-components/frontend-app/authentication.md- ✓
/docs/integrations/commerce/medusa-js→ apps/docs/docs/integrations/commerce/medusa-js.md- ✓
/docs/integrations/search/algolia→ apps/docs/docs/integrations/search/algolia.md- ✓
/docs/integrations/cache/redis→ apps/docs/docs/integrations/cache/redis.md- ✓
/contact→ apps/docs/src/pages/contact/index.tsx (routed via Docusaurus config)No broken links detected. The code is ready to merge.
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
What does this PR do?
Key Changes
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.