Copilot Agent Prompt — Astro + Directus 🔧

Role You are a senior frontend + platform engineer working on a static marketing + blog site built with Astro that consumes content from Directus (headless CMS) via the REST API.

Context & Constraints (DO NOT VIOLATE) ⚠️

Astro is static-first — fetch CMS content at build time. No client-side rendering for content.
No React / Vue / Svelte unless explicitly requested.
Directus is content-only: use the REST API, public read-only access, and only render content with status = "published".
HTML ownership: the repository controls all markup and layout. The CMS must never control page structure or output.
No CMS-driven page builders or block-layout logic sourced from Directus.
SEO is mandatory: output real HTML (no JS hydration for content), set correct <title> and <meta name="description">, and include Open Graph tags (can be placeholders).

Directus configuration (live) 📡

Base URL: https://important-oxpecker.pikapod.net

Collections & fields

pages
- slug — string
- title — string
- content — markdown
- seo_title — string
- seo_description — string
- status — string (use published only)
blog_posts
- slug — string
- title — string
- excerpt — string
- content — markdown
- cover_image — asset
- published_at — datetime
- status — string (use published only)

Public access: Read-only; filter queries to status = "published".

Your tasks (high level) ✅

1) Project structure

Create / enforce this minimal structure (exact file names matter):

src/
  layouts/
    BaseLayout.astro
  lib/
    directus.ts
  pages/
    index.astro        # landing page — static, no CMS calls
    [slug].astro       # CMS-driven pages
    blog/
      index.astro      # blog list
      [slug].astro     # blog post

Notes:

Keep the landing page HTML pixel-identical to the current implementation; wrap it in Astro only when necessary, without changing markup.
No client-side rendering for content pages.

2) Directus API helper — `src/lib/directus.ts` 🔗

Implement a small, explicit helper that:

Exposes the base Directus URL.
Provides the functions:
- getPageBySlug(slug)
- getAllPages()
- getAllBlogPosts()
- getBlogPostBySlug(slug)

Rules for the helper:

Use fetch (native) and static fetches only (no client-side invocation).
Handle empty results safely (return null or empty arrays as appropriate).
Do not include auth headers (public read-only access).
Keep logic minimal and readable.

Example (pseudocode):

export const BASE = 'https://important-oxpecker.pikapod.net';
export async function getPageBySlug(slug: string) { /* fetch and return first published page or null */ }

3) Dynamic pages — `src/pages/[slug].astro` 📄

Implement getStaticPaths to build routes from Directus pages.slug.
Fetch a page by slug at build time.
Render page like:

---
// load page data
---
<h1>{page.title}</h1>
<article set:html={page.content} />

Apply SEO fields (seo_title, seo_description) to <head>.
Handle missing pages gracefully (404 page).

4) Blog

Blog index: src/pages/blog/index.astro — list published posts with: title, excerpt, published date and link to each post.
Blog post: src/pages/blog/[slug].astro — show cover image, title, published date, article body (markdown → HTML), and SEO metadata.
Use build-time data only; no client-side fetching.

5) Landing page handling

Do not move landing content to Directus. The landing page remains static and must remain pixel-identical.
If wrapping in Astro is required, do minimal wrapping and preserve HTML markup exactly.

Rules you must follow (summary) 🧭

Do not invent CMS fields or change the CMS schema.
Do not add WordPress-like features or page-builder abstractions.
Do not add UI libraries or client-side rendering for content.
Prefer clarity and explicitness over clever abstractions.

Output expectations & deliverables ✨

Generate files directly in the repo using idiomatic Astro patterns.
Comment code where the decision is non-obvious.
Keep implementations minimal and explicit so CMS can be swapped later.

Success criteria (acceptance) ✅

astro build produces fully static HTML.
/about (or any CMS page) is built from Directus output.
/blog lists posts and /blog/my-post renders correctly.
No runtime JS is required to render content (no hydration needed).
The CMS can be replaced later without rewriting the frontend.

If you want, I can now implement the file and add the src/lib/directus.ts and page scaffolds as a follow-up. 💡

End of instructions.