website/
├── src/
│   ├── app/(v2)/                    # App Router pages
│   │   ├── [section]/[[...page]]/   # Docs/guides catch-all
│   │   ├── learn/[[...page]]/       # Learn section
│   │   ├── (blog)/blog/[...slug]/   # Blog posts
│   │   ├── (blog)/changelog/[...slug]/
│   │   └── (marketing)/templates/[slug]/
│   ├── content/                     # MDX content
│   │   ├── docs/                    # 68 MDX files
│   │   ├── guides/
│   │   └── learn/
│   ├── posts/                       # Blog posts (31 directories)
│   ├── components/
│   ├── data/                        # Static data files
│   ├── lib/
│   ├── mdx/                         # MDX plugins
│   └── sitemap/                     # Navigation config
├── public/
├── next.config.ts
└── package.json

website-astro/
├── src/
│   ├── pages/                       # Astro pages (file-based routing)
│   │   ├── docs/
│   │   │   └── [...slug].astro      # Catch-all for docs
│   │   ├── guides/
│   │   │   └── [...slug].astro      # Catch-all for guides
│   │   ├── learn/
│   │   │   └── [...slug].astro      # Learn section
│   │   ├── blog/
│   │   │   ├── index.astro          # Blog listing
│   │   │   └── [...slug].astro      # Blog posts
│   │   ├── changelog/
│   │   │   ├── index.astro
│   │   │   └── [...slug].astro
│   │   ├── templates/
│   │   │   ├── index.astro
│   │   │   └── [slug].astro
│   │   └── index.astro              # Home page
│   ├── content/                     # Content collections
│   │   ├── docs/                    # MDX docs
│   │   ├── guides/
│   │   ├── learn/
│   │   └── posts/                   # Blog posts (moved from src/posts)
│   ├── components/                  # Astro/React components
│   ├── data/                        # Static data files
│   ├── lib/                         # Utilities
│   ├── layouts/                     # Layout components
│   │   ├── BaseLayout.astro
│   │   ├── DocsLayout.astro
│   │   └── BlogLayout.astro
│   └── styles/                      # Global styles
├── public/
├── astro.config.mjs
├── content.config.ts                # Content collections config
├── tailwind.config.mjs
└── package.json

import { defineCollection, z, reference } from 'astro:content';
import { glob } from 'astro/loaders';

// Docs collection (for /docs/* and /guides/*)
const docs = defineCollection({
  loader: glob({ pattern: '**/*.mdx', base: './src/content/docs' }),
  schema: z.object({
    title: z.string().optional(),
    description: z.string().optional(),
  }),
});

const guides = defineCollection({
  loader: glob({ pattern: '**/*.mdx', base: './src/content/guides' }),
  schema: z.object({
    title: z.string().optional(),
    description: z.string().optional(),
  }),
});

const learn = defineCollection({
  loader: glob({ pattern: '**/*.mdx', base: './src/content/learn' }),
  schema: z.object({
    title: z.string().optional(),
    description: z.string().optional(),
    act: z.string().optional(),
    subtitle: z.string().optional(),
  }),
});

// Blog posts collection
const posts = defineCollection({
  loader: glob({ pattern: '**/page.mdx', base: './src/content/posts' }),
  schema: ({ image }) => z.object({
    author: z.enum(['nathan-flurry', 'nicholas-kissel', 'forest-anderson']),
    published: z.string().transform((str) => new Date(str)),
    category: z.enum(['changelog', 'monthly-update', 'launch-week', 'technical', 'guide', 'frogs']),
    keywords: z.array(z.string()).optional(),
    // Image will be handled separately via glob import
  }),
});

export const collections = {
  docs,
  guides,
  learn,
  posts,
};

export const author = "nicholas-kissel"
export const published = "2024-12-21"
export const category = "changelog"
export const keywords = ["Actors"]

# Rivet Actors Launch

Content here...

---
author: nicholas-kissel
published: "2024-12-21"
category: changelog
keywords:
  - Actors
---

# Rivet Actors Launch

Content here...

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import react from '@astrojs/react';
import tailwind from '@astrojs/tailwind';
import sitemap from '@astrojs/sitemap';

// Import existing plugins
import { remarkPlugins } from './src/mdx/remark';
import { rehypePlugins } from './src/mdx/rehype';

export default defineConfig({
  site: 'https://www.rivet.dev',
  integrations: [
    mdx({
      // Inherit markdown config (default: true)
      extendMarkdownConfig: true,

      // Syntax highlighting
      syntaxHighlight: 'shiki',
      shikiConfig: {
        theme: 'github-dark',
        langs: [
          'bash', 'typescript', 'javascript', 'json', 'yaml',
          'rust', 'html', 'css', 'docker', 'toml',
        ],
      },

      // Remark plugins (process markdown AST)
      remarkPlugins,

      // Rehype plugins (process HTML AST)
      rehypePlugins,

      // Enable GitHub Flavored Markdown
      gfm: true,

      // Optimize build (disable for debugging)
      optimize: true,
    }),
    react(),
    tailwind(),
    sitemap({
      filter: (page) => !page.includes('/api/'),
    }),
  ],
  output: 'static',
  trailingSlash: 'always',
});

