From bbf9979e61cdac3fe0d8d592e169b3781693ef79 Mon Sep 17 00:00:00 2001 From: Jon Harrell <4829245+jharrell@users.noreply.github.com> Date: Mon, 1 Apr 2024 10:03:58 -0500 Subject: [PATCH] Docusaurus: add sass plugin (#5767) --- docusaurus.config.ts | 1 + package-lock.json | 124 ++++++++++++ package.json | 2 + src/components/HomepageFeatures/Community.tsx | 171 ----------------- src/components/HomepageFeatures/Databases.tsx | 181 ------------------ src/components/HomepageFeatures/ORMCards.tsx | 145 -------------- src/components/HomepageFeatures/PrismaORM.tsx | 145 -------------- .../HomepageFeatures/ProductCards.tsx | 166 ---------------- tsconfig.json | 7 +- 9 files changed, 132 insertions(+), 810 deletions(-) delete mode 100644 src/components/HomepageFeatures/Community.tsx delete mode 100644 src/components/HomepageFeatures/Databases.tsx delete mode 100644 src/components/HomepageFeatures/ORMCards.tsx delete mode 100644 src/components/HomepageFeatures/PrismaORM.tsx delete mode 100644 src/components/HomepageFeatures/ProductCards.tsx diff --git a/docusaurus.config.ts b/docusaurus.config.ts index ec5d4a1a9d..146456f0af 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -55,6 +55,7 @@ const config: Config = { 'data-domain-script': '22c2e2c0-3df0-4958-8672-1194370ee230', }, ], + plugins: ['docusaurus-plugin-sass'], presets: [ [ 'classic', diff --git a/package-lock.json b/package-lock.json index c879cde367..bddfe6971a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,10 +15,12 @@ "@react-aria/tooltip": "^3.7.2", "@react-aria/utils": "^3.23.2", "clsx": "^2.0.0", + "docusaurus-plugin-sass": "^0.2.5", "prism-react-renderer": "^2.3.0", "react": "^18.0.0", "react-dom": "^18.0.0", "react-select": "^5.8.0", + "sass": "^1.72.0", "styled-components": "^6.1.8" }, "devDependencies": { @@ -6645,6 +6647,18 @@ "node": ">=6" } }, + "node_modules/docusaurus-plugin-sass": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.5.tgz", + "integrity": "sha512-Z+D0fLFUKcFpM+bqSUmqKIU+vO+YF1xoEQh5hoFreg2eMf722+siwXDD+sqtwU8E4MvVpuvsQfaHwODNlxJAEg==", + "dependencies": { + "sass-loader": "^10.1.1" + }, + "peerDependencies": { + "@docusaurus/core": "^2.0.0-beta || ^3.0.0-alpha", + "sass": "^1.30.0" + } + }, "node_modules/dom-converter": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz", @@ -8587,6 +8601,11 @@ "url": "https://opencollective.com/immer" } }, + "node_modules/immutable": { + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz", + "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -9126,6 +9145,14 @@ "node": ">=6" } }, + "node_modules/klona": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz", + "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==", + "engines": { + "node": ">= 8" + } + }, "node_modules/latest-version": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-7.0.0.tgz", @@ -13885,6 +13912,103 @@ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, + "node_modules/sass": { + "version": "1.72.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.72.0.tgz", + "integrity": "sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-loader": { + "version": "10.5.2", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.5.2.tgz", + "integrity": "sha512-vMUoSNOUKJILHpcNCCyD23X34gve1TS7Rjd9uXHeKqhvBG39x6XbswFDtpbTElj6XdMFezoWhkh5vtKudf2cgQ==", + "dependencies": { + "klona": "^2.0.4", + "loader-utils": "^2.0.0", + "neo-async": "^2.6.2", + "schema-utils": "^3.0.0", + "semver": "^7.3.2" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "fibers": ">= 3.1.0", + "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0", + "sass": "^1.3.0", + "webpack": "^4.36.0 || ^5.0.0" + }, + "peerDependenciesMeta": { + "fibers": { + "optional": true + }, + "node-sass": { + "optional": true + }, + "sass": { + "optional": true + } + } + }, + "node_modules/sass-loader/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/sass-loader/node_modules/ajv-keywords": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", + "peerDependencies": { + "ajv": "^6.9.1" + } + }, + "node_modules/sass-loader/node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==" + }, + "node_modules/sass-loader/node_modules/schema-utils": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz", + "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==", + "dependencies": { + "@types/json-schema": "^7.0.8", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, "node_modules/sax": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz", diff --git a/package.json b/package.json index 788615f961..9a545d7081 100644 --- a/package.json +++ b/package.json @@ -24,10 +24,12 @@ "@react-aria/tooltip": "^3.7.2", "@react-aria/utils": "^3.23.2", "clsx": "^2.0.0", + "docusaurus-plugin-sass": "^0.2.5", "prism-react-renderer": "^2.3.0", "react": "^18.0.0", "react-dom": "^18.0.0", "react-select": "^5.8.0", + "sass": "^1.72.0", "styled-components": "^6.1.8" }, "devDependencies": { diff --git a/src/components/HomepageFeatures/Community.tsx b/src/components/HomepageFeatures/Community.tsx deleted file mode 100644 index de0294fafa..0000000000 --- a/src/components/HomepageFeatures/Community.tsx +++ /dev/null @@ -1,171 +0,0 @@ -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} - ↗ -
-
- - - ))} - -
- - ) -} diff --git a/src/components/HomepageFeatures/Databases.tsx b/src/components/HomepageFeatures/Databases.tsx deleted file mode 100644 index 5abdb4449c..0000000000 --- a/src/components/HomepageFeatures/Databases.tsx +++ /dev/null @@ -1,181 +0,0 @@ -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 { - margin: auto 0; - 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} -
- - ))} - - - ) -} diff --git a/src/components/HomepageFeatures/ORMCards.tsx b/src/components/HomepageFeatures/ORMCards.tsx deleted file mode 100644 index 07b42128b1..0000000000 --- a/src/components/HomepageFeatures/ORMCards.tsx +++ /dev/null @@ -1,145 +0,0 @@ -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 ( - - - {Object.keys(CardLinks).map((e) => ( - -

{e[0].toUpperCase() + e.substring(1).toLowerCase()}

-

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

-
- - {CardLinks[e].map((card) => ( - {card.title} → - ))} - -
- - ))} - - - ) -} diff --git a/src/components/HomepageFeatures/PrismaORM.tsx b/src/components/HomepageFeatures/PrismaORM.tsx deleted file mode 100644 index 29cd6ffba5..0000000000 --- a/src/components/HomepageFeatures/PrismaORM.tsx +++ /dev/null @@ -1,145 +0,0 @@ -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}

-
- - ))} - - - ) -} diff --git a/src/components/HomepageFeatures/ProductCards.tsx b/src/components/HomepageFeatures/ProductCards.tsx deleted file mode 100644 index 0f60be6259..0000000000 --- a/src/components/HomepageFeatures/ProductCards.tsx +++ /dev/null @@ -1,166 +0,0 @@ -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/tsconfig.json b/tsconfig.json index 314eab8a41..f8d224fe2d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,6 +2,9 @@ // This file is not used in compilation. It is here just for a nice editor experience. "extends": "@docusaurus/tsconfig", "compilerOptions": { - "baseUrl": "." + "baseUrl": ".", + "types": [ + "docusaurus-plugin-sass" + ] } -} +} \ No newline at end of file