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,
@@ -63,6 +67,12 @@ const config = {
     themeConfig:
         /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
         {
+            announcementBar: {
+                id: 'v3_beta',
+                content:
+                    'ZenStack v3 Beta is released 🚀. The new version has replaced Prisma with a brand new query engine. <a href="/v3">Check it out</a>',
+                isCloseable: true,
+            },
             colorMode: {
                 defaultMode: 'light',
                 respectPrefersColorScheme: false,
@@ -99,6 +109,11 @@ const config = {
                         position: 'left',
                         label: 'Handbook',
                     },
+                    {
+                        to: 'v3',
+                        position: 'left',
+                        label: 'V3 Beta 🚀',
+                    },
                     { to: '/blog', label: 'Blog', position: 'left' },
                     {
                         href: 'https://discord.gg/Ykhr738dUe',
@@ -193,6 +208,23 @@ const config = {
                             },
                         ],
                     },
+                    {
+                        title: 'FlatIcon Credits',
+                        items: [
+                            {
+                                label: 'Endure',
+                                href: 'https://www.flaticon.com/free-icons/endure',
+                            },
+                            {
+                                label: 'Diagram by Kiranshastry',
+                                href: 'https://www.flaticon.com/free-icons/diagram',
+                            },
+                            {
+                                href: 'https://www.flaticon.com/free-icons/database',
+                                label: 'Database by kerismaker',
+                            },
+                        ],
+                    },
                 ],
                 copyright: `Copyright © ${new Date().getFullYear()} ZenStack, Inc.`,
             },

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/components/ValueProposition.tsx

@@ -33,8 +33,8 @@ const FeatureList: FeatureItem[] = [
         img: '/img/ai-friendly.png',
         description: (
             <>
-                Schema-first reduces code complexity, helping AI understand better with fewer hallucinations. 
-                Schema serves as a single source of truth for AI integration.
+                Schema-first reduces code complexity, helping AI understand better with fewer hallucinations. Schema
+                serves as a single source of truth for AI integration.
             </>
         ),
     },
@@ -47,7 +47,7 @@ function Proposition({ title, img, description }: FeatureItem) {
                 <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>
+                <h3 className="text-xl 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>

src/css/custom.css

@@ -68,3 +68,20 @@
     right: 0;
     pointer-events: mouse;
 }
+
+@media (max-width: 1200px) {
+    .navbar__items--right,
+    .navbar__items--left {
+        display: none;
+    }
+
+    .navbar__toggle {
+        display: inherit;
+    }
+}
+
+@media (min-width: 1201px) {
+    .navbar__toggle {
+        display: none;
+    }
+}

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):/,
 });