import * as mdx from "@/components/mdx";
export function useMDXComponents(components) {
  return { ...components, ...mdx };
}

---
import { getEntry, render } from 'astro:content';
import * as mdxComponents from '@/components/mdx';

const entry = await getEntry('docs', Astro.params.slug);
const { Content, headings } = await render(entry);
---

<Content components={mdxComponents} />

// Re-export components for MDX
export { default as Heading } from './Heading.astro';
export { default as SchemaPreview } from './SchemaPreview.astro';
export { default as Lead } from './Lead.astro';

// Keep React components that need interactivity
export { pre, code, CodeGroup, Code } from './v2/Code';

// Re-export from component library
export * from '@rivet-gg/components/mdx';
export { Resource } from './Resources';
export { Summary } from './Summary';
export { Accordion, AccordionGroup } from './Accordion';
export { Frame } from './Frame';
export { Card, CardGroup } from './Card';

// Standard HTML element overrides
export const a = (props: any) => <a {...props} />;
export const table = (props: any) => (
  <div class="overflow-x-auto">
    <table {...props} />
  </div>
);

---
const { Content, headings } = await render(entry);
// headings array: [{ depth: 2, slug: 'section', text: 'Section' }, ...]
---

export async function generateStaticParams() {
  const staticParams: Param[] = [];
  for (const section of VALID_SECTIONS) {
    const dir = path.join(process.cwd(), "src", "content", section);
    const dirs = await fs.readdir(dir, { recursive: true });
    const files = dirs.filter((file) => file.endsWith(".mdx"));
    const sectionParams = files.map((file) => createParamsForFile(section, file));
    staticParams.push(...sectionParams);
  }
  return staticParams;
}

export async function generateMetadata({ params }) {
  const { section, page } = await params;
  const { component: { title, description } } = await loadContent(path);
  return { title: `${title} - Rivet`, description };
}

---
import { getCollection, render } from 'astro:content';
import DocsLayout from '@/layouts/DocsLayout.astro';
import * as mdxComponents from '@/components/mdx';

export async function getStaticPaths() {
  const docs = await getCollection('docs');
  return docs.map((entry) => ({
    params: { slug: entry.id },
    props: { entry },
  }));
}

const { entry } = Astro.props;
const { Content, headings } = await render(entry);

// Extract title from first h1 heading or frontmatter
const title = entry.data.title || headings.find(h => h.depth === 1)?.text || 'Documentation';
const description = entry.data.description || '';
---

<DocsLayout title={title} description={description} headings={headings}>
  <Content components={mdxComponents} />
</DocsLayout>

export function generateStaticParams() {
  return generateArticlesPageParams();
}

export async function generateMetadata({ params }) {
  const { slug } = await params;
  const { title, description, author, published, category, image } = await loadArticle(slug.join("/"));
  return {
    title,
    description,
    openGraph: { type: "article", publishedTime: published.toISOString(), ... },
  };
}

---
import { getCollection, render } from 'astro:content';
import BlogLayout from '@/layouts/BlogLayout.astro';
import { AUTHORS, CATEGORIES } from '@/lib/article';
import * as mdxComponents from '@/components/mdx';

export async function getStaticPaths() {
  const posts = await getCollection('posts');
  return posts.map((entry) => {
    // entry.id will be like "2024-12-21-rivet-actors-launch/page"
    // Transform to slug format
    const slug = entry.id.replace(/\/page$/, '');
    return {
      params: { slug },
      props: { entry },
    };
  });
}

const { entry } = Astro.props;
const { Content, headings } = await render(entry);

const author = AUTHORS[entry.data.author];
const category = CATEGORIES[entry.data.category];

// Load image (co-located in content folder)
const images = import.meta.glob('/src/content/posts/*/image.{png,jpg,gif}', { eager: true });
const imagePath = Object.keys(images).find(p => p.includes(entry.id.replace('/page', '')));
const image = imagePath ? images[imagePath] : null;
---

<BlogLayout
  title={headings.find(h => h.depth === 1)?.text || 'Blog Post'}
  description={entry.data.description}
  author={author}
  published={entry.data.published}
  category={category}
  image={image}
>
  <Content components={mdxComponents} />
</BlogLayout>

export async function generateStaticParams() {
  return templates.map((template) => ({ slug: template.name }));
}

---
import { templates } from '@/data/templates/shared';
import TemplateLayout from '@/layouts/TemplateLayout.astro';

export async function getStaticPaths() {
  return templates.map((template) => ({
    params: { slug: template.name },
    props: { template },
  }));
}

const { template } = Astro.props;
---

<TemplateLayout template={template}>
  <!-- Template content -->
