feat: techswitcher page poc (#5740)

* add new pages for specific techs for techswitcher

* add children to top block

* update techswitcher title/topblock

* update dark mode + icons

* mobile ver

* fix double title

docs/100-getting-started/01-quickstart.mdx

@@ -5,7 +5,7 @@ metaDescription: 'Get started with Prisma ORM in 5 minutes. You will learn how t
 search: true
 ---
 
-<TopBlock>
+<TopBlock title={frontMatter.title}>
 
 In this Quickstart guide, you'll learn how to get started with Prisma ORM from scratch using a plain **TypeScript** project and a local **SQLite** database file. It covers **data modeling**, **migrations** and **querying** a database.
 

docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-cockroachdb.mdx

@@ -0,0 +1,91 @@
+---
+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
+---
+
+
+<TopBlock
+  title={frontMatter.title}
+  langSwitcher={['typescript', 'node']}
+  dbSwitcher={['postgresql', 'mysql', 'sqlserver', 'planetscale', 'cockroachdb']}
+  slug={"/getting-started/setup-prisma/start-from-scratch/relational-databases/connect-your-database-"}
+ />
+
+## 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://<myusername>:<mypassword>@<short-id>.<region>.cockroachlabs.cloud:26257/defaultdb?sslmode=verify-full&sslrootcert=$HOME/.postgresql/root.crt&options=--<mycluster>"
+```
+
+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.
+
+<NavigationLinksContainer>
+
+<ButtonLink
+  color="dark"
+  type="primary"
+  href="/getting-started/setup-prisma/start-from-scratch/relational-databases-node-cockroachdb"
+  arrowLeft
+>
+  Installation
+</ButtonLink>
+
+<ButtonLink
+  color="dark"
+  type="primary"
+  href="./using-prisma-migrate-node-cockroachdb"
+  arrow
+>
+  Using Prisma Migrate
+</ButtonLink>
+
+</NavigationLinksContainer>

docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-mysql.mdx

@@ -0,0 +1,98 @@
+---
+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
+---
+
+
+<TopBlock
+  title={frontMatter.title}
+  langSwitcher={['typescript', 'node']}
+  dbSwitcher={['postgresql', 'mysql', 'sqlserver', 'planetscale', 'cockroachdb']}
+  slug={"/getting-started/setup-prisma/start-from-scratch/relational-databases/connect-your-database-"}
+ />
+
+## 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"
+```
+
+<Admonition type="info">
+
+We recommend adding `.env` to your `.gitignore` file to prevent committing your environment variables.
+
+</Admonition>
+
+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"
+```
+
+<NavigationLinksContainer>
+
+<ButtonLink
+  color="dark"
+  type="primary"
+  href="/getting-started/setup-prisma/start-from-scratch/relational-databases-node-mysql"
+  arrowLeft
+>
+  Installation
+</ButtonLink>
+
+<ButtonLink
+  color="dark"
+  type="primary"
+  href="./using-prisma-migrate-node-mysql"
+  arrow
+>
+  Using Prisma Migrate
+</ButtonLink>
+
+</NavigationLinksContainer>

docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-planetscale.mdx

@@ -0,0 +1,126 @@
+---
+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
+---
+
+
+<TopBlock
+  title={frontMatter.title}
+  langSwitcher={['typescript', 'node']}
+  dbSwitcher={['postgresql', 'mysql', 'sqlserver', 'planetscale', 'cockroachdb']}
+  slug={"/getting-started/setup-prisma/start-from-scratch/relational-databases/connect-your-database-"}
+ />
+
+## 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:[email protected]/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:[email protected]/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.
+
+<details>
+<summary>Alternative method: connecting using the PlanetScale CLI</summary>
+
+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"
+```
+
+<Admonition type="info">
+
+We recommend adding `.env` to your `.gitignore` file to prevent committing your environment variables.
+
+</Admonition>
+
+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`.
+
+</details>
+
+<NavigationLinksContainer>
+
+<ButtonLink
+  color="dark"
+  type="primary"
+  href="/getting-started/setup-prisma/start-from-scratch/relational-databases-node-planetscale"
+  arrowLeft
+>
+  Installation
+</ButtonLink>
+
+<ButtonLink
+  color="dark"
+  type="primary"
+  href="./using-prisma-migrate-node-planetscale"
+  arrow
+>
+  Creating the database schema
+</ButtonLink>
+
+</NavigationLinksContainer>
+