From 4fbae88e5d00b0381433f2e411049088efc1a4eb Mon Sep 17 00:00:00 2001 From: Ankur Datta <64993082+ankur-arch@users.noreply.github.com> Date: Tue, 28 Oct 2025 20:36:25 +0600 Subject: [PATCH 1/5] fix: content changes for getting started page --- content/100-getting-started/index.mdx | 176 +++++------------------- src/components/GettingStarted/index.tsx | 19 ++- src/pages/index.tsx | 34 ++--- 3 files changed, 66 insertions(+), 163 deletions(-) diff --git a/content/100-getting-started/index.mdx b/content/100-getting-started/index.mdx index b03a3857a7..32a34d764e 100644 --- a/content/100-getting-started/index.mdx +++ b/content/100-getting-started/index.mdx @@ -3,7 +3,6 @@ title: 'Get Started' metaTitle: 'Get started with Prisma' metaDescription: 'Build data-driven applications with ease using Prisma ORM, add connection pooling or global caching with Prisma Accelerate.' hide_title: true -tocDepth: 1 sidebar_position: 0 sidebar_class_name: firstTitle pagination_next: 'getting-started/quickstart-sqlite' @@ -21,79 +20,52 @@ import { SignalStream, PrismaPostgres, SquareLogo, + QuickstartLinkCard } from '@site/src/components/GettingStarted'; +Getting started - - -Get started + -Welcome 👋 + -Explore our products that make it easy to build and scale data-driven applications: +[**Prisma ORM**](/orm/overview/introduction/what-is-prisma) is an open-source ORM that provides fast, type-safe access to Postgres, MySQL, SQLite, and more databases, and runs smoothly across Node.js, Bun, and Deno. -[**Prisma ORM**](/orm/overview/introduction/what-is-prisma) is a next-generation Node.js and TypeScript ORM that unlocks a new level of developer experience when working with databases thanks to its intuitive data model, automated migrations, type-safety & auto-completion. +```terminal +npx prisma init --db +``` + + -[**Prisma Postgres**](/postgres) is a managed PostgreSQL service that gives you an _always-on_ database with _pay-as-you-go_ pricing. + -[**Prisma Optimize**](/optimize/) helps you analyze queries, generate insights, and provides recommendations to make your database queries faster. +[**Prisma Postgres**](/postgres) is our managed PostgreSQL service with automatic scaling, AI integrations, and a simple API and GUI for database management. -[**Prisma Accelerate**](/accelerate) is a global database cache with scalable connection pooling to make your queries fast. +```terminal +npx create-db +``` + + + - +
+ -## Prisma ORM +The fastest way to set up **Prisma ORM** with a ready-to-use **Prisma Postgres** database. -Add Prisma ORM to your application in a few minutes to start modeling your data, run schema migrations and query your database. + -### The easiest way to get started with Prisma +## Already have your own database? -_Explore all Prisma products at once._ +The fastest way to set Prisma ORM up with a ready-to-use database. - - -### Explore quickly with a SQLite database - -_These options don't require you to have your own database running._ - - - - - - -### Choose an option to get started with your own database - -_Select one of these options if you want to connect Prisma ORM to your own database._ - - - -

- Set up Prisma ORM from scratch with your favorite database and - learn basic workflows like data modeling, querying, and migrations. -

- - + - - - -

- Get started with Prisma ORM and your existing database by - introspecting your database schema and learn how to query your database. -

- - - - - - - - - - - -## Prisma Accelerate - -Make your database queries faster by scaling your database connections and caching database results at the edge with Prisma Accelerate. - - - - - -
- - -## Prisma Optimize - -Make your database queries faster by using the insights and recommendations generated by Prisma Optimize. - - - - - + + diff --git a/src/components/GettingStarted/index.tsx b/src/components/GettingStarted/index.tsx index 92a0986c82..05a3a0e457 100644 --- a/src/components/GettingStarted/index.tsx +++ b/src/components/GettingStarted/index.tsx @@ -106,7 +106,7 @@ export const Grid = ({ children, ...props }) => ( ); -export const LinkCard = ({ icon, title, desc, link, highlight }: any) => { +export const LinkCard = ({ icon, title, desc, link, highlight, }: any) => { const linkCardRef = useRef(null); return ( { ); }; +export const QuickstartLinkCard = ({ icon, title, desc, link, highlight, children }: any) => { + const linkCardRef = useRef(null); + return ( + +
+ {icon && } +