</TemplateLayout>

export async function generateStaticParams(): Promise<{ page: string[] }[]> {
  const files = await fs.readdir(dir, { recursive: true });
  const mdxFiles = files.filter((file) => file.endsWith(".mdx"));
  return mdxFiles.map((file) => {
    const segments = file.replace(".mdx", "").split("/").filter(Boolean);
    return { page: segments };
  });
}

---
import { getCollection, render } from 'astro:content';
import LearnLayout from '@/layouts/LearnLayout.astro';
import * as mdxComponents from '@/components/mdx';

export async function getStaticPaths() {
  const learn = await getCollection('learn');
  return learn.map((entry) => ({
    params: { slug: entry.id || undefined },
    props: { entry },
  }));
}

const { entry } = Astro.props;
const { Content, headings } = await render(entry);
---

<LearnLayout
  title={entry.data.title}
  act={entry.data.act}
  subtitle={entry.data.subtitle}
  headings={headings}
>
  <Content components={mdxComponents} />
</LearnLayout>

export {
  TECHNOLOGIES,
  TAGS,
  templates,
  type Technology,
  type Tag,
  type Template,
} from "@rivetkit/example-registry";

import nathanFlurry from '@/authors/nathan-flurry/avatar.jpeg';
import nicholasKissel from '@/authors/nicholas-kissel/avatar.jpeg';
import forestAnderson from '@/authors/forest-anderson/avatar.jpeg';

export const AUTHORS = {
  "nathan-flurry": {
    name: "Nathan Flurry",
    role: "Co-founder & CTO",
    avatar: nathanFlurry,
    socials: {
      twitter: "https://x.com/NathanFlurry/",
      github: "https://github.com/nathanflurry",
      bluesky: "https://bsky.app/profile/nathanflurry.com",
    },
  },
  "nicholas-kissel": {
    name: "Nicholas Kissel",
    role: "Co-founder & CEO",
    avatar: nicholasKissel,
    socials: {
      twitter: "https://x.com/NicholasKissel",
      github: "https://github.com/nicholaskissel",
      bluesky: "https://bsky.app/profile/nicholaskissel.com",
    },
  },
  "forest-anderson": {
    name: "Forest Anderson",
    role: "Founding Engineer",
    avatar: forestAnderson,
    url: "https://twitter.com/angelonfira",
  },
} as const;

export const CATEGORIES = {
  changelog: { name: "Changelog" },
  "monthly-update": { name: "Monthly Update" },
  "launch-week": { name: "Launch Week" },
  technical: { name: "Technical" },
  guide: { name: "Guide" },
  frogs: { name: "Frogs" },
} as const;

export type AuthorId = keyof typeof AUTHORS;
export type CategoryId = keyof typeof CATEGORIES;

---
import BaseLayout from '@/layouts/BaseLayout.astro';
import { getCollection } from 'astro:content';

// Section components (keep as React with client:load for interactive ones)
import { RedesignedHero } from '@/components/home/RedesignedHero';
import { StatsSection } from '@/components/home/StatsSection';
import { ConceptSection } from '@/components/home/ConceptSection';
// ... other sections

// Get latest changelog title
const posts = await getCollection('posts');
const changelogEntries = posts.filter(p => p.data.category === 'changelog');
const latest = changelogEntries.sort((a, b) =>
  b.data.published.getTime() - a.data.published.getTime()
)[0];

// Extract h1 from MDX content
import { render } from 'astro:content';
const { headings } = await render(latest);
const latestChangelogTitle = headings.find(h => h.depth === 1)?.text || '';
---

<BaseLayout title="Rivet - Stateful Serverless Platform">
  <div class="min-h-screen bg-black font-sans text-zinc-300">
    <main>
      <RedesignedHero client:load latestChangelogTitle={latestChangelogTitle} />
      <StatsSection client:visible />
      <ConceptSection />
      <!-- Non-interactive sections can be Astro components -->
    </main>
  </div>
</BaseLayout>

---
// src/pages/solutions/agents.astro
import BaseLayout from '@/layouts/BaseLayout.astro';
import AgentsPage from '@/components/solutions/AgentsPage';
---

<BaseLayout title="AI Agents - Rivet">
  <AgentsPage client:load />
</BaseLayout>

---
// src/pages/pricing.astro
return Astro.redirect('/cloud/', 301);
---

export default defineConfig({
  redirects: {
    '/pricing': '/cloud/',
  },
});

import type { APIRoute } from 'astro';
import { getCollection } from 'astro:content';
import { Feed } from 'feed';
import { AUTHORS, CATEGORIES } from '@/lib/article';

// Ensure this route is pre-rendered at build time
export const prerender = true;

