diff --git a/config.ts b/config.ts new file mode 100644 index 0000000000..39b0a30e2a --- /dev/null +++ b/config.ts @@ -0,0 +1,180 @@ +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/icons/technologies/CockroachDB.tsx b/src/components/icons/technologies/CockroachDB.tsx new file mode 100644 index 0000000000..1ae089c723 --- /dev/null +++ b/src/components/icons/technologies/CockroachDB.tsx @@ -0,0 +1,17 @@ +import * as React from 'react' + +// Placeholder + +export default () => ( + + + + + + + + +) \ No newline at end of file diff --git a/src/components/icons/technologies/CockroachDBDark.tsx b/src/components/icons/technologies/CockroachDBDark.tsx new file mode 100644 index 0000000000..768dd5d314 --- /dev/null +++ b/src/components/icons/technologies/CockroachDBDark.tsx @@ -0,0 +1,29 @@ +import React from 'react' + +export default () => ( + + + + + + + + + + + + + + + +) \ No newline at end of file diff --git a/src/components/icons/technologies/MariaDB.tsx b/src/components/icons/technologies/MariaDB.tsx new file mode 100644 index 0000000000..04695cc3d0 --- /dev/null +++ b/src/components/icons/technologies/MariaDB.tsx @@ -0,0 +1,52 @@ +import React from 'react' + +export default () => ( + + + + + + + + + + +) \ No newline at end of file diff --git a/src/components/icons/technologies/MariaDBDark.tsx b/src/components/icons/technologies/MariaDBDark.tsx new file mode 100644 index 0000000000..768dd5d314 --- /dev/null +++ b/src/components/icons/technologies/MariaDBDark.tsx @@ -0,0 +1,29 @@ +import React from 'react' + +export default () => ( + + + + + + + + + + + + + + + +) \ No newline at end of file diff --git a/src/components/icons/technologies/MongoDBSimple.tsx b/src/components/icons/technologies/MongoDBSimple.tsx new file mode 100644 index 0000000000..378d03be66 --- /dev/null +++ b/src/components/icons/technologies/MongoDBSimple.tsx @@ -0,0 +1,12 @@ +import React from 'react' + +export default () => ( + + + +) \ No newline at end of file diff --git a/src/components/icons/technologies/MySQLSimple.tsx b/src/components/icons/technologies/MySQLSimple.tsx new file mode 100644 index 0000000000..ceb43f3af0 --- /dev/null +++ b/src/components/icons/technologies/MySQLSimple.tsx @@ -0,0 +1,48 @@ +import React from 'react' + +export default () => ( + + + + + + + + + + + + + + + + + +) \ No newline at end of file diff --git a/src/components/icons/technologies/Planetscale.tsx b/src/components/icons/technologies/Planetscale.tsx new file mode 100644 index 0000000000..6bab6550db --- /dev/null +++ b/src/components/icons/technologies/Planetscale.tsx @@ -0,0 +1,23 @@ +import * as React from 'react' + +export default () => ( + + + + + + +) \ No newline at end of file diff --git a/src/components/icons/technologies/PlanetscaleDark.tsx b/src/components/icons/technologies/PlanetscaleDark.tsx new file mode 100644 index 0000000000..28da56adf7 --- /dev/null +++ b/src/components/icons/technologies/PlanetscaleDark.tsx @@ -0,0 +1,14 @@ +import React from 'react' + +export default () => ( + + + + +) \ No newline at end of file diff --git a/src/components/icons/technologies/PostgresSQLDark.tsx b/src/components/icons/technologies/PostgresSQLDark.tsx new file mode 100644 index 0000000000..686586cb9c --- /dev/null +++ b/src/components/icons/technologies/PostgresSQLDark.tsx @@ -0,0 +1,38 @@ +import React from 'react' + +export default () => ( + + + + + + + + + + + + + + +) \ No newline at end of file diff --git a/src/components/icons/technologies/PostgresSQLSimple.tsx b/src/components/icons/technologies/PostgresSQLSimple.tsx new file mode 100644 index 0000000000..281cd9c8b8 --- /dev/null +++ b/src/components/icons/technologies/PostgresSQLSimple.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export default () => ( + + + + + + + +) \ No newline at end of file diff --git a/src/components/icons/technologies/SQLServer.tsx b/src/components/icons/technologies/SQLServer.tsx new file mode 100644 index 0000000000..caca085276 --- /dev/null +++ b/src/components/icons/technologies/SQLServer.tsx @@ -0,0 +1,60 @@ +import React from 'react' + +export default () => ( + + + + + + + + + + + + + + + + + + + + + + + +) \ No newline at end of file diff --git a/src/components/icons/technologies/SQLite.tsx b/src/components/icons/technologies/SQLite.tsx new file mode 100644 index 0000000000..ec6a66b3ae --- /dev/null +++ b/src/components/icons/technologies/SQLite.tsx @@ -0,0 +1,41 @@ +import * as React from 'react' + +export default (props: any) => ( + + + + + + + + + {/* */} + + + + +) \ No newline at end of file diff --git a/src/components/icons/technologies/index.tsx b/src/components/icons/technologies/index.tsx new file mode 100644 index 0000000000..b35320dd15 --- /dev/null +++ b/src/components/icons/technologies/index.tsx @@ -0,0 +1,27 @@ +import PostgresSQLSimple from './PostgresSQLSimple'; +import PostgresSQLDark from './PostgresSQLDark'; +import MySQLSimple from './MySQLSimple'; +import SQLServer from './SQLServer'; +import SQLite from './SQLite'; +import CockroachDB from './CockroachDB'; +import CockroachDBDark from './CockroachDBDark'; +import MariaDB from './MariaDB'; +import MariaDBDark from './MariaDBDark'; +import MongoDBSimple from './MongoDBSimple'; +import Planetscale from './Planetscale'; +import PlanetscaleDark from './PlanetscaleDark'; + +export { + CockroachDB, + CockroachDBDark, + MariaDB, + MariaDBDark, + MongoDBSimple, + Planetscale, + PlanetscaleDark, + SQLite, + SQLServer, + MySQLSimple, + PostgresSQLSimple, + PostgresSQLDark +} \ No newline at end of file diff --git a/src/components/shadow-card/index.tsx b/src/components/shadow-card/index.tsx new file mode 100644 index 0000000000..c6a048b6a4 --- /dev/null +++ b/src/components/shadow-card/index.tsx @@ -0,0 +1,40 @@ +import React from 'react' +import styled from 'styled-components' +import * as theme from "../../css/primitives" + +const CardLibWrapper = styled.div` + box-shadow: 0px 5px 3px rgba(23, 43, 77, 0.04), 0px 8px 5px rgba(23, 43, 77, 0.08); + background: var(--shadow-card-bg); + border-radius: 8px; + overflow: hidden; + width: 100%; + cursor: pointer; + max-width: 100%; + margin: 0; + &:hover { + transform: scale(1.02); + } + transition: transform 100ms ease; + .content { + padding: 32px 24px; + text-align: left; + p { + color: #4a5568; + } + a { + text-decoration: none; + } + + &:hover .link > span:first-of-type { + text-decoration: underline; + } + } +` + +const ShadowCard = ({ starter, className, ...rest }: any) => ( + + {rest.children} + +) + +export default ShadowCard diff --git a/src/css/all.css b/src/css/all.css index df8c4cba80..e128445786 100644 --- a/src/css/all.css +++ b/src/css/all.css @@ -872,10 +872,30 @@ .fa-slash::before { content: '\f715'; } + + .fa-question::before { + content: '\3f' + } .fa-star::before { content: '\f005'; } + + .fa-download::before { + content: '\f019'; + } + + .fa-book::before { + content: '\f02d'; + } + + .fa-arrow-right-arrow-left::before { + content: '\f0ec'; + } + + .fa-eye::before { + content: '\f06e'; + } .fa-sync::before { content: '\f021'; diff --git a/src/css/custom.css b/src/css/custom.css index 94b80c05d9..99e7d9205a 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -528,7 +528,7 @@ hr { } .navbar { box-shadow: none; - border-bottom: 1px solid rgb(226, 232, 240); + border-bottom: 1px solid var(--border-color); padding-left: 16px; padding-right: 55px; } diff --git a/src/css/primitives.ts b/src/css/primitives.ts new file mode 100644 index 0000000000..9aafd18eaf --- /dev/null +++ b/src/css/primitives.ts @@ -0,0 +1,244 @@ +export const gray = { + "100": "#F7FAFC", + "200": "#EDF2F7", + "300": "#E2E8F0", + "400": "#CBD5E0", + "500": "#A0AEC0", + "600": "#718096", + "700": "#4A5568", + "800": "#2D3748", + "900": "#1A202C", +} +export const black = "#1A202C" + +export const blueGray = { + "100": "#F7FAFC", + "200": "#EDF2F7", + "300": "#E2E8F0", + "400": "#CBD5E0", + "500": "#A0AEC0", + "600": "#718096", + "700": "#4A5568", + "800": "#2D3748", + "900": "#1A202C", +} + +export const teal = { + "100": "#D9F9F6", + "200": "#B7F4EE", + "300": "#92EFE6", + "400": "#71E8DF", + "500": "#04C8BB", + "600": "#16A394", + "700": "#187367", + "800": "#154F47", + "900": "#154F47", +} + +export const purple = { + "100": "#FAE8FA", + "200": "#F5C9F4", + "300": "#F4A0F1", + "400": "#E76DE3", + "500": "#C742C1", + "600": "#B024AD", + "700": "#891A8A", + "800": "#5B115F", + "900": "#5B115F", +} + +export const indigo = { + "100": "#EBF4FF", + "200": "#C3DAFE", + "300": "#A3BFFA", + "400": "#7F9CF5", + "500": "#667EEA", + "600": "#5A67D8", + "700": "#4C51BF", + "800": "#434190", + "900": "#434190", +} + +export const green = { + "100": "#F0FFF4", + "200": "#C6F6D5", + "300": "#9AE6B4", + "400": "#68D391", + "500": "#48BB78", + "600": "#38A169", + "700": "#276749", + "800": "#22543D", + "900": "#22543D", +} + +export const orange = { + "100": "#FFFAF0", + "200": "#FEEBC8", + "300": "#FBD38D", + "400": "#F6AD55", + "500": "#ED8936", + "600": "#DD6B20", + "700": "#C05621", + "800": "#9C4221", + "900": "#9C4221", +} + +export const red = { + "100": "#FFF5F5", + "200": "#FED7D7", + "300": "#FEB2B2", + "400": "#FC8181", + "500": "#F56565", + "600": "#E53E3E", + "700": "#C53030", + "800": "#9B2C2C", + "900": "#9B2C2C", +} + +export const pink = { + "100": "#FFF5F7", + "200": "#FED7E2", + "300": "#FBB6CE", + "400": "#F687B3", + "500": "#ED64A6", + "600": "#D53F8C", + "700": "#B83280", + "800": "#97266D", + "900": "#702459", +} + +export const blue = { + "100": "#EBF8FF", + "200": "#BEE3F8", + "300": "#90CDF4", + "400": "#63B3ED", + "500": "#4299E1", + "600": "#3182CE", + "700": "#2B6CB0", + "800": "#2C5282", + "900": "#2A4365", +} + +export const yellow = { + "100": "#FFFFF0", + "200": "#FEFCBF", + "300": "#FAF089", + "400": "#F6E05E", + "500": "#ECC94B", + "600": "#D69E2E", + "700": "#B7791F", + "800": "#975A16", + "900": "#744210", +} + +export const colors = { + gray, + red, + indigo, + teal, + blueGray, + green, + purple, + orange, + pink, + yellow, + black, + white: "#fff", + blue, + text: { + primary: `white`, + secondary: `#E2E8F0`, + terciary: `#A0AEC0`, + disabled: `#4A5568`, + darkPrimary: gray[800], + darkSecondary: gray[600] + }, + surface: { + primary: "#090A15", + brand: { + gray: "#1A202C", + darker: "#7F9CF5", + light: "#282B6B", + default: "#5A67D8" + } + } +} + +export const fonts = { + text: `"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"`, + display: `"Barlow", system-ui, Arial, sans-serif`, + mono: `"JetBrains Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace`, + heading: `'Barlow', sans-serif`, +} + +export const baseFontSizes = { + 12: ".75rem", + 14: ".875rem", + 16: "1rem", + 18: "1.125rem", + 20: "1.25rem", + 22: "1.375rem", + 24: "1.5rem", + 26: "1.625rem", + 28: "1.75rem", + 30: "1.875rem", + 32: "2rem", + 36: "2.25rem", + 38: "2.375rem", + 40: "2.5rem", + 48: "3rem", + 56: "3.5rem", + 64: "4rem", + 72: "4.5rem", +} + +export const fontSizes = { + ...baseFontSizes, + small: baseFontSizes[14], + body: baseFontSizes[16], + large: baseFontSizes[20], + display: baseFontSizes[48], + displaySmall: baseFontSizes[24], + displayLarge: baseFontSizes[72], +} + +export const baseSpace = { + 0: "0rem", + 1: "1px", + 2: "0.125rem", + 4: "0.25rem", + 5: `${5 / 16}rem`, // Maybe don't use this even though it's from design? + 6: `${6 / 16}rem`, // Maybe don't use this even though it's from design? + 8: "0.5rem", + 12: "0.75rem", + 14: "0.875rem", + 15: `${15 / 16}rem`, + 16: "1rem", + 18: "1.125rem", + 20: "1.25rem", + 22: "1.375rem", + 24: "1.5rem", + 26: `${26 / 16}rem`, + 30: `${30 / 16}rem`, + 32: "2rem", + 40: "2.5rem", + 45: `${45 / 16}rem`, + 48: "3rem", + 64: "4rem", + 80: "5rem", + 96: "6rem", + 128: "8rem", + 160: "10rem", + 192: "12rem", + 224: "14rem", + 256: "16rem", +} + +export const space = { + ...baseSpace, + none: baseSpace[0], + one: baseSpace[1], + small: baseSpace[8], + medium: baseSpace[12], + large: baseSpace[20], +} diff --git a/src/css/theming.css b/src/css/theming.css index 53ca218486..9c289cd29b 100644 --- a/src/css/theming.css +++ b/src/css/theming.css @@ -32,6 +32,20 @@ --main-font-color: #2d3748; + --primary-font-color: var(--gray-900); + --secondary-font-color: #4a5568; + --icon-svg-color: #5A67D8; + --icon-wrapper-bg: rgb(235, 244, 255); + --teal-link-color: #16A394; + --indigo-link-color: #5A67D8; + --teal-card-bg: linear-gradient(102.41deg, #FFFFFF 6.22%, #E8FFFD 87.23%); + --indigo-card-bg: linear-gradient(102.41deg, #FFFFFF 6.22%, #F4F5FF 87.23%); + --orm-card-bg: #fff; + --grid-border-color: #cbd5e0; + --community-bgd-color: var(--gray-100); + --shadow-card-bg: #fff; + + --main-bgd-color: #f7fafc; --header-bg-color: #ffffff; --selection-bgd-color: #0c344b; @@ -83,6 +97,8 @@ word-wrap: break-word; color: var(--main-font-color); background-color: var(--white-color); + + --homepage-header-bg: rgb(247, 250, 252); /* Colors */ --indigo-100: #EBF4FF; --indigo-200: #C3DAFE; @@ -107,8 +123,6 @@ --ifm-navbar-padding-horizontal: 0; } } - - /* For readability concerns, you should choose a lighter palette in dark mode. */ /* PRIMITES WITH THEME DEFINED BY TOGGLER */ [data-theme='dark'] { @@ -129,6 +143,19 @@ --ifm-hover-overlay: var(--indigo-700); /* Generic */ --main-font-color: #e2e8f0; + --primary-font-color: rgb(247, 250, 252); + --secondary-font-color: rgb(203, 213, 224); + --icon-wrapper-bg: rgb(90, 103, 216); + --icon-svg-color: #F7FAFC; + --teal-link-color: #71E8DF; + --indigo-link-color: #7F9CF5; + --teal-card-bg: linear-gradient(287.43deg, rgba(4, 200, 187, 0.17) -34.29%, rgba(4, 200, 187, 0) 98.22%),linear-gradient(99.45deg, #1A202C -40.85%, #27303E 91.67%); + --indigo-card-bg: linear-gradient(283.66deg, rgba(102, 126, 234, 0.2418) -32.46%, rgba(102, 126, 234, 0) 96.55%), linear-gradient(99.45deg, #1A202C -40.85%, #27303E 91.67%); + --orm-card-bg: var(--gray-800); + --grid-border-color: var(--gray-700); + --community-bgd-color: var(--gray-800); + --shadow-card-bg: var(--gray-900); + --main-bgd-color: #1a202c; --border-color: #2d3748; --header-bg-color: #1a202c; @@ -174,11 +201,7 @@ --grey-color: #3d556b; --grey-bg-color: #8fa6b2; --dark-color: rgb(12, 52, 75); -} - -main { - padding-top: 16px !important; - padding-left: 32px !important; + --homepage-header-bg: rgb(36, 44, 58); } /* PRIMITES WITH THEME DEFINED */ @@ -214,6 +237,19 @@ main { --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4); --main-font-color: #2d3748; + --secondary-font-color: #4a5568; + --primary-font-color: var(--gray-900); + --icon-wrapper-bg: rgb(235, 244, 255); + --icon-svg-color: #5A67D8; + --teal-link-color: #16A394; + --indigo-link-color: #5A67D8; + --teal-card-bg: linear-gradient(102.41deg, #FFFFFF 6.22%, #E8FFFD 87.23%); + --indigo-card-bg: linear-gradient(102.41deg, #FFFFFF 6.22%, #F4F5FF 87.23%); + --orm-card-bg: #fff; + --grid-border-color: #cbd5e0; + --community-bgd-color: var(--gray-100); + --shadow-card-bg: #fff; + --main-bgd-color: #f7fafc; --header-bg-color: #ffffff; --selection-bgd-color: #0c344b; @@ -265,6 +301,7 @@ main { word-wrap: break-word; color: var(--main-font-color); background-color: var(--white-color); + --homepage-header-bg: rgb(247, 250, 252); /* Colors */ --indigo-100: #EBF4FF; --indigo-200: #C3DAFE; @@ -303,6 +340,19 @@ main { --ifm-hover-overlay: var(--indigo-700); /* Generic */ --main-font-color: #e2e8f0; + --primary-font-color: rgb(247, 250, 252); + --secondary-font-color: rgb(203, 213, 224); + --icon-wrapper-bg: rgb(90, 103, 216); + --icon-svg-color: #F7FAFC; + --teal-link-color: #71E8DF; + --indigo-link-color: #7F9CF5; + --teal-card-bg: linear-gradient(287.43deg, rgba(4, 200, 187, 0.17) -34.29%, rgba(4, 200, 187, 0) 98.22%),linear-gradient(99.45deg, #1A202C -40.85%, #27303E 91.67%); + --indigo-card-bg: linear-gradient(283.66deg, rgba(102, 126, 234, 0.2418) -32.46%, rgba(102, 126, 234, 0) 96.55%), linear-gradient(99.45deg, #1A202C -40.85%, #27303E 91.67%); + --orm-card-bg: var(--gray-800); + --grid-border-color: var(--gray-700); + --community-bgd-color: var(--gray-800); + --shadow-card-bg: var(--gray-900); + --main-bgd-color: #1a202c; --border-color: #2d3748; --header-bg-color: #1a202c; @@ -348,6 +398,8 @@ main { --grey-color: #3d556b; --grey-bg-color: #8fa6b2; --dark-color: rgb(12, 52, 75); + + --homepage-header-bg: rgb(36, 44, 58); } } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 400a3e19a8..e7c8511ac1 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,41 +3,585 @@ import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Layout from '@theme/Layout'; import HomepageFeatures from '@site/src/components/HomepageFeatures'; -import Heading from '@theme/Heading'; import styles from './index.module.css'; +import styled from 'styled-components'; +import * as theme from "../css/primitives" +import siteConfigData from "../../config" +import { Icon } from '../components/Icon'; +import { CockroachDB, CockroachDBDark, MariaDB, MariaDBDark, MongoDBSimple, MySQLSimple, Planetscale, PlanetscaleDark, PostgresSQLDark, PostgresSQLSimple, SQLServer, SQLite } from '../components/icons/technologies/index'; +import ShadowCard from '../components/shadow-card'; -function HomepageHeader() { - const {siteConfig} = useDocusaurusContext(); - return ( -
-
- - {siteConfig.title} - -

