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,
@@ -100,6 +104,11 @@ const config = {
                         label: 'Handbook',
                     },
                     { to: '/blog', label: 'Blog', position: 'left' },
+                    {
+                        to: 'v3',
+                        position: 'left',
+                        label: 'V3 Beta 🚀',
+                    },
                     {
                         href: 'https://discord.gg/Ykhr738dUe',
                         label: 'Discord',

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,19 +1,10 @@
 Prism.languages.zmodel = Prism.languages.extend('clike', {
-    keyword: /\b(?:datasource|enum|generator|model|type|abstract|import|extends|attribute|view|plugin|proc)\b/,
+    function: /@@?[A-Za-z_]\w*/,
+    keyword: /\b(?:datasource|enum|generator|model|type|abstract|import|extends|attribute|view|plugin|proc|with)\b/,
+    entity: /\b(?:Int|String|Boolean|DateTime|Float|Decimal|BigInt|Bytes|Json|Unsupported)\b/,
     'type-class-name': /(\b()\s+)[\w.\\]+/,
 });
 
-Prism.languages.javascript['class-name'][0].pattern =
-    /(\b(?:model|datasource|enum|generator|type|plugin|abstract)\s+)[\w.\\]+/;
-
-Prism.languages.insertBefore('zmodel', 'function', {
-    annotation: {
-        pattern: /(^|[^.])@+\w+/,
-        lookbehind: true,
-        alias: 'punctuation',
-    },
-});
-
 Prism.languages.insertBefore('zmodel', 'punctuation', {
     'type-args': /\b(?:references|fields|onDelete|onUpdate):/,
 });

src/pages/v3/_components/AICoding.tsx

@@ -0,0 +1,69 @@
+type FeatureItem = {
+    title: string;
+    img: string;
+    description: JSX.Element;
+};
+
+const FeatureList: FeatureItem[] = [
+    {
+        title: 'Coherent Application Model',
+        img: '/img/access-control.png',
+        description: (
+            <>
+                With data models, relations, validation rules, and access control policies all defined in one place,
+                LLMs can easily get a coherent understanding of the entire application.
+            </>
+        ),
+    },
+    {
+        title: 'Concise Query API',
+        img: '/img/auto-api.png',
+        description: (
+            <>
+                Concise and expressive, while leveraging existing knowledge of Prisma and Kysely, the query API makes it
+                easy for LLMs to generate high-quality query code.
+            </>
+        ),
+    },
+    {
+        title: 'Slim Code Base',
+        img: '/img/ai-friendly.png',
+        description: (
+            <>
+                By deriving many crucial artifacts from the schema, ZenStack eliminates boilerplate and helps you
+                maintain a slim code base that is easier for AI to work with.
+            </>
+        ),
+    },
+];
+
+function Proposition({ title, img, description }: FeatureItem) {
+    return (
+        <div className="lg:max-w-1/3 w-full">
+            <div className="text-center">
+                <img className="w-48 p-10" src={img} alt={title} />
+            </div>
+            <div className="text--center padding-horiz--md">
+                <h3 className="text-xl text-bold text-center lg:text-2xl text-gray-700 dark:text-gray-300">{title}</h3>
+                <p className="text-center text-base lg:text-lg text-gray-600 dark:text-gray-400">{description}</p>
+            </div>
+        </div>
+    );
+}
+
+export default function AICoding(): JSX.Element {
+    return (
+        <div className="flex flex-col items-start lg:items-center w-full">
+            <div className="w-full">
+                <h2 className="flex flex-col lg:flex-row text-2xl md:text-3xl lg:text-4xl items-center justify-center pb-4">
+                    Perfect Match for AI-Assisted Programming
+                </h2>
+            </div>
+            <div className="flex flex-wrap gap-4 md:gap-0">
+                {FeatureList.map((props, idx) => (
+                    <Proposition key={idx} {...props} />
+                ))}
+            </div>
+        </div>
+    );
+}

src/pages/v3/_components/Notes.tsx

@@ -0,0 +1,20 @@
+export default function Notes(): JSX.Element {
+    return (
+        <div className="flex flex-col items-start lg:items-center w-full">
+            <div className="w-full">
+                <h2 className="flex flex-col lg:flex-row text-xl md:text-2xl lg:text-3xl items-center justify-center pb-4">
+                    <div className="flex items-center">Notes to V2 Users</div>
+                </h2>
+            </div>
+            <div className="flex justify-center text-left">
+                <blockquote className="lg:max-w-3/4 text-lg italic">
+                    ZenStack V3 has made the bold decision to remove Prisma as a runtime dependency and implement its
+                    own ORM infrastructure on top of <a href="https://kysely.org">Kysely</a>. Albeit the cost of such a
+                    big refactor, we believe this is the right move to gain the flexibility needed to achieve the
+                    project's vision. Please read this <a href="/blog/next-chapter-1">blog post</a> for more thoughts
+                    behind the changes.
+                </blockquote>
+            </div>
+        </div>
+    );
+}