export const GET: APIRoute = async ({ site }) => {
  const siteUrl = site?.toString() || 'https://www.rivet.dev';
  const posts = await getCollection('posts');

  const feed = new Feed({
    title: 'Rivet',
    description: 'Rivet news',
    id: siteUrl,
    link: siteUrl,
    image: `${siteUrl}/favicon.ico`,
    favicon: `${siteUrl}/favicon.ico`,
    copyright: `All rights reserved ${new Date().getFullYear()} Rivet Gaming, Inc.`,
    feedLinks: {
      rss2: `${siteUrl}/rss/feed.xml`,
    },
  });

  for (const post of posts) {
    const slug = post.id.replace(/\/page$/, '');
    const url = `${siteUrl}/blog/${slug}`;
    const author = AUTHORS[post.data.author];

    feed.addItem({
      title: post.data.title || slug,
      id: slug,
      date: post.data.published,
      author: [{ name: author.name }],
      link: url,
      description: post.data.description || '',
    });
  }

  return new Response(feed.rss2(), {
    headers: {
      'Content-Type': 'application/xml; charset=utf-8',
    },
  });
};

import type { APIRoute } from 'astro';
import { getCollection, render } from 'astro:content';
import { AUTHORS, CATEGORIES } from '@/lib/article';

// Ensure this route is pre-rendered at build time
export const prerender = true;

export const GET: APIRoute = async () => {
  const posts = await getCollection('posts');
  const changelogPosts = posts.filter(p => p.data.category === 'changelog');

  const entries = await Promise.all(
    changelogPosts
      .sort((a, b) => b.data.published.getTime() - a.data.published.getTime())
      .map(async (entry) => {
        const author = AUTHORS[entry.data.author];
        const { headings } = await render(entry);
        const title = headings.find(h => h.depth === 1)?.text || entry.id;

        return {
          title,
          description: entry.data.description || '',
          slug: entry.id.replace(/\/page$/, ''),
          published: entry.data.published,
          authors: [{
            name: author.name,
            role: author.role,
            avatar: {
              url: author.avatar.src,
              height: author.avatar.height,
              width: author.avatar.width,
            },
          }],
          section: CATEGORIES[entry.data.category].name,
          tags: entry.data.keywords || [],
        };
      })
  );

  return new Response(JSON.stringify(entries), {
    headers: {
      'Content-Type': 'application/json; charset=utf-8',
    },
  });
};

Next.js                          Astro
─────────────────────────────────────────────────────
app/layout.tsx                   src/layouts/RootLayout.astro
└── (v2)/layout.tsx              src/layouts/BaseLayout.astro (includes Footer)
    ├── (marketing)/layout.tsx   src/layouts/MarketingLayout.astro (includes Header)
    ├── (blog)/layout.tsx        src/layouts/BlogLayout.astro
    ├── (content)/layout.tsx     src/layouts/ContentLayout.astro (prose styling)
    ├── [section]/layout.tsx     src/layouts/DocsLayout.astro
    └── learn/layout.tsx         src/layouts/LearnLayout.astro

---
import '@/styles/main.css';
import { Footer } from '@/components/Footer';
import { EmbedDetector } from '@/components/EmbedDetector';

interface Props {
  title: string;
  description?: string;
  canonicalUrl?: string;
  ogImage?: string;
}

const { title, description, canonicalUrl, ogImage } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title}</title>
    {description && <meta name="description" content={description} />}
    {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
    {ogImage && <meta property="og:image" content={ogImage} />}
    <link rel="icon" href="/favicon.ico" />
  </head>
  <body>
    <slot />
    <EmbedDetector client:load />
    <Footer />
  </body>
</html>

---
import BaseLayout from './BaseLayout.astro';
import { Header } from '@/components/v2/Header';

interface Props {
  title: string;
  description?: string;
}

const { title, description } = Astro.props;
---

<BaseLayout title={title} description={description}>
  <Header variant="floating" client:load />
  <slot />
</BaseLayout>

---
// src/pages/terms.mdx
layout: '@/layouts/ContentLayout.astro'
title: 'Terms of Service'
---

# Terms of Service

Content here...

---
export function getStaticPaths() {
  return [{ params: { tool: 'actors' } }];
}

const { tool } = Astro.params;
return Astro.redirect(`/docs/${tool}/`, 301);
---

---
import BaseLayout from '@/layouts/BaseLayout.astro';
---

<BaseLayout title="Wired In">
  <div>
    <iframe
      class="h-screen w-full"
      width="100%"
      height="100vh"
      src="https://www.youtube-nocookie.com/embed/PRBSKaTDrqQ?si=5jlDUh7aXIYev7Ty&controls=0"
      title="YouTube video player"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen
    ></iframe>
  </div>
</BaseLayout>

pnpm astro add sitemap

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://www.rivet.dev',
  integrations: [
    sitemap({
      // Filter out pages you don't want in sitemap
      filter: (page) => !page.includes('/api/') && !page.includes('/internal/'),

      // Add custom pages not generated by Astro
      customPages: [
        'https://www.rivet.dev/changelog.json',
      ],

      // Split sitemap if > 45000 entries
      entryLimit: 45000,

      // Optional: set changefreq/priority per-page
      serialize: (item) => {
        // Docs pages change more frequently
        if (item.url.includes('/docs/')) {
          item.changefreq = 'weekly';
          item.priority = 0.8;
        }
        return item;
      },
    }),
  ],
});

