feat(examples): add blog example

examples/blog/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

examples/blog/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  /* config options here */
+}
+
+export default nextConfig

examples/blog/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@deepdish/blog",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@deepdish/cms": "workspace:0.8.0",
+    "@deepdish/nextjs": "workspace:0.8.0",
+    "@deepdish/resolvers": "workspace:0.13.0",
+    "@deepdish/ui": "workspace:0.15.0",
+    "next": "15.1.4",
+    "react": "catalog:react",
+    "react-dom": "catalog:react",
+    "valibot": "1.0.0-rc.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "catalog:tailwind",
+    "@types/node": "catalog:repo",
+    "@types/react": "catalog:react",
+    "@types/react-dom": "catalog:react",
+    "tailwindcss": "catalog:tailwind",
+    "typescript": "catalog:repo"
+  }
+}

examples/blog/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ['@tailwindcss/postcss'],
+}
+
+export default config

examples/blog/src/app/blog/[slug]/page.tsx

@@ -0,0 +1,17 @@
+import { BlogPost } from '@/cms'
+
+export default async function BlogArticle({
+  params,
+}: {
+  params: Promise<{ slug: string }>
+}) {
+  const { slug } = await params
+
+  return (
+    <div className="h-full overflow-y-auto">
+      <div className="container mx-auto mt-8">
+        <BlogPost deepdish={{ key: slug }} />
+      </div>
+    </div>
+  )
+}

examples/blog/src/app/blog/page.tsx

@@ -0,0 +1,17 @@
+import { BlogCard } from '@/cms'
+
+export default function Blog() {
+  return (
+    <div className="h-full overflow-y-auto">
+      <div className="container mx-auto">
+        <h1 className="my-4 text-2xl text-gray-800">Johnny Pizza Blog</h1>
+        <p className="my-4 text-gray-600">
+          Check out our cool blog articles and learn more about our pizza!
+        </p>
+        <div className="flex flex-col gap-4">
+          <BlogCard deepdish={{ collection: '*' }} />
+        </div>
+      </div>
+    </div>
+  )
+}

examples/blog/src/app/globals.css

@@ -0,0 +1,19 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

examples/blog/src/app/layout.tsx

