From 16799d2c3622be790cfa9cf98dbff97e61746e2d Mon Sep 17 00:00:00 2001 From: Aidan McAlister Date: Fri, 14 Nov 2025 15:27:34 -0500 Subject: [PATCH 01/10] arrow added --- content/100-getting-started/index.mdx | 2 +- src/components/GettingStarted/index.tsx | 1 + src/css/gettingStarted.module.scss | 2 ++ 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/content/100-getting-started/index.mdx b/content/100-getting-started/index.mdx index 110d5db0e6..dcfe9e0e89 100644 --- a/content/100-getting-started/index.mdx +++ b/content/100-getting-started/index.mdx @@ -54,7 +54,7 @@ npx create-db
diff --git a/src/components/GettingStarted/index.tsx b/src/components/GettingStarted/index.tsx index cfcab301c7..776662ab6f 100644 --- a/src/components/GettingStarted/index.tsx +++ b/src/components/GettingStarted/index.tsx @@ -164,6 +164,7 @@ export const QuickstartLinkCard = ({ icon, title, desc, link, highlight, childre
{icon && }

{title}

+
{children ??

{desc}

} diff --git a/src/css/gettingStarted.module.scss b/src/css/gettingStarted.module.scss index 9d78a93d81..166edce898 100644 --- a/src/css/gettingStarted.module.scss +++ b/src/css/gettingStarted.module.scss @@ -91,6 +91,8 @@ } .title { display: inline-flex; + align-items: center; + gap: 8px; h2 { font-family: Barlow; border-bottom: 1px solid var(--main-font-color); From 18c4893a025e967a74a89a6f50aa76862dec8155 Mon Sep 17 00:00:00 2001 From: Aidan McAlister Date: Fri, 14 Nov 2025 15:32:28 -0500 Subject: [PATCH 02/10] quickstart card hover --- src/components/GettingStarted/index.tsx | 6 +++++- src/css/gettingStarted.module.scss | 5 +++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/GettingStarted/index.tsx b/src/components/GettingStarted/index.tsx index 776662ab6f..62dc66e440 100644 --- a/src/components/GettingStarted/index.tsx +++ b/src/components/GettingStarted/index.tsx @@ -159,7 +159,11 @@ export const QuickstartLinkCard = ({ icon, title, desc, link, highlight, childre
{icon && } diff --git a/src/css/gettingStarted.module.scss b/src/css/gettingStarted.module.scss index 166edce898..85d840109d 100644 --- a/src/css/gettingStarted.module.scss +++ b/src/css/gettingStarted.module.scss @@ -89,6 +89,11 @@ border: 1px solid var(--surface-brand-default); background: var(--surface-brand-light); } + &.quickstartCard { + &:hover { + background-color: transparent; + } + } .title { display: inline-flex; align-items: center; From 366f2fc848b81450494ff59fa58e4d1f527b72f8 Mon Sep 17 00:00:00 2001 From: Aidan McAlister Date: Fri, 14 Nov 2025 15:44:31 -0500 Subject: [PATCH 03/10] always copy button added --- content/100-getting-started/index.mdx | 4 ++-- src/theme/CodeBlock/Content/String.tsx | 6 +++++- src/theme/CodeBlock/CopyButton/index.js | 5 +++-- src/theme/CodeBlock/CopyButton/styles.module.css | 4 ++++ 4 files changed, 14 insertions(+), 5 deletions(-) diff --git a/content/100-getting-started/index.mdx b/content/100-getting-started/index.mdx index dcfe9e0e89..dce4c52f90 100644 --- a/content/100-getting-started/index.mdx +++ b/content/100-getting-started/index.mdx @@ -34,7 +34,7 @@ import { [**Prisma ORM**](/orm/overview/introduction/what-is-prisma) is an open-source ORM that provides fast, type-safe access to Postgres, MySQL, SQLite, and more databases, and runs smoothly across Node.js, Bun, and Deno. -```terminal +```terminal always-copy npx prisma init --db ``` @@ -44,7 +44,7 @@ npx prisma init --db [**Prisma Postgres**](/postgres) is a fully managed PostgreSQL database that scales to zero, integrates with Prisma ORM and Prisma Studio, and includes a generous free tier. -```terminal +```terminal always-copy npx create-db ``` diff --git a/src/theme/CodeBlock/Content/String.tsx b/src/theme/CodeBlock/Content/String.tsx index f8fd28245e..0a92b8fe54 100644 --- a/src/theme/CodeBlock/Content/String.tsx +++ b/src/theme/CodeBlock/Content/String.tsx @@ -97,7 +97,11 @@ export default function CodeBlockString({ /> )} {!metastring?.includes("no-copy") && ( - + )}
diff --git a/src/theme/CodeBlock/CopyButton/index.js b/src/theme/CodeBlock/CopyButton/index.js index 02ca8cab0f..5adf972e23 100644 --- a/src/theme/CodeBlock/CopyButton/index.js +++ b/src/theme/CodeBlock/CopyButton/index.js @@ -5,7 +5,7 @@ import { translate } from "@docusaurus/Translate"; import IconCopy from "@theme/Icon/Copy"; import IconSuccess from "@theme/Icon/Success"; import styles from "./styles.module.css"; -export default function CopyButton({ code, className }) { +export default function CopyButton({ code, className, alwaysVisible = false }) { const [isCopied, setIsCopied] = useState(false); const copyTimeout = useRef(undefined); const handleCopyCode = useCallback(() => { @@ -41,7 +41,8 @@ export default function CopyButton({ code, className }) { "clean-btn", className, styles.copyButton, - isCopied && styles.copyButtonCopied + isCopied && styles.copyButtonCopied, + alwaysVisible && styles.copyButtonAlwaysVisible )} onClick={handleCopyCode} > diff --git a/src/theme/CodeBlock/CopyButton/styles.module.css b/src/theme/CodeBlock/CopyButton/styles.module.css index d5268e900b..246516b47d 100644 --- a/src/theme/CodeBlock/CopyButton/styles.module.css +++ b/src/theme/CodeBlock/CopyButton/styles.module.css @@ -2,6 +2,10 @@ opacity: 1 !important; } +.copyButtonAlwaysVisible { + opacity: 1 !important; +} + .copyButtonIcons { position: relative; width: 1.125rem; From d9ef72216f5999dfcbe5b8cd672c06f6b8dabc46 Mon Sep 17 00:00:00 2001 From: Aidan McAlister Date: Fri, 14 Nov 2025 15:51:20 -0500 Subject: [PATCH 04/10] hover effect on copy button --- src/theme/CodeBlock/CopyButton/styles.module.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/theme/CodeBlock/CopyButton/styles.module.css b/src/theme/CodeBlock/CopyButton/styles.module.css index 246516b47d..4aca9b8f64 100644 --- a/src/theme/CodeBlock/CopyButton/styles.module.css +++ b/src/theme/CodeBlock/CopyButton/styles.module.css @@ -3,7 +3,11 @@ } .copyButtonAlwaysVisible { - opacity: 1 !important; + opacity: 0.5 !important; + transition: opacity 0.2s ease; + &:hover { + opacity: 1 !important; + } } .copyButtonIcons { From f1bb59bc90f84eec17b7d322797e57e5d0b79249 Mon Sep 17 00:00:00 2001 From: Aidan McAlister Date: Fri, 14 Nov 2025 15:57:23 -0500 Subject: [PATCH 05/10] spcaer added --- content/100-getting-started/index.mdx | 4 +++- src/components/GettingStarted/index.tsx | 2 ++ src/css/gettingStarted.module.scss | 4 ++++ 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/content/100-getting-started/index.mdx b/content/100-getting-started/index.mdx index dce4c52f90..b5b36741cb 100644 --- a/content/100-getting-started/index.mdx +++ b/content/100-getting-started/index.mdx @@ -22,7 +22,8 @@ import { SignalStream, PrismaPostgres, SquareLogo, - QuickstartLinkCard + QuickstartLinkCard, + Spacer } from '@site/src/components/GettingStarted'; @@ -180,3 +181,4 @@ Working with **Next.js**, **Remix**, or another framework? You can easily add Pr /> + \ No newline at end of file diff --git a/src/components/GettingStarted/index.tsx b/src/components/GettingStarted/index.tsx index 62dc66e440..9459c0359f 100644 --- a/src/components/GettingStarted/index.tsx +++ b/src/components/GettingStarted/index.tsx @@ -215,3 +215,5 @@ export const List = ({ children, framed, split, ...props }) => ( {children} ); + +export const Spacer = ({ size }: { size: string }) =>
; diff --git a/src/css/gettingStarted.module.scss b/src/css/gettingStarted.module.scss index 85d840109d..1cb215fab3 100644 --- a/src/css/gettingStarted.module.scss +++ b/src/css/gettingStarted.module.scss @@ -1,3 +1,7 @@ +body { + margin-bottom: 120px; +} + [data-theme="light"] { .lightImg { display: block; From 472cbe348d3bcaea5cff3a3a56f77c4809f71c49 Mon Sep 17 00:00:00 2001 From: Aidan McAlister Date: Fri, 14 Nov 2025 16:13:49 -0500 Subject: [PATCH 06/10] pointless css removed --- src/css/gettingStarted.module.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/css/gettingStarted.module.scss b/src/css/gettingStarted.module.scss index 1cb215fab3..85d840109d 100644 --- a/src/css/gettingStarted.module.scss +++ b/src/css/gettingStarted.module.scss @@ -1,7 +1,3 @@ -body { - margin-bottom: 120px; -} - [data-theme="light"] { .lightImg { display: block; From 0b1654ca7e85df7f0d6d7cd9f1e6c98345fcb3aa Mon Sep 17 00:00:00 2001 From: Aidan McAlister Date: Mon, 17 Nov 2025 15:34:30 -0500 Subject: [PATCH 07/10] updaets --- src/css/gettingStarted.module.scss | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/src/css/gettingStarted.module.scss b/src/css/gettingStarted.module.scss index 85d840109d..eb2a372443 100644 --- a/src/css/gettingStarted.module.scss +++ b/src/css/gettingStarted.module.scss @@ -58,6 +58,20 @@ } } } + + // Copy button styles specific to Getting Started page + :global(.theme-code-block) { + button[class*="copyButton"] { + background: var(--border-primary, #2d3748); + color: var(--Text-text-secondary, #e2e8f0); + transition: background 0.2s ease; + border: none; + margin-top: 3px; + &:hover { + background: var(--Text-text-disabled, #4a5568); + } + } + } } .boxTitle { @@ -90,8 +104,20 @@ background: var(--surface-brand-light); } &.quickstartCard { + transition: + border 0.2s ease, + background-color 0.2s ease; &:hover { - background-color: transparent; + border: 1px solid var(--border-color-active, #154f47); + } + .title { + gap: 8px; + i:last-child { + transition: transform 0.2s ease; + } + } + &:hover .title i:last-child { + transform: translateX(8px); } } .title { From 2e8091b1daeb45bec41692a8a8aca224b0126e99 Mon Sep 17 00:00:00 2001 From: Aidan McAlister Date: Mon, 17 Nov 2025 15:37:20 -0500 Subject: [PATCH 08/10] fuctional --- src/css/gettingStarted.module.scss | 125 +++++++++++++++++++++++++---- 1 file changed, 108 insertions(+), 17 deletions(-) diff --git a/src/css/gettingStarted.module.scss b/src/css/gettingStarted.module.scss index eb2a372443..aabf712bc4 100644 --- a/src/css/gettingStarted.module.scss +++ b/src/css/gettingStarted.module.scss @@ -23,7 +23,17 @@ border-radius: 8px; border: 1px solid var(--border-color); background: var(--surface-brand-grey-strong); - width: fit-content; + width: 100%; + max-width: 100%; + + @media (min-width: 768px) { + width: fit-content; + } + + @media (max-width: 576px) { + padding: 16px 16px 24px 16px; + } + a { text-decoration: underline; } @@ -40,6 +50,11 @@ :last-child { margin-bottom: 0; } + + @media (max-width: 576px) { + font-size: 14px; + line-height: 18px; + } } > p { margin-bottom: 16px; @@ -50,12 +65,17 @@ pre[class*="language-"] { background: #121521 !important; border: 0.7px solid #2d3748; + overflow-x: auto; code span { font-size: 16px; color: #e2e8f0 !important; &::before { color: #4a5568; } + + @media (max-width: 576px) { + font-size: 14px; + } } } @@ -81,6 +101,18 @@ font-size: 2.5rem !important; line-height: 48px; letter-spacing: -0.8px; + + @media (max-width: 768px) { + font-size: 2rem !important; + line-height: 38px; + letter-spacing: -0.6px; + } + + @media (max-width: 576px) { + font-size: 1.75rem !important; + line-height: 34px; + letter-spacing: -0.5px; + } } .linkCardWrapper { @@ -93,6 +125,11 @@ flex-direction: column; text-decoration: none !important; background: transparent; + + @media (max-width: 576px) { + padding: 16px 18px; + } + &:hover { border-color: var(--ifm-btn-border-color-active); background: transparent; @@ -124,9 +161,19 @@ display: inline-flex; align-items: center; gap: 8px; + flex-wrap: wrap; + h2 { font-family: Barlow; border-bottom: 1px solid var(--main-font-color); + + @media (max-width: 768px) { + font-size: 1.5rem; + } + + @media (max-width: 576px) { + font-size: 1.25rem; + } } h6 { font-size: 18px; @@ -137,6 +184,11 @@ line-height: 24px; letter-spacing: 0px; text-align: left; + + @media (max-width: 576px) { + font-size: 16px; + line-height: 22px; + } } } p { @@ -147,6 +199,11 @@ letter-spacing: 0em; margin-bottom: 0; text-align: left; + + @media (max-width: 576px) { + font-size: 13px; + line-height: 18px; + } } } @@ -164,6 +221,19 @@ border-color: var(--ifm-btn-border-color); color: var(--main-font-color); + + @media (max-width: 576px) { + width: 75px; + height: 75px; + padding: 18px; + } + + @media (max-width: 409px) { + width: 70px; + height: 70px; + padding: 16px; + } + &:hover { border-color: var(--ifm-btn-border-color-active); } @@ -181,61 +251,82 @@ } .list { - display: grid; + display: flex; + flex-wrap: wrap; margin-top: 16px; - width: fit-content; - grid-template-columns: repeat(2, auto); + width: 100%; gap: 16px; - width: fit-content; - display: flex; justify-content: flex-start; - &:not(.framedList) { + @media (min-width: 768px) { + width: fit-content; + } + + &:not(.framedList):not(.splitList) { + display: grid; + @media (min-width: 1400px) { grid-template-columns: repeat(7, auto); } - @media (min-width: 997px) and (max-width: 1400px) { + @media (min-width: 997px) and (max-width: 1399px) { grid-template-columns: repeat(4, auto); } - @media (min-width: 816px) and (max-width: 997px) { + @media (min-width: 816px) and (max-width: 996px) { grid-template-columns: repeat(7, auto); } - @media (min-width: 500px) and (max-width: 816px) { + @media (min-width: 576px) and (max-width: 815px) { grid-template-columns: repeat(4, auto); } - @media (min-width: 410px) and (max-width: 500px) { + @media (min-width: 410px) and (max-width: 575px) { grid-template-columns: repeat(3, auto); } + @media (max-width: 409px) { + grid-template-columns: repeat(2, auto); + } } + &.framedList { + display: grid; background: var(--main-bgd-color); border: 1px solid var(--ifm-btn-border-color); border-radius: 8px; padding: 24px 16px 16px 16px; justify-content: center; + @media (min-width: 1240px) { grid-template-columns: repeat(6, auto); } - @media (min-width: 1025px) and (max-width: 1240px) { + @media (min-width: 1025px) and (max-width: 1239px) { grid-template-columns: repeat(3, auto); } - @media (min-width: 768px) and (max-width: 1025px) { + @media (min-width: 768px) and (max-width: 1024px) { grid-template-columns: repeat(4, auto); } - @media (min-width: 480px) and (max-width: 768px) { - grid-template-columns: repeat(4, auto); + @media (min-width: 576px) and (max-width: 767px) { + grid-template-columns: repeat(3, auto); } - @media (min-width: 410px) and (max-width: 479px) { + @media (min-width: 410px) and (max-width: 575px) { grid-template-columns: repeat(3, auto); + padding: 16px 12px 12px 12px; + } + @media (max-width: 409px) { + grid-template-columns: repeat(2, auto); + padding: 12px 8px 8px 8px; } + .squareWrapper { background: var(--surface-primary); } } + &.splitList { - width: fit-content; + width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; + + @media (min-width: 768px) { + width: fit-content; + } } } From f1bcf2c8727a1ec553507388804e3fe0920f8df8 Mon Sep 17 00:00:00 2001 From: Aidan McAlister Date: Mon, 17 Nov 2025 15:41:27 -0500 Subject: [PATCH 09/10] revewrt --- src/css/gettingStarted.module.scss | 127 ++++------------------------- 1 file changed, 18 insertions(+), 109 deletions(-) diff --git a/src/css/gettingStarted.module.scss b/src/css/gettingStarted.module.scss index aabf712bc4..64c01bb4fe 100644 --- a/src/css/gettingStarted.module.scss +++ b/src/css/gettingStarted.module.scss @@ -23,17 +23,7 @@ border-radius: 8px; border: 1px solid var(--border-color); background: var(--surface-brand-grey-strong); - width: 100%; - max-width: 100%; - - @media (min-width: 768px) { - width: fit-content; - } - - @media (max-width: 576px) { - padding: 16px 16px 24px 16px; - } - + width: fit-content; a { text-decoration: underline; } @@ -50,11 +40,6 @@ :last-child { margin-bottom: 0; } - - @media (max-width: 576px) { - font-size: 14px; - line-height: 18px; - } } > p { margin-bottom: 16px; @@ -65,17 +50,12 @@ pre[class*="language-"] { background: #121521 !important; border: 0.7px solid #2d3748; - overflow-x: auto; code span { font-size: 16px; color: #e2e8f0 !important; &::before { color: #4a5568; } - - @media (max-width: 576px) { - font-size: 14px; - } } } @@ -86,7 +66,7 @@ color: var(--Text-text-secondary, #e2e8f0); transition: background 0.2s ease; border: none; - margin-top: 3px; + margin-top: 4px; &:hover { background: var(--Text-text-disabled, #4a5568); } @@ -101,18 +81,6 @@ font-size: 2.5rem !important; line-height: 48px; letter-spacing: -0.8px; - - @media (max-width: 768px) { - font-size: 2rem !important; - line-height: 38px; - letter-spacing: -0.6px; - } - - @media (max-width: 576px) { - font-size: 1.75rem !important; - line-height: 34px; - letter-spacing: -0.5px; - } } .linkCardWrapper { @@ -125,11 +93,6 @@ flex-direction: column; text-decoration: none !important; background: transparent; - - @media (max-width: 576px) { - padding: 16px 18px; - } - &:hover { border-color: var(--ifm-btn-border-color-active); background: transparent; @@ -161,19 +124,9 @@ display: inline-flex; align-items: center; gap: 8px; - flex-wrap: wrap; - h2 { font-family: Barlow; border-bottom: 1px solid var(--main-font-color); - - @media (max-width: 768px) { - font-size: 1.5rem; - } - - @media (max-width: 576px) { - font-size: 1.25rem; - } } h6 { font-size: 18px; @@ -184,11 +137,6 @@ line-height: 24px; letter-spacing: 0px; text-align: left; - - @media (max-width: 576px) { - font-size: 16px; - line-height: 22px; - } } } p { @@ -199,11 +147,6 @@ letter-spacing: 0em; margin-bottom: 0; text-align: left; - - @media (max-width: 576px) { - font-size: 13px; - line-height: 18px; - } } } @@ -221,19 +164,6 @@ border-color: var(--ifm-btn-border-color); color: var(--main-font-color); - - @media (max-width: 576px) { - width: 75px; - height: 75px; - padding: 18px; - } - - @media (max-width: 409px) { - width: 70px; - height: 70px; - padding: 16px; - } - &:hover { border-color: var(--ifm-btn-border-color-active); } @@ -251,82 +181,61 @@ } .list { - display: flex; - flex-wrap: wrap; + display: grid; margin-top: 16px; - width: 100%; + width: fit-content; + grid-template-columns: repeat(2, auto); gap: 16px; + width: fit-content; + display: flex; justify-content: flex-start; - @media (min-width: 768px) { - width: fit-content; - } - - &:not(.framedList):not(.splitList) { - display: grid; - + &:not(.framedList) { @media (min-width: 1400px) { grid-template-columns: repeat(7, auto); } - @media (min-width: 997px) and (max-width: 1399px) { + @media (min-width: 997px) and (max-width: 1400px) { grid-template-columns: repeat(4, auto); } - @media (min-width: 816px) and (max-width: 996px) { + @media (min-width: 816px) and (max-width: 997px) { grid-template-columns: repeat(7, auto); } - @media (min-width: 576px) and (max-width: 815px) { + @media (min-width: 500px) and (max-width: 816px) { grid-template-columns: repeat(4, auto); } - @media (min-width: 410px) and (max-width: 575px) { + @media (min-width: 410px) and (max-width: 500px) { grid-template-columns: repeat(3, auto); } - @media (max-width: 409px) { - grid-template-columns: repeat(2, auto); - } } - &.framedList { - display: grid; background: var(--main-bgd-color); border: 1px solid var(--ifm-btn-border-color); border-radius: 8px; padding: 24px 16px 16px 16px; justify-content: center; - @media (min-width: 1240px) { grid-template-columns: repeat(6, auto); } - @media (min-width: 1025px) and (max-width: 1239px) { + @media (min-width: 1025px) and (max-width: 1240px) { grid-template-columns: repeat(3, auto); } - @media (min-width: 768px) and (max-width: 1024px) { + @media (min-width: 768px) and (max-width: 1025px) { grid-template-columns: repeat(4, auto); } - @media (min-width: 576px) and (max-width: 767px) { - grid-template-columns: repeat(3, auto); + @media (min-width: 480px) and (max-width: 768px) { + grid-template-columns: repeat(4, auto); } - @media (min-width: 410px) and (max-width: 575px) { + @media (min-width: 410px) and (max-width: 479px) { grid-template-columns: repeat(3, auto); - padding: 16px 12px 12px 12px; - } - @media (max-width: 409px) { - grid-template-columns: repeat(2, auto); - padding: 12px 8px 8px 8px; } - .squareWrapper { background: var(--surface-primary); } } - &.splitList { - width: 100%; + width: fit-content; display: flex; justify-content: flex-start; flex-wrap: wrap; - - @media (min-width: 768px) { - width: fit-content; - } } } From 9e278f4f2ea87a15d613c0c2859945645e4a3f39 Mon Sep 17 00:00:00 2001 From: Aidan McAlister Date: Tue, 18 Nov 2025 09:48:56 -0500 Subject: [PATCH 10/10] fixed for mobile --- src/css/gettingStarted.module.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/css/gettingStarted.module.scss b/src/css/gettingStarted.module.scss index 64c01bb4fe..c14597e6eb 100644 --- a/src/css/gettingStarted.module.scss +++ b/src/css/gettingStarted.module.scss @@ -190,6 +190,10 @@ display: flex; justify-content: flex-start; + @media (max-width: 1400px) { + flex-wrap: wrap; + } + &:not(.framedList) { @media (min-width: 1400px) { grid-template-columns: repeat(7, auto);