From 206c45f5ad82986b8786659c440f6748377dcfc9 Mon Sep 17 00:00:00 2001 From: Prisma Date: Thu, 21 Mar 2024 15:57:29 +0000 Subject: [PATCH 1/6] add new pages for specific techs for techswitcher --- ...connect-your-database-node-cockroachdb.mdx | 90 +++ .../100-connect-your-database-node-mysql.mdx | 97 +++ ...connect-your-database-node-planetscale.mdx | 125 ++++ ...-connect-your-database-node-postgresql.mdx | 92 +++ ...0-connect-your-database-node-sqlserver.mdx | 66 +++ ...t-your-database-typescript-cockroachdb.mdx | 90 +++ ...connect-your-database-typescript-mysql.mdx | 97 +++ ...t-your-database-typescript-planetscale.mdx | 124 ++++ ...ct-your-database-typescript-postgresql.mdx | 90 +++ ...ect-your-database-typescript-sqlserver.mdx | 67 +++ .../100-connect-your-database.mdx | 550 ------------------ sidebars.ts | 2 +- src/components/collapsible.tsx | 99 ++++ src/components/shortcodes/select.tsx | 91 +++ src/components/shortcodes/switchTech.tsx | 26 + src/components/shortcodes/switcherBlock.tsx | 106 ++++ src/components/shortcodes/techSwitcher.tsx | 160 +++++ src/components/topSection.tsx | 55 ++ src/css/custom.css | 4 + src/css/primitives.ts | 9 + src/theme/DocSidebarItem/Html/index.tsx | 20 + .../DocSidebarItem/Html/styles.module.css | 6 + .../DocSidebarItem/Link/styles.module.css | 3 +- src/theme/DocSidebarItem/index.tsx | 18 + src/theme/MDXComponents.tsx | 18 +- src/utils/urlGenerator.ts | 3 + 26 files changed, 1553 insertions(+), 555 deletions(-) create mode 100644 docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-cockroachdb.mdx create mode 100644 docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-mysql.mdx create mode 100644 docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-planetscale.mdx create mode 100644 docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-postgresql.mdx create mode 100644 docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-sqlserver.mdx create mode 100644 docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-cockroachdb.mdx create mode 100644 docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-mysql.mdx create mode 100644 docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-planetscale.mdx create mode 100644 docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-postgresql.mdx create mode 100644 docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-sqlserver.mdx delete mode 100644 docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database.mdx create mode 100644 src/components/collapsible.tsx create mode 100644 src/components/shortcodes/select.tsx create mode 100644 src/components/shortcodes/switchTech.tsx create mode 100644 src/components/shortcodes/switcherBlock.tsx create mode 100644 src/components/shortcodes/techSwitcher.tsx create mode 100644 src/components/topSection.tsx create mode 100644 src/theme/DocSidebarItem/Html/index.tsx create mode 100644 src/theme/DocSidebarItem/Html/styles.module.css create mode 100644 src/theme/DocSidebarItem/index.tsx create mode 100644 src/utils/urlGenerator.ts diff --git a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-cockroachdb.mdx b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-cockroachdb.mdx new file mode 100644 index 0000000000..fae7b8f91d --- /dev/null +++ b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-cockroachdb.mdx @@ -0,0 +1,90 @@ +--- +title: 'Connect your database' +metaTitle: 'Connect your database' +metaDescription: 'Connect your database to your project' +langSwitcher: ['typescript', 'node'] +dbSwitcher: ['postgresql', 'mysql', 'sqlserver', 'planetscale', 'cockroachdb'] +sidebar_class_name: hidden-sidebar +toc: false +--- + + + + +## Connect your database + +To connect your database, you need to set the `url` field of the `datasource` block in your Prisma schema to your database [connection URL](/orm/reference/connection-urls): + +```prisma file=prisma/schema.prisma +datasource db { + provider = "postgresql" + url = env("DATABASE_URL") +} +``` + +Note that the default schema created by `prisma init` uses PostgreSQL as the `provider`. For CockroachDB, you need to edit the `datasource` block to use the `cockroachdb` provider instead: + +```prisma file=prisma/schema.prisma highlight=2;edit +datasource db { + provider = "cockroachdb" + url = env("DATABASE_URL") +} +``` + +The `url` is [set via an environment variable](/orm/more/development-environment/environment-variables) which is defined in `.env`. You now need to adjust the connection URL to point to your own database. + +The [format of the connection URL](/orm/reference/connection-urls) for your database depends on the database you use. CockroachDB uses the PostgreSQL connection URL format, which has the following structure (the parts spelled all-uppercased are _placeholders_ for your specific connection details): + +```no-lines +postgresql://USER:PASSWORD@HOST:PORT/DATABASE?PARAMETERS +``` + +Here's a short explanation of each component: + +- `USER`: The name of your database user +- `PASSWORD`: The password for your database user +- `PORT`: The port where your database server is running. The default for CockroachDB is `26257`. +- `DATABASE`: The name of the database +- `PARAMETERS`: Any additional connection parameters. See the CockroachDB documentation [here](https://www.cockroachlabs.com/docs/stable/connection-parameters.html#additional-connection-parameters). + +For a [CockroachDB Serverless](https://www.cockroachlabs.com/docs/cockroachcloud/quickstart.html) or [Cockroach Dedicated](https://www.cockroachlabs.com/docs/cockroachcloud/quickstart-trial-cluster) database hosted on [CockroachDB Cloud](https://www.cockroachlabs.com/get-started-cockroachdb/), the [connection URL](/orm/reference/connection-urls) looks similar to this: + +```bash file=.env +DATABASE_URL="postgresql://:@..cockroachlabs.cloud:26257/defaultdb?sslmode=verify-full&sslrootcert=$HOME/.postgresql/root.crt&options=--" +``` + +To find your connection string on CockroachDB Cloud, click the 'Connect' button on the overview page for your database cluster, and select the 'Connection string' tab. + +For a [CockroachDB database hosted locally](https://www.cockroachlabs.com/docs/stable/secure-a-cluster.html), the [connection URL](/orm/reference/connection-urls) looks similar to this: + +```bash file=.env +DATABASE_URL="postgresql://root@localhost:26257?sslmode=disable" +``` + +Your connection string is displayed as part of the welcome text when starting CockroachDB from the command line. + + + + + Installation + + + + Using Prisma Migrate + + + diff --git a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-mysql.mdx b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-mysql.mdx new file mode 100644 index 0000000000..fc9cf08c30 --- /dev/null +++ b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-mysql.mdx @@ -0,0 +1,97 @@ +--- +title: 'Connect your database' +metaTitle: 'Connect your database' +metaDescription: 'Connect your database to your project' +langSwitcher: ['typescript', 'node'] +dbSwitcher: ['postgresql', 'mysql', 'sqlserver', 'planetscale', 'cockroachdb'] +sidebar_class_name: hidden-sidebar +toc: false +--- + + + + +## Connect your database + +To connect your database, you need to set the `url` field of the `datasource` block in your Prisma schema to your database [connection URL](/orm/reference/connection-urls): + +```prisma file=prisma/schema.prisma +datasource db { + provider = "postgresql" + url = env("DATABASE_URL") +} +``` + +Note that the default schema created by `prisma init` uses PostgreSQL, so you first need to switch the `provider` to `mysql`: + +```prisma file=prisma/schema.prisma highlight=2;edit +datasource db { + provider = "mysql" + url = env("DATABASE_URL") +} +``` + +In this case, the `url` is [set via an environment variable](/orm/prisma-schema/overview#accessing-environment-variables-from-the-schema) which is defined in `.env`: + +```bash file=.env +DATABASE_URL="mysql://johndoe:randompassword@localhost:3306/mydb" +``` + + + +We recommend adding `.env` to your `.gitignore` file to prevent committing your environment variables. + + + +You now need to adjust the connection URL to point to your own database. + +The [format of the connection URL](/orm/reference/connection-urls) for your database typically depends on the database you use. For MySQL, it looks as follows (the parts spelled all-uppercased are _placeholders_ for your specific connection details): + +```no-lines +mysql://USER:PASSWORD@HOST:PORT/DATABASE +``` + +Here's a short explanation of each component: + +- `USER`: The name of your database user +- `PASSWORD`: The password for your database user +- `PORT`: The port where your database server is running (typically `3306` for MySQL) +- `DATABASE`: The name of the [database](https://dev.mysql.com/doc/refman/8.0/en/creating-database.html) + +As an example, for a MySQL database hosted on AWS RDS, the [connection URL](/orm/reference/connection-urls) might look similar to this: + +```bash file=.env +DATABASE_URL="mysql://johndoe:XXX@mysql–instance1.123456789012.us-east-1.rds.amazonaws.com:3306/mydb" +``` + +When running MySQL locally, your connection URL typically looks similar to this: + +```bash file=.env +DATABASE_URL="mysql://root:randompassword@localhost:3306/mydb" +``` + + + + + Installation + + + + Using Prisma Migrate + + + diff --git a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-planetscale.mdx b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-planetscale.mdx new file mode 100644 index 0000000000..a886e9fe5d --- /dev/null +++ b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-planetscale.mdx @@ -0,0 +1,125 @@ +--- +title: 'Connect your database' +metaTitle: 'Connect your database' +metaDescription: 'Connect your database to your project' +langSwitcher: ['typescript', 'node'] +dbSwitcher: ['postgresql', 'mysql', 'sqlserver', 'planetscale', 'cockroachdb'] +sidebar_class_name: hidden-sidebar +toc: false +--- + + + + +## Connect your database + +To connect your database, you need to set the `url` field of the `datasource` block in your Prisma schema to your database [connection URL](/orm/reference/connection-urls): + +```prisma file=prisma/schema.prisma +datasource db { + provider = "postgresql" + url = env("DATABASE_URL") +} +``` + +Note that the default schema created by `prisma init` uses PostgreSQL as the `provider`. For PlanetScale, you need to edit the `datasource` block to use the `mysql` provider instead: + +```prisma file=prisma/schema.prisma highlight=2;edit +datasource db { + provider = "mysql" + url = env("DATABASE_URL") +} +``` + +You will also need to set the relation mode type to `prisma` in order to [emulate foreign key constraints](/orm/overview/databases/planetscale#option-1-emulate-relations-in-prisma-client) in the `datasource` block: + +```prisma file=schema.prisma highlight=4;add +datasource db { + provider = "mysql" + url = env("DATABASE_URL") + relationMode = "prisma" +} +``` + +> **Note**: Since February 2024, you can alternatively [use foreign key constraints on a database-level in PlanetScale](/orm/overview/databases/planetscale#option-2-enable-foreign-key-constraints-in-the-planetscale-database-settings), which omits the need for setting `relationMode = "prisma"`. + +The `url` is [set via an environment variable](/orm/prisma-schema/overview#accessing-environment-variables-from-the-schema) which is defined in `.env`: + +```bash file=.env +DATABASE_URL="mysql://janedoe:mypassword@server.us-east-2.psdb.cloud/mydb?sslaccept=strict" +``` + +You now need to adjust the connection URL to point to your own database. + +The [format of the connection URL](/orm/reference/connection-urls) for your database typically depends on the database you use. PlanetScale uses the MySQL connection URL format, which has the following structure (the parts spelled all-uppercased are _placeholders_ for your specific connection details): + +```no-lines +mysql://USER:PASSWORD@HOST:PORT/DATABASE +``` + +Here's a short explanation of each component: + +- `USER`: The name of your database user +- `PASSWORD`: The password for your database user +- `PORT`: The port where your database server is running (typically `3306` for MySQL) +- `DATABASE`: The name of the [database](https://dev.mysql.com/doc/refman/8.0/en/creating-database.html) + +For a database hosted with PlanetScale, the [connection URL](/orm/reference/connection-urls) looks similar to this: + +```bash file=.env +DATABASE_URL="mysql://myusername:mypassword@server.us-east-2.psdb.cloud/mydb?sslaccept=strict" +``` + +The connection URL for a given database branch can be found from your PlanetScale account by going to the overview page for the branch and selecting the 'Connect' dropdown. In the 'Passwords' section, generate a new password and select 'Prisma' to get the Prisma format for the connection URL. + +
+Alternative method: connecting using the PlanetScale CLI + +Alternatively, you can connect to your PlanetScale database server using the [PlanetScale CLI](https://docs.planetscale.com/reference/planetscale-environment-setup), and use a local connection URL. In this case the connection URL will look like this: + +```bash file=.env +DATABASE_URL="mysql://root@localhost:PORT/mydb" +``` + + + +We recommend adding `.env` to your `.gitignore` file to prevent committing your environment variables. + + + +To connect to your branch, use the following command: + +```terminal +pscale connect prisma-test branchname --port PORT +``` + +The `--port` flag can be omitted if you are using the default port `3306`. + +
+ + + + + Installation + + + + Creating the database schema + + + + diff --git a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-postgresql.mdx b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-postgresql.mdx new file mode 100644 index 0000000000..1956dd28eb --- /dev/null +++ b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-postgresql.mdx @@ -0,0 +1,92 @@ +--- +title: 'Connect your database' +metaTitle: 'Connect your database' +metaDescription: 'Connect your database to your project' +langSwitcher: ['typescript', 'node'] +dbSwitcher: ['postgresql', 'mysql', 'sqlserver', 'planetscale', 'cockroachdb'] +sidebar_class_name: hidden-sidebar +toc: false +--- + + + + +## Connect your database + +To connect your database, you need to set the `url` field of the `datasource` block in your Prisma schema to your database [connection URL](/orm/reference/connection-urls): + +```prisma file=prisma/schema.prisma +datasource db { + provider = "postgresql" + url = env("DATABASE_URL") +} +``` + +In this case, the `url` is [set via an environment variable](/orm/more/development-environment/environment-variables) which is defined in `.env`: + +```bash file=.env +DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public" +``` + + + +We recommend adding `.env` to your `.gitignore` file to prevent committing your environment variables. + + + +You now need to adjust the connection URL to point to your own database. + +The [format of the connection URL](/orm/reference/connection-urls) for your database depends on the database you use. For PostgreSQL, it looks as follows (the parts spelled all-uppercased are _placeholders_ for your specific connection details): + +```no-lines +postgresql://USER:PASSWORD@HOST:PORT/DATABASE?schema=SCHEMA +``` + +Here's a short explanation of each component: + +- `USER`: The name of your database user +- `PASSWORD`: The password for your database user +- `HOST`: The name of your host name (for the local environment, it is `localhost`) +- `PORT`: The port where your database server is running (typically `5432` for PostgreSQL) +- `DATABASE`: The name of the [database](https://www.postgresql.org/docs/12/manage-ag-overview.html) +- `SCHEMA`: The name of the [schema](https://www.postgresql.org/docs/12/ddl-schemas.html) inside the database + +If you're unsure what to provide for the `schema` parameter for a PostgreSQL connection URL, you can probably omit it. In that case, the default schema name `public` will be used. + +As an example, for a PostgreSQL database hosted on Heroku, the [connection URL](/orm/reference/connection-urls) might look similar to this: + +```bash file=.env +DATABASE_URL="postgresql://opnmyfngbknppm:XXX@ec2-46-137-91-216.eu-west-1.compute.amazonaws.com:5432/d50rgmkqi2ipus?schema=hello-prisma" +``` + +When running PostgreSQL locally on macOS, your user and password as well as the database name _typically_ correspond to the current _user_ of your OS, e.g. assuming the user is called `janedoe`: + +```bash file=.env +DATABASE_URL="postgresql://janedoe:janedoe@localhost:5432/janedoe?schema=hello-prisma" +``` + + + + + Installation + + + + Using Prisma Migrate + + + diff --git a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-sqlserver.mdx b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-sqlserver.mdx new file mode 100644 index 0000000000..c279f6eb95 --- /dev/null +++ b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-sqlserver.mdx @@ -0,0 +1,66 @@ +--- +title: 'Connect your database' +metaTitle: 'Connect your database' +metaDescription: 'Connect your database to your project' +langSwitcher: ['typescript', 'node'] +dbSwitcher: ['postgresql', 'mysql', 'sqlserver', 'planetscale', 'cockroachdb'] +sidebar_class_name: hidden-sidebar +toc: false +--- + + + + +## Connect your database + +To connect your database, you need to set the `url` field of the `datasource` block in your Prisma schema to your database [connection URL](/orm/reference/connection-urls): +```prisma file=prisma/schema.prisma +datasource db { + provider = "sqlserver" + url = env("DATABASE_URL") +} +``` + +In this case, the `url` is [set via an environment variable](/orm/prisma-schema/overview#accessing-environment-variables-from-the-schema) which is defined in `.env`: + +The following example connection URL [uses SQL authentication](/orm/overview/databases/sql-server), but there are [other ways to format your connection URL](/orm/overview/databases/sql-server) + +```bash file=.env + DATABASE_URL="sqlserver://localhost:1433;database=mydb;user=sa;password=r@ndomP@$$w0rd;trustServerCertificate=true" +``` + + + +We recommend adding `.env` to your `.gitignore` file to prevent committing your environment variables. + + + +Adjust the connection URL to match your setup - see [Microsoft SQL Server connection URL](/orm/overview/databases/sql-server) for more information. + +> Make sure TCP/IP connections are enabled via [SQL Server Configuration Manager](https://docs.microsoft.com/en-us/sql/relational-databases/sql-server-configuration-manager) to avoid `No connection could be made because the target machine actively refused it. (os error 10061)` + + + + + Installation + + + + Using Prisma Migrate + + + diff --git a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-cockroachdb.mdx b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-cockroachdb.mdx new file mode 100644 index 0000000000..562fa61c81 --- /dev/null +++ b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-cockroachdb.mdx @@ -0,0 +1,90 @@ +--- +title: 'Connect your database' +metaTitle: 'Connect your database' +metaDescription: 'Connect your database to your project' +langSwitcher: ['typescript', 'node'] +dbSwitcher: ['postgresql', 'mysql', 'sqlserver', 'planetscale', 'cockroachdb'] +sidebar_class_name: hidden-sidebar +toc: false +--- + + + + +## Connect your database + +To connect your database, you need to set the `url` field of the `datasource` block in your Prisma schema to your database [connection URL](/orm/reference/connection-urls): + +```prisma file=prisma/schema.prisma +datasource db { + provider = "postgresql" + url = env("DATABASE_URL") +} +``` + +Note that the default schema created by `prisma init` uses PostgreSQL as the `provider`. For CockroachDB, you need to edit the `datasource` block to use the `cockroachdb` provider instead: + +```prisma file=prisma/schema.prisma highlight=2;edit +datasource db { + provider = "cockroachdb" + url = env("DATABASE_URL") +} +``` + +The `url` is [set via an environment variable](/orm/more/development-environment/environment-variables) which is defined in `.env`. You now need to adjust the connection URL to point to your own database. + +The [format of the connection URL](/orm/reference/connection-urls) for your database depends on the database you use. CockroachDB uses the PostgreSQL connection URL format, which has the following structure (the parts spelled all-uppercased are _placeholders_ for your specific connection details): + +```no-lines +postgresql://USER:PASSWORD@HOST:PORT/DATABASE?PARAMETERS +``` + +Here's a short explanation of each component: + +- `USER`: The name of your database user +- `PASSWORD`: The password for your database user +- `PORT`: The port where your database server is running. The default for CockroachDB is `26257`. +- `DATABASE`: The name of the database +- `PARAMETERS`: Any additional connection parameters. See the CockroachDB documentation [here](https://www.cockroachlabs.com/docs/stable/connection-parameters.html#additional-connection-parameters). + +For a [CockroachDB Serverless](https://www.cockroachlabs.com/docs/cockroachcloud/quickstart.html) or [Cockroach Dedicated](https://www.cockroachlabs.com/docs/cockroachcloud/quickstart-trial-cluster) database hosted on [CockroachDB Cloud](https://www.cockroachlabs.com/get-started-cockroachdb/), the [connection URL](/orm/reference/connection-urls) looks similar to this: + +```bash file=.env +DATABASE_URL="postgresql://:@..cockroachlabs.cloud:26257/defaultdb?sslmode=verify-full&sslrootcert=$HOME/.postgresql/root.crt&options=--" +``` + +To find your connection string on CockroachDB Cloud, click the 'Connect' button on the overview page for your database cluster, and select the 'Connection string' tab. + +For a [CockroachDB database hosted locally](https://www.cockroachlabs.com/docs/stable/secure-a-cluster.html), the [connection URL](/orm/reference/connection-urls) looks similar to this: + +```bash file=.env +DATABASE_URL="postgresql://root@localhost:26257?sslmode=disable" +``` + +Your connection string is displayed as part of the welcome text when starting CockroachDB from the command line. + + + + + Installation + + + + Using Prisma Migrate + + + diff --git a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-mysql.mdx b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-mysql.mdx new file mode 100644 index 0000000000..48dac05c49 --- /dev/null +++ b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-mysql.mdx @@ -0,0 +1,97 @@ +--- +title: 'Connect your database' +metaTitle: 'Connect your database' +metaDescription: 'Connect your database to your project' +langSwitcher: ['typescript', 'node'] +dbSwitcher: ['postgresql', 'mysql', 'sqlserver', 'planetscale', 'cockroachdb'] +sidebar_class_name: hidden-sidebar +toc: false +--- + + + + +## Connect your database + +To connect your database, you need to set the `url` field of the `datasource` block in your Prisma schema to your database [connection URL](/orm/reference/connection-urls): + +```prisma file=prisma/schema.prisma +datasource db { + provider = "postgresql" + url = env("DATABASE_URL") +} +``` + +Note that the default schema created by `prisma init` uses PostgreSQL, so you first need to switch the `provider` to `mysql`: + +```prisma file=prisma/schema.prisma highlight=2;edit +datasource db { + provider = "mysql" + url = env("DATABASE_URL") +} +``` + +In this case, the `url` is [set via an environment variable](/orm/prisma-schema/overview#accessing-environment-variables-from-the-schema) which is defined in `.env`: + +```bash file=.env +DATABASE_URL="mysql://johndoe:randompassword@localhost:3306/mydb" +``` + + + +We recommend adding `.env` to your `.gitignore` file to prevent committing your environment variables. + + + +You now need to adjust the connection URL to point to your own database. + +The [format of the connection URL](/orm/reference/connection-urls) for your database typically depends on the database you use. For MySQL, it looks as follows (the parts spelled all-uppercased are _placeholders_ for your specific connection details): + +```no-lines +mysql://USER:PASSWORD@HOST:PORT/DATABASE +``` + +Here's a short explanation of each component: + +- `USER`: The name of your database user +- `PASSWORD`: The password for your database user +- `PORT`: The port where your database server is running (typically `3306` for MySQL) +- `DATABASE`: The name of the [database](https://dev.mysql.com/doc/refman/8.0/en/creating-database.html) + +As an example, for a MySQL database hosted on AWS RDS, the [connection URL](/orm/reference/connection-urls) might look similar to this: + +```bash file=.env +DATABASE_URL="mysql://johndoe:XXX@mysql–instance1.123456789012.us-east-1.rds.amazonaws.com:3306/mydb" +``` + +When running MySQL locally, your connection URL typically looks similar to this: + +```bash file=.env +DATABASE_URL="mysql://root:randompassword@localhost:3306/mydb" +``` + + + + + Installation + + + + Using Prisma Migrate + + + diff --git a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-planetscale.mdx b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-planetscale.mdx new file mode 100644 index 0000000000..306f3c7256 --- /dev/null +++ b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-planetscale.mdx @@ -0,0 +1,124 @@ +--- +title: 'Connect your database' +metaTitle: 'Connect your database' +metaDescription: 'Connect your database to your project' +langSwitcher: ['typescript', 'node'] +dbSwitcher: ['postgresql', 'mysql', 'sqlserver', 'planetscale', 'cockroachdb'] +sidebar_class_name: hidden-sidebar +toc: false +--- + + + + +## Connect your database + +To connect your database, you need to set the `url` field of the `datasource` block in your Prisma schema to your database [connection URL](/orm/reference/connection-urls): + +```prisma file=prisma/schema.prisma +datasource db { + provider = "postgresql" + url = env("DATABASE_URL") +} +``` + +Note that the default schema created by `prisma init` uses PostgreSQL as the `provider`. For PlanetScale, you need to edit the `datasource` block to use the `mysql` provider instead: + +```prisma file=prisma/schema.prisma highlight=2;edit +datasource db { + provider = "mysql" + url = env("DATABASE_URL") +} +``` + +You will also need to set the relation mode type to `prisma` in order to [emulate foreign key constraints](/orm/overview/databases/planetscale#option-1-emulate-relations-in-prisma-client) in the `datasource` block: + +```prisma file=schema.prisma highlight=4;add +datasource db { + provider = "mysql" + url = env("DATABASE_URL") + relationMode = "prisma" +} +``` + +> **Note**: Since February 2024, you can alternatively [use foreign key constraints on a database-level in PlanetScale](/orm/overview/databases/planetscale#option-2-enable-foreign-key-constraints-in-the-planetscale-database-settings), which omits the need for setting `relationMode = "prisma"`. + +The `url` is [set via an environment variable](/orm/prisma-schema/overview#accessing-environment-variables-from-the-schema) which is defined in `.env`: + +```bash file=.env +DATABASE_URL="mysql://janedoe:mypassword@server.us-east-2.psdb.cloud/mydb?sslaccept=strict" +``` + +You now need to adjust the connection URL to point to your own database. + +The [format of the connection URL](/orm/reference/connection-urls) for your database typically depends on the database you use. PlanetScale uses the MySQL connection URL format, which has the following structure (the parts spelled all-uppercased are _placeholders_ for your specific connection details): + +```no-lines +mysql://USER:PASSWORD@HOST:PORT/DATABASE +``` + +Here's a short explanation of each component: + +- `USER`: The name of your database user +- `PASSWORD`: The password for your database user +- `PORT`: The port where your database server is running (typically `3306` for MySQL) +- `DATABASE`: The name of the [database](https://dev.mysql.com/doc/refman/8.0/en/creating-database.html) + +For a database hosted with PlanetScale, the [connection URL](/orm/reference/connection-urls) looks similar to this: + +```bash file=.env +DATABASE_URL="mysql://myusername:mypassword@server.us-east-2.psdb.cloud/mydb?sslaccept=strict" +``` + +The connection URL for a given database branch can be found from your PlanetScale account by going to the overview page for the branch and selecting the 'Connect' dropdown. In the 'Passwords' section, generate a new password and select 'Prisma' to get the Prisma format for the connection URL. + +
+Alternative method: connecting using the PlanetScale CLI + +Alternatively, you can connect to your PlanetScale database server using the [PlanetScale CLI](https://docs.planetscale.com/reference/planetscale-environment-setup), and use a local connection URL. In this case the connection URL will look like this: + +```bash file=.env +DATABASE_URL="mysql://root@localhost:PORT/mydb" +``` + + + +We recommend adding `.env` to your `.gitignore` file to prevent committing your environment variables. + + + +To connect to your branch, use the following command: + +```terminal +pscale connect prisma-test branchname --port PORT +``` + +The `--port` flag can be omitted if you are using the default port `3306`. + +
+ + + + + Installation + + + + Creating the database schema + + + diff --git a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-postgresql.mdx b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-postgresql.mdx new file mode 100644 index 0000000000..0456a00230 --- /dev/null +++ b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-postgresql.mdx @@ -0,0 +1,90 @@ +--- +title: 'Connect your database' +metaTitle: 'Connect your database' +metaDescription: 'Connect your database to your project' +langSwitcher: ['typescript', 'node'] +dbSwitcher: ['postgresql', 'mysql', 'sqlserver', 'planetscale', 'cockroachdb'] +toc: false +--- + + + +## Connect your database + +To connect your database, you need to set the `url` field of the `datasource` block in your Prisma schema to your database [connection URL](/orm/reference/connection-urls): + +```prisma file=prisma/schema.prisma +datasource db { + provider = "postgresql" + url = env("DATABASE_URL") +} +``` + +In this case, the `url` is [set via an environment variable](/orm/more/development-environment/environment-variables) which is defined in `.env`: + +```bash file=.env +DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public" +``` + + + +We recommend adding `.env` to your `.gitignore` file to prevent committing your environment variables. + + + +You now need to adjust the connection URL to point to your own database. + +The [format of the connection URL](/orm/reference/connection-urls) for your database depends on the database you use. For PostgreSQL, it looks as follows (the parts spelled all-uppercased are _placeholders_ for your specific connection details): + +```no-lines +postgresql://USER:PASSWORD@HOST:PORT/DATABASE?schema=SCHEMA +``` + +Here's a short explanation of each component: + +- `USER`: The name of your database user +- `PASSWORD`: The password for your database user +- `HOST`: The name of your host name (for the local environment, it is `localhost`) +- `PORT`: The port where your database server is running (typically `5432` for PostgreSQL) +- `DATABASE`: The name of the [database](https://www.postgresql.org/docs/12/manage-ag-overview.html) +- `SCHEMA`: The name of the [schema](https://www.postgresql.org/docs/12/ddl-schemas.html) inside the database + +If you're unsure what to provide for the `schema` parameter for a PostgreSQL connection URL, you can probably omit it. In that case, the default schema name `public` will be used. + +As an example, for a PostgreSQL database hosted on Heroku, the [connection URL](/orm/reference/connection-urls) might look similar to this: + +```bash file=.env +DATABASE_URL="postgresql://opnmyfngbknppm:XXX@ec2-46-137-91-216.eu-west-1.compute.amazonaws.com:5432/d50rgmkqi2ipus?schema=hello-prisma" +``` + +When running PostgreSQL locally on macOS, your user and password as well as the database name _typically_ correspond to the current _user_ of your OS, e.g. assuming the user is called `janedoe`: + +```bash file=.env +DATABASE_URL="postgresql://janedoe:janedoe@localhost:5432/janedoe?schema=hello-prisma" +``` + + + + + Installation + + + + Using Prisma Migrate + + + diff --git a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-sqlserver.mdx b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-sqlserver.mdx new file mode 100644 index 0000000000..0a3c76ab76 --- /dev/null +++ b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-sqlserver.mdx @@ -0,0 +1,67 @@ +--- +title: 'Connect your database' +metaTitle: 'Connect your database' +metaDescription: 'Connect your database to your project' +langSwitcher: ['typescript', 'node'] +sidebar_class_name: hidden-sidebar +dbSwitcher: ['postgresql', 'mysql', 'sqlserver', 'planetscale', 'cockroachdb'] +toc: false +--- + + + +## Connect your database + +To connect your database, you need to set the `url` field of the `datasource` block in your Prisma schema to your database [connection URL](/orm/reference/connection-urls): + +```prisma file=prisma/schema.prisma +datasource db { + provider = "sqlserver" + url = env("DATABASE_URL") +} +``` + +In this case, the `url` is [set via an environment variable](/orm/prisma-schema/overview#accessing-environment-variables-from-the-schema) which is defined in `.env`: + +The following example connection URL [uses SQL authentication](/orm/overview/databases/sql-server), but there are [other ways to format your connection URL](/orm/overview/databases/sql-server) + +```bash file=.env + DATABASE_URL="sqlserver://localhost:1433;database=mydb;user=sa;password=r@ndomP@$$w0rd;trustServerCertificate=true" +``` + + + +We recommend adding `.env` to your `.gitignore` file to prevent committing your environment variables. + + + +Adjust the connection URL to match your setup - see [Microsoft SQL Server connection URL](/orm/overview/databases/sql-server) for more information. + +> Make sure TCP/IP connections are enabled via [SQL Server Configuration Manager](https://docs.microsoft.com/en-us/sql/relational-databases/sql-server-configuration-manager) to avoid `No connection could be made because the target machine actively refused it. (os error 10061)` + + + + + + Installation + + + + Using Prisma Migrate + + + diff --git a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database.mdx b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database.mdx deleted file mode 100644 index bc305748d8..0000000000 --- a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database.mdx +++ /dev/null @@ -1,550 +0,0 @@ ---- -title: 'Connect your database' -metaTitle: 'Connect your database' -metaDescription: 'Connect your database to your project' -langSwitcher: ['typescript', 'node'] -dbSwitcher: ['postgresql', 'mysql', 'sqlserver', 'planetscale', 'cockroachdb'] -toc: false ---- - -## Connect your database - -To connect your database, you need to set the `url` field of the `datasource` block in your Prisma schema to your database [connection URL](/orm/reference/connection-urls): - - - -```prisma file=prisma/schema.prisma -datasource db { - provider = "postgresql" - url = env("DATABASE_URL") -} -``` - -In this case, the `url` is [set via an environment variable](/orm/more/development-environment/environment-variables) which is defined in `.env`: - -```bash file=.env -DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public" -``` - - - -We recommend adding `.env` to your `.gitignore` file to prevent committing your environment variables. - - - -You now need to adjust the connection URL to point to your own database. - -The [format of the connection URL](/orm/reference/connection-urls) for your database depends on the database you use. For PostgreSQL, it looks as follows (the parts spelled all-uppercased are _placeholders_ for your specific connection details): - -```no-lines -postgresql://USER:PASSWORD@HOST:PORT/DATABASE?schema=SCHEMA -``` - -Here's a short explanation of each component: - -- `USER`: The name of your database user -- `PASSWORD`: The password for your database user -- `HOST`: The name of your host name (for the local environment, it is `localhost`) -- `PORT`: The port where your database server is running (typically `5432` for PostgreSQL) -- `DATABASE`: The name of the [database](https://www.postgresql.org/docs/12/manage-ag-overview.html) -- `SCHEMA`: The name of the [schema](https://www.postgresql.org/docs/12/ddl-schemas.html) inside the database - -If you're unsure what to provide for the `schema` parameter for a PostgreSQL connection URL, you can probably omit it. In that case, the default schema name `public` will be used. - -As an example, for a PostgreSQL database hosted on Heroku, the [connection URL](/orm/reference/connection-urls) might look similar to this: - -```bash file=.env -DATABASE_URL="postgresql://opnmyfngbknppm:XXX@ec2-46-137-91-216.eu-west-1.compute.amazonaws.com:5432/d50rgmkqi2ipus?schema=hello-prisma" -``` - -When running PostgreSQL locally on macOS, your user and password as well as the database name _typically_ correspond to the current _user_ of your OS, e.g. assuming the user is called `janedoe`: - -```bash file=.env -DATABASE_URL="postgresql://janedoe:janedoe@localhost:5432/janedoe?schema=hello-prisma" -``` - - - - - -```prisma file=prisma/schema.prisma -datasource db { - provider = "postgresql" - url = env("DATABASE_URL") -} -``` - -Note that the default schema created by `prisma init` uses PostgreSQL, so you first need to switch the `provider` to `mysql`: - -```prisma file=prisma/schema.prisma highlight=2;edit -datasource db { - provider = "mysql" - url = env("DATABASE_URL") -} -``` - -In this case, the `url` is [set via an environment variable](/orm/prisma-schema/overview#accessing-environment-variables-from-the-schema) which is defined in `.env`: - -```bash file=.env -DATABASE_URL="mysql://johndoe:randompassword@localhost:3306/mydb" -``` - - - -We recommend adding `.env` to your `.gitignore` file to prevent committing your environment variables. - - - -You now need to adjust the connection URL to point to your own database. - -The [format of the connection URL](/orm/reference/connection-urls) for your database typically depends on the database you use. For MySQL, it looks as follows (the parts spelled all-uppercased are _placeholders_ for your specific connection details): - -```no-lines -mysql://USER:PASSWORD@HOST:PORT/DATABASE -``` - -Here's a short explanation of each component: - -- `USER`: The name of your database user -- `PASSWORD`: The password for your database user -- `PORT`: The port where your database server is running (typically `3306` for MySQL) -- `DATABASE`: The name of the [database](https://dev.mysql.com/doc/refman/8.0/en/creating-database.html) - -As an example, for a MySQL database hosted on AWS RDS, the [connection URL](/orm/reference/connection-urls) might look similar to this: - -```bash file=.env -DATABASE_URL="mysql://johndoe:XXX@mysql–instance1.123456789012.us-east-1.rds.amazonaws.com:3306/mydb" -``` - -When running MySQL locally, your connection URL typically looks similar to this: - -```bash file=.env -DATABASE_URL="mysql://root:randompassword@localhost:3306/mydb" -``` - - - - - -```prisma file=prisma/schema.prisma -datasource db { - provider = "postgresql" - url = env("DATABASE_URL") -} -``` - -Note that the default schema created by `prisma init` uses PostgreSQL as the `provider`. For PlanetScale, you need to edit the `datasource` block to use the `mysql` provider instead: - -```prisma file=prisma/schema.prisma highlight=2;edit -datasource db { - provider = "mysql" - url = env("DATABASE_URL") -} -``` - -You will also need to [set the relation mode type to `prisma`](/orm/prisma-schema/data-model/relations/relation-mode#emulate-relations-in-prisma-orm-with-the-prisma-relation-mode) in the `datasource` block: - -```prisma file=schema.prisma highlight=4;add -datasource db { - provider = "mysql" - url = env("DATABASE_URL") - relationMode = "prisma" -} -``` - -The `url` is [set via an environment variable](/orm/prisma-schema/overview#accessing-environment-variables-from-the-schema) which is defined in `.env`: - -```bash file=.env -DATABASE_URL="mysql://janedoe:mypassword@server.us-east-2.psdb.cloud/mydb?sslaccept=strict" -``` - -You now need to adjust the connection URL to point to your own database. - -The [format of the connection URL](/orm/reference/connection-urls) for your database typically depends on the database you use. PlanetScale uses the MySQL connection URL format, which has the following structure (the parts spelled all-uppercased are _placeholders_ for your specific connection details): - -```no-lines -mysql://USER:PASSWORD@HOST:PORT/DATABASE -``` - -Here's a short explanation of each component: - -- `USER`: The name of your database user -- `PASSWORD`: The password for your database user -- `PORT`: The port where your database server is running (typically `3306` for MySQL) -- `DATABASE`: The name of the [database](https://dev.mysql.com/doc/refman/8.0/en/creating-database.html) - -For a database hosted with PlanetScale, the [connection URL](/orm/reference/connection-urls) looks similar to this: - -```bash file=.env -DATABASE_URL="mysql://myusername:mypassword@server.us-east-2.psdb.cloud/mydb?sslaccept=strict" -``` - -The connection URL for a given database branch can be found from your PlanetScale account by going to the overview page for the branch and selecting the 'Connect' dropdown. In the 'Passwords' section, generate a new password and select 'Prisma' to get the Prisma format for the connection URL. - -
-Alternative method: connecting using the PlanetScale CLI - -Alternatively, you can connect to your PlanetScale database server using the [PlanetScale CLI](https://docs.planetscale.com/reference/planetscale-environment-setup), and use a local connection URL. In this case the connection URL will look like this: - -```bash file=.env -DATABASE_URL="mysql://root@localhost:PORT/mydb" -``` - - - -We recommend adding `.env` to your `.gitignore` file to prevent committing your environment variables. - - - -To connect to your branch, use the following command: - -```terminal -pscale connect prisma-test branchname --port PORT -``` - -The `--port` flag can be omitted if you are using the default port `3306`. - -
- - - - - -```prisma file=prisma/schema.prisma -datasource db { - provider = "sqlserver" - url = env("DATABASE_URL") -} -``` - -In this case, the `url` is [set via an environment variable](/orm/prisma-schema/overview#accessing-environment-variables-from-the-schema) which is defined in `.env`: - -The following example connection URL [uses SQL authentication](/orm/overview/databases/sql-server), but there are [other ways to format your connection URL](/orm/overview/databases/sql-server) - -```bash file=.env - DATABASE_URL="sqlserver://localhost:1433;database=mydb;user=sa;password=r@ndomP@$$w0rd;trustServerCertificate=true" -``` - - - -We recommend adding `.env` to your `.gitignore` file to prevent committing your environment variables. - - - -Adjust the connection URL to match your setup - see [Microsoft SQL Server connection URL](/orm/overview/databases/sql-server) for more information. - -> Make sure TCP/IP connections are enabled via [SQL Server Configuration Manager](https://docs.microsoft.com/en-us/sql/relational-databases/sql-server-configuration-manager) to avoid `No connection could be made because the target machine actively refused it. (os error 10061)` - - - - - -```prisma file=prisma/schema.prisma -datasource db { - provider = "postgresql" - url = env("DATABASE_URL") -} -``` - -Note that the default schema created by `prisma init` uses PostgreSQL as the `provider`. For CockroachDB, you need to edit the `datasource` block to use the `cockroachdb` provider instead: - -```prisma file=prisma/schema.prisma highlight=2;edit -datasource db { - provider = "cockroachdb" - url = env("DATABASE_URL") -} -``` - -The `url` is [set via an environment variable](/orm/more/development-environment/environment-variables) which is defined in `.env`. You now need to adjust the connection URL to point to your own database. - -The [format of the connection URL](/orm/reference/connection-urls) for your database depends on the database you use. CockroachDB uses the PostgreSQL connection URL format, which has the following structure (the parts spelled all-uppercased are _placeholders_ for your specific connection details): - -```no-lines -postgresql://USER:PASSWORD@HOST:PORT/DATABASE?PARAMETERS -``` - -Here's a short explanation of each component: - -- `USER`: The name of your database user -- `PASSWORD`: The password for your database user -- `PORT`: The port where your database server is running. The default for CockroachDB is `26257`. -- `DATABASE`: The name of the database -- `PARAMETERS`: Any additional connection parameters. See the CockroachDB documentation [here](https://www.cockroachlabs.com/docs/stable/connection-parameters.html#additional-connection-parameters). - -For a [CockroachDB Serverless](https://www.cockroachlabs.com/docs/cockroachcloud/quickstart.html) or [Cockroach Dedicated](https://www.cockroachlabs.com/docs/cockroachcloud/quickstart-trial-cluster) database hosted on [CockroachDB Cloud](https://www.cockroachlabs.com/get-started-cockroachdb/), the [connection URL](/orm/reference/connection-urls) looks similar to this: - -```bash file=.env -DATABASE_URL="postgresql://:@..cockroachlabs.cloud:26257/defaultdb?sslmode=verify-full&sslrootcert=$HOME/.postgresql/root.crt&options=--" -``` - -To find your connection string on CockroachDB Cloud, click the 'Connect' button on the overview page for your database cluster, and select the 'Connection string' tab. - -For a [CockroachDB database hosted locally](https://www.cockroachlabs.com/docs/stable/secure-a-cluster.html), the [connection URL](/orm/reference/connection-urls) looks similar to this: - -```bash file=.env -DATABASE_URL="postgresql://root@localhost:26257?sslmode=disable" -``` - -Your connection string is displayed as part of the welcome text when starting CockroachDB from the command line. - - - - - - - - - Installation - - - - Using Prisma Migrate - - - - - - - - - - - - Installation - - - - Using Prisma Migrate - - - - - - - - - - - - Installation - - - - Creating the database schema - - - - - - - - - - - - Installation - - - - Using Prisma Migrate - - - - - - - - - - - - Installation - - - - Using Prisma Migrate - - - - - - - - - - - - Installation - - - - Using Prisma Migrate - - - - - - - - - - - - Installation - - - - Using Prisma Migrate - - - - - - - - - - - - Installation - - - - Creating the database schema - - - - - - - - - - - - Installation - - - - Using Prisma Migrate - - - - - - - - - - - - Installation - - - - Using Prisma Migrate - - - - - diff --git a/sidebars.ts b/sidebars.ts index 0d8256c654..dcada4d4f2 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -334,4 +334,4 @@ const sidebars: SidebarsConfig = { }], }; -export default sidebars; +export default sidebars; \ No newline at end of file diff --git a/src/components/collapsible.tsx b/src/components/collapsible.tsx new file mode 100644 index 0000000000..0b8677c585 --- /dev/null +++ b/src/components/collapsible.tsx @@ -0,0 +1,99 @@ +import * as theme from '../css/primitives' +import * as React from 'react' +import styled from 'styled-components' + +// import ArrowRight from '../../icons/ArrowRight' + +type CollapseProps = React.ReactNode +let index = 0 + +const getRemainingChildren = (children: any) => + children.filter((child: any) => !(child.props && child.props.originalType === 'summary')) + +//@ts-ignore +const CollapseBox = ({ children, ...props }: CollapseProps) => { + const titleChild = + children && children.find((child: any) => child.props && child.props.originalType === 'summary') + const title = titleChild && titleChild.props.children + return ( + + + + {/* */} + + {getRemainingChildren(children)} + + + ) +} + +export default CollapseBox + +const Wrapper = styled.div` + margin-bottom: ${theme.space[16]}; +` + +const Tab = styled.div` + position: relative; + overflow: hidden; + .tab-content { + transition: max-height 0.35s; + } + &:before { + content: ''; + position: absolute; + width: 8px; + height: 100%; + left: 0px; + background: ${theme.colors.gray[100]}; + border-radius: 4px; + } + p { + margin-top: ${theme.space[8]}; + } +` + +const Label = styled.label` + position: relative; + display: block; + color: #0c344b; + font-weight: 600; + line-height: 1.5; + padding-left: ${theme.space[32]}; + cursor: pointer; + @media (prefers-color-scheme: dark) { + color: ${theme.colors.gray[100]}; + } +` + +const TabContent = styled.div` + max-height: 0; + overflow: hidden; + color: ${theme.colors.gray[800]}; + transition: max-height 0.35s, padding 0.35s; + padding-left: 36px; + padding-bottom: 0; + @media (prefers-color-scheme: dark) { + color: ${theme.colors.gray[100]}; + } +` + +const Input = styled.input` + position: absolute; + opacity: 0; + z-index: -1; + &:checked ~ .tab-content { + max-height: 2000px; + padding-bottom: ${theme.space[8]}; + } +` + +// const StyledArrow = styled(ArrowRight)` +// position: absolute; +// left: 18px; +// top: 8px; +// transition: transform 0.15s; +// input:checked + & { +// transform: rotate(90deg); +// } +// ` diff --git a/src/components/shortcodes/select.tsx b/src/components/shortcodes/select.tsx new file mode 100644 index 0000000000..d2d8684a31 --- /dev/null +++ b/src/components/shortcodes/select.tsx @@ -0,0 +1,91 @@ +import * as React from 'react' +import Select, { components } from 'react-select' +import styled from 'styled-components' +import * as theme from '../../css/primitives' + +interface SelectProps { + items: any[] + onChange: (item: any) => void + selectedItem: any + width?: number + DropdownIndicator: any + IndicatorSeperator: any + Option: any + SingleValue: any +} + +const SelectComponent = (props: SelectProps) => { + const { + selectedItem, + onChange, + items, + DropdownIndicator, + IndicatorSeperator, + Option, + SingleValue, + } = props + const width = props.width || 160 + + const handleChange = (newValue: any) => { + onChange({ technology: newValue.value }) + } + + const options = items.map((it) => ({ value: it.technology, label: it.technology })) + + const selectedOption = options.filter((ff) => ff.value === selectedItem.technology) + + const SelectContainer = (props: any) => { + return ( + + {props.children} + + ) + } + return ( + + , - typescript: ``, //, - mysql: ``, //, - postgresql: ``, //, - sqlite: ``, //, - mongodb: ``, //, - sqlserver: ``, //, - planetscale: ``, //, - cockroachdb: ``, //, + node: `/img/technologies/nodejs.svg`, //, + typescript: `/img/technologies/typescript.svg`, //, + mysql: `/img/technologies/mysql.svg`, //, + postgresql: `/img/technologies/postgresql.svg`, //, + sqlite: `/img/technologies/sqlite.svg`, //, + mongodb: `/img/technologies/mongodb.svg`, //, + sqlserver: `/img/technologies/sqlserver.svg`, //, + planetscale: `/img/technologies/planetscale.svg`, //, + cockroachdb: `/img/technologies/cockroachdb.svg`, //, } const technologyTypes = { @@ -77,7 +77,7 @@ const TechnologySwitch = ({ type, onChangeTech, technologies, defaultTech, url, return ( - {icons[item.technology]} + {technologyNames[item.technology]} @@ -140,21 +140,28 @@ const TechnologySwitch = ({ type, onChangeTech, technologies, defaultTech, url, const Container = styled.div` margin: 16px 0 0 0; - width: 180px; + width: 198px; text-overflow: ellipsis; @media only screen and (max-width: 767px) { margin: 8px 0 0; width: 100%; } + .tech-select__input { + user-select: none !important; + caret-color: transparent; + } ` const SelectItem = styled.div` - display: flex; - align-items: center; - - svg { - margin-right: 10px; + a { + display: flex; + align-items: center; + + img { + margin-right: 10px; + margin-bottom: 0; + } } ` diff --git a/src/css/custom.css b/src/css/custom.css index 38410d3fec..39d0fd0f72 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1053,7 +1053,7 @@ footer > .container { font-style: normal; font-weight: bold; letter-spacing: -0.02em; - color: rgb(26, 32, 44); + color: var(--primary-font-color); margin: 4px 0px 0px; font-size: 2.5rem !important; --ifm-h1-font-size: 2.5rem !important; @@ -1064,36 +1064,38 @@ footer > .container { padding-bottom: 2px; padding-top: 2px; visibility: visible; - color: rgb(51, 51, 51) !important; + /* color: rgb(51, 51, 51); */ + /* color: var(--gray-900); */ + color: inherit; flex: 1 1 auto; display: inline-grid; grid-area: 1 / 1 / 2 / 3; grid-template-columns: 0px min-content; box-sizing: border-box; - /* background: pink !important; */ } -.tech-select__menu { - color: var(--gray-800); -} .tech-select__option a { - color: var(--gray-800); - background-color: var(--gray-100); + color: inherit !important; background: transparent; width: 100%; } -.tech-select__option a:hover { - background: transparent; -} .tech-select__option { - background: transparent !important; + color: var(--gray-800); + background: transparent; + transition: none !important; cursor: pointer; } -.tech-select__option:hover a { - color: var(--gray-700); - background-color: var(--gray-100); +.tech-select__option:hover{ + color: var(--gray-100) !important; + background-color: #2584ff; +} + +.tech-select__option--is-selected { + color: var(--gray-100); + transition: none !important; + background-color: #2584ff; } @media (prefers-color-scheme: dark) { @@ -1118,6 +1120,58 @@ footer > .container { } } } + [data-theme='light'] { + .select-container { + .tech-select__control { + background-color: transparent; + border-color: hsl(0, 0%, 80%); + } + .tech-select__single-value { + color: rgb(51, 51, 51); + } + .tech-select__menu { + background-color: transparent; + + .tech-select__option { + background-color: var(--gray-100); + color: rgb(51, 51, 51); + &:hover { + background-color: #2584ff; + color: var(--gray-100); + } + } + .tech-select__option--is-selected { + color: var(--gray-100); + background-color: #2584ff; + } + } + } + } +} + +[data-theme='dark'] { + .select-container { + .tech-select__control { + background-color: var(--gray-800); + border-color: var(--gray-700); + } + .tech-select__single-value { + color: var(--gray-100); + } + .tech-select__menu { + background-color: var(--gray-800); + + .tech-select__option { + background-color: var(--gray-800); + color: var(--gray-100); + &:hover { + background-color: var(--gray-700); + color: var(--gray-100); + } + } + } + } + } .select-container { > div:first-child { From d591183a2688a0af608bf61132620a1e2904ee1e Mon Sep 17 00:00:00 2001 From: Prisma Date: Wed, 27 Mar 2024 11:06:39 +0000 Subject: [PATCH 5/6] mobile ver --- src/css/custom.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/css/custom.css b/src/css/custom.css index 39d0fd0f72..130d3540fd 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1042,6 +1042,10 @@ footer > .container { display: flex; justify-content: space-between; align-items: start; + flex-direction: column; + @media (min-width: 996px) { + flex-direction: row; + } } .theme-doc-markdown > header { From cb1dce9caf641e455d8d96a2e6007d7ac922699f Mon Sep 17 00:00:00 2001 From: Prisma Date: Wed, 27 Mar 2024 12:52:06 +0000 Subject: [PATCH 6/6] fix double title --- docs/100-getting-started/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/100-getting-started/index.mdx b/docs/100-getting-started/index.mdx index 897ac78c9f..16e3f377ef 100644 --- a/docs/100-getting-started/index.mdx +++ b/docs/100-getting-started/index.mdx @@ -20,7 +20,7 @@ import { SquareLogo, } from '@site/src/components/GettingStarted'; - +