You are an expert AI coding agent. Migrate this repository (a simple Next.js App Router blog rendering Markdown files from _posts/) to Astro with TypeScript, top-tier performance, and strong SEO, using only first-class Astro integrations. Execute the steps in this document precisely.

Objectives

Create an Astro site in an astro/ subfolder first, keep Next.js intact until parity is verified.
Use TypeScript, Astro Content Collections, and image() for typed/optimized cover images.
Preserve routes and URLs: / and /posts/<slug>.
Preserve Tailwind look and structure; keep dependencies minimal (Astro, @astrojs/tailwind, @astrojs/sitemap, @astrojs/rss, Tailwind, PostCSS, Autoprefixer, TypeScript).
Implement solid SEO (OG/Twitter tags, sitemap, RSS, favicons/robots) and excellent performance.

Operating Notes

Request approval before any network operations (package installs) or destructive actions; work incrementally.
Follow “Testing & Verification Guidelines” in section 22 before declaring parity.
Document any deviations from this plan and justify them.

Deliverables

An astro/ app with content migrated to src/content/posts/<slug>/index.md and colocated cover.jpg.
Pages: src/pages/index.astro and src/pages/posts/[slug].astro with SEO meta.
BaseLayout.astro, Header.astro, Footer.astro, PostTitle.astro, DateFormatter.astro.
Working sitemap and RSS at /sitemap-index.xml and /feed.xml.
A short migration report (added to the end of this file) listing actions performed, commands run, and test results.

Success Criteria

astro check passes, astro build succeeds, preview renders all posts.
Lighthouse shows excellent scores; meta tags present; RSS and sitemap valid.
URL and visual parity with the current site.

Then, prepare a safe swap plan to move Astro to repo root and remove Next-only deps after sign-off.

Migrate this Next.js Markdown blog to Astro

This is a precise, repo‑aware implementation guide to migrate the Decoding Disney blog from Next.js (App Router) to Astro with TypeScript, first‑class performance, and great SEO — while keeping the current styles and views familiar and minimizing dependencies.

Goals

TypeScript and type‑safe content (Astro Content Collections)
Static, fast, SEO‑strong site (sitemap + RSS)
Preserve current URLs, styles, and layout
Prefer official Astro integrations and few third‑party packages

What you’re migrating

Markdown posts: _posts/*.md
Cover images: public/assets/blog/<slug>/cover.jpg
Next components/styles: Tailwind classes in src/app/**/*
Routes: / (home) and /posts/[slug]
SEO: canonical base https://decodingdisney.com, favicons, robots, RSS link

Recommended high‑level approach

Create a new Astro app alongside the current code under an astro/ subfolder. 2) Migrate content and views. 3) Verify parity locally. 4) Swap root to Astro and remove Next once validated. This avoids breaking the current site during the work.

0) Repo audit (for context)

Posts live in _posts/ with frontmatter: title, excerpt, coverImage, date, author: { name }, ogImage: { url }.
Assets: public/assets/blog/<slug>/cover.jpg.
Home page lists posts: src/app/page.tsx.
Post page: src/app/posts/[slug]/page.tsx.
Tailwind used across components, minimal global CSS.
Head/meta configured in src/app/layout.tsx (favicons, RSS link /feed.xml, base URL).
Markdown is rendered via remark to HTML; posts are read via gray-matter from _posts/.

Astro will replace gray‑matter/remark directly via built‑in Markdown + Content Collections.

1) Create the Astro project (inside `astro/`)

Run in repo root:

npm create astro@latest astro -- --template basics --typescript --yes
cd astro
npm install

Rationale: scaffolding into astro/ keeps Next.js intact while you build and verify the new site.

Update package.json scripts at repo root later; for now, use the ones inside astro/.

2) Add only first‑class Astro integrations

# Inside astro/
npx astro add tailwind sitemap
npm i -D @astrojs/rss

Why these:

@astrojs/tailwind keeps current styling with minimal changes.
@astrojs/sitemap boosts SEO and helps canonical URLs.
@astrojs/rss provides /feed.xml to match current <link rel="alternate" ...>.

Do not add React/Next/remark/gray‑matter here — Astro replaces them.

3) Configure Astro site metadata

Set your canonical site in astro/astro.config.mjs:

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

export default defineConfig({
  site: 'https://decodingdisney.com',
  integrations: [tailwind(), sitemap()],
})

Tailwind’s content globs will be added automatically by the integration. Keep your existing tailwind.config.ts design tokens if desired; see step 8 for globs.

