docs: v3 docs structure

.gitmodules

@@ -0,0 +1,18 @@
+[submodule "code-repos/zenstackhq/v3-doc-orm"]
+	path = code-repos/zenstackhq/v3-doc-orm
+	url = https://github.com/zenstackhq/v3-doc-orm.git
+[submodule "code-repos/zenstackhq/v3-doc-orm-computed-fields"]
+	path = code-repos/zenstackhq/v3-doc-orm-computed-fields
+	url = https://github.com/zenstackhq/v3-doc-orm-computed-fields.git
+[submodule "code-repos/zenstackhq/v3-doc-orm-computed-polymorphism"]
+	path = code-repos/zenstackhq/v3-doc-orm-computed-polymorphism
+	url = https://github.com/zenstackhq/v3-doc-orm-polymorphism.git
+[submodule "code-repos/zenstackhq/v3-doc-orm-typed-json"]
+	path = code-repos/zenstackhq/v3-doc-orm-typed-json
+	url = https://github.com/zenstackhq/v3-doc-orm-typed-json.git
+[submodule "code-repos/zenstackhq/v3-doc-quick-start"]
+	path = code-repos/zenstackhq/v3-doc-quick-start
+	url = https://github.com/zenstackhq/v3-doc-quick-start.git
+[submodule "code-repos/zenstackhq/v3-doc-orm-polymorphism"]
+	path = code-repos/zenstackhq/v3-doc-orm-polymorphism
+	url = https://github.com/zenstackhq/v3-doc-orm-polymorphism.git

docusaurus.config.js

@@ -44,6 +44,10 @@ const config = {
                             label: '1.x',
                             banner: 'none',
                         },
+                        '3.x': {
+                            label: '3.0 Beta',
+                            banner: 'none',
+                        },
                     },
                 },
                 blog: false,

package.json

@@ -12,7 +12,8 @@
         "serve": "docusaurus serve",
         "write-translations": "docusaurus write-translations",
         "write-heading-ids": "docusaurus write-heading-ids",
-        "typecheck": "tsc"
+        "typecheck": "tsc",
+        "pull-submodules": "git submodule foreach git pull origin main"
     },
     "dependencies": {
         "@algolia/client-search": "^4.22.1",
@@ -22,12 +23,15 @@
         "@docusaurus/theme-mermaid": "3.4.0",
         "@giscus/react": "^2.4.0",
         "@mdx-js/react": "^3.0.1",
+        "@stackblitz/sdk": "^1.11.0",
         "autoprefixer": "^10.4.13",
         "clsx": "^1.2.1",
+        "is-mobile": "^5.0.0",
         "postcss": "^8.4.21",
         "prism-react-renderer": "^2.3.1",
         "prism-svelte": "^0.5.0",
         "prismjs": "^1.29.0",
+        "raw-loader": "^4.0.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^5.0.1",

src/components/GithubCodeBlock.tsx

@@ -0,0 +1,27 @@
+import CodeBlock from '@theme/CodeBlock';
+
+interface GithubCodeBlockProps {
+    repoPath: string;
+    file: string;
+}
+
+const GithubCodeBlock: React.FC<GithubCodeBlockProps> = ({ repoPath, file }) => {
+    const code = require(`!!raw-loader!@site/code-repos/${repoPath}/${file}`).default;
+
+    const getLanguage = (file: string): string => {
+        if (file.endsWith('.ts')) {
+            return 'typescript';
+        } else if (file.endsWith('.zmodel')) {
+            return 'zmodel';
+        } else {
+            return 'plaintext';
+        }
+    };
+    return (
+        <CodeBlock language={getLanguage(file)} title={file}>
+            {code}
+        </CodeBlock>
+    );
+};
+
+export default GithubCodeBlock;

src/components/StackBlitzEmbed.tsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useRef } from 'react';
+import sdk from '@stackblitz/sdk';
+
+interface StackBlitzEmbedProps {
+    projectId: string;
+    height?: string;
+}
+
+const StackBlitzEmbed: React.FC<StackBlitzEmbedProps> = ({ projectId, height = '600px' }) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (containerRef.current) {
+            sdk.embedProjectId(containerRef.current, projectId, {
+                openFile: 'main.ts',
+                height,
+                view: 'editor',
+                forceEmbedLayout: true,
+            });
+        }
+    }, [projectId, height]);
+
+    return <div ref={containerRef} style={{ width: '100%', height }} />;
+};
+
+export default StackBlitzEmbed;

src/components/StackBlitzGithub.tsx

