Update pulse page

prisma · May 22, 2024 · 6872ae9 · 6872ae9
1 parent 4ff5814
commit 6872ae9
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 11 deletions.
diff --git a/content/400-pulse/index.mdx b/content/400-pulse/index.mdx
@@ -1,19 +1,100 @@
 ---
-title: 'Pulse'
+title: ''
 metaTitle: 'Prisma Pulse'
 metaDescription: 'Prisma Pulse enables real-time database events with type-safe Prisma Client subscriptions.'
-hide_table_of_contents: true
 sidebar_position: 0
 pagination_next: 'pulse/what-is-pulse'
 
 ---
 
-<TopBlock>
+import {
+  Bolt,
+  BorderBox,
+  BoxTitle,
+  Database,
+  Grid,
+  LinkCard,
+  List,
+  SignalStream,
+  SquareLogo,
+  Separator
+} from '@site/src/components/GettingStarted';
 
-[Prisma Pulse](https://www.prisma.io/data-platform/pulse) enables real-time database events with type-safe Prisma Client subscriptions.
+import {
+    IconTitle
+} from '@site/src/components/shortcodes/index';
 
-</TopBlock>
+
+<IconTitle heading="h1" icon="fa-solid fa-signal-stream" iconColor="#16A394">Prisma Pulse</IconTitle>
+
+[Prisma Pulse](https://www.prisma.io/data-platform/pulse) enables real-time database events with type-safe Prisma Client subscriptions.
+
+<Grid>
+  <LinkCard
+    icon="fa-solid fa-arrow-right"
+    title="Get started"
+    desc="Add Accelerate to your app to use global database caching & connection pooling."
+    link="/accelerate/getting-started"
+  />
+  <LinkCard
+    icon="fa-brands fa-github"
+    title="Examples"
+    desc="Explore our ready-to-run examples using Accelerate."
+    link="https://github.com/prisma/prisma-examples/"
+  />
+</Grid>
+<br/>
+<LinkCard
+    highlight
+    icon="fa-solid fa-bolt"
+    title="Speed Test"
+    desc="Run the speed test to see how Prisma Accelerate can make your app faster."
+    link="https://accelerate-speed-test.prisma.io/"
+/>
+
+## Supported databases and providers
+
+Short description text for this section.
+
+<List framed style={{ alignItems: `center`, width: `fit-content`}}>
+    <SquareLogo
+        url="/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-postgresql"
+        image={'/img/technologies/postgresqlsimple.svg'}
+        tech="Postgres SQL"
+    />
+    <Separator />
+    <List style={{marginTop: 0}} split>
+        <SquareLogo
+            url="/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-mysql"
+            image={'/img/technologies/mysqlsimple.svg'}
+            tech="MySQL"
+        />
+        <SquareLogo
+            url="/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-sqlserver"
+            image={'/img/technologies/sqlserver.svg'}
+            tech="SQLServer"
+        />
+        <SquareLogo
+            url="/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-planetscale"
+            image={'/img/technologies/planetscale.svg'}
+            tech="PlanetScale"
+        />
+        <SquareLogo
+            url="/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-cockroachdb"
+            image={'/img/technologies/cockroachdbgradient.svg'}
+            tech="Cockroach DB"
+        />
+        <SquareLogo
+            url="/getting-started/setup-prisma/start-from-scratch/mongodb-typescript-mongodb"
+            image={'/img/technologies/mongodbsimple.svg'}
+            tech="Mongo DB"
+        />
+    </List>
+</List>
+
+<br />
 
 ## In this section
 
 <Subsections depth="3" />
+
diff --git a/src/components/GettingStarted/index.tsx b/src/components/GettingStarted/index.tsx
@@ -4,6 +4,7 @@ import { Tooltip } from "../tooltip/Tooltip";
 import styles from "../../css/gettingStarted.module.scss";
 import Link from "@docusaurus/Link";
 import useBaseUrl from "@docusaurus/useBaseUrl";
+import clsx from "clsx";
 
 export const Database = ({ color, width, height }: any) => (
   <svg
@@ -62,6 +63,10 @@ export const BoxTitle = ({ children, ...props }) => (
   </h1>
 );
 
+export const Separator = () => (
+  <div className={styles.separator} />
+)
+
 export const BorderBox = ({ border, ...props }: any) => (
   <BorderBoxWrapper {...props}>{props.children}</BorderBoxWrapper>
 );
@@ -115,8 +120,8 @@ export const SquareLogo = ({ image, tech, url }: any) => {
   );
 };
 
-export const List = ({ children, ...props }) => (
-  <div {...props} className={styles.list}>
+export const List = ({ children, framed, split, ...props }) => (
+  <div {...props} className={clsx(styles.list, framed && styles.framedList, split && styles.splitList)}>
     {children}
   </div>
 );
diff --git a/src/components/shortcodes/index.tsx b/src/components/shortcodes/index.tsx
@@ -0,0 +1,15 @@
+import { Icon } from "../Icon"
+
+const Headline = ({ component, children }) => {
+    const Component = component;
+    return <Component>{children}</Component>;
+};
+
+export const IconTitle = ({ heading, icon, iconColor, children}: { heading: string, icon: string, iconColor: string, children: any}) => {
+    return (
+        <Headline component={heading}>
+            <Icon icon={icon} btn="left" size="inherit" color={iconColor}/>
+            {children}
+        </Headline>
+    )
+}
diff --git a/src/css/all.css b/src/css/all.css
@@ -997,6 +997,10 @@
     url("/fonts/fa-solid-900.woff2") format("woff2");
 }
 
+.fa-solid {
+  font-weight: bold;
+}
+
 .fa-rabbit-fast:before,
 .fa-rabbit-running:before {
   content: "\f709";

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -31,8 +31,8 @@ details > summary::before {
 }
 main {
   padding-top: 64px;
-  padding-left: 16px;
-  padding-right: 16px;
+  padding-left: 6px;
+  padding-right: 6px;
 }
 
 @media (min-width: 997px) {
@@ -44,7 +44,7 @@ main {
   }
   main {
     padding-left: 32px;
-    padding-top: 0;
+    padding-top: 24px;
   }
 }
 .theme-back-to-top-button {

diff --git a/src/css/gettingStarted.module.scss b/src/css/gettingStarted.module.scss
@@ -48,6 +48,12 @@
   }
 }
 
+.separator {
+  height: 100%;
+  width: 1px;
+  border-left: 1px solid var(--ifm-btn-border-color);
+}
+
 .linkCardWrapper {
   border: 1px solid var(--border-color);
   padding: 20px 24px;
@@ -61,6 +67,15 @@
   &:hover {
     border-color: var(--ifm-btn-border-color-active);
     background: transparent;
+    color: inherit;
+  } 
+  &.linkCardHighlight {
+    background: rgba(22, 163, 148, 0.12);
+    border-color: rgb(22, 163, 148);
+    &:hover {
+      // background: #B7F4EE;
+      border-color: #154F47;
+    }
   }
   .title {
     display: inline-block;
@@ -147,12 +162,28 @@
     grid-template-columns: repeat(3, auto);
   }
   @media (min-width: 768px) and (max-width: 1025px) {
-    grid-template-columns: repeat(6, auto);
+    grid-template-columns: repeat(4, auto);
   }
   @media (min-width: 480px) and (max-width: 768px) {
     grid-template-columns: repeat(4, auto);
   }
   @media (min-width: 410px) and (max-width: 479px) {
     grid-template-columns: repeat(3, auto);
   }
+  &.framedList {
+    background: #F7FAFC;
+    border: 1px solid #E2E8F0;
+    border-radius: 8px;
+    padding: 24px 16px 16px 16px;
+    justify-content: space-around;
+    .squareWrapper {
+      background-color: white;
+    }
+  }
+  &.splitList {
+    width: fit-content;
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
 }