@@ -0,0 +1,40 @@
+import type { Metadata } from 'next'
+import { Geist, Geist_Mono } from 'next/font/google'
+import './globals.css'
+import { Navbar } from '@/components/navbar'
+
+import { DeepDishProvider } from '@/cms'
+
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+})
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+})
+
+export const metadata: Metadata = {
+  title: 'DeepDish Blog Example',
+  description: 'Blog example showcasing the DeepDish CMS',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased h-screen flex flex-col`}
+      >
+        <DeepDishProvider>
+          <Navbar />
+          <div className="flex-1 overflow-y-auto">{children}</div>
+        </DeepDishProvider>
+      </body>
+    </html>
+  )
+}

examples/blog/src/app/page.tsx

@@ -0,0 +1,25 @@
+import { Paragraph } from '@/cms'
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <div className="h-full flex items-center justify-center">
+      <div className="max-w-prose text-center flex flex-col gap-4">
+        <Paragraph
+          deepdish={{ key: 'home/headline' }}
+          className="text-xl text-gray-800 font-bold"
+        >
+          Welcome to Johnny Pizza
+        </Paragraph>
+        <Paragraph
+          deepdish={{ key: 'home/sub-headline' }}
+          className="text-gray-600"
+        >
+          We pride ourselves on our pizza. We use only the freshest ingredients
+          and our team of expert chefs to create the best pizza in town.
+        </Paragraph>
+        <Link href="/blog">Check out our blog!</Link>
+      </div>
+    </div>
+  )
+}

examples/blog/src/cms.tsx

@@ -0,0 +1,181 @@
+import fs from 'node:fs/promises'
+import { truncate } from '@/utils'
+import { DeepDishProvider as InternalDeepDishProvider } from '@deepdish/cms'
+import { getBaseUrl } from '@deepdish/cms/vercel'
+import { createJsonResolver } from '@deepdish/resolvers/json'
+import { createComponents } from '@deepdish/ui/components'
+import { configure } from '@deepdish/ui/config'
+import type { IntrinsicElement, SetChildren } from '@deepdish/ui/deepdish'
+import Link from 'next/link'
+import * as v from 'valibot'
+
+// TODO: get local data dir to work
+export const contentPaths = {
+  blog: '/tmp/deepdish_blog_blog.json',
+  text: '/tmp/deepdish_blog_text.json',
+} as const
+
+async function initContent() {
+  for (const path of Object.values(contentPaths)) {
+    const exists = await fs
+      .stat(path)
+      .then(() => true)
+      .catch(() => false)
+
+    if (!exists) {
+      await fs.writeFile(path, JSON.stringify({}))
+    }
+  }
+}
+
+const blogSchema = v.object({
+  title: v.string(),
+  author: v.object({
+    name: v.string(),
+    email: v.string(),
+  }),
+  body: v.string(),
+  slug: v.string(),
+})
+
+const textSchema = v.string()
+
+const contracts = {
+  blog: {
+    resolver: createJsonResolver(contentPaths.blog, blogSchema, {
+      maxBatchSize: 10,
+    }),
+    schema: blogSchema,
+  },
+  text: {
+    resolver: createJsonResolver(contentPaths.text, textSchema, {
+      maxBatchSize: 10,
+    }),
+    schema: textSchema,
+  },
+}
+
+async function cms() {
+  await initContent()
+
+  await configure({
+    contracts,
+    logging: {
+      enabled: process.env.NODE_ENV === 'development',
+    },
+    settings: {
+      baseUrl: getBaseUrl({}),
+      draft: true,
+    },
+  })
+
+  return createComponents(contracts)
+}
+
+const components = await cms()
+
+const Blog = components.blog
+const Text = components.text
+
+type DeepDishWithoutContract =
+  | {
+      key: string
+      collection?: never
+    }
+  | {
+      collection: string
+    }
+
+type ElementProps<E extends IntrinsicElement, C = undefined> = SetChildren<
+  JSX.IntrinsicElements[E],
+  C
+> & {
+  deepdish: DeepDishWithoutContract
+}
+
+type ParagraphProps<E extends IntrinsicElement> = ElementProps<E, string>
+
+export function Paragraph(props: ParagraphProps<'p'>) {
+  return (
+    <Text
+      deepdish={{
+        ...props.deepdish,
+        contract: 'text',
+      }}
+      fallback={props.children}
+      render={async (content) => {
+        return <p {...props}>{content}</p>
+      }}
+    />
+  )
+}
+
+export function BlogCard(props: {
+  deepdish: DeepDishWithoutContract
+}) {
+  return (
+    <Blog
+      deepdish={{
+        ...props.deepdish,
+        contract: 'blog',
+      }}
+      render={async (content) => {
+        if (!content) {
+          return <div>Blog Card Placeholder</div>
+        }
+
+        return (
+          <div className="flex flex-col gap-2 pl-4 border-l-2 border-red-500">
+            <h1 className="text-xl text-gray-800 font-bold">{content.title}</h1>
+            <p className="text-sm text-gray-600 italic">
+              Written by {content.author.name}
+            </p>
+            <p className="text-gray-500">{truncate(content.body, 100)}</p>
+            <Link
+              className="text-red-500 hover:text-red-400"
+              href={`/blog/${content.slug}`}
+            >
+              Read article
+            </Link>
+          </div>
+        )
+      }}
+    />
+  )
+}
+
+export function BlogPost(props: {
+  deepdish: DeepDishWithoutContract
+}) {
+  return (
+    <Blog
+      deepdish={{
+        ...props.deepdish,
+        contract: 'blog',
+      }}
+      render={async (content) => {
+        if (!content) {
+          return <div>Blog Article Placeholder</div>
+        }
+
+        return (
+          <div className="container mx-auto">
+            <h1 className="my-4 text-2xl text-gray-800 font-bold">
+              {content.title}
+            </h1>
+            <p className="my-4 text-gray-600">
+              Written by {content.author.name}
+            </p>
+            <p className="my-4 text-gray-500">{content.body}</p>
+          </div>
+        )
+      }}
+    />
+  )
+}
+
+export function DeepDishProvider(props: {
+  children: React.ReactNode
+}) {
+  return <InternalDeepDishProvider {...props} />
+}