From 8dc4e8872bda0c79029fc0fc96262c38d470dd21 Mon Sep 17 00:00:00 2001 From: Prisma Date: Mon, 4 Mar 2024 16:44:43 +0000 Subject: [PATCH 1/2] Split homepage into different component sections and delete config file --- config.ts | 180 ------- src/components/HomepageFeatures/Community.tsx | 171 ++++++ src/components/HomepageFeatures/Databases.tsx | 178 +++++++ src/components/HomepageFeatures/ORMCards.tsx | 161 ++++++ src/components/HomepageFeatures/PrismaORM.tsx | 145 +++++ .../HomepageFeatures/ProductCards.tsx | 166 ++++++ src/components/HomepageFeatures/index.tsx | 70 --- .../HomepageFeatures/styles.module.css | 11 - src/pages/index.tsx | 503 +----------------- 9 files changed, 834 insertions(+), 751 deletions(-) delete mode 100644 config.ts create mode 100644 src/components/HomepageFeatures/Community.tsx create mode 100644 src/components/HomepageFeatures/Databases.tsx create mode 100644 src/components/HomepageFeatures/ORMCards.tsx create mode 100644 src/components/HomepageFeatures/PrismaORM.tsx create mode 100644 src/components/HomepageFeatures/ProductCards.tsx delete mode 100644 src/components/HomepageFeatures/index.tsx delete mode 100644 src/components/HomepageFeatures/styles.module.css diff --git a/config.ts b/config.ts deleted file mode 100644 index 39b0a30e2a..0000000000 --- a/config.ts +++ /dev/null @@ -1,180 +0,0 @@ -const siteConfigData = { - homepage: { - SummaryLinkData: { - gettingStarted: 'getting-started', - readyToRun: 'https://github.com/prisma/prisma-examples', - slack: 'https://slack.prisma.io/', - discord: 'https://pris.ly/discord', - git: 'https://github.com/prisma', - buttons: [ - { - text: 'Getting started', - url: 'getting-started', - special: true, - icon: 'DoubleArrow', - }, - { - text: 'Example projects', - url: 'https://github.com/prisma/prisma-examples', - special: false, - icon: null, - }, - ], - }, - ORMPlatformLinkData: { - porm: { - title: 'Build with Prisma ORM', - icon: 'database', - description: - 'Open source Node.js and TypeScript ORM with an intuitive data model, automated migrations, type-safety, and auto-completion.', - links: [ - { - url: 'getting-started', - title: 'Getting started', - }, - { - url: 'https://github.com/prisma/prisma-examples', - title: 'Example projects', - external: true, - }, - ], - }, - pdp: { - title: 'Grow as your app evolves', - icon: 'triangle', - description: - 'Expand your application capabilities with global database caching, connection pooling and real-time database events.', - links: [ - { - url: 'accelerate', - title: 'Prisma Accelerate', - }, - { - url: 'pulse', - title: 'Prisma Pulse', - }, - ], - }, - }, - GeneralLinkData: [ - { - title: `What is Prisma ORM`, - description: 'An overview of what Prisma ORM is and how it works.', - url: 'orm/overview/introduction/what-is-prisma', - icon: 'fa-regular fa-question', - }, - { - title: `CRUD`, - description: 'How to perform CRUD operations with your generated Prisma Client API. ', - url: 'orm/prisma-client/queries/crud', - icon: 'fa-solid fa-arrow-right-arrow-left', - }, - { - title: `Prisma ORM in your stack`, - description: - 'Use Prisma ORM to build a GraphQL or REST API, or as part of a fullstack application.', - url: 'orm/overview/prisma-in-your-stack', - icon: 'fa-solid fa-server', - }, - { - title: `Preview features`, - description: 'Available preview features and how to enable them.', - url: 'orm/reference/preview-features', - icon: 'fa-solid fa-eye', - }, - { - title: `Adopting Prisma ORM`, - description: 'Migrate to Prisma ORM from other ORMs.', - url: 'orm/more/migrating-to-prisma', - icon: 'fa-solid fa-download', - }, - { - title: `Deployment guides`, - description: - 'Deploy Node.js applications with Prisma Client to platforms like Vercel, AWS Lambda, Netlify and Heroku.', - url: 'orm/prisma-client/deployment', - icon: 'fa-solid fa-book', - }, - ], - CommunityLinksData: [ - // { - // id: 'slack', - // title: 'Slack', - // description: 'Engage with a vibrant community of developers and companies adopting Prisma', - // icon: 'fa-brands fa-slack', - // link: 'https://slack.prisma.io/', - // linkText: 'Join our channel', - // }, - { - id: 'discord', - title: 'Discord', - description: - 'Chat in real-time, hang out, and share ideas with community members and our team.', - icon: 'fa-brands fa-discord', - link: 'https://pris.ly/discord', - linkText: 'Join our server', - }, - { - id: 'github', - title: 'GitHub', - description: - 'Browse the Prisma ORM source code, send feedback, or join the discussion on GitHub.', - icon: 'fa-brands fa-github', - link: 'https://github.com/prisma', - linkText: 'Contribute in GitHub', - }, - { - id: 'X', - title: 'X', - description: 'Stay up-to-date, join the discussion, and connect with the community on X.', - icon: 'fa-brands fa-x-twitter', - link: 'https://twitter.com/prisma', - linkText: 'Follow us on X', - }, - ], - CardLinks: { - components: [ - { - url: 'orm/prisma-schema', - title: 'Prisma Schema', - }, - { - url: 'orm/tools/prisma-cli', - title: 'Prisma CLI', - }, - { - url: 'orm/prisma-client', - title: 'Prisma Client', - }, - { - url: 'orm/tools/prisma-studio', - title: 'Prisma Studio', - }, - { - url: 'orm/prisma-migrate', - title: 'Prisma Migrate', - }, - ], - reference: [ - { - url: 'orm/reference/prisma-client-reference', - title: 'Prisma Client API reference', - }, - { - url: 'orm/reference/prisma-schema-reference', - title: 'Prisma schema reference', - }, - { - url: 'orm/reference/error-reference', - title: 'Error message reference', - }, - { - url: 'orm/reference/prisma-cli-reference', - title: 'Prisma CLI reference', - }, - ], - }, - } -} - -export default siteConfigData diff --git a/src/components/HomepageFeatures/Community.tsx b/src/components/HomepageFeatures/Community.tsx new file mode 100644 index 0000000000..421fa71687 --- /dev/null +++ b/src/components/HomepageFeatures/Community.tsx @@ -0,0 +1,171 @@ +import styled from "styled-components" +import ShadowCard from "../shadow-card" +import { Icon } from "../Icon" +import * as theme from "../../css/primitives" + +const CommunityLinksData = [ + { + id: 'discord', + title: 'Discord', + description: + 'Chat in real-time, hang out, and share ideas with community members and our team.', + icon: 'fa-brands fa-discord', + link: 'https://pris.ly/discord', + linkText: 'Join our server', + }, + { + id: 'github', + title: 'GitHub', + description: + 'Browse the Prisma ORM source code, send feedback, or join the discussion on GitHub.', + icon: 'fa-brands fa-github', + link: 'https://github.com/prisma', + linkText: 'Contribute in GitHub', + }, + { + id: 'X', + title: 'X', + description: 'Stay up-to-date, join the discussion, and connect with the community on X.', + icon: 'fa-brands fa-x-twitter', + link: 'https://twitter.com/prisma', + linkText: 'Follow us on X', + }, +] + +const Body = styled.div` +font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Segoe UI Symbol', 'Noto Color Emoji'; +font-weight: normal; +font-size: 18px; +letter-spacing: 0em; +line-height: 140%; +` + +const H3 = styled.h3` +font-family: 'Barlow', sans-serif; +font-weight: bold; +font-size: 28px; +letter-spacing: -0.02em; +line-height: 110%; +@media (min-width: 940px) { + font-size: 36px; +} +` +const CommunitySection = styled.div` + background: var(--community-bgd-color); + > div { + padding: 80px 16px; + margin: 0 auto; + max-width: 1272px; + text-align: left; + a { + text-decoration: none; + } + .section-hero { + ${H3} { + margin-top: 0; + margin-bottom: 24px; + color: var(--primary-font-color); + } + p { + color: var(--secondary-font-color); + margin-bottom: 60px; + margin-top: 0; + } + } + + .community-link-wrapper { + display: grid; + gap: 16px; + text-align: left; + grid-template-columns: 24px 1fr; + height: 100%; + text-decoration: none; + > div { + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 16px; + } + h4 { + margin-bottom: 6px; + margin-top: 0; + line-height: 110%; + font-size: 24px; + font-weight: 700; + font-family: 'Barlow'; + color: var(--primary-font-color); + } + ${Body} { + color: var(--secondary-font-color); + margin: 0; + } + .link { + color: var(--indigo-link-color); + font-family: 'Inter'; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: 88%; /* 15.84px */ + } + } + } +` + +const CommunityLinksRow = styled.div` + display: grid; + gap: 24px; + grid-template-rows: repeat(3, minmax(0, 1fr)); + @media only screen and (min-width: 768px) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-rows: none; + } + @media only screen and (min-width: 940px) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-rows: none; + } + i { + margin-top: 4px; + } +` + +export default function ORMCards(): JSX.Element { + return ( + +
+
+

Join our Community

+

+ We have multiple channels where you can get help from members of our community as well + as the Prisma team. +

+
+ + {CommunityLinksData.map((comm: any) => ( + + + +
+
+

{comm.title}

+ {comm.description} +
+
+ {comm.linkText} + ↗ +
+
+ + + ))} + +
+ + ) +} \ No newline at end of file diff --git a/src/components/HomepageFeatures/Databases.tsx b/src/components/HomepageFeatures/Databases.tsx new file mode 100644 index 0000000000..23cd0c1158 --- /dev/null +++ b/src/components/HomepageFeatures/Databases.tsx @@ -0,0 +1,178 @@ +import styled from "styled-components" +import Link from "@docusaurus/Link"; + +const DatabaseData = [ + { + title: 'PostgreSQL', + icon: "postgresqlsimple", + darkIcon: "postgresqldark", + url: 'orm/overview/databases/postgresql', + }, + { + title: 'MySQL', + icon: "mysqlsimple", + darkIcon: "mysqlsimple", + url: 'orm/overview/databases/mysql', + }, + { + title: 'SQL Server', + icon: "sqlserver", + darkIcon: "sqlserver", + url: 'orm/overview/databases/sql-server', + }, + { + title: 'SQLite', + icon: "sqlite", + darkIcon: "sqlite", + url: 'orm/overview/databases/sqlite', + }, + { + title: 'MongoDB', + icon: "mongodbsimple", + darkIcon: "mongodbsimple", + url: 'orm/overview/databases/mongodb', + }, + { + title: 'CockroachDB', + icon: "cockroachdb", + darkIcon: "cockroachdbdark", + url: 'orm/overview/databases/cockroachdb', + }, + { + title: 'Planetscale', + icon: "planetscale", + darkIcon: "planetscaledark", + url: 'orm/overview/databases/planetscale', + }, + { + title: 'MariaDB', + icon: "mariadb", + darkIcon: "mariadbdark", + url: 'orm/overview/databases/mysql', + }, +] + +const H4 = styled.h4` + font-family: 'Barlow'; + margin: 0; + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: 110%; /* 26.4px */ + letter-spacing: -0.48px; +` + +const Body = styled.div` +font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Segoe UI Symbol', 'Noto Color Emoji'; +font-weight: normal; +font-size: 18px; +letter-spacing: 0em; +line-height: 140%; +` + +const DatabasesSection = styled.div` + max-width: 1272px; + margin: 0 auto; + padding: 40px 16px; + @media (min-width: 768px) { + padding: 24px 16px 108px; + } + ${H4} { + margin-bottom: 24px; + } + ${Body} { + color: var(--secondary-font-color); + margin-bottom: 40px; + } +` +const DatabaseGrid = styled.div` + display: flex; + flex-direction: column; + flex-wrap: wrap; + gap: 24px; + @media only screen and (min-width: 1024px) { + display: grid; + column-gap: 44px; + grid-template-columns: repeat(4, 1fr); + } + @media (min-width: 940px) and (max-width: 1024px) { + display: grid; + column-gap: 44px; + grid-template-columns: repeat(3, 1fr); + } + a { + text-decoration: none; + color: unset; + } + .entry { + height: 84px; + display: flex; + align-items: center; + justify-content: start; + gap: 16px; + flex-basis: 21%; + border-radius: 8px; + padding: 25px 24px; + background-color: var(--orm-card-bg); + position: relative; + cursor: pointer; + &::after { + content: ''; + position: absolute; + border-radius: 8px; + inset: 0; + border: 1px solid var(--grid-border-color); + background-color: transparent; + cursor: pointer; + } + + &:hover { + background-color: var(--main-bgd-color); + &::after { + border: 2px solid #5a67d8; + } + } + @media only screen and (min-width: 940px) { + padding: 0 24px; + } + img { + max-height: 36px; + } + span { + color: var(--main-font-color); + text-transform: capitalize; + font-family: 'Inter'; + font-weight: 600; + font-size: 24px; + line-height: 1; + } + } +` +export default function ORMCards(): JSX.Element { + return ( + +

Databases

+ + Prisma ORM works seamlessly across most popular databases and service providers.
Refer + to our Database features matrix for information about supported features and types for + each database. + + + {DatabaseData.map((e: any) => ( + +
+ + {e.title} +
+ + ))} + + + ) +} \ No newline at end of file diff --git a/src/components/HomepageFeatures/ORMCards.tsx b/src/components/HomepageFeatures/ORMCards.tsx new file mode 100644 index 0000000000..1a836b8596 --- /dev/null +++ b/src/components/HomepageFeatures/ORMCards.tsx @@ -0,0 +1,161 @@ +import styled from "styled-components" +import { ProductCard } from "./ProductCards" +import Link from "@docusaurus/Link" + +const CardLinks = { + components: [ + { + url: 'orm/prisma-schema', + title: 'Prisma Schema', + }, + { + url: 'orm/tools/prisma-cli', + title: 'Prisma CLI', + }, + { + url: 'orm/prisma-client', + title: 'Prisma Client', + }, + { + url: 'orm/tools/prisma-studio', + title: 'Prisma Studio', + }, + { + url: 'orm/prisma-migrate', + title: 'Prisma Migrate', + }, + ], + reference: [ + { + url: 'orm/reference/prisma-client-reference', + title: 'Prisma Client API reference', + }, + { + url: 'orm/reference/prisma-schema-reference', + title: 'Prisma schema reference', + }, + { + url: 'orm/reference/error-reference', + title: 'Error message reference', + }, + { + url: 'orm/reference/prisma-cli-reference', + title: 'Prisma CLI reference', + }, + ], +} + +const H4 = styled.h4` + font-family: 'Barlow'; + margin: 0; + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: 110%; /* 26.4px */ + letter-spacing: -0.48px; +` + +const LinkGrid = styled.div` + display: flex; + max-width: 338px; + gap: 16px; + width: 100%; + flex-wrap: wrap; + justify-content: space-between; + a, + button { + min-width: calc(50% - 8px); + white-space: nowrap; + font-family: 'Inter'; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 100%; /* 16px */ + letter-spacing: -0.32px; + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + svg { + display: none; + } +` + +const ORMCardsSection = styled.div` + max-width: 1262px; + margin: 0 auto; + padding: 40px 11px; +` + +const ORMCardsWrapper = styled.div` + gap: 40px; + display: flex; + flex-direction: column; + @media (min-width: 768px) { + flex-direction: row; + } +` + +const ORMProductCard = styled(ProductCard)` + padding: 40px; + background: var(--orm-card-bg); + grid-template-rows: auto auto 1fr; + ${H4} { + margin-bottom: 8px; + } + > p { + color: var(--secondary-font-color); + margin: 0 0 24px 0; + font-family: 'Inter'; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 140%; /* 22.4px */ + } + ${LinkGrid} { + gap: 12px; + a { + min-width: calc(50% - 8px); + width: fit-content; + white-space: nowrap; + } + } +` +export default function ORMCards(): JSX.Element { + return ( + + + +

Components

+

+ Open source Node.js and TypeScript ORM with an intuitive data model, automated + migrations, type-safety, and auto-completion. +

+
+ + {CardLinks.components.map((card: any) => ( + {card.title} → + ))} + +
+ + + +

Reference

+

+ Open source Node.js and TypeScript ORM with an intuitive data model, automated + migrations, type-safety, and auto-completion. +

+
+ + {CardLinks.reference.map((card: any) => ( + {card.title} → + ))} + +
+ + + + ) +} \ No newline at end of file diff --git a/src/components/HomepageFeatures/PrismaORM.tsx b/src/components/HomepageFeatures/PrismaORM.tsx new file mode 100644 index 0000000000..44822d9e28 --- /dev/null +++ b/src/components/HomepageFeatures/PrismaORM.tsx @@ -0,0 +1,145 @@ +import Link from "@docusaurus/Link" +import styled from "styled-components" +import { Icon } from "../Icon" + +const GeneralLinkData = [ + { + title: `What is Prisma ORM`, + description: 'An overview of what Prisma ORM is and how it works.', + url: 'orm/overview/introduction/what-is-prisma', + icon: 'fa-regular fa-question', + }, + { + title: `CRUD`, + description: 'How to perform CRUD operations with your generated Prisma Client API. ', + url: 'orm/prisma-client/queries/crud', + icon: 'fa-solid fa-arrow-right-arrow-left', + }, + { + title: `Prisma ORM in your stack`, + description: + 'Use Prisma ORM to build a GraphQL or REST API, or as part of a fullstack application.', + url: 'orm/overview/prisma-in-your-stack', + icon: 'fa-solid fa-server', + }, + { + title: `Preview features`, + description: 'Available preview features and how to enable them.', + url: 'orm/reference/preview-features', + icon: 'fa-solid fa-eye', + }, + { + title: `Adopting Prisma ORM`, + description: 'Migrate to Prisma ORM from other ORMs.', + url: 'orm/more/migrating-to-prisma', + icon: 'fa-solid fa-download', + }, + { + title: `Deployment guides`, + description: + 'Deploy Node.js applications with Prisma Client to platforms like Vercel, AWS Lambda, Netlify and Heroku.', + url: 'orm/prisma-client/deployment', + icon: 'fa-solid fa-book', + }, +] + +const IconWrapper = styled.div` +width: 64px; +height: 64px; +flex-shrink: 0; +border-radius: 8px; +display: inline-flex; +align-items: center; +justify-content: center; +color: var(--icon-svg-color); +` + +const H4 = styled.h4` + font-family: 'Barlow'; + margin: 0; + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: 110%; /* 26.4px */ + letter-spacing: -0.48px; +` +const PrismaORMSectionWrapper = styled.div` + max-width: 1272px; + margin: 0 auto; + padding: 60px 16px 24px; + h4 { + color: var(--main-font-color); + margin-bottom: 40px; + } +` +const ORMLinkContainer = styled.div` + display: grid; + gap: 40px; + grid-template-columns: 100%; + @media (min-width: 768px) { + grid-template-columns: 1fr 1fr; + } +` + +const ORMLinkWrapper = styled(Link)` + display: flex !important; + gap: 24px; + text-decoration: none; + + h5 { + display: inline-block; + color: var(--main-font-color); + font-size: 18px; + font-style: normal; + font-weight: 700; + line-height: 100%; /* 18px */ + margin: 0 0 10px 0; + letter-spacing: -0.36px; + font-family: 'Barlow'; + > span { + font-family: 'Inter'; + } + } + > div:last-of-type { + display: inline-block; + } + ${IconWrapper} { + background: var(--icon-wrapper-bg); + } + p { + color: var(--secondary-font-color); + text-overflow: ellipsis; + font-family: 'Inter'; + margin: 0; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 140%; /* 22.4px */ + } + &:hover h5 { + text-decoration: underline; + } +` + +export default function PrismaORM(): JSX.Element { + return ( + +

Prisma ORM

+ + {GeneralLinkData.map((generalLink: any, index: number) => ( + + + + +
+
+ {generalLink.title} → +
+

{generalLink.description}

+
+ + ))} + + + ) +} \ No newline at end of file diff --git a/src/components/HomepageFeatures/ProductCards.tsx b/src/components/HomepageFeatures/ProductCards.tsx new file mode 100644 index 0000000000..0f60be6259 --- /dev/null +++ b/src/components/HomepageFeatures/ProductCards.tsx @@ -0,0 +1,166 @@ +import Link from "@docusaurus/Link"; +import styled from "styled-components"; +import { Icon } from "../Icon"; + +const ORMPlatformLinkData = { + porm: { + title: 'Build with Prisma ORM', + icon: 'database', + description: + 'Open source Node.js and TypeScript ORM with an intuitive data model, automated migrations, type-safety, and auto-completion.', + links: [ + { + url: 'getting-started', + title: 'Getting started', + }, + { + url: 'https://github.com/prisma/prisma-examples', + title: 'Example projects', + external: true, + }, + ], + }, + pdp: { + title: 'Grow as your app evolves', + icon: 'triangle', + description: + 'Expand your application capabilities with global database caching, connection pooling and real-time database events.', + links: [ + { + url: 'accelerate', + title: 'Prisma Accelerate', + }, + { + url: 'pulse', + title: 'Prisma Pulse', + }, + ], + }, +} + +const LinkGrid = styled.div` + display: flex; + max-width: 338px; + gap: 16px; + width: 100%; + flex-wrap: wrap; + justify-content: space-between; + a, + button { + min-width: calc(50% - 8px); + white-space: nowrap; + font-family: 'Inter'; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 100%; /* 16px */ + letter-spacing: -0.32px; + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + svg { + display: none; + } +` +const IconWrapper = styled.div` +width: 64px; +height: 64px; +flex-shrink: 0; +border-radius: 8px; +display: inline-flex; +align-items: center; +justify-content: center; +color: var(--icon-svg-color); +` +const Body = styled.div` +font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Segoe UI Symbol', 'Noto Color Emoji'; +font-weight: normal; +font-size: 18px; +letter-spacing: 0em; +line-height: 140%; +` +const H3 = styled.h3` +font-family: 'Barlow', sans-serif; +font-weight: bold; +font-size: 28px; +letter-spacing: -0.02em; +line-height: 110%; +@media (min-width: 940px) { + font-size: 36px; +} +` +const ProductCardsWrapper = styled.div` + max-width: 1240px; + width: 100%; + gap: 40px; + margin: 0 auto; + display: flex; + flex-wrap: wrap; +` +export const ProductCard = styled.div<{ color?: string }>` + display: grid; + grid-template-rows: auto 1fr auto; + padding: 32px; + width: 100%; + border-radius: 8px; + background: var(--${(p) => + p.color === 'teal' + ? 'teal' + : 'indigo'}-card-bg); + box-shadow: 0px 18px 42px 0px rgba(23, 43, 77, 0.08), 0px 4px 26px 0px rgba(23, 43, 77, 0.05), + 0px 0px 46px 0px rgba(23, 43, 77, 0.01); + a, + button { + color: var(--${(props) => (props.color === 'teal' ? 'teal' : 'indigo')}-link-color); + } + @media (min-width: 768px) { + width: calc(50% - 20px); + } + ${H3} { + display: flex; + align-items: center; + gap: 16px; + margin: 0 0 24px 0; + } + ${Body} { + margin-bottom: 16px; + } + ${IconWrapper} { + background: ${(props) => (props.color === 'teal' ? '#16A394' : '#5A67D8')}; + } +` + +export default function ProductCards(): JSX.Element { + return ( + + {Object.keys(ORMPlatformLinkData).map((e: string) => ( + +

+ + + + {ORMPlatformLinkData[e].title} +

+ {ORMPlatformLinkData[e].description} + + {ORMPlatformLinkData[e].links.map((e: any) => ( + + {e.title} {e.external ? <>↗ : <>→} + + ))} + + + ))} + + ); + } + + diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx deleted file mode 100644 index 50a9e6f4c7..0000000000 --- a/src/components/HomepageFeatures/index.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import clsx from 'clsx'; -import Heading from '@theme/Heading'; -import styles from './styles.module.css'; - -type FeatureItem = { - title: string; - Svg: React.ComponentType>; - description: JSX.Element; -}; - -const FeatureList: FeatureItem[] = [ - { - title: 'Easy to Use', - Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, - description: ( - <> - Docusaurus was designed from the ground up to be easily installed and - used to get your website up and running quickly. - - ), - }, - { - title: 'Focus on What Matters', - Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, - description: ( - <> - Docusaurus lets you focus on your docs, and we'll do the chores. Go - ahead and move your docs into the docs directory. - - ), - }, - { - title: 'Powered by React', - Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, - description: ( - <> - Extend or customize your website layout by reusing React. Docusaurus can - be extended while reusing the same header and footer. - - ), - }, -]; - -function Feature({title, Svg, description}: FeatureItem) { - return ( -
-
- -
-
- {title} -

{description}

-
-
- ); -} - -export default function HomepageFeatures(): JSX.Element { - return ( -
-
-
- {FeatureList.map((props, idx) => ( - - ))} -
-
-
- ); -} diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css deleted file mode 100644 index b248eb2e5d..0000000000 --- a/src/components/HomepageFeatures/styles.module.css +++ /dev/null @@ -1,11 +0,0 @@ -.features { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; -} - -.featureSvg { - height: 200px; - width: 200px; -} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 2c054f26b7..c76d1af4b6 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,14 +1,14 @@ -import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Layout from '@theme/Layout'; import styled from 'styled-components'; -import * as theme from "../css/primitives" -import siteConfigData from "../../config" -import { Icon } from '../components/Icon'; -import ShadowCard from '../components/shadow-card'; +import ProductCards from '../components/HomepageFeatures/ProductCards'; +import PrismaORM from '../components/HomepageFeatures/PrismaORM'; +import ORMCards from '../components/HomepageFeatures/ORMCards'; +import Databases from '../components/HomepageFeatures/Databases'; +import Community from '../components/HomepageFeatures/Community'; -const IconWrapper = styled.div` +export const IconWrapper = styled.div` width: 64px; height: 64px; flex-shrink: 0; @@ -19,7 +19,7 @@ justify-content: center; color: var(--icon-svg-color); ` -const H4 = styled.h4` +export const H4 = styled.h4` font-family: 'Barlow'; margin: 0; font-size: 24px; @@ -58,49 +58,8 @@ const TopSection = styled.div` gap: 40px; background: var(--homepage-header-bg); ` -const ProductCardsWrapper = styled.div` - max-width: 1240px; - width: 100%; - gap: 40px; - margin: 0 auto; - display: flex; - flex-wrap: wrap; -` -const ProductCard = styled.div<{ color?: string }>` - display: grid; - grid-template-rows: auto 1fr auto; - padding: 32px; - width: 100%; - border-radius: 8px; - background: var(--${(p) => - p.color === 'teal' - ? 'teal' - : 'indigo'}-card-bg); - box-shadow: 0px 18px 42px 0px rgba(23, 43, 77, 0.08), 0px 4px 26px 0px rgba(23, 43, 77, 0.05), - 0px 0px 46px 0px rgba(23, 43, 77, 0.01); - a, - button { - color: var(--${(props) => (props.color === 'teal' ? 'teal' : 'indigo')}-link-color); - } - @media (min-width: 768px) { - width: calc(50% - 20px); - } - ${H3} { - display: flex; - align-items: center; - gap: 16px; - margin: 0 0 24px 0; - } - ${Body} { - margin-bottom: 16px; - } - ${IconWrapper} { - background: ${(props) => (props.color === 'teal' ? '#16A394' : '#5A67D8')}; - } -` - -const LinkGrid = styled.div` +export const LinkGrid = styled.div` display: flex; max-width: 338px; gap: 16px; @@ -127,457 +86,21 @@ const LinkGrid = styled.div` } ` -const PrismaORMSection = styled.div` - max-width: 1272px; - margin: 0 auto; - padding: 60px 16px 24px; - h4 { - color: var(--main-font-color); - margin-bottom: 40px; - } -` -const ORMLinkContainer = styled.div` - display: grid; - gap: 40px; - grid-template-columns: 100%; - @media (min-width: 768px) { - grid-template-columns: 1fr 1fr; - } -` - -const ORMLinkWrapper = styled(Link)` - display: flex !important; - gap: 24px; - text-decoration: none; - - h5 { - display: inline-block; - color: var(--main-font-color); - font-size: 18px; - font-style: normal; - font-weight: 700; - line-height: 100%; /* 18px */ - margin: 0 0 10px 0; - letter-spacing: -0.36px; - font-family: 'Barlow'; - > span { - font-family: 'Inter'; - } - } - > div:last-of-type { - display: inline-block; - } - ${IconWrapper} { - background: var(--icon-wrapper-bg); - } - p { - color: var(--secondary-font-color); - text-overflow: ellipsis; - font-family: 'Inter'; - margin: 0; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 140%; /* 22.4px */ - } - &:hover h5 { - text-decoration: underline; - } -` - -const ORMCardsSection = styled.div` - max-width: 1262px; - margin: 0 auto; - padding: 40px 11px; -` - -const ORMCardsWrapper = styled.div` - gap: 40px; - display: flex; - flex-direction: column; - @media (min-width: 768px) { - flex-direction: row; - } -` - -const ORMProductCard = styled(ProductCard)` - padding: 40px; - background: var(--orm-card-bg); - grid-template-rows: auto auto 1fr; - ${H4} { - margin-bottom: 8px; - } - > p { - color: var(--secondary-font-color); - margin: 0 0 24px 0; - font-family: 'Inter'; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 140%; /* 22.4px */ - } - ${LinkGrid} { - gap: 12px; - a { - min-width: calc(50% - 8px); - width: fit-content; - white-space: nowrap; - } - } -` -const DatabasesSection = styled.div` - max-width: 1272px; - margin: 0 auto; - padding: 40px 16px; - @media (min-width: 768px) { - padding: 24px 16px 108px; - } - ${H4} { - margin-bottom: 24px; - } - ${Body} { - color: var(--secondary-font-color); - margin-bottom: 40px; - } -` - -const DatabaseGrid = styled.div` - display: flex; - flex-direction: column; - flex-wrap: wrap; - gap: 24px; - @media only screen and (min-width: 1024px) { - display: grid; - column-gap: 44px; - grid-template-columns: repeat(4, 1fr); - } - @media (min-width: 940px) and (max-width: 1024px) { - display: grid; - column-gap: 44px; - grid-template-columns: repeat(3, 1fr); - } - a { - text-decoration: none; - color: unset; - } - .entry { - height: 84px; - display: flex; - align-items: center; - justify-content: start; - gap: 16px; - flex-basis: 21%; - border-radius: 8px; - padding: 25px 24px; - background-color: var(--orm-card-bg); - position: relative; - cursor: pointer; - &::after { - content: ''; - position: absolute; - border-radius: 8px; - inset: 0; - border: 1px solid var(--grid-border-color); - background-color: transparent; - cursor: pointer; - } - - &:hover { - background-color: var(--main-bgd-color); - &::after { - border: 2px solid #5a67d8; - } - } - @media only screen and (min-width: 940px) { - padding: 0 24px; - } - img { - max-height: 36px; - margin: auto 0; - } - span { - color: var(--main-font-color); - text-transform: capitalize; - font-family: 'Inter'; - font-weight: 600; - font-size: 24px; - line-height: 1; - } - } -` - -const DatabaseData = [ - { - title: 'PostgreSQL', - icon: "postgresqlsimple", - darkIcon: "postgresqldark", - url: 'orm/overview/databases/postgresql', - }, - { - title: 'MySQL', - icon: "mysqlsimple", - darkIcon: "mysqlsimple", - url: 'orm/overview/databases/mysql', - }, - { - title: 'SQL Server', - icon: "sqlserver", - darkIcon: "sqlserver", - url: 'orm/overview/databases/sql-server', - }, - { - title: 'SQLite', - icon: "sqlite", - darkIcon: "sqlite", - url: 'orm/overview/databases/sqlite', - }, - { - title: 'MongoDB', - icon: "mongodbsimple", - darkIcon: "mongodbsimple", - url: 'orm/overview/databases/mongodb', - }, - { - title: 'CockroachDB', - icon: "cockroachdb", - darkIcon: "cockroachdbdark", - url: 'orm/overview/databases/cockroachdb', - }, - { - title: 'Planetscale', - icon: "planetscale", - darkIcon: "planetscaledark", - url: 'orm/overview/databases/planetscale', - }, - { - title: 'MariaDB', - icon: "mariadb", - darkIcon: "mariadbdark", - url: 'orm/overview/databases/mysql', - }, -] - -const CommunitySection = styled.div` - background: var(--community-bgd-color); - > div { - padding: 80px 16px; - margin: 0 auto; - max-width: 1272px; - text-align: left; - a { - text-decoration: none; - } - .section-hero { - ${H3} { - margin-top: 0; - margin-bottom: 24px; - color: var(--primary-font-color); - } - p { - color: var(--secondary-font-color); - margin-bottom: 60px; - margin-top: 0; - } - } - - .community-link-wrapper { - display: grid; - gap: 16px; - text-align: left; - grid-template-columns: 24px 1fr; - height: 100%; - text-decoration: none; - > div { - display: flex; - flex-direction: column; - justify-content: space-between; - gap: 16px; - } - h4 { - margin-bottom: 6px; - margin-top: 0; - line-height: 110%; - font-size: 24px; - font-weight: 700; - font-family: 'Barlow'; - color: var(--primary-font-color); - } - ${Body} { - color: var(--secondary-font-color); - margin: 0; - } - .link { - color: var(--indigo-link-color); - font-family: 'Inter'; - font-size: 18px; - font-style: normal; - font-weight: 600; - line-height: 88%; /* 15.84px */ - } - } - } -` - -const CommunityLinksRow = styled.div` - display: grid; - gap: 24px; - grid-template-rows: repeat(3, minmax(0, 1fr)); - @media only screen and (min-width: 768px) { - grid-template-columns: repeat(2, minmax(0, 1fr)); - grid-template-rows: none; - } - @media only screen and (min-width: 940px) { - grid-template-columns: repeat(3, minmax(0, 1fr)); - grid-template-rows: none; - } - i { - margin-top: 4px; - } -` export default function Home(): JSX.Element { const {siteConfig} = useDocusaurusContext(); - const { ORMPlatformLinkData, GeneralLinkData, CardLinks, CommunityLinksData } = siteConfigData.homepage return (
- - {Object.keys(ORMPlatformLinkData).map((e: string) => ( - -

- - - - {ORMPlatformLinkData[e].title} -

- {ORMPlatformLinkData[e].description} - - {ORMPlatformLinkData[e].links.map((e: any) => ( - - {e.title} {e.external ? <>↗ : <>→} - - ))} - - - ))} - + - -

Prisma ORM

- - {GeneralLinkData.map((generalLink: any, index: number) => ( - - - - -
-
- {generalLink.title} → -
-

{generalLink.description}

-
- - ))} - - - - - -

Components

-

- Open source Node.js and TypeScript ORM with an intuitive data model, automated - migrations, type-safety, and auto-completion. -

-
- - {CardLinks.components.map((card: any) => ( - {card.title} → - ))} - -
- - - -

Reference

-

- Open source Node.js and TypeScript ORM with an intuitive data model, automated - migrations, type-safety, and auto-completion. -

-
- - {CardLinks.reference.map((card: any) => ( - {card.title} → - ))} - -
- - - - -

Databases

- - Prisma ORM works seamlessly across most popular databases and service providers.
Refer - to our Database features matrix for information about supported features and types for - each database. - - - {DatabaseData.map((e: any) => ( - -
- - {e.title} -
- - ))} - - - -
-
-

Join our Community

-

- We have multiple channels where you can get help from members of our community as well - as the Prisma team. -

-
- - {CommunityLinksData.map((comm: any) => ( - - - -
-
-

{comm.title}

- {comm.description} -
-
- {comm.linkText} - ↗ -
-
- - - ))} - -
- - {/* */} + + + +
); From 7a22864473649a4aedb990dae3d53322c9975405 Mon Sep 17 00:00:00 2001 From: Prisma Date: Mon, 4 Mar 2024 16:56:24 +0000 Subject: [PATCH 2/2] vertical align --- src/components/HomepageFeatures/Databases.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/HomepageFeatures/Databases.tsx b/src/components/HomepageFeatures/Databases.tsx index 23cd0c1158..eaaf1d0741 100644 --- a/src/components/HomepageFeatures/Databases.tsx +++ b/src/components/HomepageFeatures/Databases.tsx @@ -138,6 +138,7 @@ const DatabaseGrid = styled.div` padding: 0 24px; } img { + margin: auto 0; max-height: 36px; } span {