4) Move global styles

Copy Tailwind globals from src/app/globals.css to astro/src/styles/globals.css (the Tailwind integration will inject/import this for you):

@tailwind base;
@tailwind components;
@tailwind utilities;

If you have custom utility classes later, add them here; no further changes needed right now.

Add markdown styles (prefer out-of-the-box, zero deps) in astro/src/styles/markdown.css:

.markdown {
  @apply text-lg leading-relaxed;
}
.markdown p,
.markdown ul,
.markdown ol,
.markdown blockquote {
  @apply my-6;
}
.markdown h2 { @apply text-3xl mt-12 mb-4 leading-snug; }
.markdown h3 { @apply text-2xl mt-8 mb-4 leading-snug; }

5) Create a type‑safe Content Collection for posts

Create astro/src/content/config.ts:

import { defineCollection, z, image } from 'astro:content'

const posts = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    excerpt: z.string(),
    date: z.date(),
    author: z.object({ name: z.string() }),
    // Use typed images for performance and type‑safety
    coverImage: image(),
    // Optional: keep ogImage override, else derive from coverImage
    ogImage: z.object({ url: z.string().optional() }).optional(),
    // Optional: lightweight SEO keywords
    keywords: z.array(z.string()).optional(),
  }),
})

export const collections = { posts }

Why image(): Astro will optimize and type images at build time without extra packages, improving LCP for cover images.

6) Migrate Markdown posts and images

We’ll colocate covers with each post to unlock image() benefits.