{siteConfig.tagline}

-
- - Docusaurus Tutorial - 5min ⏱️ - -
-
-
- ); +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; +` + +export 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; } +` + +export 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 TopSection = styled.div` + padding: 64px 12px; + background: #f7fafc; + display: flex; + flex-wrap: wrap; + 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` + 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 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; + } + 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: , + darkIcon: , + url: 'orm/overview/databases/postgresql', + }, + { + title: 'MySQL', + icon: , + darkIcon: , + url: 'orm/overview/databases/mysql', + }, + { + title: 'SQL Server', + icon: , + darkIcon: , + url: 'orm/overview/databases/sql-server', + }, + { + title: 'SQLite', + icon: , + darkIcon: , + url: 'orm/overview/databases/sqlite', + }, + { + title: 'MongoDB', + icon: , + darkIcon: , + url: 'orm/overview/databases/mongodb', + }, + { + title: 'CockroachDB', + icon: , + darkIcon: , + url: 'orm/overview/databases/cockroachdb', + }, + { + title: 'Planetscale', + icon: , + darkIcon: , + url: 'orm/overview/databases/planetscale', + }, + { + title: 'MariaDB', + icon: , + darkIcon: , + 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(); + // useEffect(() => { + // console.log(siteConfig) + // }, [siteConfig]) + 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.icon} + {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} + ↗ +
+
+ + + ))} + +
+ + {/* */}
); } +