diff --git a/docs/100-getting-started/01-quickstart.mdx b/docs/100-getting-started/01-quickstart.mdx index 9934e1b1e0..74ed41b245 100644 --- a/docs/100-getting-started/01-quickstart.mdx +++ b/docs/100-getting-started/01-quickstart.mdx @@ -69,7 +69,7 @@ This creates a new `prisma` directory with your Prisma schema file and configure The Prisma schema provides an intuitive way to model data. Add the following models to your `schema.prisma` file: -```prisma file=prisma/schema.prisma +```prisma file=prisma/schema.prisma showLineNumbers model User { id Int @id @default(autoincrement()) email String @unique @@ -122,7 +122,7 @@ touch script.ts Then, paste the following boilerplate into it: -```ts file=script.ts +```ts file=script.ts showLineNumbers import { PrismaClient } from '@prisma/client' const prisma = new PrismaClient() @@ -148,12 +148,13 @@ This code contains a `main` function that's invoked at the end of the script. It Let's start with a small query to create a new `User` record in the database and log the resulting object to the console. Add the following code to your `script.ts` file: -```ts file=script.ts highlight=6-12;add +```ts file=script.ts highlight=6-12;add showLineNumbers import { PrismaClient } from '@prisma/client' const prisma = new PrismaClient() async function main() { + // highlight-start const user = await prisma.user.create({ data: { name: 'Alice', @@ -161,6 +162,7 @@ async function main() { }, }) console.log(user) + // highlight-end } main() @@ -181,21 +183,15 @@ Next, execute the script with the following command: - ```terminal npx ts-node script.ts ``` - - - ```code no-copy { id: 1, email: 'alice@prisma.io', name: 'Alice' } ``` - - Great job, you just created your first database record with Prisma Client! 🎉 @@ -208,14 +204,16 @@ Prisma Client offers various queries to read data from your database. In this se Delete the previous Prisma Client query and add the new `findMany` query instead: -```ts file=script.ts highlight=6-7;add +```ts file=script.ts highlight=6-7;add showLineNumbers import { PrismaClient } from '@prisma/client' const prisma = new PrismaClient() async function main() { + // highlight-start const users = await prisma.user.findMany() console.log(users) + // highlight-end } main() @@ -259,12 +257,13 @@ One of the main features of Prisma Client is the ease of working with [relations First, adjust your script to include the nested query: -```ts file=script.ts highlight=6-17;add +```ts file=script.ts highlight=6-17;add showLineNumbers import { PrismaClient } from '@prisma/client' const prisma = new PrismaClient() async function main() { + // highlight-start const user = await prisma.user.create({ data: { name: 'Bob', @@ -277,6 +276,7 @@ async function main() { }, }) console.log(user) + // highlight-end } main() @@ -316,18 +316,20 @@ By default, Prisma Client only returns _scalar_ fields in the result objects of In order to also retrieve the `Post` records that belong to a `User`, you can use the `include` option via the `posts` relation field: -```ts file=script.ts highlight=6-11;add +```ts file=script.ts highlight=6-11;add showLineNumbers import { PrismaClient } from '@prisma/client' const prisma = new PrismaClient() async function main() { +// highlight-start const usersWithPosts = await prisma.user.findMany({ include: { posts: true, }, }) console.dir(usersWithPosts, { depth: null }) + // highlight-end } main() diff --git a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-cockroachdb.mdx b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-cockroachdb.mdx index d454509927..b1bbb3f3ff 100644 --- a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-cockroachdb.mdx +++ b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-cockroachdb.mdx @@ -28,8 +28,9 @@ datasource db { 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 +```prisma file=prisma/schema.prisma highlight=2;edit showLineNumbers datasource db { + //edit-next-line provider = "cockroachdb" url = env("DATABASE_URL") } diff --git a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-mysql.mdx b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-mysql.mdx index b842668c71..9711eac6ea 100644 --- a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-mysql.mdx +++ b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-mysql.mdx @@ -29,8 +29,9 @@ datasource db { 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 +```prisma file=prisma/schema.prisma highlight=2;edit showLineNumbers datasource db { + //edit-next-line provider = "mysql" url = env("DATABASE_URL") } diff --git a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-planetscale.mdx b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-planetscale.mdx index 5fd7bf6cdb..98804a6411 100644 --- a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-planetscale.mdx +++ b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-node-planetscale.mdx @@ -29,8 +29,9 @@ datasource db { 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 +```prisma file=prisma/schema.prisma highlight=2;edit showLineNumbers datasource db { + //edit-next-line provider = "mysql" url = env("DATABASE_URL") } @@ -38,10 +39,11 @@ datasource db { 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 +```prisma file=schema.prisma highlight=4;add showLineNumbers datasource db { provider = "mysql" url = env("DATABASE_URL") + //highlight-next-line relationMode = "prisma" } ``` diff --git a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-cockroachdb.mdx b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-cockroachdb.mdx index c903f90245..d9c892e7b3 100644 --- a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-cockroachdb.mdx +++ b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-cockroachdb.mdx @@ -29,8 +29,9 @@ datasource db { 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 +```prisma file=prisma/schema.prisma highlight=2;edit showLineNumbers datasource db { + //edit-next-line provider = "cockroachdb" url = env("DATABASE_URL") } diff --git a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-mysql.mdx b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-mysql.mdx index bff0770814..b0ac08eadc 100644 --- a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-mysql.mdx +++ b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/100-connect-your-database-typescript-mysql.mdx @@ -29,8 +29,9 @@ datasource db { 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 +```prisma file=prisma/schema.prisma highlight=2;edit showLineNumbers datasource db { + //edit-next-line provider = "mysql" url = env("DATABASE_URL") } diff --git a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/250-querying-the-database-node-mysql.mdx b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/250-querying-the-database-node-mysql.mdx index 3954ea8c76..33f0a16c83 100644 --- a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/250-querying-the-database-node-mysql.mdx +++ b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/250-querying-the-database-node-mysql.mdx @@ -51,11 +51,14 @@ Here's a quick overview of the different parts of the code snippet: Inside the `main` function, add the following query to read all `User` records from the database and print the result: -```js file=index.js highlight=2;delete|3,4;add +```js file=index.js highlight=2;delete|3,4; showLineNumbers async function main() { + //delete-next-line // ... you will write your Prisma Client queries here + //highlight-start const allUsers = await prisma.user.findMany() console.log(allUsers) + //highlight-end } ``` diff --git a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/250-querying-the-database-node-planetscale.mdx b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/250-querying-the-database-node-planetscale.mdx index 5178863001..5001e22fd4 100644 --- a/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/250-querying-the-database-node-planetscale.mdx +++ b/docs/100-getting-started/02-setup-prisma/100-start-from-scratch/110-relational-databases/250-querying-the-database-node-planetscale.mdx @@ -79,6 +79,7 @@ Adjust the `main` function to send a `create` query to the database: ```js file=index.js highlight=2-21;add copy async function main() { + //highlight-start await prisma.user.create({ data: { name: 'Alice', @@ -99,6 +100,7 @@ async function main() { }, }) console.dir(allUsers, { depth: null }) + //highlight-end } ``` diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 731f7d2d2c..65fe985ea1 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -435,6 +435,24 @@ const config: Config = { prism: { theme: prismThemes.github, darkTheme: prismThemes.dracula, + magicComments: [ + // Remember to extend the default highlight class name as well! + { + className: 'theme-code-block-highlighted-line highlighted-line code-highlight', + line: 'highlight-next-line', + block: {start: 'highlight-start', end: 'highlight-end'}, + }, + { + className: 'theme-code-block-deleted-line deleted-line code-highlight', + line: 'delete-next-line', + block: {start: 'delete-start', end: 'delete-end'}, + }, + { + className: 'theme-code-block-edited-line edited-line code-highlight', + line: 'edit-next-line', + block: {start: 'edit-start', end: 'edit-end'}, + } + ] }, } satisfies Preset.ThemeConfig, }; diff --git a/src/css/custom.css b/src/css/custom.css index 646bcd911f..f9ed27c8e9 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1297,6 +1297,17 @@ article h6 { border-radius: 5px; } +.language-terminal code > * { + position: relative; + margin-left: 16px; +} +.language-terminal code > *::before { + position: absolute; + content: "$"; + right: 100%; + margin-right: 8px; +} + @media (max-width: 996px) { .clean-btn { z-index: 1; @@ -1304,10 +1315,10 @@ article h6 { font-size: 18px; position: relative; } - nav { + .navbar { position: relative; } - nav::after { + .navbar::after { content: ""; height: 68px; background-color: var(--ifm-navbar-background-color); @@ -1364,4 +1375,4 @@ article h6 { .navbar-sidebar { z-index: 1; } -} \ No newline at end of file +} diff --git a/src/css/theming.css b/src/css/theming.css index db0cd41821..e2257d8198 100644 --- a/src/css/theming.css +++ b/src/css/theming.css @@ -34,7 +34,9 @@ --ifm-card-background-color: white; --ifm-link-hover-color: #2E5297; --code-bg: var(--gray-200); - + --docusaurus-highlighted-code-line-bg: #d9f4e6; + --docusaurus-deleted-code-line-bg: #f5e4e7; + --docusaurus-edited-code-line-bg: #c3dafe; --ifm-btn-border-color-active: #718096; --ifm-btn-border-color: #E2E8F0; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 4aac759269..c27ce1ce32 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -117,8 +117,6 @@ function HomepageDatabasesSection() {
{DatabaseData.map((e) => ( - // - //
span { + color: inherit; + display: inline-flex; + -webkit-box-align: center; + align-items: center; + svg { + margin-right: 0.5rem; + } + } +} \ No newline at end of file diff --git a/src/theme/CodeBlock/Content/String.tsx b/src/theme/CodeBlock/Content/String.tsx index dcf66bbc20..c0b555d07c 100644 --- a/src/theme/CodeBlock/Content/String.tsx +++ b/src/theme/CodeBlock/Content/String.tsx @@ -93,7 +93,7 @@ export default function CodeBlockString({ isEnabled={wordWrap.isEnabled} /> )} - + {!metastring?.includes("no-copy") && }
diff --git a/src/theme/CodeBlock/Content/styles.module.css b/src/theme/CodeBlock/Content/styles.module.css index 31eda1e028..c2191debd7 100644 --- a/src/theme/CodeBlock/Content/styles.module.css +++ b/src/theme/CodeBlock/Content/styles.module.css @@ -78,3 +78,7 @@ :global(.theme-code-block:hover) .buttonGroup button { opacity: 0.4; } + +.language-terminal { + background-color: pink; +} \ No newline at end of file diff --git a/src/theme/CodeBlock/Line/index.js b/src/theme/CodeBlock/Line/index.tsx similarity index 68% rename from src/theme/CodeBlock/Line/index.js rename to src/theme/CodeBlock/Line/index.tsx index f36761806a..16f63ce065 100644 --- a/src/theme/CodeBlock/Line/index.js +++ b/src/theme/CodeBlock/Line/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import clsx from 'clsx'; import styles from './styles.module.css'; export default function CodeBlockLine({ @@ -18,12 +18,15 @@ export default function CodeBlockLine({ const lineTokens = line.map((token, key) => ( )); + const highlightedLine = classNames?.find((e:string) => e.includes("code-highlight")) return ( {showLineNumbers ? ( <> - - {lineTokens} + + {!highlightedLine && } + {lineTokens} + ) : ( lineTokens diff --git a/src/theme/CodeBlock/Line/styles.module.css b/src/theme/CodeBlock/Line/styles.module.css index 7c28ed9aa3..408f6988b3 100644 --- a/src/theme/CodeBlock/Line/styles.module.css +++ b/src/theme/CodeBlock/Line/styles.module.css @@ -11,10 +11,43 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus :global(.theme-code-block-highlighted-line) { background-color: var(--docusaurus-highlighted-code-line-bg); display: block; - margin: 0 calc(-1 * var(--ifm-pre-padding)); - padding: 0 var(--ifm-pre-padding); + padding: 0 var(--ifm-pre-padding) 0 42px; + position: relative; +} +:global(.theme-code-block-highlighted-line)::before { + content: "+"; + position: absolute; + left: 16px; + color: #47bb78;; +} +:global(.theme-code-block-deleted-line) { + background-color: var(--docusaurus-deleted-code-line-bg); + display: block; + padding: 0 var(--ifm-pre-padding) 0 42px; + position: relative; +} +:global(.theme-code-block-deleted-line)::before { + content: "-"; + position: absolute; + left: 16px; + color: #e53e3e;; } +:global(.theme-code-block-edited-line) { + background-color: var(--docusaurus-edited-code-line-bg); + display: block; + padding: 0 var(--ifm-pre-padding) 0 42px; + position: relative; +} +:global(.theme-code-block-edited-line)::before { + content: "✎"; + position: absolute; + left: 16px; + color: #a0aec0;; +} + + + .codeLine { display: table-row; counter-increment: line-count; @@ -23,8 +56,7 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus .codeLineNumber { display: table-cell; text-align: right; - width: 1%; - position: sticky; + width: min-content; left: 0; padding: 0 var(--ifm-pre-padding); background: var(--ifm-pre-background); diff --git a/src/theme/CodeBlock/index.tsx b/src/theme/CodeBlock/index.tsx index dc5e34ecd9..e2621078b6 100644 --- a/src/theme/CodeBlock/index.tsx +++ b/src/theme/CodeBlock/index.tsx @@ -1,7 +1,8 @@ -import React, {isValidElement} from 'react'; +import React, {isValidElement, useEffect} from 'react'; import useIsBrowser from '@docusaurus/useIsBrowser'; import CodeBlockString from './Content/String'; import CodeBlockJSX from './Content/Element'; +import styles from "./Container/styles.module.scss" /** * Best attempt to make the children a plain string so it is copyable. If there * are react elements, we will not be able to copy the content, and it will @@ -22,12 +23,23 @@ export default function CodeBlock({children: rawChildren, ...props}) { // relevant styles. const isBrowser = useIsBrowser(); const children = maybeStringifyChildren(rawChildren); + const file = + props?.metastring?.includes("file") ? + props?.metastring?.split(" ").find((e: string) => e.includes("file")).replace("file=", "") : false const CodeBlockComp = typeof children === 'string' ? CodeBlockString : CodeBlockJSX; return ( - //@ts-ignore - - {children} - + <> + {file &&
+ + + {file} + +
} + {/* @ts-ignore */} + + {children} + + ); } diff --git a/src/theme/MDXComponents.tsx b/src/theme/MDXComponents.tsx index b33ba607e7..8b333df5a9 100644 --- a/src/theme/MDXComponents.tsx +++ b/src/theme/MDXComponents.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; // Import the original mapper import MDXComponents from '@theme-original/MDXComponents'; @@ -11,6 +11,7 @@ import Link from '@docusaurus/Link'; import CollapseBox from '@site/src/components/collapsible'; import TopSection from '@site/src/components/topSection'; import { useLocation } from '@docusaurus/router'; +import styles from "./styles.module.scss" // TODO: do we want to fix this? const TopBlock: React.FC = ({ children, langSwitcher, dbSwitcher, slug, title }: any) => { @@ -33,10 +34,14 @@ const TopBlock: React.FC = ({ children, langSwitcher, d // TODO: we should fix this const CodeWithResult: React.FC<{ children: React.ReactElement[] }> = ({ children }) => { - return <> -

{children[0]}

-

{children[1]}

- + const [show, setShow] = useState(false) + return
+
{children[0]}
+
+
setShow(!show)}>Show CLI results
+ {show && children[1]} +
+
} // TODO: we should fix this diff --git a/src/theme/prism-include-languages.ts b/src/theme/prism-include-languages.ts index cf66987061..45dc46bb56 100644 --- a/src/theme/prism-include-languages.ts +++ b/src/theme/prism-include-languages.ts @@ -23,6 +23,7 @@ export default function prismIncludeLanguages(PrismObject: typeof PrismNamespace } // eslint-disable-next-line global-require, import/no-dynamic-require require(`prismjs/components/prism-${lang}`) + require(`prismjs/components/prism-json`) }) require('@site/src/theme/prism-prisma.js') diff --git a/src/theme/styles.module.scss b/src/theme/styles.module.scss new file mode 100644 index 0000000000..93138fd940 --- /dev/null +++ b/src/theme/styles.module.scss @@ -0,0 +1,43 @@ +.codeWithResult { + margin-top: 2rem; + .cmd{ + pre { + border-radius: 8px 8px 0 0; + } + } + .result { + border-radius: 0px 0px 8px 8px; + margin-top: -24px; + background-color: var(--main-font-color) !important; + color: var(--code-inline-bgd-color) !important; + .showBtn { + font-family: Inter; + font-style: normal; + font-weight: 600; + font-size: 12px; + line-height: 100%; + letter-spacing: 0.01em; + color: var(--code-inner-color); + height: 24px; + display: flex; + -webkit-box-align: center; + align-items: center; + cursor: pointer; + padding: 1rem; + } + pre { + border-radius: 0px 0px 8px 8px; + } + } + pre { + margin-top: 0px; + background-color: var(--main-font-color) !important; + color: var(--code-inline-bgd-color) !important; + code { + color: inherit !important; + span { + color: inherit !important; + } + } + } +} \ No newline at end of file