Skip to content

Commit 4b3ed4d

Browse files
aidankmcalisteraidankmcalister
committed
getting started checkpoint
1 parent c3d9976 commit 4b3ed4d

File tree

10 files changed

+335
-48
lines changed

10 files changed

+335
-48
lines changed

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

Lines changed: 77 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import {
1717
Grid,
1818
LinkCard,
1919
List,
20+
Plus,
21+
Plug,
2022
SignalStream,
2123
PrismaPostgres,
2224
SquareLogo,
@@ -61,7 +63,10 @@ The fastest way to set up **Prisma ORM** with a ready-to-use **Prisma Postgres**
6163

6264
</QuickstartLinkCard>
6365

64-
## <PrismaPostgres color="#16A394" width="21" height="24" /> Already have your own database?
66+
<br/>
67+
<br/>
68+
69+
### <PrismaPostgres color="#16A394" width="24" height="24" /> Already have your own database?
6570

6671
The fastest way to set Prisma ORM up with a ready-to-use database.
6772

@@ -99,3 +104,74 @@ The fastest way to set Prisma ORM up with a ready-to-use database.
99104
/>
100105
</List>
101106

107+
<br/>
108+
<br/>
109+
110+
{/* ### <Plug color="#16A394" width="24" height="24" /> Using Prisma Postgres with other tools?
111+
112+
You can also use Prisma Postgres with different tools or ORMs. Pick one of the options below to see how to connect.
113+
114+
<List>
115+
<SquareLogo
116+
url="/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-postgresql"
117+
image={'/img/technologies/kysely.svg'}
118+
tech="Kysely"
119+
/>
120+
<SquareLogo
121+
url="/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-mysql"
122+
image={'/img/technologies/drizzle.svg'}
123+
tech="Drizzle"
124+
/>
125+
<SquareLogo
126+
url="/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-sqlserver"
127+
image={'/img/technologies/sequelize.svg'}
128+
tech="Sequelize"
129+
/>
130+
<SquareLogo
131+
url="/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-planetscale"
132+
image={'/img/technologies/typeorm.svg'}
133+
tech="TypeORM"
134+
/>
135+
</List>
136+
137+
<br/>
138+
<br/> */}
139+
140+
### <Plus color="#16A394" width="24" height="24" /> Add Prisma to your favorite framework?
141+
142+
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.
143+
144+
<List>
145+
<SquareLogo
146+
url="/guides/nextjs"
147+
image={'/img/technologies/nextjs.svg'}
148+
tech="Next.js"
149+
/>
150+
<SquareLogo
151+
url="/guides/astro"
152+
image={'/img/technologies/astro.svg'}
153+
imageDark={'/img/technologies/astrodark.svg'}
154+
tech="Astro.js"
155+
/>
156+
<SquareLogo
157+
url="/guides/nuxt"
158+
image={'/img/technologies/nuxtjs.svg'}
159+
tech="Nuxt.js"
160+
/>
161+
<SquareLogo
162+
url="/guides/react-router-7"
163+
image={'/img/technologies/reactrouter.svg'}
164+
tech="React Router 7"
165+
/>
166+
<SquareLogo
167+
url="/guides/tanstack-start"
168+
image={'/img/technologies/tanstack.png'}
169+
tech="TanStack"
170+
/>
171+
<SquareLogo
172+
url="/guides/sveltekit"
173+
image={'/img/technologies/sveltekit.svg'}
174+
tech="SvelteKit"
175+
/>
176+
</List>
177+

‎src/components/GettingStarted/index.tsx‎

Lines changed: 31 additions & 1 deletion
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"
@@ -106,7 +136,7 @@ export const Grid = ({ children, ...props }) => (
106136
</div>
107137
);
108138

109-
export const LinkCard = ({ icon, title, desc, link, highlight, }: any) => {
139+
export const LinkCard = ({ icon, title, desc, link, highlight }: any) => {
110140
const linkCardRef = useRef(null);
111141
return (
112142
<Link

‎src/css/gettingStarted.module.scss‎

Lines changed: 138 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,14 @@
1616
}
1717
.borderBox {
1818
padding: 24px 24px 32px 24px;
19+
margin-top: 16px;
20+
display: flex;
21+
flex-direction: column;
22+
justify-content: space-between;
1923
border-radius: 8px;
20-
background: var(--main-bgd-color);
24+
border: 1px solid var(--border-color);
25+
background: var(--surface-brand-grey-strong);
26+
width: 100%;
2127
a {
2228
text-decoration: underline;
2329
}
@@ -26,14 +32,32 @@
2632
text-align: left;
2733
letter-spacing: 0em;
2834
line-height: 20px;
29-
font-size: 14px;
35+
font-size: 16px;
36+
margin: 0;
3037
:first-child {
3138
margin-top: 0;
3239
}
3340
:last-child {
3441
margin-bottom: 0;
3542
}
3643
}
44+
> p {
45+
margin-bottom: 16px;
46+
&:last-child {
47+
margin-bottom: 0;
48+
}
49+
}
50+
pre[class*="language-"] {
51+
background: #121521 !important;
52+
border: 0.7px solid #2d3748;
53+
code span {
54+
font-size: 16px;
55+
color: #e2e8f0 !important;
56+
&::before {
57+
color: #4a5568;
58+
}
59+
}
60+
}
3761
}
3862

3963
.boxTitle {
@@ -45,30 +69,30 @@
4569
letter-spacing: -0.8px;
4670
}
4771

48-
.grid {
49-
gap: 16px;
50-
display: grid;
51-
margin-top: 24px;
52-
grid-template-columns: none;
53-
@media (min-width: 600px) {
54-
grid-template-columns: 1fr 1fr;
55-
}
56-
a {
57-
border-color: var(--ifm-btn-border-color);
58-
background: transparent;
59-
color: var(--main-font-color);
60-
&:hover {
61-
border-color: var(--ifm-btn-border-color-active);
62-
background: transparent;
63-
}
64-
}
65-
}
72+
// .grid {
73+
// gap: 16px;
74+
// display: grid;
75+
// margin-top: 24px;
76+
// grid-template-columns: none;
77+
// @media (min-width: 600px) {
78+
// grid-template-columns: 1fr 1fr;
79+
// }
80+
// a {
81+
// border-color: var(--ifm-btn-border-color);
82+
// background: transparent;
83+
// color: var(--main-font-color);
84+
// &:hover {
85+
// border-color: var(--ifm-btn-border-color-active);
86+
// background: transparent;
87+
// }
88+
// }
89+
// }
6690

67-
.separator {
68-
height: 100%;
69-
width: 1px;
70-
border-left: 1px solid var(--ifm-btn-border-color);
71-
}
91+
// .separator {
92+
// height: 100%;
93+
// width: 1px;
94+
// border-left: 1px solid var(--ifm-btn-border-color);
95+
// }
7296

7397
.linkCardWrapper {
7498
border: 1px solid var(--border-color);
@@ -86,15 +110,20 @@
86110
color: inherit;
87111
}
88112
&.linkCardHighlight {
89-
background: rgba(22, 163, 148, 0.12);
90-
border-color: rgb(22, 163, 148);
91-
&:hover {
92-
// background: #B7F4EE;
93-
border-color: #154f47;
94-
}
113+
border-radius: 8px;
114+
border: 1px solid var(--surface-brand-default);
115+
background: var(--surface-brand-light);
116+
// &:hover {
117+
// background: #b7f4ee;
118+
// border-color: #154f47;
119+
// }
95120
}
96121
.title {
97122
display: inline-flex;
123+
h2 {
124+
font-family: Barlow;
125+
border-bottom: 1px solid var(--main-font-color);
126+
}
98127
h6 {
99128
font-size: 18px;
100129
display: inline-block;
@@ -117,21 +146,21 @@
117146
}
118147
}
119148

120-
.tab {
121-
padding: 15px;
122-
background-color: var(--main-bgd-color);
123-
border: 1px solid var(--indigo-600);
124-
border-radius: 0px 8px 8px 8px;
125-
font-family: Inter;
126-
font-size: 14px;
127-
font-weight: 400;
128-
line-height: 20px;
129-
letter-spacing: 0em;
130-
text-align: left;
131-
p {
132-
margin-top: 0;
133-
}
134-
}
149+
// .tab {
150+
// padding: 15px;
151+
// background-color: var(--main-bgd-color);
152+
// border: 1px solid var(--indigo-600);
153+
// border-radius: 0px 8px 8px 8px;
154+
// font-family: Inter;
155+
// font-size: 14px;
156+
// font-weight: 400;
157+
// line-height: 20px;
158+
// letter-spacing: 0em;
159+
// text-align: left;
160+
// p {
161+
// margin-top: 0;
162+
// }
163+
// }
135164

136165
.squareWrapper {
137166
width: 90px;
@@ -218,3 +247,66 @@
218247
flex-wrap: wrap;
219248
}
220249
}
250+
251+
// .list {
252+
// display: grid;
253+
// // Gap with no trailing margin
254+
// > * + * {
255+
// margin-left: 16px;
256+
// }
257+
// max-width: fit-content;
258+
// grid-template-columns: repeat(2, auto);
259+
// // &:has(.borderBox) {
260+
// // display: grid;
261+
// // gap: 16px;
262+
// // border: 2px solid blue;
263+
// // }
264+
// &:not(.framedList) {
265+
// @media (min-width: 1400px) {
266+
// grid-template-columns: repeat(7, auto);
267+
// }
268+
// @media (min-width: 997px) and (max-width: 1400px) {
269+
// grid-template-columns: repeat(4, auto);
270+
// }
271+
// @media (min-width: 816px) and (max-width: 997px) {
272+
// grid-template-columns: repeat(7, auto);
273+
// }
274+
// @media (min-width: 500px) and (max-width: 816px) {
275+
// grid-template-columns: repeat(4, auto);
276+
// }
277+
// @media (min-width: 410px) and (max-width: 500px) {
278+
// grid-template-columns: repeat(3, auto);
279+
// }
280+
// }
281+
// // &.framedList {
282+
// // background: var(--main-bgd-color);
283+
// // border: 1px solid var(--ifm-btn-border-color);
284+
// // border-radius: 8px;
285+
// // padding: 24px 16px 16px 16px;
286+
// // justify-content: center;
287+
// // @media (min-width: 1240px) {
288+
// // grid-template-columns: repeat(6, auto);
289+
// // }
290+
// // @media (min-width: 1025px) and (max-width: 1240px) {
291+
// // grid-template-columns: repeat(3, auto);
292+
// // }
293+
// // @media (min-width: 768px) and (max-width: 1025px) {
294+
// // grid-template-columns: repeat(4, auto);
295+
// // }
296+
// // @media (min-width: 480px) and (max-width: 768px) {
297+
// // grid-template-columns: repeat(4, auto);
298+
// // }
299+
// // @media (min-width: 410px) and (max-width: 479px) {
300+
// // grid-template-columns: repeat(3, auto);
301+
// // }
302+
// // .squareWrapper {
303+
// // background: var(--surface-primary);
304+
// // }
305+
// // }
306+
// // &.splitList {
307+
// // width: fit-content;
308+
// // display: flex;
309+
// // justify-content: flex-start;
310+
// // flex-wrap: wrap;
311+
// // }
312+
// }

‎static/img/technologies/astro.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎static/img/technologies/astrodark.svg‎

Lines changed: 11 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)