Skip to content

Commit ddfc555

Browse files
ankur-archaidankmcalister
ankur-arch
and
aidankmcalister
authored
fix: content changes for getting started page (#7216)
* fix: content changes for getting started page * fix: add redirects * getting started checkpoint * css styles fixed * updates --------- Co-authored-by: Aidan McAlister <[email protected]> Co-authored-by: Aidan McAlister <[email protected]>
1 parent 753b1b8 commit ddfc555

File tree

12 files changed

+297
-199
lines changed

12 files changed

+297
-199
lines changed

‎content/100-getting-started/index.mdx‎

Lines changed: 98 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ title: 'Get Started'
33
metaTitle: 'Get started with Prisma'
44
metaDescription: 'Build data-driven applications with ease using Prisma ORM, add connection pooling or global caching with Prisma Accelerate.'
55
hide_title: true
6-
tocDepth: 1
76
sidebar_position: 0
87
sidebar_class_name: firstTitle
98
pagination_next: 'getting-started/quickstart-sqlite'
@@ -18,82 +17,60 @@ import {
1817
Grid,
1918
LinkCard,
2019
List,
20+
Plus,
21+
Plug,
2122
SignalStream,
2223
PrismaPostgres,
2324
SquareLogo,
25+
QuickstartLinkCard
2426
} from '@site/src/components/GettingStarted';
2527

2628

29+
<BoxTitle>Getting started</BoxTitle>
2730

28-
<BorderBox>
29-
30-
<BoxTitle>Get started</BoxTitle>
31-
32-
Welcome 👋
33-
34-
Explore our products that make it easy to build and scale data-driven applications:
35-
36-
[**<Database />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.
37-
38-
[**<PrismaPostgres />Prisma Postgres**](/postgres) is a managed PostgreSQL service that gives you an _always-on_ database with _pay-as-you-go_ pricing.
39-
40-
[**<Inspect />Prisma Optimize**](/optimize/) helps you analyze queries, generate insights, and provides recommendations to make your database queries faster.
31+
<List>
4132

42-
[**<Bolt />Prisma Accelerate**](/accelerate) is a global database cache with scalable connection pooling to make your queries fast.
33+
<BorderBox>
4334

44-
</BorderBox>
35+
[**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.
4536

37+
```terminal
38+
npx prisma init --db
39+
```
40+
</BorderBox >
41+
4642

47-
## <Database color="#5A67D8" width="21" height="24" /> Prisma ORM
43+
<BorderBox>
4844

49-
Add Prisma ORM to your application in a few minutes to start modeling your data, run schema migrations and query your database.
45+
[**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.
5046

51-
### The easiest way to get started with Prisma
47+
```terminal
48+
npx create-db
49+
```
50+
</BorderBox >
51+
52+
</List>
5253

53-
_Explore all Prisma products at once._
54+
<br/>
5455

55-
<LinkCard
56-
icon="fa-solid fa-rabbit-running"
57-
title="Prisma Starter Template"
58-
desc="Create a new database, model your data, run migrations, and send queries in this comprehensive 5 minute tutorial."
56+
<QuickstartLinkCard
57+
title="Quickstart →"
58+
highlight="#16A394"
5959
link="/getting-started/quickstart-prismaPostgres"
60-
/>
60+
>
6161

62-
### Explore quickly with a SQLite database
62+
The fastest way to set up **Prisma ORM** with a ready-to-use **Prisma Postgres** database.
6363

64-
_These options don't require you to have your own database running._
64+
</QuickstartLinkCard>
6565

66-
<Grid>
67-
<LinkCard
68-
icon="fa-solid fa-rabbit-running"
69-
title="Quickstart"
70-
desc="Set up Prisma ORM from scratch with a SQLite database in 5 minutes."
71-
link="/getting-started/quickstart-sqlite"
72-
/>
73-
<LinkCard
74-
icon="fa-brands fa-github"
75-
title="Examples"
76-
desc="Explore our ready-to-run examples with your favorite frameworks and libraries."
77-
link="https://github.com/prisma/prisma-examples/"
78-
/>
79-
</Grid>
66+
<br/>
67+
<br/>
8068

81-
### Choose an option to get started with your own database
69+
### <PrismaPostgres color="#16A394" width="24" height="24" /> Already have your own database?
8270

83-
_Select one of these options if you want to connect Prisma ORM to your own database._
71+
The fastest way to set Prisma ORM up with a ready-to-use database.
8472

85-
<TabbedContent>
86-
<TabItem value="New database">
87-
<p>
88-
Set up Prisma ORM <b>from scratch</b> with your favorite database and
89-
learn basic workflows like data modeling, querying, and migrations.
90-
</p>
91-
<List>
92-
<SquareLogo
93-
url="/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-prismaPostgres"
94-
image={'/img/technologies/prismaPostgres.svg'}
95-
tech="Prisma Postgres"
96-
/>
73+
<List>
9774
<SquareLogo
9875
url="/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-postgresql"
9976
image={'/img/technologies/postgresqlsimple.svg'}
@@ -120,96 +97,86 @@ _Select one of these options if you want to connect Prisma ORM to your own datab
12097
image={'/img/technologies/cockroachdbdark.svg'}
12198
tech="Cockroach DB"
12299
/>
100+
<SquareLogo
101+
url="/orm/overview/databases/sqlite"
102+
image={'/img/technologies/sqlite.svg'}
103+
tech="SQLite"
104+
/>
123105
<SquareLogo
124106
url="/getting-started/setup-prisma/start-from-scratch/mongodb-typescript-mongodb"
125107
image={'/img/technologies/mongodbsimple.svg'}
126108
tech="Mongo DB"
127109
/>
128-
</List>
129-
</TabItem>
130-
<TabItem value="Existing database">
131-
<p>
132-
Get started with Prisma ORM and your <b>existing database</b> by
133-
introspecting your database schema and learn how to query your database.
134-
</p>
135-
<List>
110+
</List>
111+
112+
<br/>
113+
<br/>
114+
115+
{/* ### <Plug color="#16A394" width="24" height="24" /> Using Prisma Postgres with other tools?
116+
117+
You can also use Prisma Postgres with different tools or ORMs. Pick one of the options below to see how to connect.
118+
119+
<List>
136120
<SquareLogo
137-
url="/getting-started/setup-prisma/add-to-existing-project/relational-databases-typescript-postgresql"
138-
image={'/img/technologies/postgresqlsimple.svg'}
139-
tech="Postgres SQL"
121+
url="/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-postgresql"
122+
image={'/img/technologies/kysely.svg'}
123+
tech="Kysely"
140124
/>
141125
<SquareLogo
142-
url="/getting-started/setup-prisma/add-to-existing-project/relational-databases-typescript-mysql"
143-
image={'/img/technologies/mysqlsimple.svg'}
144-
tech="MySQL"
126+
url="/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-mysql"
127+
image={'/img/technologies/drizzle.svg'}
128+
tech="Drizzle"
145129
/>
146130
<SquareLogo
147-
url="/getting-started/setup-prisma/add-to-existing-project/relational-databases-typescript-sqlserver"
148-
image={'/img/technologies/sqlserver.svg'}
149-
tech="SQL Server"
131+
url="/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-sqlserver"
132+
image={'/img/technologies/sequelize.svg'}
133+
tech="Sequelize"
150134
/>
151135
<SquareLogo
152-
url="/getting-started/setup-prisma/add-to-existing-project/relational-databases-typescript-planetscale"
153-
imageDark={'/img/technologies/planetscaledark.svg'}
154-
image={'/img/technologies/planetscale.svg'}
155-
tech="PlanetScale"
136+
url="/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-planetscale"
137+
image={'/img/technologies/typeorm.svg'}
138+
tech="TypeORM"
156139
/>
140+
</List>
141+
142+
<br/>
143+
<br/> */}
144+
145+
### <Plus color="#16A394" width="24" height="24" /> Add Prisma to your favorite framework?
146+
147+
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.
148+
149+
<List>
157150
<SquareLogo
158-
url="/getting-started/setup-prisma/add-to-existing-project/relational-databases-typescript-cockroachdb"
159-
image={'/img/technologies/cockroachdbdark.svg'}
160-
tech="Cockroach DB"
151+
url="/guides/nextjs"
152+
image={'/img/technologies/nextjs.svg'}
153+
tech="Next.js"
161154
/>
162155
<SquareLogo
163-
url="/getting-started/setup-prisma/add-to-existing-project/mongodb-typescript-mongodb"
164-
image={'/img/technologies/mongodbsimple.svg'}
165-
tech="Mongo DB"
156+
url="/guides/astro"
157+
image={'/img/technologies/astro.svg'}
158+
imageDark={'/img/technologies/astrodark.svg'}
159+
tech="Astro.js"
166160
/>
167-
</List>
168-
</TabItem>
169-
</TabbedContent>
170-
171-
## <Bolt color="#16A394" width="21" height="24" /> Prisma Accelerate
172-
173-
Make your database queries faster by scaling your database connections and caching database results at the edge with Prisma Accelerate.
174-
175-
<Grid>
176-
<LinkCard
177-
icon="fa-solid fa-arrow-right"
178-
title="Get started"
179-
desc="Add Accelerate to your app to use global database caching & connection pooling."
180-
link="/accelerate/getting-started"
181-
/>
182-
<LinkCard
183-
icon="fa-brands fa-github"
184-
title="Examples"
185-
desc="Explore our ready-to-run examples using Accelerate."
186-
link="https://github.com/prisma/prisma-examples?tab=readme-ov-file#prisma-accelerate"
187-
/>
188-
</Grid>
189-
<br/>
190-
<LinkCard
191-
highlight
192-
icon="fa-solid fa-bolt"
193-
title="Speed Test"
194-
desc="Run the speed test to see how Prisma Accelerate can make your app faster."
195-
link="https://accelerate-speed-test.prisma.io/"
196-
/>
197-
198-
## <Inspect color="#16A394" width="27" height="24" /> Prisma Optimize
199-
200-
Make your database queries faster by using the insights and recommendations generated by Prisma Optimize.
201-
202-
<Grid>
203-
<LinkCard
204-
icon="fa-solid fa-arrow-right"
205-
title="Get started"
206-
desc="Add Optimize to your app to gather useful insights and receive recommendations to improve query performance."
207-
link="/optimize/getting-started"
208-
/>
209-
<LinkCard
210-
icon="fa-brands fa-github"
211-
title="Examples"
212-
desc="Explore our ready-to-run examples using Prisma Optimize."
213-
link="https://github.com/prisma/prisma-examples?tab=readme-ov-file#prisma-optimize"
214-
/>
215-
</Grid>
161+
<SquareLogo
162+
url="/guides/nuxt"
163+
image={'/img/technologies/nuxtjs.svg'}
164+
tech="Nuxt.js"
165+
/>
166+
<SquareLogo
167+
url="/guides/react-router-7"
168+
image={'/img/technologies/reactrouter.svg'}
169+
tech="React Router 7"
170+
/>
171+
<SquareLogo
172+
url="/guides/tanstack-start"
173+
image={'/img/technologies/tanstack.png'}
174+
tech="TanStack"
175+
/>
176+
<SquareLogo
177+
url="/guides/sveltekit"
178+
image={'/img/technologies/sveltekit.svg'}
179+
tech="SvelteKit"
180+
/>
181+
</List>
182+

‎src/components/GettingStarted/index.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,36 @@ export const SignalStream = ({ color, height, width }: any) => (
6767
</svg>
6868
);
6969

70+
export const Plus = ({ color, height, width }: any) => (
71+
<svg
72+
xmlns="http://www.w3.org/2000/svg"
73+
viewBox="0 0 448 512"
74+
height={height ?? "16"}
75+
width={width ?? "18"}
76+
style={{ marginRight: `4px`, transform: `translateY(2px)` }}
77+
>
78+
<path
79+
fill={color ? color : "currentColor"}
80+
d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM200 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"
81+
/>
82+
</svg>
83+
);
84+
85+
export const Plug = ({ color, height, width }: any) => (
86+
<svg
87+
xmlns="http://www.w3.org/2000/svg"
88+
viewBox="0 0 384 512"
89+
height={height ?? "16"}
90+
width={width ?? "18"}
91+
style={{ marginRight: `4px`, transform: `translateY(2px)` }}
92+
>
93+
<path
94+
fill={color ? color : "currentColor"}
95+
d="M96 0C113.7 0 128 14.3 128 32l0 96-64 0 0-96c0-17.7 14.3-32 32-32zM288 0c17.7 0 32 14.3 32 32l0 96-64 0 0-96c0-17.7 14.3-32 32-32zM32 160l320 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l0 32c0 77.4-55 142-128 156.8l0 67.2c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-67.2C87 398 32 333.4 32 256l0-32c-17.7 0-32-14.3-32-32s14.3-32 32-32z"
96+
/>
97+
</svg>
98+
);
99+
70100
export const PrismaPostgres = ({ color, height, width }: any) => (
71101
<svg
72102
xmlns="http://www.w3.org/2000/svg"
@@ -123,6 +153,23 @@ export const LinkCard = ({ icon, title, desc, link, highlight }: any) => {
123153
);
124154
};
125155

156+
export const QuickstartLinkCard = ({ icon, title, desc, link, highlight, children }: any) => {
157+
const linkCardRef = useRef(null);
158+
return (
159+
<Link
160+
to={link}
161+
ref={linkCardRef}
162+
className={clsx(styles.linkCardWrapper, highlight && styles.linkCardHighlight)}
163+
>
164+
<div className={styles.title}>
165+
{icon && <Icon icon={icon} btn="left" size="18px" />}
166+
<h2>{title}</h2>
167+
</div>
168+
{children ?? <p>{desc}</p>}
169+
</Link>
170+
);
171+
};
172+
126173
export const Tab = ({ children, ...props }) => (
127174
<div {...props} className={styles.tab}>
128175
{children}

0 commit comments

Comments
 (0)