fix: (docusaurus) fix remaining UI (#5755)

* fix kapa icon issue * add FA icons to footer * Update preview + duration badges * Fix menu caret * update active color * update footer to look exactly like prod * update footer multiple other points * update sidebar + padding for main content * update button and icon * push admonition * add subsections * update search input styling * fix breadcrumbs bug * update subsections * fix breadcrumbs
prisma · Apr 10, 2024 · bbb8812 · bbb8812
1 parent 4f87eee
commit bbb8812
Show file tree

Hide file tree

Showing 36 changed files with 1,274 additions and 151 deletions.
diff --git a/docs/100-getting-started/01-quickstart.mdx b/docs/100-getting-started/01-quickstart.mdx
@@ -1,6 +1,5 @@
 ---
 title: 'Quickstart'
-duration: '5 min'
 metaTitle: 'Quickstart with TypeScript & SQLite'
 metaDescription: 'Get started with Prisma ORM in 5 minutes. You will learn how to send queries to a SQLite database in a plain TypeScript script using Prisma Client.'
 search: true

diff --git a/...arted/02-setup-prisma/100-start-from-scratch/110-relational-databases/index.mdx b/...arted/02-setup-prisma/100-start-from-scratch/110-relational-databases/index.mdx
@@ -2,7 +2,6 @@
 title: 'Relational databases'
 metaTitle: 'Start from scratch with relational databases (15 min)'
 metaDescription: 'Learn how to create a new Node.js or TypeScript project from scratch by connecting Prisma to your relational database and generating a Prisma Client for database access.'
-duration: '15 min'
 toc: false
 langSwitcher: ['typescript', 'node']
 dbSwitcher: ['postgresql', 'mysql', 'sqlserver', 'planetscale', 'cockroachdb']

diff --git a/...00-getting-started/02-setup-prisma/100-start-from-scratch/120-mongodb/index.mdx b/...00-getting-started/02-setup-prisma/100-start-from-scratch/120-mongodb/index.mdx
@@ -2,7 +2,6 @@
 title: 'MongoDB'
 metaTitle: 'Start from scratch with MongoDB (15 min)'
 metaDescription: 'Learn how to create a new Node.js or TypeScript project from scratch by connecting Prisma to your MongoDB database and generating a Prisma Client for database access.'
-duration: '15 min'
 toc: false
 langSwitcher: ['typescript', 'node']
 dbSwitcher: ['mongodb']

diff --git a/.../02-setup-prisma/200-add-to-existing-project/110-relational-databases/index.mdx b/.../02-setup-prisma/200-add-to-existing-project/110-relational-databases/index.mdx
@@ -2,7 +2,6 @@
 title: 'Relational databases'
 metaTitle: 'Add Prisma to an existing project that uses a relational database (15 min)'
 metaDescription: 'Learn how to add Prisma to an existing Node.js or TypeScript project by connecting it to your relational database and generating a Prisma Client for database access.'
-duration: '15 min'
 toc: false
 langSwitcher: ['typescript', 'node']
 dbSwitcher: ['postgresql', 'mysql', 'sqlserver', 'planetscale', 'cockroachdb']

diff --git a/...tting-started/02-setup-prisma/200-add-to-existing-project/120-mongodb/index.mdx b/...tting-started/02-setup-prisma/200-add-to-existing-project/120-mongodb/index.mdx
@@ -2,7 +2,6 @@
 title: 'MongoDB'
 metaTitle: 'Add Prisma to an existing MongoDB project (15 min)'
 metaDescription: 'Learn how to add Prisma to an existing Node.js or TypeScript project by connecting it to your MongoDB database and generating a Prisma Client for database access.'
-duration: '15 min'
 toc: false
 langSwitcher: ['typescript', 'node']
 dbSwitcher: ['mongodb']

diff --git a/docs/100-getting-started/index.mdx b/docs/100-getting-started/index.mdx
@@ -5,6 +5,7 @@ metaDescription: 'Build data-driven applications with ease using Prisma ORM, add
 hide_title: true
 tocDepth: 1
 sidebar_position: 0
+sidebar_class_name: first-title
 ---
 
 import {

diff --git a/docs/200-orm/100-prisma-schema/20-data-model/40-views.mdx b/docs/200-orm/100-prisma-schema/20-data-model/40-views.mdx
@@ -3,7 +3,7 @@ title: 'Views'
 metaTitle: 'How to include views in your Prisma schema'
 metaDescription: 'How to include views in your Prisma schema'
 hidePage: false
-preview: true
+sidebar_class_name: preview-badge
 tocDepth: 3
 ---
 

diff --git a/docs/200-orm/100-prisma-schema/80-postgresql-extensions.mdx b/docs/200-orm/100-prisma-schema/80-postgresql-extensions.mdx
@@ -2,7 +2,7 @@
 title: 'PostgreSQL extensions'
 metaTitle: 'How to represent PostgreSQL extensions in your Prisma schema'
 metaDescription: 'How to represent PostgreSQL extensions in your Prisma scheme, introspect extensions in your database, and apply changes to extensions with Prisma Migrate'
-preview: true
+sidebar_class_name: preview-badge
 tocDepth: 3
 ---
 

diff --git a/docs/200-orm/200-prisma-client/000-setup-and-configuration/005-introduction.mdx b/docs/200-orm/200-prisma-client/000-setup-and-configuration/005-introduction.mdx
@@ -4,11 +4,17 @@ metaTitle: 'Introduction to Prisma Client'
 metaDescription: 'Learn how to set up Prisma Client.'
 ---
 
+
+import {
+  Icon
+} from '@site/src/components/Icon';
+
 <TopBlock>
 
 Prisma Client is an auto-generated and type-safe query builder that's _tailored_ to your data. The easiest way to get started with Prisma Client is by following the **[Quickstart](/getting-started/quickstart)**.
 
 <Link className="button button--primary" to="/getting-started/quickstart">
+  <Icon icon="fa-solid fa-star" size="18px" />
   Quickstart (5 min)
 </Link>
 
@@ -18,6 +24,7 @@ The setup instructions [below](#set-up) provide a high-level overview of the ste
   className="button button--primary"
   to="/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-postgresql"
 >
+  <Icon icon="fa-solid fa-rocket" size="18px" />
   Set up a new project from scratch
 </Link>
 <br />
@@ -26,6 +33,7 @@ The setup instructions [below](#set-up) provide a high-level overview of the ste
   className="button button--primary"
   to="/getting-started/setup-prisma/add-to-existing-project/relational-databases-typescript-postgresql"
 >
+  <Icon icon="fa-solid fa-plus" size="18px" />
   Add Prisma to an existing project
 </Link>
 

diff --git a/docs/200-orm/200-prisma-client/100-queries/060-full-text-search.mdx b/docs/200-orm/200-prisma-client/100-queries/060-full-text-search.mdx
@@ -2,7 +2,7 @@
 title: 'Full-text search'
 metaTitle: 'Full-text search (Preview)'
 metaDescription: 'This page explains how to search for text within a field.'
-preview: true
+sidebar_class_name: preview-badge
 ---
 
 <TopBlock>

diff --git a/docs/200-orm/200-prisma-client/600-observability-and-logging/240-metrics.mdx b/docs/200-orm/200-prisma-client/600-observability-and-logging/240-metrics.mdx
@@ -2,7 +2,7 @@
 title: 'Metrics'
 metaTitle: 'Metrics (Preview)'
 metaDescription: 'Diagnose application performance with insights into Prisma Client database activity.'
-preview: true
+sidebar_class_name: preview-badge
 tocDepth: 4
 ---
 

diff --git a/...m/200-prisma-client/600-observability-and-logging/250-opentelemetry-tracing.mdx b/...m/200-prisma-client/600-observability-and-logging/250-opentelemetry-tracing.mdx
@@ -2,7 +2,7 @@
 title: 'OpenTelemetry tracing'
 metaTitle: 'OpenTelemetry tracing (Preview)'
 metaDescription: 'Diagnose application performance with detailed traces of each query.'
-preview: true
+sidebar_class_name: preview-badge
 tocDepth: 4
 ---
 

diff --git a/docs/200-orm/index.mdx b/docs/200-orm/index.mdx
@@ -12,3 +12,7 @@ sidebar_position: 0
 [Prisma ORM](https://github.com/prisma/prisma) is a Node.js and TypeScript ORM with an intuitive data model, automated migrations, type-safety, and auto-completion.
 
 </TopBlock>
+
+## In this section
+
+<Subsections depth="3" />
diff --git a/docs/300-accelerate/index.mdx b/docs/300-accelerate/index.mdx
@@ -10,3 +10,7 @@ sidebar_position: 0
 [Prisma Accelerate](https://www.prisma.io/data-platform/accelerate) is a global database cache and scalable connection pool that helps improve database performance in Serverless and Edge applications.
 
 </TopBlock>
+
+## In this section
+
+<Subsections depth="3" />
diff --git a/docs/400-pulse/index.mdx b/docs/400-pulse/index.mdx
@@ -12,3 +12,7 @@ sidebar_position: 0
 [Prisma Pulse](https://www.prisma.io/data-platform/pulse) enables real-time database events with type-safe Prisma Client subscriptions.
 
 </TopBlock>
+
+## In this section
+
+<Subsections depth="3" />
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -84,9 +84,9 @@ const config: Config = {
         },
         blog: false,
         theme: {
-          customCss: ['./src/css/custom.css', './src/css/all.css', './src/css/theming.css'],
+          customCss: ['./src/css/custom.css', './src/css/admonition.css', './src/css/docsearch.css', './src/css/all.css', './src/css/theming.css'],
         },
-      } satisfies Preset.Options,
+      } satisfies Preset.Options
     ],
   ],
 
@@ -161,7 +161,7 @@ const config: Config = {
       style: 'dark',
       links: [
         {
-          title: 'Products',
+          title: 'Product',
           items: [
             {
               label: 'ORM',
@@ -187,6 +187,12 @@ const config: Config = {
               target: "_self",
               class: "internal footer__link-item"
             },
+            {
+              label: 'Changelog',
+              href: 'https://prisma.io/changelog',
+              target: "_self",
+              class: "internal footer__link-item"
+            },
           ],
         },
         {
@@ -197,11 +203,11 @@ const config: Config = {
               to: '/',
             },
             {
-              label: 'Get Started',
+              label: 'Get started',
               to: '/getting-started',
             },
             {
-              label: 'Prisma Examples',
+              label: 'prisma-examples',
               href: 'https://github.com/prisma/prisma-examples',
             },
             {
@@ -232,12 +238,18 @@ const config: Config = {
               target: "_self",
               class: "internal footer__link-item"
             },
+            {
+              label: 'Data guide',
+              href: 'https://prisma.io/dataguide',
+              target: "_self",
+              class: "internal footer__link-item"
+            },
             {
               label: 'Data Platform status',
               href: 'https://www.prisma-status.com/',
             },
             {
-              label: 'VS Code Extension',
+              label: 'VS Code extension',
               href: 'https://marketplace.visualstudio.com/items?itemName=Prisma.prisma',
             },
           ],
@@ -263,6 +275,12 @@ const config: Config = {
               target: "_self",
               class: "internal footer__link-item"
             },
+            {
+              label: 'Partners',
+              href: 'https://www.prisma.io/partners',
+              target: "_self",
+              class: "internal footer__link-item"
+            },
           ],
         },
         {
@@ -282,7 +300,7 @@ const config: Config = {
             },
             {
               label: 'Data DX',
-              to: 'https://www.datadx.io/',
+              href: 'https://www.datadx.io/',
             },
             {
               label: 'Careers',
@@ -298,7 +316,7 @@ const config: Config = {
             },
             {
               label: 'Causes',
-              to: 'https://prismaio.notion.site/Prisma-Causes-0c9e1ddc0f5942edaba355692cfee69f',
+              href: 'https://prismaio.notion.site/Prisma-Causes-0c9e1ddc0f5942edaba355692cfee69f',
             },
             {
               label: 'OSS Friends',
@@ -308,11 +326,11 @@ const config: Config = {
             },
             {
               label: 'Terms & Privacy',
-              to: 'https://prismaio.notion.site/Terms-Privacy-5b5b9938b3a941ccb2ad97eaf5524c07',
+              href: 'https://prismaio.notion.site/Terms-Privacy-5b5b9938b3a941ccb2ad97eaf5524c07',
             },
             {
               label: 'Service Level Agreement',
-              to: 'https://pris.ly/sla',
+              href: 'https://pris.ly/sla',
             },
           ],
         },