Docusaurus: styling the layout (#5672)

* custom sidebar for docusaurus * update build * Update gitignore Update navbar/sidebars/styling * Add fonts * fix per rebase added footer update getting-started added tooltip added Icon * getting started * update tab padding * update index link for orm * some tidying up for theming * update theming * cleanup
prisma · Apr 10, 2024 · 71d102d · 71d102d
1 parent 96a0396
commit 71d102d
Show file tree

Hide file tree

Showing 43 changed files with 3,263 additions and 100 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,10 +3,12 @@
 
 # Production
 /build
+/public
 
 # Generated files
 .docusaurus
 .cache-loader
+.cache
 
 # Misc
 .DS_Store

diff --git a/docs/100-getting-started/index.mdx b/docs/100-getting-started/index.mdx
@@ -72,32 +72,32 @@ _Select one of these options if you want to connect Prisma ORM to your own datab
     <List>
       <SquareLogo
         url="/docs/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-postgresql"
-        image={require('/img/technologies/postgresqlsimple.svg').default}
+        image={'/icons/technologies/postgresqlsimple.svg'}
         tech="Postgres SQL"
       />
       <SquareLogo
         url="/docs/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-mysql"
-        image={require('/img/technologies/mysqlsimple.svg').default}
+        image={'/icons/technologies/mysqlsimple.svg'}
         tech="MySQL"
       />
       <SquareLogo
         url="/docs/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-sqlserver"
-        image={require('/img/technologies/sqlserver.svg').default}
+        image={'/icons/technologies/sqlserver.svg'}
         tech="SQLServer"
       />
       <SquareLogo
         url="/docs/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-planetscale"
-        image={require('/img/technologies/planetscale.svg').default}
+        image={'/icons/technologies/planetscale.svg'}
         tech="PlanetScale"
       />
       <SquareLogo
         url="/docs/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-cockroachdb"
-        image={require('/img/technologies/cockroachdbgradient.svg').default}
+        image={'/icons/technologies/cockroachdbgradient.svg'}
         tech="Cockroach DB"
       />
       <SquareLogo
         url="/docs/getting-started/setup-prisma/start-from-scratch/mongodb-typescript-mongodb"
-        image={require('/img/technologies/mongodbsimple.svg').default}
+        image={'/icons/technologies/mongodbsimple.svg'}
         tech="Mongo DB"
       />
     </List>
@@ -110,32 +110,32 @@ _Select one of these options if you want to connect Prisma ORM to your own datab
     <List>
       <SquareLogo
         url="/docs/getting-started/setup-prisma/add-to-existing-project/relational-databases-typescript-postgresql"
-        image={require('/img/technologies/postgresqlsimple.svg').default}
+        image={'/icons/technologies/postgresqlsimple.svg'}
         tech="Postgres SQL"
       />
       <SquareLogo
         url="/docs/getting-started/setup-prisma/add-to-existing-project/relational-databases-typescript-mysql"
-        image={require('/img/technologies/mysqlsimple.svg').default}
+        image={'/icons/technologies/mysqlsimple.svg'}
         tech="MySQL"
       />
       <SquareLogo
         url="/docs/getting-started/setup-prisma/add-to-existing-project/relational-databases-typescript-sqlserver"
-        image={require('/img/technologies/sqlserver.svg').default}
+        image={'/icons/technologies/sqlserver.svg'}
         tech="SQL Server"
       />
       <SquareLogo
         url="/docs/getting-started/setup-prisma/add-to-existing-project/relational-databases-typescript-planetscale"
-        image={require('/img/technologies/planetscale.svg').default}
+        image={'/icons/technologies/planetscale.svg'}
         tech="PlanetScale"
       />
       <SquareLogo
         url="/docs/getting-started/setup-prisma/add-to-existing-project/relational-databases-typescript-cockroachdb"
-        image={require('/img/technologies/cockroachdbgradient.svg').default}
+        image={'/icons/technologies/cockroachdbgradient.svg'}
         tech="Cockroach DB"
       />
       <SquareLogo
         url="/docs/getting-started/setup-prisma/add-to-existing-project/mongodb-typescript-mongodb"
-        image={require('/img/technologies/mongodbsimple.svg').default}
+        image={'/icons/technologies/mongodbsimple.svg'}
         tech="Mongo DB"
       />
     </List>

diff --git a/docs/200-orm/index.mdx b/docs/200-orm/index.mdx
@@ -1,5 +1,6 @@
 ---
 title: 'ORM'
+id: 'orm-index'
 metaTitle: 'ORM'
 metaDescription: 'ORM'
 toc: false

diff --git a/docs/index.mdx b/docs/index.mdx
@@ -0,0 +1,10 @@
+---
+title: 'Homepage'
+metaTitle: 'homepage'
+metaDescription: 'About the Prisma docs.'
+toc: false
+---
+
+<TopBlock>
+
+</TopBlock>
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -39,7 +39,7 @@ const config: Config = {
         },
         blog: false,
         theme: {
-          customCss: './src/css/custom.css',
+          customCss: ['./src/css/custom.css', './src/css/all.css', './src/css/theming.css'],
         },
       } satisfies Preset.Options,
     ],