{
  "scripts": {
    "prebuild": "tsx scripts/generateLlmsTxt.ts",
    "build": "astro build"
  }
}

import type { APIRoute } from 'astro';
import { getCollection } from 'astro:content';

export const GET: APIRoute = async () => {
  const docs = await getCollection('docs');
  const posts = await getCollection('posts');

  let content = `# Rivet Documentation\n\n`;
  content += `> Rivet is a platform for building stateful serverless applications.\n\n`;
  content += `## Documentation\n\n`;

  for (const doc of docs) {
    content += `### ${doc.id}\n`;
    // Add rendered content or summary
  }

  return new Response(content, {
    headers: {
      'Content-Type': 'text/plain; charset=utf-8',
    },
  });
};

---
import { getCollection, render } from 'astro:content';

const docs = await getCollection('docs');

let content = `# Rivet Documentation

> Rivet is a platform for building stateful serverless applications.

## Docs

`;

for (const doc of docs) {
  const { headings } = await render(doc);
  const title = headings.find(h => h.depth === 1)?.text || doc.id;
  content += `### ${title}\n`;
  content += `URL: /docs/${doc.id}/\n\n`;
}
---
{content}

{
  "scripts": {
    "gen:llms": "tsx scripts/generateLlmsTxt.ts",
    "prebuild": "pnpm gen:navigation && pnpm gen:llms",
    "build": "pnpm prebuild && astro build"
  }
}

// scripts/generateNavigation.ts (adapted for Astro)
import glob from 'fast-glob';
import { readFile, writeFile, mkdir } from 'node:fs/promises';