For each file in _posts/*.md (example: _posts/90s-movies.md):

Create a folder astro/src/content/posts/<slug>/ (slug = filename without .md).
Move the cover image from public/assets/blog/<slug>/cover.jpg to that folder.
Create index.md inside that folder and copy the Markdown content.
Update frontmatter fields:
- Keep title, excerpt, date, author as‑is.
- Set coverImage: ./cover.jpg (relative path).
- Remove ogImage unless a unique OG image is required; we’ll default to coverImage.

Example frontmatter after move:

---
title: "Don't Watch Bluey...Watch These 90s Disney Movies Instead"
excerpt: |
  One of the biggest surprises about raising my son has been how much we've gravitated toward old-school Disney movies...
date: '2025-01-17'
author:
  name: 'Tytus Planck'
coverImage: ./cover.jpg
---

Repeat for all posts in _posts/.

Note: If you prefer a quicker first pass, you can leave images in public/ and set coverImage to a string path while changing the schema to z.string(); however, the image() approach above is recommended for performance and type safety.

7) Port site chrome (Header/Footer) and simple components

Create astro/src/components/Header.astro (replicates Next header, no social icons):

---
---
<header class="w-full bg-transparent flex justify-between items-center pb-14 pt-7">
  <h2 class="text-2xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight mb-0 mt-0">
    <a class="hover:underline" href="/">Decoding Disney</a>.
  </h2>
</header>

Create astro/src/components/Footer.astro:

---
---
<footer>
  <div class="container mx-auto px-5">
    <div class="py-10 flex flex-col items-center">
      <p class="text-center mt-8 text-xs text-gray-500 sm:mt-0">
        Copyright &copy; 2025 Decoding Disney. All rights reserved. Built
        with 🔥 in Cincinnati, Ohio.
      </p>
    </div>
  </div>
</footer>

Create astro/src/components/PostTitle.astro:

---
const { children } = Astro.props
---
<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold tracking-tighter leading-tight md:leading-none mb-6 text-center">
  {children}
  </h1>

Create astro/src/components/DateFormatter.astro (drops date-fns dependency):

---
const { date }: { date: Date } = Astro.props
const formatted = new Intl.DateTimeFormat('en-US', {
  month: 'long', day: 'numeric', year: 'numeric'
}).format(date)
---
<time datetime={date.toISOString()}>{formatted}</time>

Optional: If you want a reusable cover component, you can inline the <Image /> usage in the post page instead (see step 9) and skip a separate component.

8) Tailwind config alignment

Update astro/tailwind.config.ts content globs to match Astro files (keep your theme as-is):

import type { Config } from 'tailwindcss'

export default {
  content: [
    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
      colors: {
        'accent-1': '#FAFAFA',
        'accent-2': '#EAEAEA',
        'accent-7': '#333',
        success: '#0070f3',
        cyan: '#79FFE1',
      },
      spacing: { 28: '7rem' },
      letterSpacing: { tighter: '-.04em' },
      fontSize: { '5xl': '2.5rem', '6xl': '2.75rem', '7xl': '4.5rem', '8xl': '6.25rem' },
      boxShadow: { sm: '0 5px 10px rgba(0, 0, 0, 0.12)', md: '0 8px 30px rgba(0, 0, 0, 0.12)' },
    },
  },
  plugins: [],
} satisfies Config

9) Base layout with SEO and favicons

Create astro/src/layouts/BaseLayout.astro to centralize meta tags and shared chrome:

---
import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro'
import '../styles/globals.css'
import '../styles/markdown.css'

interface Props {
  title?: string
  description?: string
  keywords?: string[]
  type?: 'article' | 'website'
  ogImage?: string
  publishedTime?: string
  modifiedTime?: string
}

const {
  title = 'Decoding Disney',
  description = 'Your ultimate guide to Disney parks, with tips, reviews, and insider knowledge.',
  keywords = [],
  type = 'website',
  ogImage = '/favicon/android-chrome-512x512.png',
  publishedTime,
  modifiedTime,
} = Astro.props as Props
---
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title}</title>
    <meta name="description" content={description} />
    {keywords.length ? <meta name="keywords" content={keywords.join(', ')} /> : null}

    <!-- Open Graph -->
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:type" content={type} />
    <meta property="og:image" content={ogImage} />
    <meta property="og:site_name" content="Decoding Disney" />
    {publishedTime && <meta property="article:published_time" content={publishedTime} />}
    {modifiedTime && <meta property="article:modified_time" content={modifiedTime} />}

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={title} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:image" content={ogImage} />

    <!-- Favicons -->
    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
    <link rel="manifest" href="/favicon/site.webmanifest" />
    <link rel="shortcut icon" href="/favicon/favicon.ico" />
    <meta name="msapplication-TileColor" content="#000000" />
    <meta name="theme-color" content="#000" />
    <link rel="alternate" type="application/rss+xml" href="/feed.xml" />
  </head>
  <body class="min-h-screen">
    <div class="min-h-screen">
      <Header />
      <slot />
    </div>
    <Footer />
  </body>
  </html>

Copy public/robots.txt and the public/favicon/* directory from the root into astro/public/.

10) Build the homepage (list posts)

Create astro/src/pages/index.astro:

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

const posts = (await getCollection('posts')).sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
---
<BaseLayout title="Decoding Disney">
  <main class="min-h-screen flex flex-col">
    <section class="flex flex-col items-start justify-center w-full min-h-screen p-4 md:p-8">
      <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-4">Decoding Disney.</h1>
      <h2 class="text-lg md:text-xl text-gray-700">
        Join me as I share <strong>tips</strong>, <strong>tricks</strong>, and <strong>insights</strong> to help you make the most of your Disney vacations. Together, we'll <em class="italic">decode</em> the secrets of Disney World and create <em class="font-semibold">magical experiences</em> for everyone.
      </h2>

      <div class="flex flex-col items-start text-left w-full mt-16">
        <h3 class="text-lg md:text-xl font-bold mb-4 text-gray-900">Latest articles &#128071;</h3>
        <ul class="flex flex-col space-y-4 w-full">
          {posts.map((post) => (
            <li>
              <a href={`/posts/${post.slug}`} class="text-md md:text-lg font-semibold text-gray-600 hover:text-blue-900 transition-colors">
                {post.data.title}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  </main>
  </BaseLayout>

This mirrors src/app/page.tsx’s structure and Tailwind classes.

11) Build the post page (typed content + optimized image)

Create astro/src/pages/posts/[slug].astro:

---
import BaseLayout from '../../layouts/BaseLayout.astro'
import PostTitle from '../../components/PostTitle.astro'
import DateFormatter from '../../components/DateFormatter.astro'
import { getEntryBySlug } from 'astro:content'
import { Image } from 'astro:assets'

const { slug } = Astro.params
const entry = slug ? await getEntryBySlug('posts', slug) : undefined
if (!entry) throw new Error('Post not found')

const { Content, data } = entry
const pageTitle = `${data.title} | Decoding Disney`
const ogImage = data.coverImage.src
---
<BaseLayout
  title={pageTitle}
  description={data.excerpt}
  type="article"
  ogImage={ogImage}
  publishedTime={data.date.toISOString()}
>
  <main>
    <div class="container mx-auto px-5">
      <article class="mb-32">
        <div class="mb-8 md:mb-16 sm:mx-0 flex justify-center">
          <div class="h-[512px] w-[512px]">
            <Image src={data.coverImage} alt={`Cover Image for ${data.title}`} width={512} height={512} class="shadow-sm w-full" />
          </div>
        </div>
        <div class="flex justify-center">
          <PostTitle>{data.title}</PostTitle>
        </div>
        <div class="flex justify-center max-w-2xl mx-auto mb-6 text-lg">
          <DateFormatter date={data.date} />
        </div>
        <div class="max-w-2xl mx-auto markdown">
          <Content />
        </div>
      </article>
    </div>
  </main>
  </BaseLayout>

Notes:

<Content /> renders Markdown directly; no remark/dangerouslySetInnerHTML needed.
astro:assets optimizes the cover image at build time.

12) Add RSS feed at `/feed.xml`

Create astro/src/pages/feed.xml.ts:

import rss from '@astrojs/rss'
import { getCollection } from 'astro:content'

export async function GET(context) {
  const posts = await getCollection('posts')
  return rss({
    title: 'Decoding Disney',
    description: 'Your ultimate guide to Disney parks, with tips, reviews, and insider knowledge.',
    site: context.site!,
    items: posts
      .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
      .map((p) => ({
        title: p.data.title,
        description: p.data.excerpt,
        pubDate: p.data.date,
        link: `/posts/${p.slug}`,
      })),
  })
}

The <link rel="alternate" ...> in BaseLayout.astro will point to this file.

13) Keep URLs and public assets stable

Keep any non‑cover static assets in astro/public/ using the same paths to avoid breaking links.
The routes remain / and /posts/[slug], matching the Next implementation, so no redirects are required.

14) Optional: Structured data for articles (SEO boost)

Add this JSON‑LD in src/pages/posts/[slug].astro inside <BaseLayout> to enhance SEO without extra packages:

<script type="application/ld+json">
  {JSON.stringify({
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: data.title,
    datePublished: data.date.toISOString(),
    image: ogImage,
    author: { '@type': 'Person', name: data.author?.name },
  })}
</script>

15) Local verification

cd astro
npm run dev

Check:

Home lists all posts with the same titles.
Each post page renders cover image, title, date, and content.
Page source contains OG/Twitter meta tags and RSS <link>.
Visit /sitemap-index.xml and /feed.xml to verify SEO outputs.

Type checking:

npx astro check

Build:

npm run build
npm run preview

16) Swap to Astro at repo root

Once you’re satisfied with parity:

Move astro/* into repo root (or replace root with astro/ contents) so Astro is the primary app.
Copy astro/public/* over root public/ (merge, do not lose existing robots/favicons).
Replace root package.json scripts with Astro scripts:

{
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "check": "astro check"
  },
  "devDependencies": {
    "astro": "^4",
    "@astrojs/tailwind": "^5",
    "@astrojs/rss": "^4",
    "@astrojs/sitemap": "^3",
    "tailwindcss": "^3",
    "autoprefixer": "^10",
    "postcss": "^8",
    "typescript": "^5"
  }
}

Remove Next/React‑only deps from the root:
- next, react, react-dom, remark, remark-html, gray-matter, classnames, date-fns, @vercel/analytics, @vercel/speed-insights.
- The DateFormatter replacement removed date-fns; Tailwind stays.
Delete src/app/**, src/lib/**, and _posts/ once content is migrated to src/content/posts/.
Ensure astro/astro.config.mjs is now at root as astro.config.mjs with site set.

17) Deployment (Vercel)

Astro is static by default; no adapter is needed for Vercel.
If you were using Vercel Analytics, prefer the zero‑dependency script tag:

<!-- Add in BaseLayout head (optional) -->
<script defer src="/_vercel/insights/script.js"></script>

Set the Vercel project to build with npm run build and output from dist/.

18) Package minimization summary

Remove (replaced by Astro):

next, react, react-dom, gray-matter, remark, remark-html, classnames, date-fns, @vercel/* (optional script if needed)

Keep/add (first‑class Astro):

astro, @astrojs/tailwind, @astrojs/sitemap, @astrojs/rss, tailwindcss, autoprefixer, postcss, typescript

19) Parity checklist

URLs unchanged (/, /posts/<slug>)
Visuals match (Tailwind classes preserved)
Cover images optimized (via astro:assets typed image())
Metadata set site‑wide (title template, description, OG/Twitter)
Sitemap and RSS generated
Robots and favicons present
Type‑safe content via Content Collections

20) Nice‑to‑have follow‑ups

Add draft support (draft: boolean) in schema; filter out in prod.
Add keywords: string[] in existing posts and pass to layout for SEO.
Add readingTime (computed during build) without dependencies by estimating from word count.
If you host large images, consider moving them to src/assets for automatic optimization. For remote images, consult astro:assets remote handling.

21) Mapping from Next to Astro (for reference)

Next src/app/page.tsx → Astro src/pages/index.astro
Next src/app/posts/[slug]/page.tsx → Astro src/pages/posts/[slug].astro
Next components:
- header.tsx → components/Header.astro
- footer.tsx → components/Footer.astro
- post-title.tsx → components/PostTitle.astro
- date-formatter.tsx → components/DateFormatter.astro
- post-body.tsx → inlined <Content />
- cover-image.tsx → inlined <Image /> or a tiny Astro component
Next lib (api.ts, markdownToHtml.ts, metadata.ts) → replaced by Content Collections + BaseLayout meta
_posts/*.md → src/content/posts/<slug>/index.md (with cover.jpg beside it)
public/assets/blog/.../cover.jpg → moved next to each post or into src/assets (preferred for optimization)

This plan keeps the site fast, type‑safe, and SEO‑strong using only official Astro features with minimal dependencies, while preserving existing styling and structure.

22) Testing & Verification Guidelines

Focus on first‑class Astro checks, browser tooling, and zero/low‑dependency steps.

Core checks (local)
- cd astro && npm run dev then verify:
  - Home lists posts in correct order (date desc).
  - Each /posts/<slug> loads with cover image, title, date, content.
  - URLs match the Next.js app; no 404s for known pages.
Type and content safety
- npx astro check to validate TypeScript and Content Collections schemas.
- Intentionally break a post’s frontmatter (e.g., remove title) to confirm the checker fails, then revert.
Build correctness
- npm run build && npm run preview.
- Inspect dist/ for:
  - index.html and posts/<slug>/index.html exist for all posts.
  - Optimized images under /_astro/ and correct <img> width/height in page HTML.
  - Minimal JS payload (Astro pages should be largely HTML/CSS unless you add islands).
SEO validation
- View page source for OG/Twitter meta on home and a post.
- Confirm canonical site in astro.config.mjs is set to https://decodingdisney.com.
- Visit /sitemap-index.xml and ensure post URLs are present.
- Visit /feed.xml and verify titles, descriptions, links, and pubDate.
- Optional: Run Google Rich Results Test on a post URL to validate JSON‑LD if added.
Performance and accessibility
- In Chrome DevTools Lighthouse (local preview or deployed preview): run Performance, Best Practices, Accessibility, SEO audits.
- Expect excellent scores with minimal JS and optimized images.
Link integrity (optional, minimal tooling)
- After npm run build, you can run a one‑off link check without adding a permanent dep:
  - npx linkinator ./dist -r -s (optional; skip if you want zero extra downloads).
- Or spot‑check internal links in the built HTML under dist/.
HTTP status checks
- Ensure /404 returns 404 in preview (Astro default). If you add a custom src/pages/404.astro, verify it renders and returns 404.
Regression gate before swap
- All pages render; no console errors.
- Sitemap + RSS present; meta tags present; favicons and robots served.
- Build completes cleanly; astro check passes.

23) Migration Report Template

Copy this section and fill it out after completing the migration work.

Title: Decoding Disney – Next.js → Astro Migration Report

Date:

Agent:

Repository commit/branch: <commit SHA / branch>

Summary

Scope: Migrated site from Next.js (App Router) to Astro with TS
Approach: Built in astro/, verified parity, prepared cutover
Result: <Pass/Fail> with notes

Key Changes

Implemented Content Collections for posts
Recreated pages: /, /posts/[slug]
Ported layout, header, footer, and components
Added sitemap and RSS; preserved favicons/robots
Optimized cover images with astro:assets
Header hidden on home route via showHeader flag in BaseLayout

Commands Run

npm create astro@latest astro -- --template basics --typescript --yes
cd astro
npx astro add tailwind sitemap
npm i -D @astrojs/rss
npm run dev
npx astro check
npm run build && npm run preview

Content Migration

Posts moved to src/content/posts/<slug>/index.md:
Cover images colocated with posts:
Deviations (if any):

Testing Results

astro check: <pass/fail + notes>
Build/Preview: <pass/fail + notes>
Pages verified:
- / home: <ok/issues>
- Each /posts/<slug>: <ok/issues>
SEO artifacts:
- Meta (OG/Twitter): <ok/issues>
- Sitemap (/sitemap-index.xml): <ok/issues>
- RSS (/feed.xml): <ok/issues>
Performance (Lighthouse – local preview):
- Performance:
- Accessibility:
- Best Practices:
- SEO:
Link check (optional): <tool + results>

Assets & URLs

Favicons present under /favicon/*: <ok/issues>
robots.txt served at /robots.txt: <ok/issues>
Public asset paths unchanged where applicable: <ok/issues>
Route parity preserved (/, /posts/<slug>): <ok/issues>

Issues & Deviations

List any deviations from the plan and rationale
List any follow-up tasks created

Cutover Readiness

Meets Success Criteria (section: Agent Kickoff Prompt): <yes/no>
Proposed cutover window: <date/time>
Rollback plan: restore Next.js branch and Vercel settings

Next Steps

Approvals required:
Execute “Swap to Astro at repo root” (section 16) after sign-off

24) Clarifications & Common Pitfalls

Markdown styling options (choose one; recommended default = Option A)
- Option A (default): Reuse existing styles (zero extra deps)
  1. Create astro/src/styles/markdown.css with the contents of src/app/_components/markdown-styles.module.css:
```
.markdown {
  @apply text-lg leading-relaxed;
}
.markdown p,
.markdown ul,
.markdown ol,
.markdown blockquote {
  @apply my-6;
}
.markdown h2 { @apply text-3xl mt-12 mb-4 leading-snug; }
.markdown h3 { @apply text-2xl mt-8 mb-4 leading-snug; }
```
  2. Import it in BaseLayout.astro next to globals.css (already shown in step 9):
```
import '../styles/markdown.css'
```
  3. Use class="markdown" wrapper (already in step 11).
- Option B: Tailwind Typography plugin (one small dep)
  1. npm i -D @tailwindcss/typography
  2. Add to astro/tailwind.config.ts:
```
import typography from '@tailwindcss/typography'
export default { /* ... */, plugins: [typography()] }
```
  3. Replace the wrapper with class="prose prose-gray" (and add dark variant if needed). If you choose this, remove the markdown.css import.
Default OG image
- BaseLayout defaults to /favicon/android-chrome-512x512.png to avoid adding new assets. You can later replace this with a true 1200x630 OG image if desired.

404 page

Create astro/src/pages/404.astro for a clear not‑found page and to validate status in preview:

---
import BaseLayout from '../layouts/BaseLayout.astro'
---
<BaseLayout title="Page Not Found | Decoding Disney" description="The page you are looking for does not exist.">
  <main class="container mx-auto px-5 py-24">
    <h1 class="text-3xl font-bold mb-4">Page not found</h1>
    <p><a class="text-blue-700 underline" href="/">Go back home</a></p>
  </main>
</BaseLayout>

Dates in frontmatter
- Schema uses z.date(). ISO‑like YYYY-MM-DD works. If you need flexibility, use:
```
date: z.string().transform((s) => new Date(s))
```
- Add a .refine((d) => !isNaN(d.getTime()), 'Invalid date') if needed.
Slugs & structure
- Use src/content/posts/<slug>/index.md to guarantee stable slugs matching current routes.
Inline images in Markdown (future posts)
- If you add inline images, either colocate them next to the Markdown and reference relatively, or keep them in public/ and switch coverImage schema to z.string() if you prefer not to colocate.
Head tag parity
- Next referenced safari-pinned-tab.svg and browserconfig.xml which are not present in public/. Either add those files under astro/public/favicon/ and keep the tags, or omit those tags for cleanliness. Keep OG/Twitter, favicons, and manifest.
- Add <meta property="og:site_name" content="Decoding Disney" /> (already in BaseLayout). Optionally add <link rel="canonical" ...> per page if desired.
Fonts (Inter vs. system)
- Next used Inter via next/font/google. For Astro, either keep system fonts (faster, zero JS) or add a Google Fonts <link> in the <head>.
Vercel build settings
- After cutover, set build command to npm run build and output directory to dist/. No adapter is needed.

Path aliases (optional)

If you want @/... imports, configure:

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["src/*"] }
  }
}

astro.config.mjs

import { defineConfig } from 'astro/config'
import { fileURLToPath } from 'url'
import { URL } from 'url'
export default defineConfig({
  vite: {
    resolve: {
      alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) }
    }
  }
})

Draft content
- If you add draft: true to the schema later, filter drafts from the home list, RSS, and sitemap consistently.