@@ -0,0 +1,44 @@
+import sdk from '@stackblitz/sdk';
+import React from 'react';
+import GithubCodeBlock from './GithubCodeBlock';
+
+interface StackBlitzGithubProps {
+    repoPath: string;
+    openFile?: string;
+    codeFiles?: string[];
+    startScript?: string;
+}
+
+const StackBlitzGithub: React.FC<StackBlitzGithubProps> = ({
+    repoPath,
+    openFile = 'main.ts',
+    codeFiles: plainCodeFiles = undefined,
+    startScript,
+}) => {
+    const options = {
+        openFile,
+        view: 'editor',
+        startScript,
+    } as const;
+
+    if (!plainCodeFiles) {
+        plainCodeFiles = [openFile];
+    }
+
+    return (
+        <>
+            <div className="mb-1 italic text-sm">
+                Click{' '}
+                <a href="#" onClick={() => sdk.openGithubProject(repoPath, options)}>
+                    here
+                </a>{' '}
+                to open an interactive playground.
+            </div>
+            {plainCodeFiles.map((file) => (
+                <GithubCodeBlock key={file} repoPath={repoPath} file={file} />
+            ))}
+        </>
+    );
+};
+
+export default StackBlitzGithub;

src/lib/prism-zmodel.js

@@ -1,5 +1,5 @@
 Prism.languages.zmodel = Prism.languages.extend('clike', {
-    keyword: /\b(?:datasource|enum|generator|model|type|abstract|import|extends|attribute|view|plugin|proc)\b/,
+    keyword: /\b(?:datasource|enum|generator|model|type|abstract|import|extends|attribute|view|plugin|proc|with)\b/,
     'type-class-name': /(\b()\s+)[\w.\\]+/,
 });
 

versioned_docs/version-3.x/_components/PackageExec.tsx

@@ -0,0 +1,28 @@
+import CodeBlock from '@theme/CodeBlock';
+import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs';
+
+interface Props {
+    command: string;
+}
+
+const pkgManagers = [
+    { name: 'npm', command: 'npx' },
+    { name: 'pnpm', command: 'pnpm' },
+    { name: 'bun', command: 'bunx' },
+    { name: 'yarn', command: 'npx' },
+];
+
+const PackageInstall = ({ command }: Props) => {
+    return (
+        <Tabs>
+            {pkgManagers.map((pkg) => (
+                <TabItem key={pkg.name} value={pkg.name} label={pkg.name}>
+                    <CodeBlock language="bash">{`${pkg.command} ${command}`}</CodeBlock>
+                </TabItem>
+            ))}
+        </Tabs>
+    );
+};
+
+export default PackageInstall;

versioned_docs/version-3.x/_components/PackageInstall.tsx

@@ -0,0 +1,33 @@
+import CodeBlock from '@theme/CodeBlock';
+import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs';
+
+interface Props {
+    devDependencies: string[];
+    dependencies: string[];
+}
+
+const pkgManagers = [
+    { name: 'npm', command: 'npm install', dev: '--save-dev' },
+    { name: 'pnpm', command: 'pnpm add', dev: '--save-dev' },
+    { name: 'bun', command: 'bun add', dev: '--dev' },
+    { name: 'yarn', command: 'yarn add', dev: '--dev' },
+];
+
+const PackageInstall = ({ devDependencies, dependencies }: Props) => {
+    return (
+        <Tabs>
+            {pkgManagers.map((pkg) => (
+                <TabItem key={pkg.name} value={pkg.name} label={pkg.name}>
+                    <CodeBlock language="bash">
+                        {`${devDependencies?.length ? `${pkg.command} ${pkg.dev} ${devDependencies.join(' ')}\n` : ''}${
+                            dependencies?.length ? `${pkg.command} ${dependencies.join(' ')}` : ''
+                        }`}
+                    </CodeBlock>
+                </TabItem>
+            ))}
+        </Tabs>
+    );
+};
+
+export default PackageInstall;

versioned_docs/version-3.x/_components/ZModelVsPSL.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import Admonition from '@theme/Admonition';
+
+interface ZModelVsPSLProps {
+    children: React.ReactNode;
+}
+
+const ZModelVsPSL: FC<ZModelVsPSLProps> = ({ children }) => {
+    return (
+        <Admonition type="info" title="🔋 ZModel vs Prisma Schema">
+            {children}
+        </Admonition>
+    );
+};
+
+export default ZModelVsPSL;

versioned_docs/version-3.x/_components/ZenStackVsPrisma.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import Admonition from '@theme/Admonition';
+
+interface ZenStackVsPrismaProps {
+    children: React.ReactNode;
+}
+
+const ZenStackVsPrisma: FC<ZenStackVsPrismaProps> = ({ children }) => {
+    return (
+        <Admonition type="info" title="🔋 ZenStack vs Prisma">
+            {children}
+        </Admonition>
+    );
+};
+
+export default ZenStackVsPrisma;

versioned_docs/version-3.x/_components/_zmodel-starter.md

@@ -0,0 +1,23 @@
+  ```zmodel
+  datasource db {
+      provider = 'sqlite'
+      url = 'file:./dev.db'
+  }
+
+  model User {
+      id       String @id @default(cuid())
+      email    String @unique
+      posts    Post[]
+  }
+
+  model Post {
+      id        String   @id @default(cuid())
+      createdAt DateTime @default(now())
+      updatedAt DateTime @updatedAt
+      title     String
+      content   String
+      published Boolean  @default(false)
+      author    User     @relation(fields: [authorId], references: [id])
+      authorId  String
+  }
+  ```