{title}

+
+ {children ??

{desc}

} + + ); +}; + export const Tab = ({ children, ...props }) => (
{children} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index e242c4ec34..55f2b82ea3 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -54,7 +54,7 @@ function HomepageHowDoISection() { const hiddenCards = how_do_i.slice(3); const location = useLocation(); - + return (
@@ -72,7 +72,7 @@ function HomepageHowDoISection() { {e.tags.map((tag: any) => )}
} {e.time &&
- + {e.time} min. read
}
} @@ -89,7 +89,7 @@ function HomepageHowDoISection() { {e.tags.map((tag: any) => )} } {e.time &&
- + {e.time} min. read
} } @@ -100,7 +100,7 @@ function HomepageHowDoISection() { className={clsx(styles.seeMore, seeMore && styles.clicked)} onClick={() => { setSeeMore(!seeMore) - howRef.current.scrollIntoView({behavior: "smooth", offset: 80}); + howRef.current.scrollIntoView({ behavior: "smooth", offset: 80 }); }} > See {seeMore ? `less` : `more`} @@ -110,7 +110,7 @@ function HomepageHowDoISection() { ); } -const CommunityIcon = ({icon, link, label}: any) => { +const CommunityIcon = ({ icon, link, label }: any) => { const [visibleTooltip, setVisibleTooltip] = useState(false); const iconRef = useRef(null); @@ -161,41 +161,41 @@ function HomepageCommunitySection() { ); } -const TabBox = ({icon, label, description, list, link}: any) => { +const TabBox = ({ icon, label, description, list, link }: any) => { const location = useLocation(); return (
- {icon && } + {icon && } {label}
-

+

- {list && list.length && list.map((l: any, idx: number) => + {list && list.length && list.map((l: any, idx: number) => )}
- + {link.label} - +
) } function HomepageHeroSection() { - const { colorMode } = useColorMode(); + const { colorMode } = useColorMode(); return (
@@ -216,7 +216,7 @@ function HomepageHeroSection() { label="Start with an AI prompt →" color="teal" /> */}
- {tabs && tabs.map((tab: any, idx: number) => + {tabs && tabs.map((tab: any, idx: number) => )}
@@ -241,9 +241,9 @@ function HomepageGetHelpSection() {

{e.title}

-

+

- {e.links.map((link: any) => + {e.links.map((link: any) => {link.label} @@ -272,7 +272,7 @@ export default function Home(): JSX.Element { - + From c3d99763fc4bc980552d51975461c2ea03bf9f66 Mon Sep 17 00:00:00 2001 From: Ankur Datta <64993082+ankur-arch@users.noreply.github.com> Date: Tue, 28 Oct 2025 20:49:31 +0600 Subject: [PATCH 2/5] fix: add redirects --- static/_redirects | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/static/_redirects b/static/_redirects index e2c2eb925f..dd1525cb19 100644 --- a/static/_redirects +++ b/static/_redirects @@ -636,5 +636,12 @@ /postgres/database/tooling /docs/postgres/integrations/viewing-data /postgres/integrations/tooling /docs/postgres/integrations/viewing-data +/getting-started#-prisma-orm /docs/getting-started +/getting-started#explore-quickly-with-a-sqlite-database /docs/getting-started/quickstart-sqlite +/getting-started#choose-an-option-to-get-started-with-your-own-database /docs/getting-started/quickstart-sqlite +/getting-started#-prisma-accelerate /docs/postgres/database/caching +/getting-started#-prisma-optimize /docs/postgres/query-optimization + + ### NO REDIRECTS BELOW THIS LINE. ADD REDIRECTS ABOVE THIS SECTION ### From 4b3ed4da8ea8258ebd0cd40d3821375ee17b78b7 Mon Sep 17 00:00:00 2001 From: Aidan McAlister Date: Wed, 29 Oct 2025 14:04:30 -0400 Subject: [PATCH 3/5] getting started checkpoint --- content/100-getting-started/index.mdx | 78 +++++++++- src/components/GettingStarted/index.tsx | 32 ++++- src/css/gettingStarted.module.scss | 184 ++++++++++++++++++------ static/img/technologies/astro.svg | 4 + static/img/technologies/astrodark.svg | 11 ++ static/img/technologies/drizzle.svg | 6 + static/img/technologies/kysely.svg | 17 +++ static/img/technologies/remix.svg | 11 ++ static/img/technologies/sequelize.svg | 36 +++++ static/img/technologies/typeorm.svg | 4 + 10 files changed, 335 insertions(+), 48 deletions(-) create mode 100644 static/img/technologies/astro.svg create mode 100644 static/img/technologies/astrodark.svg create mode 100644 static/img/technologies/drizzle.svg create mode 100644 static/img/technologies/kysely.svg create mode 100644 static/img/technologies/remix.svg create mode 100644 static/img/technologies/sequelize.svg create mode 100644 static/img/technologies/typeorm.svg diff --git a/content/100-getting-started/index.mdx b/content/100-getting-started/index.mdx index 32a34d764e..14fff30b8b 100644 --- a/content/100-getting-started/index.mdx +++ b/content/100-getting-started/index.mdx @@ -17,6 +17,8 @@ import { Grid, LinkCard, List, + Plus, + Plug, SignalStream, PrismaPostgres, SquareLogo, @@ -61,7 +63,10 @@ The fastest way to set up **Prisma ORM** with a ready-to-use **Prisma Postgres** -## Already have your own database? +
+
+ +### Already have your own database? The fastest way to set Prisma ORM up with a ready-to-use database. @@ -99,3 +104,74 @@ The fastest way to set Prisma ORM up with a ready-to-use database. /> +
+
+ + {/* ### Using Prisma Postgres with other tools? + +You can also use Prisma Postgres with different tools or ORMs. Pick one of the options below to see how to connect. + + + + + + + + +
+
*/} + +### Add Prisma to your favorite framework? + +Working with **Next.js**, **Remix**, or another framework? You can easily add Prisma to your setup in just a few steps and start using it right away. + + + + + + + + + + diff --git a/src/components/GettingStarted/index.tsx b/src/components/GettingStarted/index.tsx index 05a3a0e457..cfcab301c7 100644 --- a/src/components/GettingStarted/index.tsx +++ b/src/components/GettingStarted/index.tsx @@ -67,6 +67,36 @@ export const SignalStream = ({ color, height, width }: any) => ( ); +export const Plus = ({ color, height, width }: any) => ( + + + +); + +export const Plug = ({ color, height, width }: any) => ( + + + +); + export const PrismaPostgres = ({ color, height, width }: any) => ( (
); -export const LinkCard = ({ icon, title, desc, link, highlight, }: any) => { +export const LinkCard = ({ icon, title, desc, link, highlight }: any) => { const linkCardRef = useRef(null); return ( p { + margin-bottom: 16px; + &:last-child { + margin-bottom: 0; + } + } + pre[class*="language-"] { + background: #121521 !important; + border: 0.7px solid #2d3748; + code span { + font-size: 16px; + color: #e2e8f0 !important; + &::before { + color: #4a5568; + } + } + } } .boxTitle { @@ -45,30 +69,30 @@ letter-spacing: -0.8px; } -.grid { - gap: 16px; - display: grid; - margin-top: 24px; - grid-template-columns: none; - @media (min-width: 600px) { - grid-template-columns: 1fr 1fr; - } - a { - border-color: var(--ifm-btn-border-color); - background: transparent; - color: var(--main-font-color); - &:hover { - border-color: var(--ifm-btn-border-color-active); - background: transparent; - } - } -} +// .grid { +// gap: 16px; +// display: grid; +// margin-top: 24px; +// grid-template-columns: none; +// @media (min-width: 600px) { +// grid-template-columns: 1fr 1fr; +// } +// a { +// border-color: var(--ifm-btn-border-color); +// background: transparent; +// color: var(--main-font-color); +// &:hover { +// border-color: var(--ifm-btn-border-color-active); +// background: transparent; +// } +// } +// } -.separator { - height: 100%; - width: 1px; - border-left: 1px solid var(--ifm-btn-border-color); -} +// .separator { +// height: 100%; +// width: 1px; +// border-left: 1px solid var(--ifm-btn-border-color); +// } .linkCardWrapper { border: 1px solid var(--border-color); @@ -86,15 +110,20 @@ color: inherit; } &.linkCardHighlight { - background: rgba(22, 163, 148, 0.12); - border-color: rgb(22, 163, 148); - &:hover { - // background: #B7F4EE; - border-color: #154f47; - } + border-radius: 8px; + border: 1px solid var(--surface-brand-default); + background: var(--surface-brand-light); + // &:hover { + // background: #b7f4ee; + // border-color: #154f47; + // } } .title { display: inline-flex; + h2 { + font-family: Barlow; + border-bottom: 1px solid var(--main-font-color); + } h6 { font-size: 18px; display: inline-block; @@ -117,21 +146,21 @@ } } -.tab { - padding: 15px; - background-color: var(--main-bgd-color); - border: 1px solid var(--indigo-600); - border-radius: 0px 8px 8px 8px; - font-family: Inter; - font-size: 14px; - font-weight: 400; - line-height: 20px; - letter-spacing: 0em; - text-align: left; - p { - margin-top: 0; - } -} +// .tab { +// padding: 15px; +// background-color: var(--main-bgd-color); +// border: 1px solid var(--indigo-600); +// border-radius: 0px 8px 8px 8px; +// font-family: Inter; +// font-size: 14px; +// font-weight: 400; +// line-height: 20px; +// letter-spacing: 0em; +// text-align: left; +// p { +// margin-top: 0; +// } +// } .squareWrapper { width: 90px; @@ -218,3 +247,66 @@ flex-wrap: wrap; } } + +// .list { +// display: grid; +// // Gap with no trailing margin +// > * + * { +// margin-left: 16px; +// } +// max-width: fit-content; +// grid-template-columns: repeat(2, auto); +// // &:has(.borderBox) { +// // display: grid; +// // gap: 16px; +// // border: 2px solid blue; +// // } +// &:not(.framedList) { +// @media (min-width: 1400px) { +// grid-template-columns: repeat(7, auto); +// } +// @media (min-width: 997px) and (max-width: 1400px) { +// grid-template-columns: repeat(4, auto); +// } +// @media (min-width: 816px) and (max-width: 997px) { +// grid-template-columns: repeat(7, auto); +// } +// @media (min-width: 500px) and (max-width: 816px) { +// grid-template-columns: repeat(4, auto); +// } +// @media (min-width: 410px) and (max-width: 500px) { +// grid-template-columns: repeat(3, auto); +// } +// } +// // &.framedList { +// // background: var(--main-bgd-color); +// // border: 1px solid var(--ifm-btn-border-color); +// // border-radius: 8px; +// // padding: 24px 16px 16px 16px; +// // justify-content: center; +// // @media (min-width: 1240px) { +// // grid-template-columns: repeat(6, auto); +// // } +// // @media (min-width: 1025px) and (max-width: 1240px) { +// // grid-template-columns: repeat(3, auto); +// // } +// // @media (min-width: 768px) and (max-width: 1025px) { +// // grid-template-columns: repeat(4, auto); +// // } +// // @media (min-width: 480px) and (max-width: 768px) { +// // grid-template-columns: repeat(4, auto); +// // } +// // @media (min-width: 410px) and (max-width: 479px) { +// // grid-template-columns: repeat(3, auto); +// // } +// // .squareWrapper { +// // background: var(--surface-primary); +// // } +// // } +// // &.splitList { +// // width: fit-content; +// // display: flex; +// // justify-content: flex-start; +// // flex-wrap: wrap; +// // } +// } diff --git a/static/img/technologies/astro.svg b/static/img/technologies/astro.svg new file mode 100644 index 0000000000..e52118199d --- /dev/null +++ b/static/img/technologies/astro.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/img/technologies/astrodark.svg b/static/img/technologies/astrodark.svg new file mode 100644 index 0000000000..52b76d5509 --- /dev/null +++ b/static/img/technologies/astrodark.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/static/img/technologies/drizzle.svg b/static/img/technologies/drizzle.svg new file mode 100644 index 0000000000..fdacf2c789 --- /dev/null +++ b/static/img/technologies/drizzle.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/static/img/technologies/kysely.svg b/static/img/technologies/kysely.svg new file mode 100644 index 0000000000..5ca04a32b0 --- /dev/null +++ b/static/img/technologies/kysely.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/static/img/technologies/remix.svg b/static/img/technologies/remix.svg new file mode 100644 index 0000000000..25faf57061 --- /dev/null +++ b/static/img/technologies/remix.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/static/img/technologies/sequelize.svg b/static/img/technologies/sequelize.svg new file mode 100644 index 0000000000..728f77161e --- /dev/null +++ b/static/img/technologies/sequelize.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/technologies/typeorm.svg b/static/img/technologies/typeorm.svg new file mode 100644 index 0000000000..e91fbd55c8 --- /dev/null +++ b/static/img/technologies/typeorm.svg @@ -0,0 +1,4 @@ + + + + From c9d0083c02b8437c46c8f472460605a3cbda906f Mon Sep 17 00:00:00 2001 From: Aidan McAlister Date: Thu, 6 Nov 2025 11:26:35 -0500 Subject: [PATCH 4/5] css styles fixed --- src/css/gettingStarted.module.scss | 118 ++--------------------------- 1 file changed, 7 insertions(+), 111 deletions(-) diff --git a/src/css/gettingStarted.module.scss b/src/css/gettingStarted.module.scss index ad4165aea1..9d78a93d81 100644 --- a/src/css/gettingStarted.module.scss +++ b/src/css/gettingStarted.module.scss @@ -23,7 +23,7 @@ border-radius: 8px; border: 1px solid var(--border-color); background: var(--surface-brand-grey-strong); - width: 100%; + width: fit-content; a { text-decoration: underline; } @@ -69,31 +69,6 @@ letter-spacing: -0.8px; } -// .grid { -// gap: 16px; -// display: grid; -// margin-top: 24px; -// grid-template-columns: none; -// @media (min-width: 600px) { -// grid-template-columns: 1fr 1fr; -// } -// a { -// border-color: var(--ifm-btn-border-color); -// background: transparent; -// color: var(--main-font-color); -// &:hover { -// border-color: var(--ifm-btn-border-color-active); -// background: transparent; -// } -// } -// } - -// .separator { -// height: 100%; -// width: 1px; -// border-left: 1px solid var(--ifm-btn-border-color); -// } - .linkCardWrapper { border: 1px solid var(--border-color); padding: 20px 24px; @@ -113,10 +88,6 @@ border-radius: 8px; border: 1px solid var(--surface-brand-default); background: var(--surface-brand-light); - // &:hover { - // background: #b7f4ee; - // border-color: #154f47; - // } } .title { display: inline-flex; @@ -146,22 +117,6 @@ } } -// .tab { -// padding: 15px; -// background-color: var(--main-bgd-color); -// border: 1px solid var(--indigo-600); -// border-radius: 0px 8px 8px 8px; -// font-family: Inter; -// font-size: 14px; -// font-weight: 400; -// line-height: 20px; -// letter-spacing: 0em; -// text-align: left; -// p { -// margin-top: 0; -// } -// } - .squareWrapper { width: 90px; height: 90px; @@ -194,10 +149,14 @@ .list { display: grid; - gap: 16px; margin-top: 16px; - max-width: fit-content; + width: fit-content; grid-template-columns: repeat(2, auto); + gap: 16px; + width: fit-content; + display: flex; + justify-content: flex-start; + &:not(.framedList) { @media (min-width: 1400px) { grid-template-columns: repeat(7, auto); @@ -247,66 +206,3 @@ flex-wrap: wrap; } } - -// .list { -// display: grid; -// // Gap with no trailing margin -// > * + * { -// margin-left: 16px; -// } -// max-width: fit-content; -// grid-template-columns: repeat(2, auto); -// // &:has(.borderBox) { -// // display: grid; -// // gap: 16px; -// // border: 2px solid blue; -// // } -// &:not(.framedList) { -// @media (min-width: 1400px) { -// grid-template-columns: repeat(7, auto); -// } -// @media (min-width: 997px) and (max-width: 1400px) { -// grid-template-columns: repeat(4, auto); -// } -// @media (min-width: 816px) and (max-width: 997px) { -// grid-template-columns: repeat(7, auto); -// } -// @media (min-width: 500px) and (max-width: 816px) { -// grid-template-columns: repeat(4, auto); -// } -// @media (min-width: 410px) and (max-width: 500px) { -// grid-template-columns: repeat(3, auto); -// } -// } -// // &.framedList { -// // background: var(--main-bgd-color); -// // border: 1px solid var(--ifm-btn-border-color); -// // border-radius: 8px; -// // padding: 24px 16px 16px 16px; -// // justify-content: center; -// // @media (min-width: 1240px) { -// // grid-template-columns: repeat(6, auto); -// // } -// // @media (min-width: 1025px) and (max-width: 1240px) { -// // grid-template-columns: repeat(3, auto); -// // } -// // @media (min-width: 768px) and (max-width: 1025px) { -// // grid-template-columns: repeat(4, auto); -// // } -// // @media (min-width: 480px) and (max-width: 768px) { -// // grid-template-columns: repeat(4, auto); -// // } -// // @media (min-width: 410px) and (max-width: 479px) { -// // grid-template-columns: repeat(3, auto); -// // } -// // .squareWrapper { -// // background: var(--surface-primary); -// // } -// // } -// // &.splitList { -// // width: fit-content; -// // display: flex; -// // justify-content: flex-start; -// // flex-wrap: wrap; -// // } -// } From 90191002ca777000650887e0628367d98e0847ab Mon Sep 17 00:00:00 2001 From: Aidan McAlister Date: Fri, 7 Nov 2025 10:01:14 -0500 Subject: [PATCH 5/5] updates --- content/100-getting-started/index.mdx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/content/100-getting-started/index.mdx b/content/100-getting-started/index.mdx index 14fff30b8b..110d5db0e6 100644 --- a/content/100-getting-started/index.mdx +++ b/content/100-getting-started/index.mdx @@ -42,7 +42,7 @@ npx prisma init --db -[**Prisma Postgres**](/postgres) is our managed PostgreSQL service with automatic scaling, AI integrations, and a simple API and GUI for database management. +[**Prisma Postgres**](/postgres) is a fully managed PostgreSQL database that scales to zero, integrates with Prisma ORM and Prisma Studio, and includes a generous free tier. ```terminal npx create-db @@ -97,6 +97,11 @@ The fastest way to set Prisma ORM up with a ready-to-use database. image={'/img/technologies/cockroachdbdark.svg'} tech="Cockroach DB" /> +