fix: content changes for getting started page #7216
Conversation
WalkthroughSimplifies the getting-started page into a linear Quickstart-focused layout, adds Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Pre-merge checks❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used🧠 Learnings (4)📓 Common learnings📚 Learning: 2025-10-08T16:23:00.388ZApplied to files:
📚 Learning: 2025-10-08T16:22:57.129ZApplied to files:
📚 Learning: 2025-10-08T16:23:00.388ZApplied to files:
⏰ 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)
Comment |
Deploying docs with
|
| Latest commit: |
c4a2983
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://939ec0d8.docs-51g.pages.dev |
| Branch Preview URL: | https://dc-5673-getting-started-rede.docs-51g.pages.dev |
![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 (1)
content/100-getting-started/index.mdx (1)
64-64: JSX component in markdown heading works but consider plain text.Using
<PrismaPostgres />directly in a markdown heading is valid MDX but can complicate heading extraction and navigation. Consider whether the icon adds sufficient value in the heading context, or if it could be placed adjacent to the heading instead.If you prefer to keep the icon outside the heading:
-## <PrismaPostgres color="#16A394" width="21" height="24" /> Already have your own database? +<PrismaPostgres color="#16A394" width="21" height="24" /> + +## Already have your own database?
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
content/100-getting-started/index.mdx(2 hunks)src/components/GettingStarted/index.tsx(2 hunks)src/pages/index.tsx(9 hunks)static/_redirects(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
src/components/GettingStarted/index.tsx (1)
src/components/Icon.tsx (1)
Icon(14-57)
src/pages/index.tsx (3)
src/components/Icon.tsx (1)
Icon(14-57)src/components/GettingStarted/index.tsx (1)
SquareLogo(149-173)src/data/indexData.ts (1)
tabs(125-204)
🪛 ast-grep (0.39.6)
src/pages/index.tsx
[warning] 173-173: 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)
🪛 Biome (2.1.2)
src/pages/index.tsx
[error] 174-174: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
[error] 177-183: 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)
[error] 244-244: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
⏰ 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)
- GitHub Check: runner / linkspector
- GitHub Check: Cloudflare Pages
🔇 Additional comments (3)
src/components/GettingStarted/index.tsx (1)
126-141: LGTM! Clean component implementation.The
QuickstartLinkCardcomponent is well-structured and properly reuses existing patterns fromLinkCard. The optional icon rendering and children prop with fallback todescprovide good flexibility.content/100-getting-started/index.mdx (1)
27-62: Clean simplification of the getting-started flow.The restructured content is much more streamlined and easier to follow. The use of
BoxTitle,BorderBox, andQuickstartLinkCardcreates a clear, linear progression for users.static/_redirects (1)
639-643: Unable to locate source anchors in codebase history.Searches for these anchor patterns (
prisma-orm,prisma-accelerate,prisma-optimize) across git history and current markdown files returned no results. This means either the anchors don't exist in the indexed files, were removed, or are generated dynamically.The concern about unusual anchor format (leading dashes) remains valid. To resolve this, manually verify:
- Visit
/docs/getting-startedand check the actual heading text and generated anchor IDs- Confirm whether headings like "- Prisma ORM", "- Prisma Accelerate", "- Prisma Optimize" (with leading dashes) actually exist and generate these anchor IDs
Dangerous URL checkNo absolute URLs to prisma.io/docs found. |
Redirect checkThis PR probably requires the following redirects to be added to static/_redirects:
|
🍈 Lychee Link Check Report
📊 Results Overview
|
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
src/css/gettingStarted.module.scss (1)
50-60: Review the use of!importantin code block styling.The
!importantdeclarations on lines 51 and 55 suggest a specificity conflict with other styles. While this may be intentional to override Docusaurus defaults, it's worth verifying whether a more specific selector could achieve the same result without!important.src/components/GettingStarted/index.tsx (2)
70-98: Inconsistent default value syntax in new icon components.The
PlusandPlugcomponents use nullish coalescing (??) for default values (lines 74, 89), while existing icon components likeDatabase,Bolt, andInspectuse ternary operators (? :). For consistency within this file, consider using the same pattern.Apply this diff for consistency:
export const Plus = ({ color, height, width }: any) => ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" - height={height ?? "16"} - width={width ?? "18"} + height={height ? height : "16"} + width={width ? width : "18"} style={{ marginRight: `4px`, transform: `translateY(2px)` }} > export const Plug = ({ color, height, width }: any) => ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" - height={height ?? "16"} - width={width ?? "18"} + height={height ? height : "16"} + width={height ? height : "18"} style={{ marginRight: `4px`, transform: `translateY(2px)` }} >Note: While using
anyfor props is not ideal for type safety, it's consistent with all other icon components in this file. A broader refactoring to add proper types would be beneficial but is outside the scope of this PR.
156-171: Consider if LinkCard and QuickstartLinkCard can be unified.
QuickstartLinkCardshares significant structure with the existingLinkCardcomponent (lines 139-154), with these differences:
- Optional icon rendering
h2heading instead ofh6- Support for
childrento replace or supplement the descriptionWhile the semantic difference between
h2andh6may justify separate components, you could consider a unified approach with aheadingLevelprop. However, keeping them separate is also reasonable given their distinct use cases.If unification is desired:
export const LinkCard = ({ icon, title, desc, link, highlight, children, headingLevel = 'h6' }: any) => { const linkCardRef = useRef(null); const HeadingTag = headingLevel as any; return ( <Link to={link} ref={linkCardRef} className={clsx(styles.linkCardWrapper, highlight && styles.linkCardHighlight)} > <div className={styles.title}> {icon && <Icon icon={icon} btn="left" size="18px" />} <HeadingTag>{title}</HeadingTag> </div> {children ?? <p>{desc}</p>} </Link> ); };content/100-getting-started/index.mdx (1)
54-54: Consider using CSS for vertical spacing instead of<br/>tags.Multiple
<br/>elements are used throughout for vertical spacing. While functional, this is not semantic HTML and makes spacing harder to maintain responsively. Consider using CSS margins on the components instead.For example, in
src/css/gettingStarted.module.scss, you could add spacing utilities or adjust existing component margins rather than relying on<br/>elements.Also applies to: 66-67, 107-108, 137-138
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (7)
static/img/technologies/astro.svgis excluded by!**/*.svgstatic/img/technologies/astrodark.svgis excluded by!**/*.svgstatic/img/technologies/drizzle.svgis excluded by!**/*.svgstatic/img/technologies/kysely.svgis excluded by!**/*.svgstatic/img/technologies/remix.svgis excluded by!**/*.svgstatic/img/technologies/sequelize.svgis excluded by!**/*.svgstatic/img/technologies/typeorm.svgis excluded by!**/*.svg
📒 Files selected for processing (3)
content/100-getting-started/index.mdx(2 hunks)src/components/GettingStarted/index.tsx(2 hunks)src/css/gettingStarted.module.scss(6 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: carlagn
PR: prisma/docs#7183
File: content/200-orm/800-more/600-help-and-troubleshooting/050-dataguide/050-database-glossary.mdx:561-567
Timestamp: 2025-10-14T11:41:08.844Z
Learning: Ignore the file `content/200-orm/800-more/600-help-and-troubleshooting/050-dataguide/050-database-glossary.mdx` in future reviews as per user request. Issues in this file were addressed in PR #7185.
📚 Learning: 2025-10-08T16:23:00.388Z
Learnt from: aidankmcalister
PR: prisma/docs#7165
File: content/800-guides/550-test-guide.mdx:85-90
Timestamp: 2025-10-08T16:23:00.388Z
Learning: For .mdx files in the prisma/docs repository: All headings and titles should use sentence case (e.g., "Getting started with Prisma ORM", "Best practices for authentication"), not title case. Exception: Always preserve exact casing for product names including "Prisma Postgres", "Prisma", "Prisma ORM", and "Prisma Data Platform".
Applied to files:
content/100-getting-started/index.mdx
📚 Learning: 2025-10-08T16:22:57.129Z
Learnt from: aidankmcalister
PR: prisma/docs#7165
File: content/800-guides/550-test-guide.mdx:50-66
Timestamp: 2025-10-08T16:22:57.129Z
Learning: In `.mdx` files, do NOT flag or suggest changes for the following code quality issues even if they represent poor practices: React anti-patterns (using var instead of useState, direct DOM manipulation), missing keys in .map() iterations, non-serializable props in getServerSideProps, unused variables, missing error handling, SQL injection vulnerabilities (unless actively showing how to fix them), insecure cookie settings, missing TypeScript types, PrismaClient instantiation patterns, or any other code quality, security, or performance issues. Documentation code snippets are copied from source code and often intentionally show "before" examples or common mistakes.
Applied to files:
content/100-getting-started/index.mdx
🧬 Code graph analysis (1)
src/components/GettingStarted/index.tsx (1)
src/components/Icon.tsx (1)
Icon(14-57)
⏰ 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 links
- GitHub Check: runner / linkspector
- GitHub Check: Check internal links
🔇 Additional comments (4)
src/css/gettingStarted.module.scss (2)
195-249: Comprehensive responsive grid implementation looks good.The multi-breakpoint grid system provides fine-grained control over layout at different viewport sizes. The separation of
.framedListand non-framed variants is clear and well-structured.
19-49: Flex layout and typography improvements enhance the card presentation.The addition of flexbox properties, increased font size (14px → 16px), and improved paragraph spacing align well with the card-based, responsive design mentioned in the PR objectives.
content/100-getting-started/index.mdx (2)
56-64: Verify thehighlightprop value for QuickstartLinkCard.Line 58 passes
highlight="#16A394"(a color string), but examining the component implementation insrc/components/GettingStarted/index.tsx(line 162), thehighlightprop is used as a boolean condition for applying thelinkCardHighlightclass. The component doesn't use the color value itself—the styling is defined in CSS.This should likely be:
<QuickstartLinkCard title="Quickstart →" - highlight="#16A394" + highlight={true} link="/getting-started/quickstart-prismaPostgres" >Or if the component should accept a color value, the implementation needs updating.
110-138: Remove commented-out content section.The commented "Using Prisma Postgres with other tools?" section (lines 110-138) should either be:
- Removed entirely if not needed, or
- Tracked in a GitHub issue if it's planned for future implementation
Keeping large blocks of commented code in documentation:
- Creates confusion about what content is active
- Clutters the file
- Can become outdated without anyone noticing
⛔ Skipped due to learnings
Learnt from: aidankmcalister PR: prisma/docs#7165 File: content/800-guides/550-test-guide.mdx:85-90 Timestamp: 2025-10-08T16:23:00.388Z Learning: For .mdx files in the prisma/docs repository: Only flag code snippets for (1) exposed secrets with real-looking values that should be placeholders (e.g., API keys, database passwords, AWS credentials), or (2) blatant syntax errors like missing parentheses, brackets, braces, or mismatched delimiters. Do not flag code quality issues, anti-patterns, security vulnerabilities, missing error handling, unused variables, or any other bad practices, as documentation intentionally shows problematic code.Learnt from: aidankmcalister PR: prisma/docs#7165 File: content/800-guides/550-test-guide.mdx:50-66 Timestamp: 2025-10-08T16:22:57.129Z Learning: In `.mdx` files, do NOT flag or suggest changes for the following code quality issues even if they represent poor practices: React anti-patterns (using var instead of useState, direct DOM manipulation), missing keys in .map() iterations, non-serializable props in getServerSideProps, unused variables, missing error handling, SQL injection vulnerabilities (unless actively showing how to fix them), insecure cookie settings, missing TypeScript types, PrismaClient instantiation patterns, or any other code quality, security, or performance issues. Documentation code snippets are copied from source code and often intentionally show "before" examples or common mistakes.Learnt from: carlagn PR: prisma/docs#7183 File: content/200-orm/800-more/600-help-and-troubleshooting/050-dataguide/050-database-glossary.mdx:561-567 Timestamp: 2025-10-14T11:41:08.844Z Learning: Ignore the file `content/200-orm/800-more/600-help-and-troubleshooting/050-dataguide/050-database-glossary.mdx` in future reviews as per user request. Issues in this file were addressed in PR #7185.Learnt from: aidankmcalister PR: prisma/docs#7157 File: content/800-guides/400-deno-integration.mdx:188-190 Timestamp: 2025-10-03T19:30:57.554Z Learning: For the prisma/docs repository, do not suggest changes to code blocks when reviewing documentation pull requests.Learnt from: aidankmcalister PR: prisma/docs#7167 File: content/900-ai/prompts/astro.mdx:84-85 Timestamp: 2025-10-10T13:13:30.534Z Learning: Do not review or comment on files in the `ai/prompts/` directory or matching the path pattern `content/900-ai/prompts/` in the prisma/docs repository.
aidankmcalister
requested review from
AmanVarshney01,
ArthurGamby,
mhartington,
mhessdev and
petradonka
Summary by CodeRabbit
New Features
Documentation
Style