@@ -49,35 +49,47 @@ const config: Config = {
     // Replace with your project's social card
     image: 'img/docusaurus-social-card.jpg',
     navbar: {
-      title: 'Docs',
       logo: {
-        alt: 'Prisma Logo',
-        src: 'img/logo-dark.svg',
         srcDark: 'img/logo-white.svg',
+        alt: 'Prisma logo',
+        src: 'img/logo.svg',
+        href: "https://prisma.io/",
+        target: "_self"
       },
       items: [
         {
           type: 'docSidebar',
-          sidebarId: 'getStartedSidebar',
+          sidebarId: 'index',
+          position: 'left',
+          label: '/docs',
+          className: 'logo-link',
+        },
+        {
+          type: 'docSidebar',
+          sidebarId: 'gettingStarted',
           position: 'left',
           label: 'Get Started',
+          className: 'indigo first-item',
         },
         {
           type: 'docSidebar',
           sidebarId: 'ormSidebar',
           position: 'left',
+          className: 'indigo',
           label: 'ORM',
         },
         {
           type: 'docSidebar',
           sidebarId: 'accelerateSidebar',
           position: 'left',
+          className: 'teal',
           label: 'Accelerate',
         },
         {
           type: 'docSidebar',
           sidebarId: 'pulseSidebar',
           position: 'left',
+          className: 'teal',
           label: 'Pulse',
         },
         {
@@ -86,6 +98,12 @@ const config: Config = {
           className: 'header-github-link',
           'aria-label': 'GitHub repository',
         },
+        {
+          href: 'https://console.prisma.io/login?utm_source=docs&utm_medium=login',
+          position: 'right',
+          label: "Login",
+          className: 'navbar-login-btn internal teal-btn',
+        },
       ],
     },
     algolia: {
@@ -100,29 +118,33 @@ const config: Config = {
           title: 'Products',
           items: [
             {
-              label: 'Client',
-              href: 'https://prisma.io/client',
-            },
-            {
-              label: 'Migrate',
-              href: 'https://prisma.io/migrate',
+              label: 'ORM',
+              href: 'https://prisma.io/orm',
+              target: "_self",
+              class: "internal footer__link-item"
             },
             {
               label: 'Accelerate',
               href: 'https://prisma.io/accelerate',
+              target: "_self",
+              class: "internal footer__link-item"
             },
             {
               label: 'Pulse',
               href: 'https://prisma.io/pulse',
+              target: "_self",
+              class: "internal footer__link-item"
             },
             {
               label: 'Pricing',
               href: 'https://prisma.io/pricing',
+              target: "_self",
+              class: "internal footer__link-item"
             },
           ],
         },
         {
-          title: 'Developers',
+          title: 'Resources',
           items: [
             {
               label: 'Docs',
@@ -136,18 +158,64 @@ const config: Config = {
               label: 'Prisma Examples',
               href: 'https://github.com/prisma/prisma-examples',
             },
+            {
+              label: 'Prisma in your stack',
+              href: 'https://prisma.io/stack',
+              target: "_self",
+              class: "internal footer__link-item"
+            },
+            {
+              label: 'Ecosystem',
+              href: 'https://prisma.io/ecosystem',
+              target: "_self",
+              class: "internal footer__link-item"
+            },
+            {
+              label: 'Tutorials',
+              href: 'https://prisma.io/learn',
+              target: "_self",
+              class: "internal footer__link-item"
+            },
+            {
+              label: 'Playground',
+              href: 'https://playground.prisma.io/',
+            },
+            {
+              label: 'Customer stories',
+              href: 'https://prisma.io/showcase',
+              target: "_self",
+              class: "internal footer__link-item"
+            },
+            {
+              label: 'Data Platform status',
+              href: 'https://www.prisma-status.com/',
+            },
+            {
+              label: 'VS Code Extension',
+              href: 'https://marketplace.visualstudio.com/items?itemName=Prisma.prisma',
+            },
           ],
         },
         {
-          title: 'Use Cases',
+          title: 'Contact us',
           items: [
             {
-              label: 'Customer Stories',
-              href: 'https://www.prisma.io/showcase',
+              label: 'Community',
+              href: 'https://www.prisma.io/community',
+              target: "_self",
+              class: "internal footer__link-item"
+            },
+            {
+              label: 'Support',
+              href: 'https://www.prisma.io/support',
+              target: "_self",
+              class: "internal footer__link-item"
             },
             {
               label: 'Enterprise',
               href: 'https://www.prisma.io/enterprise',
+              target: "_self",
+              class: "internal footer__link-item"
             },
           ],
         },
@@ -157,15 +225,94 @@ const config: Config = {
             {
               label: 'About',
               href: 'https://prisma.io/about',
+              target: "_self",
+              class: "internal footer__link-item",
             },
             {
               label: 'Blog',
               to: 'https://prisma.io/blog',
+              target: "_self",
+              class: "internal footer__link-item",
+            },
+            {
+              label: 'Data DX',
+              to: 'https://www.datadx.io/',
+            },
+            {
+              label: 'Careers',
+              to: 'https://prisma.io/careers',
+              target: "_self",
+              class: "internal footer__link-item",
+            },
+            {
+              label: 'Events',
+              to: 'https://prisma.io/events',
+              target: "_self",
+              class: "internal footer__link-item",
+            },
+            {
+              label: 'Causes',
+              to: 'https://prismaio.notion.site/Prisma-Causes-0c9e1ddc0f5942edaba355692cfee69f',
+            },
+            {
+              label: 'OSS Friends',
+              to: 'https://prisma.io/oss-friends',
+              target: "_self",
+              class: "internal footer__link-item",
+            },
+            {
+              label: 'Terms & Privacy',
+              to: 'https://prismaio.notion.site/Terms-Privacy-5b5b9938b3a941ccb2ad97eaf5524c07',
+            },
+            {
+              label: 'Service Level Agreement',
+              to: 'https://pris.ly/sla',
             },
           ],
         },
+        {
+          items: [
+            {
+              label: ' ',
+              href: "https://discord.gg/KQyTW2H5ca",
+              class: "fa-brands fa-discord internal"
+            },
+            {
+              label: ' ',
+              href: "https://discord.gg/KQyTW2H5ca",
+              class: "fa-brands fa-x-twitter internal"
+            },
+            {
+              label: ' ',
+              href: "https://discord.gg/KQyTW2H5ca",
+              class: "fa-brands fa-youtube internal"
+            },
+            {
+              label: ' ',
+              href: "https://discord.gg/KQyTW2H5ca",
+              class: "fa-brands fa-slack internal"
+            },
+            {
+              label: ' ',
+              href: "https://discord.gg/KQyTW2H5ca",
+              class: "fa-brands fa-github internal"
+            },
+          ]
+        }
       ],
-      copyright: `Copyright © ${new Date().getFullYear()} Prisma Data, Inc. Built with Docusaurus.`,
+      logo: {
+        srcDark: 'img/logo-white.svg',
+        alt: 'Prisma logo',
+        src: 'img/logo-white.svg',
+        href: "https://prisma.io/",
+        target: "_self",
+      },
+      copyright: `© ${new Date().getFullYear()} Prisma Data, Inc.`,
+    },
+    docs: {
+      sidebar: {
+        autoCollapseCategories: true
+      },
     },
     prism: {
       theme: prismThemes.github,