Page & Layout Functions

// src/blog/[slug]/page_functions.ts
import type { PageFunctions, RouteParams } from "dinou";
import { db, type Post } from "@/lib/db";

export interface BlogPostData {
  post: Post;
}

// Best Practice: Type getProps using PageFunctions for strict parameters & return contract
export const getProps: PageFunctions<RouteParams<"/blog/[slug]">, BlogPostData>["getProps"] = async (params) => {
  const post = await db.getPost(params?.slug);
  // Directly returns BlogPostData for page.tsx
  return { post };
};

// src/blog/[slug]/page.tsx
import type { PageProps } from "dinou";
import type { BlogPostData } from "./page_functions";

// Best Practice: Extend PageProps with the loader's returned BlogPostData
interface BlogPostProps extends PageProps<"/blog/[slug]">, BlogPostData {}

export default function BlogPost({ params, post }: BlogPostProps) {
  return (
    <article>
      <span className="text-xs text-muted-foreground">Route: /blog/{params.slug}</span>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

// src/blog/layout_functions.ts
import type { LayoutFunctions } from "dinou";
import { db } from "@/lib/db";

export interface BlogLayoutData {
  categories: string[];
}

// Best Practice: Type layout server functions with LayoutFunctions
export const getProps: LayoutFunctions<any, BlogLayoutData>["getProps"] = async () => {
  const categories = await db.getCategories();
  // Directly returns props for layout.tsx
  return { categories };
};

// src/blog/layout.tsx
import type { LayoutProps } from "dinou";
import type { BlogLayoutData } from "./layout_functions";

// Best Practice: Extend LayoutProps for automatic typing of children and params
interface BlogLayoutProps extends LayoutProps, BlogLayoutData {}

export default function BlogLayout({
  children,
  categories,
}: BlogLayoutProps) {
  return (
    <div className="blog-shell">
      <BlogSidebar categories={categories} />
      <main>{children}</main>
    </div>
  );
}

// src/posts/[id]/page_functions.ts
import type { PageFunctions } from "dinou";
import { getArticleStatus } from "@/lib/articles";

// 1. Force Dynamic SSR on every request (< 1 or 0, replaces legacy 'dynamic' export)
export const revalidate: PageFunctions["revalidate"] = 0;

// 2. Incremental Static Regeneration (re-evaluates every 60 seconds)
// export const revalidate: PageFunctions["revalidate"] = 60;

// 3. Pure Static (SSG): Cached indefinitely until on-demand invalidation
// export const revalidate: PageFunctions["revalidate"] = false;

// 4. Type-safe async function: adjust TTL dynamically based on content volatility
// export const revalidate: PageFunctions["revalidate"] = async () => {
//   const status = await getArticleStatus();
//   return status.isBreakingNews ? 15 : 3600; // 15s for breaking news, 1h for standard stories
// };

// src/blog/[slug]/page_functions.ts
import type { PageFunctions, RouteParams } from "dinou";

// 1. Route parameters automatically inferred from the route string pattern
type BlogParams = RouteParams<"/blog/[slug]">; // Inferred as: { slug: string }

// 2. Define page props types
export interface BlogPost {
  title: string;
  slug: string;
  content: string;
  author: string;
  publishedAt: string;
}

export interface BlogPageProps {
  post: BlogPost;
}

// 3. Static Paths (constant array or function)
export const getStaticPaths: PageFunctions<BlogParams>["getStaticPaths"] = [
  "getting-started",
  "building-with-dinou-v7",
];

// 4. Props loader: loads static article content for the 0ms shell
export const getProps: PageFunctions<BlogParams, BlogPageProps>["getProps"] = async (params) => {
  // params?.slug is strongly typed as string | undefined
  const post = await db.posts.findUnique({ where: { slug: params?.slug } });
  if (!post) throw new Error("Post not found");

  // Directly returns BlogPageProps (type error if shape doesn't match!)
  return { post };
};

// 5. Caching Strategy & PPR configuration
export const revalidate: PageFunctions["revalidate"] = 60; // ISR 60s
export const ppr: PageFunctions["ppr"] = true;             // PPR: Static shell + Suspense streaming

// 6. Parameter validation hook (returns false to abort with 404)
export const validateParams: PageFunctions<BlogParams>["validateParams"] = (params) => {
  return typeof params?.slug === "string" && params.slug.length >= 3;
};

// 7. Cache tags for on-demand revalidation via revalidateTag("blog")
export const getCacheTags: PageFunctions<BlogParams>["getCacheTags"] = (params) => {
  return ["blog", `post-${params?.slug}`];
};

// src/blog/[slug]/page.tsx
import { Suspense } from "react";
import type { PageProps } from "dinou";
import type { BlogPageProps } from "./page_functions";
import { RealtimeViews, ViewsSkeleton } from "./components";

// Extend PageProps to receive both route params and loader data with full type safety
interface BlogPostPageProps extends PageProps<"/blog/[slug]">, BlogPageProps {}

export default function BlogPostPage({ params, post }: BlogPostPageProps) {
  return (
    <article className="max-w-2xl mx-auto py-8">
      {/* 1. Static shell (pre-rendered at build time, delivered with 0ms TTFB) */}
      <span className="text-xs text-muted-foreground font-mono">/blog/{params.slug}</span>
      <h1 className="text-3xl font-bold">{post.title}</h1>
      <div className="text-sm text-muted-foreground my-2">
        By {post.author} • published {post.publishedAt}
      </div>
      <div className="prose mt-6">{post.content}</div>

      {/* 2. PPR Dynamic Stream: Real-time analytics streamed in via Suspense */}
      <Suspense fallback={<ViewsSkeleton />}>
        <RealtimeViews slug={params.slug} />
      </Suspense>
    </article>
  );
}

// src/blog/layout_functions.ts
import type { LayoutFunctions, RouteParams } from "dinou";
import { db } from "@/lib/db";

// 1. Layout parameters for /blog (static route segment without dynamic params = {})
type BlogLayoutParams = RouteParams<"/blog">;

// 2. Define layout data contract
export interface BlogCategory {
  id: string;
  name: string;
  count: number;
}

export interface BlogLayoutData {
  categories: BlogCategory[];
  featuredSlug: string;
}

// 3. Dedicated layout loader typed via LayoutFunctions
export const getProps: LayoutFunctions<BlogLayoutParams, BlogLayoutData>["getProps"] = async () => {
  const categories = await db.categories.findMany();
  const featured = await db.posts.findFirst({ where: { featured: true } });

  // Injected directly as props into layout.tsx
  return {
    categories,
    featuredSlug: featured?.slug ?? "welcome",
  };
};

// 4. Segment-level caching strategy for the layout shell
export const revalidate: LayoutFunctions["revalidate"] = 300; // Layout revalidates every 5 mins
export const ppr: LayoutFunctions["ppr"] = true;

// src/blog/layout.tsx
import type { LayoutProps } from "dinou";
import type { BlogLayoutData } from "./layout_functions";

// Extend LayoutProps to receive children, segment params, and layout loader data
interface BlogLayoutComponentProps extends LayoutProps<"/blog">, BlogLayoutData {}

export default function BlogLayout({
  children,
  categories,
  featuredSlug,
}: BlogLayoutComponentProps) {
  return (
    <div className="blog-container">
      <aside className="blog-sidebar">
        <h3>Categories</h3>
        <ul>
          {categories.map((c) => (
            <li key={c.id}>{c.name} ({c.count})</li>
          ))}
        </ul>
      </aside>
      <main className="blog-content">
        {children}
      </main>
    </div>
  );
}