async function generateNavigation() {
  const pages: Record<string, { title: string; description?: string }> = {};

  const mdxFiles = await glob(['src/content/**/*.mdx'], { cwd: '.' });

  for (const filename of mdxFiles) {
    const content = await readFile(filename, 'utf-8');

    // Extract title from first h1 heading
    const titleMatch = content.match(/^#\s+(.+)$/m);
    const title = titleMatch ? titleMatch[1] : '';

    // Extract description from first paragraph after h1
    const descMatch = content.match(/^#\s+.+\n+([^#\n].+)$/m);
    const description = descMatch ? descMatch[1] : undefined;

    // Build href from filename
    const href = '/' + filename
      .replace('src/content/', '')
      .replace(/\/index\.mdx$/, '')
      .replace(/\.mdx$/, '');

    pages[href] = { title, description };
  }

  await mkdir('./src/generated', { recursive: true });
  await writeFile('./src/generated/routes.json', JSON.stringify({ pages }, null, 2));
  console.log(`Generated ${Object.keys(pages).length} pages`);
}

generateNavigation();

# Website Dockerfile
# Multi-stage build: Node.js for building, Caddy for serving

# =============================================================================
# Stage 1: Build
# =============================================================================
FROM node:22-alpine AS builder

# Install git and git-lfs for fetching LFS files
RUN apk add --no-cache git git-lfs

# Install pnpm
RUN corepack enable && corepack prepare pnpm@latest --activate

WORKDIR /app

# Copy workspace configuration files
COPY pnpm-workspace.yaml package.json pnpm-lock.yaml ./

# Copy all workspace packages that website depends on
COPY website-astro/ website-astro/
COPY frontend/packages/components/ frontend/packages/components/
COPY frontend/packages/icons/ frontend/packages/icons/
COPY frontend/packages/example-registry/ frontend/packages/example-registry/
COPY examples/ examples/

# Fetch LFS files if needed
COPY scripts/docker/fetch-lfs.sh /tmp/fetch-lfs.sh
RUN chmod +x /tmp/fetch-lfs.sh && /tmp/fetch-lfs.sh

# Arguments for build
ARG FONTAWESOME_PACKAGE_TOKEN=""
ENV FONTAWESOME_PACKAGE_TOKEN=${FONTAWESOME_PACKAGE_TOKEN}

# Install dependencies
RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store \
    pnpm install --frozen-lockfile

# Build arguments for PUBLIC_* environment variables
ARG PUBLIC_SITE_URL="https://rivet.gg"
ARG PUBLIC_POSTHOG_KEY=""
ARG PUBLIC_POSTHOG_HOST=""
ARG PUBLIC_TYPESENSE_HOST=""
ARG PUBLIC_TYPESENSE_API_KEY=""

# Set environment variables for build
ENV PUBLIC_SITE_URL=${PUBLIC_SITE_URL}
ENV PUBLIC_POSTHOG_KEY=${PUBLIC_POSTHOG_KEY}
ENV PUBLIC_POSTHOG_HOST=${PUBLIC_POSTHOG_HOST}
ENV PUBLIC_TYPESENSE_HOST=${PUBLIC_TYPESENSE_HOST}
ENV PUBLIC_TYPESENSE_API_KEY=${PUBLIC_TYPESENSE_API_KEY}

WORKDIR /app/website-astro

# Build the website (static output to 'dist' directory)
RUN pnpm run build

# =============================================================================
# Stage 2: Serve with Caddy
# =============================================================================
FROM caddy:alpine

# Copy Caddyfile configuration
COPY website-astro/Caddyfile /etc/caddy/Caddyfile

# Copy built files from builder stage
COPY --from=builder /app/website-astro/dist /srv

# Default port
ENV PORT=80

CMD ["caddy", "run", "--config", "/etc/caddy/Caddyfile"]

{
	admin off
}

:{$PORT:80} {
	root * /srv

	# Gzip compression
	encode gzip

	# Security headers
	header {
		X-Frame-Options "SAMEORIGIN"
		X-Content-Type-Options "nosniff"
		X-XSS-Protection "1; mode=block"
	}

	# CORS for *.rivet.dev subdomains to fetch changelog.json
	@cors_preflight {
		path /changelog.json
		method OPTIONS
		header_regexp Origin ^https://.*\.rivet\.dev$
	}
	handle @cors_preflight {
		header Access-Control-Allow-Origin {header.Origin}
		header Access-Control-Allow-Methods "GET, OPTIONS"
		header Access-Control-Allow-Headers "Content-Type"
		respond 204
	}
	@cors_json {
		path /changelog.json
		header_regexp Origin ^https://.*\.rivet\.dev$
	}
	header @cors_json Access-Control-Allow-Origin {header.Origin}

	# Cache static assets aggressively (Astro outputs to _astro/)
	@static {
		path /_astro/* *.js *.css *.png *.jpg *.jpeg *.gif *.ico *.svg *.woff *.woff2 *.ttf *.eot
	}
	header @static Cache-Control "public, max-age=31536000, immutable"

	# Don't cache HTML files
	@html {
		path *.html
	}
	header @html Cache-Control "no-store, no-cache, must-revalidate"

	# Health check endpoint
	handle /health {
		respond "healthy" 200
	}

	# Main site handler - Astro static export with directory index
	handle {
		try_files {path} {path}/ {path}/index.html
		file_server
	}

	# Custom 404 page
	handle_errors {
		rewrite * /404.html
		file_server
	}
}

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import react from '@astrojs/react';
import tailwind from '@astrojs/tailwind';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://www.rivet.dev',
  output: 'static',  // REQUIRED: No SSR allowed
  trailingSlash: 'always',
  build: {
    assets: '_astro',
    format: 'directory',  // Generates /page/index.html instead of /page.html
  },
  integrations: [
    mdx(),
    react(),
    tailwind(),
    sitemap(),
  ],
});

const siteUrl = import.meta.env.PUBLIC_SITE_URL;

{
  "build": {
    "builder": "DOCKERFILE",
    "dockerfilePath": "website-astro/Dockerfile"
  }
}

# Create directory structure
mkdir -p website-astro/src/{pages,content,components,data,lib,layouts,styles}
mkdir -p website-astro/src/pages/{docs,guides,learn,blog,changelog,templates}
mkdir -p website-astro/public

# Copy content (MDX files)
cp -r website/src/content/docs website-astro/src/content/
cp -r website/src/content/guides website-astro/src/content/
cp -r website/src/content/learn website-astro/src/content/

# Copy blog posts to content folder
cp -r website/src/posts website-astro/src/content/

# Copy components (will need React → Astro conversion for some)
cp -r website/src/components website-astro/src/

# Copy data files (no changes needed)
cp -r website/src/data website-astro/src/

# Copy lib files (some modifications needed)
cp -r website/src/lib website-astro/src/

# Copy MDX configuration (reusable plugins)
cp -r website/src/mdx website-astro/src/

# Copy sitemap/navigation config
cp -r website/src/sitemap website-astro/src/

# Copy authors directory
cp -r website/src/authors website-astro/src/

# Copy public assets
cp -r website/public/* website-astro/public/

# Copy Tailwind config (will need minor adjustments)
cp website/tailwind.config.ts website-astro/tailwind.config.mjs
cp website/postcss.config.js website-astro/postcss.config.cjs

# Copy TypeScript config
cp website/tsconfig.json website-astro/tsconfig.json

import fs from "node:fs/promises";
import path from "node:path";
import type { Metadata } from "next";
import { notFound } from "next/navigation";

export const dynamicParams = false;

export async function generateStaticParams() {
  const staticParams: Param[] = [];
  for (const section of VALID_SECTIONS) {
    const dir = path.join(process.cwd(), "src", "content", section);
    const dirs = await fs.readdir(dir, { recursive: true });
    const files = dirs.filter((file) => file.endsWith(".mdx"));
    const sectionParams = files.map((file) => createParamsForFile(section, file));
    staticParams.push(...sectionParams);
  }
  return staticParams;
}

export async function generateMetadata({ params }): Promise<Metadata> {
  const { section, page } = await params;
  const path = buildPathComponents(section, page);
  const { component: { title, description } } = await loadContent(path);
  return {
    title: `${title} - Rivet`,
    description,
    alternates: { canonical: `https://www.rivet.dev${buildFullPath(path)}/` },
  };
}

export default async function CatchAllCorePage({ params }) {
  const { section, page } = await params;
  if (!VALID_SECTIONS.includes(section)) return notFound();

  const path = buildPathComponents(section, page);
  const { component: { default: Content, tableOfContents, title } } = await loadContent(path);

  return (
    <>
      <DocsNavigation sidebar={foundTab?.tab.sidebar} />
      <Prose as="article">
        <Content />
      </Prose>
      <DocsTableOfContents tableOfContents={tableOfContents} />
    </>
  );
}

---
import { getCollection, render } from 'astro:content';
import DocsLayout from '@/layouts/DocsLayout.astro';
import DocsNavigation from '@/components/DocsNavigation.astro';
import DocsTableOfContents from '@/components/DocsTableOfContents.astro';
import Prose from '@/components/Prose.astro';
import * as mdxComponents from '@/components/mdx';
import { sitemap } from '@/sitemap/mod';
import { findActiveTab } from '@/lib/sitemap';

export async function getStaticPaths() {
  const docs = await getCollection('docs');
  return docs.map((entry) => ({
    params: { slug: entry.id },
    props: { entry },
  }));
}

interface Props {
  entry: Awaited<ReturnType<typeof getCollection<'docs'>>>[number];
}

const { entry } = Astro.props;
const { Content, headings } = await render(entry);

// Build table of contents from headings
const tableOfContents = headings
  .filter(h => h.depth === 2 || h.depth === 3)
  .reduce((acc, h) => {
    if (h.depth === 2) {
      acc.push({ title: h.text, id: h.slug, children: [] });
    } else if (acc.length > 0) {
      acc[acc.length - 1].children.push({ title: h.text, id: h.slug, children: [] });
    }
    return acc;
  }, [] as Array<{ title: string; id: string; children: Array<{ title: string; id: string; children: never[] }> }>);

// Get title from first h1 or frontmatter
const title = entry.data.title || headings.find(h => h.depth === 1)?.text || 'Documentation';
const description = entry.data.description || '';
const fullPath = `/docs/${entry.id}/`;
const foundTab = findActiveTab(fullPath, sitemap);
const canonicalUrl = `https://www.rivet.dev${fullPath}`;
---

<DocsLayout
  title={`${title} - Rivet`}
  description={description}
  canonicalUrl={canonicalUrl}
>
  <aside class="hidden lg:block border-r" slot="sidebar">
    {foundTab?.tab.sidebar && <DocsNavigation sidebar={foundTab.tab.sidebar} />}
  </aside>

  <main class="w-full py-8 px-8">
    <Prose as="article" class="max-w-prose mx-auto">
      <Content components={mdxComponents} />
    </Prose>
  </main>

  <aside class="hidden xl:block w-64" slot="toc">
    <DocsTableOfContents tableOfContents={tableOfContents} />
  </aside>
</DocsLayout>

import { generateArticlesPageParams, loadArticle } from "@/lib/article";
import type { Metadata } from "next";
import Image from "next/image";

export async function generateMetadata({ params }): Promise<Metadata> {
  const { slug } = await params;
  const { description, title, author, published, tags, category, image } =
    await loadArticle(slug.join("/"));

  return {
    title,
    description,
    authors: [{ name: author.name, url: author.socials?.twitter || "" }],
    keywords: tags,
    openGraph: {
      title,
      description,
      type: "article",
      publishedTime: new Date(published).toISOString(),
      images: [{ url: image.src, width: image.width, height: image.height }],
    },
  };
}

export default async function BlogPage({ params }) {
  const { slug } = await params;
  const { Content, title, tableOfContents, author, published, category, image } =
    await loadArticle(slug.join("/"));

  return (
    <article>
      <Image {...image} alt="Promo Image" />
      <Content />
    </article>
  );
}

export function generateStaticParams() {
  return generateArticlesPageParams();
}

---
import { getCollection, render } from 'astro:content';
import { Image } from 'astro:assets';
import BlogLayout from '@/layouts/BlogLayout.astro';
import { AUTHORS, CATEGORIES } from '@/lib/article';
import * as mdxComponents from '@/components/mdx';

export async function getStaticPaths() {
  const posts = await getCollection('posts');

  // Import all post images eagerly
  const images = import.meta.glob<{ default: ImageMetadata }>(
    '/src/content/posts/*/image.{png,jpg,gif}',
    { eager: true }
  );

  return posts.map((entry) => {
    const slug = entry.id.replace(/\/page$/, '');
    const imagePath = Object.keys(images).find(p => p.includes(slug));
    const image = imagePath ? images[imagePath].default : null;

    return {
      params: { slug },
      props: { entry, image },
    };
  });
}

interface Props {
  entry: Awaited<ReturnType<typeof getCollection<'posts'>>>[number];
  image: ImageMetadata | null;
}

const { entry, image } = Astro.props;
const { Content, headings } = await render(entry);

const author = AUTHORS[entry.data.author];
const category = CATEGORIES[entry.data.category];
const title = headings.find(h => h.depth === 1)?.text || 'Blog Post';
const description = entry.data.description || '';
const published = entry.data.published;

// Build table of contents
const tableOfContents = headings
  .filter(h => h.depth === 2 || h.depth === 3)
  .reduce((acc, h) => {
    if (h.depth === 2) acc.push({ title: h.text, id: h.slug, children: [] });
    else if (acc.length > 0) acc[acc.length - 1].children.push({ title: h.text, id: h.slug, children: [] });
    return acc;
  }, [] as any[]);
---

<BlogLayout
  title={title}
  description={description}
  author={author}
  published={published}
  category={category}
  image={image}
  tableOfContents={tableOfContents}
>
  <article>
    {image && (
      <Image
        src={image}
        alt="Promo Image"
        class="rounded-xl border border-white/10"
      />
    )}
    <Content components={mdxComponents} />
  </article>
</BlogLayout>

import { templates, TECHNOLOGIES, TAGS } from "@/data/templates/shared";
import type { Metadata } from "next";
import { notFound } from "next/navigation";

export async function generateStaticParams() {
  return templates.map((template) => ({ slug: template.name }));
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const template = templates.find((t) => t.name === slug);
  if (!template) return { title: "Template Not Found - Rivet" };
  return {
    title: `${template.displayName} - Rivet Templates`,
    description: template.description,
    alternates: { canonical: `https://www.rivet.dev/templates/${slug}/` },
  };
}

export default async function Page({ params }: Props) {
  const { slug } = await params;
  const template = templates.find((t) => t.name === slug);
  if (!template) notFound();

  return <TemplateContent template={template} />;
}

---
import { templates, TECHNOLOGIES, TAGS } from '@/data/templates/shared';
import TemplateLayout from '@/layouts/TemplateLayout.astro';
import { Image } from 'astro:assets';

export async function getStaticPaths() {
  return templates.map((template) => ({
    params: { slug: template.name },
    props: { template },
  }));
}

interface Props {
  template: typeof templates[number];
}

const { template } = Astro.props;
const canonicalUrl = `https://www.rivet.dev/templates/${template.name}/`;
const description = template.description.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1');
---

<TemplateLayout
  title={`${template.displayName} - Rivet Templates`}
  description={description}
  canonicalUrl={canonicalUrl}
>
  <main class="min-h-screen w-full max-w-[1500px] mx-auto md:px-8">
    {!template.noFrontend && (
      <div class="relative">
        <Image
          src={`/examples/${template.name}/image.png`}
          alt={template.displayName}
          width={1200}
          height={675}
          class="h-full w-full object-cover"
        />
      </div>
    )}

    <h1 class="text-3xl font-medium tracking-tight text-white md:text-5xl">
      {template.displayName}
    </h1>
    <p class="text-lg text-zinc-400">{description}</p>

    <!-- Technologies -->
    <div class="flex flex-wrap gap-2">
      {template.technologies.map((tech) => {
        const techInfo = TECHNOLOGIES.find((t) => t.name === tech);
        return (
          <span class="inline-flex items-center px-3 py-1.5 rounded-md text-sm bg-white/5 text-zinc-300 border border-white/10">
            {techInfo?.displayName || tech}
          </span>
        );
      })}
    </div>
  </main>
</TemplateLayout>

{
  "name": "rivet-site",
  "type": "module",
  "scripts": {
    "dev": "astro dev",
    "build": "pnpm prebuild && astro build",
    "preview": "astro preview",
    "prebuild": "pnpm gen:navigation && pnpm gen:llms",
    "gen:navigation": "tsx scripts/generateNavigation.ts",
    "gen:llms": "tsx scripts/generateLlmsTxt.ts",
    "astro": "astro"
  },
  "dependencies": {
    "astro": "^5.x",
    "@astrojs/mdx": "^4.x",
    "@astrojs/react": "^4.x",
    "@astrojs/tailwind": "^6.x",
    "@astrojs/sitemap": "^3.x",
    "react": "^19.x",
    "react-dom": "^19.x",
    "tailwindcss": "^3.x",
    "shiki": "^3.x",
    "@shikijs/transformers": "^3.x",
    "mdx-annotations": "^0.1.x",
    "remark-gfm": "^4.x",
    "@sindresorhus/slugify": "^3.x"
  }
}