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

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

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

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

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

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

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

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