@oaklandzoo/ostup 0.9.0 → 0.10.0

package/templates/profiles/blog/content/posts/intro.mdx

@@ -0,0 +1,14 @@
+---
+title: What this blog covers
+date: 2026-05-22
+summary: The topics I plan to write about and why they matter.
+author: {{OWNER_OR_CLIENT}}
+---
+
+A few things I plan to write about here:
+
+- The work behind the work. Not the highlight reel, the actual decisions.
+- Small lessons that compound. The kind of thing you wish someone had told you a year ago.
+- Reading notes, recommendations, and the occasional review.
+
+I would rather publish ten honest posts than one perfect one, so expect mistakes. I will correct them in public when I find them.

package/templates/profiles/blog/content/posts/welcome.mdx

@@ -0,0 +1,12 @@
+---
+title: Welcome to {{DISPLAY_NAME}}
+date: 2026-05-23
+summary: A short note on why this blog exists and what to expect.
+author: {{OWNER_OR_CLIENT}}
+---
+
+Welcome. This is the first post on {{DISPLAY_NAME}}.
+
+I started this site to share what I learn and to give readers a single place to follow along. New posts will appear here regularly.
+
+If you have a question or a suggestion, the contact link in the footer is the best way to reach me.

package/templates/profiles/blog/lib/posts.ts

@@ -0,0 +1,43 @@
+import { readdir, readFile } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+import matter from 'gray-matter';
+
+const POSTS_DIR = join(process.cwd(), 'content', 'posts');
+
+export type Post = {
+  slug: string;
+  title: string;
+  date: string;
+  summary: string;
+  author: string;
+  body: string;
+};
+
+async function readPostFile(filename: string): Promise<Post | null> {
+  if (!filename.endsWith('.mdx')) return null;
+  const slug = filename.replace(/\.mdx$/, '');
+  const raw = await readFile(join(POSTS_DIR, filename), 'utf8');
+  const { data, content } = matter(raw);
+  return {
+    slug,
+    title: String(data.title || slug),
+    date: String(data.date || new Date().toISOString()),
+    summary: String(data.summary || ''),
+    author: String(data.author || ''),
+    body: content,
+  };
+}
+
+export async function getAllPosts(): Promise<Post[]> {
+  if (!existsSync(POSTS_DIR)) return [];
+  const files = await readdir(POSTS_DIR);
+  const posts = (await Promise.all(files.map(readPostFile))).filter((p): p is Post => p !== null);
+  return posts.sort((a, b) => (a.date < b.date ? 1 : -1));
+}
+
+export async function getPostBySlug(slug: string): Promise<Post | null> {
+  const filename = `${slug}.mdx`;
+  if (!existsSync(join(POSTS_DIR, filename))) return null;
+  return readPostFile(filename);
+}

package/templates/profiles/blog/next.config.mjs.additions

@@ -0,0 +1,9 @@
+// MDX is handled at runtime via next-mdx-remote (see app/posts/[slug]/page.tsx).
+// No next.config.mjs changes are required for the v1 blog overlay.
+//
+// If you later switch to compile-time MDX (@next/mdx) you will need to:
+//   1. npm install @next/mdx @mdx-js/loader @mdx-js/react
+//   2. Wrap your next.config.mjs export with createMDX({})
+//   3. Add "mdx" to pageExtensions
+//
+// This file is shipped as a placeholder so the convention is visible.

package/templates/profiles/blog/package.json.additions

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "next-mdx-remote": "^5.0.0",
+    "gray-matter": "^4.0.3"
+  }
+}

package/templates/profiles/booking/.env.example.additions

@@ -1,16 +1,8 @@
 # --- booking profile additions ---
-# Database for Booking entity (Neon recommended; any Postgres works)
-DATABASE_URL=
-
-# Email confirmation
+# Email confirmation (guest + admin) via Resend
 RESEND_API_KEY=
-BOOKING_TO_EMAIL=
-BOOKING_FROM_EMAIL=noreply@example.com
-
-# Optional: Stripe deposit checkout (enable only if `payments` addon is on)
-STRIPE_SECRET_KEY=
-STRIPE_PUBLISHABLE_KEY=
-STRIPE_WEBHOOK_SECRET=
+RESEND_FROM_EMAIL=noreply@example.com
+ADMIN_EMAIL=
 
 # Public app URL (Vercel sets this for production)
 NEXT_PUBLIC_APP_URL=http://localhost:3000

package/templates/profiles/booking/README.md

@@ -1,6 +1,6 @@
 # Profile: booking
 
-> Appointment / reservation site. Availability request, booking form, optional Stripe deposit, email confirmations.
+> Appointment / reservation site. Availability request, booking form, email confirmations.
 
 ## Day-one scope
 
@@ -9,17 +9,22 @@
 | Hero | Single value statement + "Check availability" or "Book now" CTA | yes |
 | Availability / Booking form | Date range or appointment slot picker + guest info | yes |
 | Rooms / Services | List of bookable units with descriptions and rates | yes |
-| Deposit checkout | Stripe Checkout for the deposit if `payments` addon is on | conditional |
 | Confirmation email | Auto-send on submission to both guest and admin | yes |
 | About / Amenities | Trust-building content from the brief | yes |
 | Footer | Contact, cancellation policy summary | yes |
 
-## Wired infrastructure
+## Wired infrastructure (v1)
 
-- **Postgres** for the `Booking` entity (date_start, date_end, guest info, status, deposit_status).
+- **JSON-file storage** at `data/bookings.json` for the `Booking` entity. Upgrade to Postgres in a Pro/Studio iteration.
 - **Resend** for guest + admin confirmation emails.
-- **Stripe Checkout** for deposit (only if `payments` addon is on per the brief).
-- Mobile-first calendar / date picker.
+- Mobile-first date picker via `react-day-picker`.
+
+## Pro upgrades (not shipped in v1)
+
+- Stripe Checkout for deposits.
+- Postgres for booking persistence (replacing the JSON file).
+- Admin booking manager UI.
+- Calendar sync (Google Cal / Cal.com).
 
 ## Env additions
 
@@ -31,31 +36,31 @@ See `.env.example.additions`.
 POST /api/booking/request
 Body: { name, email, phone?, date_start, date_end, room_or_service?, notes? }
 Response: { ok, booking_id }
-Behavior: insert Booking with status='pending', email both parties.
-
-POST /api/booking/deposit
-Body: { booking_id }
-Response: { ok, checkout_url }
-Behavior: create Stripe Checkout session, return URL.
-
-POST /api/webhooks/stripe
-Behavior: on payment_intent.succeeded, mark booking deposit_status='paid'.
+Behavior: append Booking to data/bookings.json with status='pending', email both parties.
 ```
 
 ## Hard rules
 
 - Date pickers MUST be mobile-friendly (no tiny native date inputs without testing).
 - Server-side validate the date range (no past dates, no end-before-start).
-- Confirmation emails go out immediately on form submit, even before deposit.
-- Deposit is OPTIONAL: if `payments` addon is off, skip Stripe entirely. Booking still goes through.
+- Confirmation emails go out immediately on form submit.
 - Calendar availability check should be server-side; do not trust client.
-- If `Booking.status` is 'pending' for >48h with no deposit, mark as 'expired'.
+- Bookings older than 48h with `status='pending'` should be considered expired (handled by a future cron, not v1).
 
 ## Acceptance
 
 - Visitor can request dates and submit.
-- Both visitor and admin receive emails within 30 seconds.
-- Deposit Checkout opens if enabled, completes round-trip to the booking record.
+- Both visitor and admin receive emails within 30 seconds (assuming `RESEND_API_KEY` set).
 - Past dates rejected with clear error.
 - Hero CTA above the fold at 420x900.
-- Lighthouse mobile Performance >= 85 (acceptable lower than marketing because of date picker JS).
+- Lighthouse mobile Performance >= 85 (lower than marketing because of date picker JS).
+
+## Visual verification
+
+After deploy, run:
+
+```bash
+bash scripts/screenshot.sh <your-vercel-url>
+```
+
+Read the resulting PNG to confirm the hero, booking form, and footer render as expected.

package/templates/profiles/booking/app/api/booking/request/route.ts

@@ -0,0 +1,76 @@
+import { NextResponse } from 'next/server';
+import { appendBooking } from '@/lib/storage';
+import { sendEmail } from '@/lib/resend';
+
+type Body = {
+  name?: string;
+  email?: string;
+  phone?: string;
+  date_start?: string;
+  date_end?: string;
+  notes?: string;
+};
+
+function isFutureDate(d: Date) {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  return d.getTime() >= today.getTime();
+}
+
+export async function POST(req: Request) {
+  let body: Body;
+  try {
+    body = await req.json();
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON' }, { status: 400 });
+  }
+
+  const name = (body.name || '').trim();
+  const email = (body.email || '').trim();
+  const phone = (body.phone || '').trim();
+  const notes = (body.notes || '').trim();
+  const date_start = (body.date_start || '').trim();
+  const date_end = (body.date_end || '').trim();
+
+  if (!name || !email || !date_start || !date_end) {
+    return NextResponse.json({ error: 'name, email, date_start, and date_end are required' }, { status: 400 });
+  }
+  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    return NextResponse.json({ error: 'Invalid email' }, { status: 400 });
+  }
+
+  const start = new Date(date_start);
+  const end = new Date(date_end);
+  if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
+    return NextResponse.json({ error: 'Invalid date format' }, { status: 400 });
+  }
+  if (!isFutureDate(start)) {
+    return NextResponse.json({ error: 'date_start must not be in the past' }, { status: 400 });
+  }
+  if (end.getTime() <= start.getTime()) {
+    return NextResponse.json({ error: 'date_end must be after date_start' }, { status: 400 });
+  }
+
+  const booking = await appendBooking({ name, email, phone, date_start, date_end, notes, status: 'pending' });
+
+  const from = process.env.RESEND_FROM_EMAIL || 'noreply@example.com';
+  const admin = process.env.ADMIN_EMAIL;
+
+  await sendEmail({
+    to: email,
+    from,
+    subject: `Booking request received - {{DISPLAY_NAME}}`,
+    text: `Hi ${name},\n\nWe received your request for ${date_start} to ${date_end}. Booking ID: ${booking.id}.\nWe will confirm by email shortly.\n`,
+  });
+
+  if (admin) {
+    await sendEmail({
+      to: admin,
+      from,
+      subject: `New booking request: ${name} (${booking.id})`,
+      text: `Name: ${name}\nEmail: ${email}\nPhone: ${phone}\nDates: ${date_start} to ${date_end}\nNotes: ${notes}\nBooking ID: ${booking.id}\n`,
+    });
+  }
+
+  return NextResponse.json({ ok: true, booking_id: booking.id });
+}

package/templates/profiles/booking/app/page.tsx

@@ -0,0 +1,38 @@
+import Hero from '@/components/Hero';
+import BookingForm from '@/components/BookingForm';
+import ServiceList from '@/components/ServiceList';
+
+export default function HomePage() {
+  return (
+    <main>
+      <Hero />
+
+      <section id="book" className="mx-auto max-w-4xl px-6 py-16">
+        <h2 className="text-3xl font-semibold tracking-tight">Check availability</h2>
+        <p className="mt-2 text-slate-600">Pick your dates and tell us about your stay. We confirm by email.</p>
+        <BookingForm />
+      </section>
+
+      <section className="bg-slate-50">
+        <div className="mx-auto max-w-6xl px-6 py-16">
+          <h2 className="text-3xl font-semibold tracking-tight">Rooms and services</h2>
+          <ServiceList />
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-4xl px-6 py-16">
+        <h2 className="text-3xl font-semibold tracking-tight">About</h2>
+        <p className="mt-4 text-slate-700">
+          Replace this block with your story, amenities, and what makes a stay here different.
+        </p>
+      </section>
+
+      <footer className="border-t border-slate-200">
+        <div className="mx-auto max-w-6xl px-6 py-8 text-sm text-slate-500">
+          <p>{`{{DISPLAY_NAME}}`} (c) {new Date().getFullYear()}</p>
+          <p className="mt-1">Cancellation policy: edit this footer with your terms.</p>
+        </div>
+      </footer>
+    </main>
+  );
+}

package/templates/profiles/booking/components/BookingForm.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import { useState } from 'react';
+import { DayPicker, type DateRange } from 'react-day-picker';
+import 'react-day-picker/dist/style.css';
+
+type Status = 'idle' | 'sending' | 'sent' | 'error';
+
+function toIso(d: Date | undefined): string {
+  if (!d) return '';
+  const yyyy = d.getFullYear();
+  const mm = String(d.getMonth() + 1).padStart(2, '0');
+  const dd = String(d.getDate()).padStart(2, '0');
+  return `${yyyy}-${mm}-${dd}`;
+}
+
+export default function BookingForm() {
+  const [range, setRange] = useState<DateRange | undefined>();
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
+  const [notes, setNotes] = useState('');
+  const [status, setStatus] = useState<Status>('idle');
+  const [errorText, setErrorText] = useState('');
+  const [bookingId, setBookingId] = useState('');
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setStatus('sending');
+    setErrorText('');
+    try {
+      if (!range?.from || !range?.to) {
+        throw new Error('Please pick a start and end date.');
+      }
+      const res = await fetch('/api/booking/request', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({
+          name,
+          email,
+          phone,
+          notes,
+          date_start: toIso(range.from),
+          date_end: toIso(range.to),
+        }),
+      });
+      const data = (await res.json().catch(() => ({}))) as { ok?: boolean; booking_id?: string; error?: string };
+      if (!res.ok || !data.ok) {
+        throw new Error(data.error || 'Booking request failed');
+      }
+      setBookingId(data.booking_id || '');
+      setStatus('sent');
+    } catch (err) {
+      setStatus('error');
+      setErrorText(err instanceof Error ? err.message : 'Something went wrong');
+    }
+  }
+
+  if (status === 'sent') {
+    return (
+      <div className="mt-6 rounded-md bg-green-50 p-6 text-green-900">
+        <p className="font-semibold">Request received.</p>
+        <p className="mt-1">Your booking ID is {bookingId}. We will confirm by email.</p>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={onSubmit} className="mt-6 space-y-6">
+      <div>
+        <span className="text-sm font-medium text-slate-700">Dates</span>
+        <div className="mt-2 rounded-md border border-slate-200 p-3">
+          <DayPicker
+            mode="range"
+            selected={range}
+            onSelect={setRange}
+            disabled={{ before: new Date() }}
+            numberOfMonths={1}
+          />
+        </div>
+      </div>
+      <label className="block">
+        <span className="text-sm font-medium text-slate-700">Name</span>
+        <input
+          required
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="mt-1 block w-full rounded-md border border-slate-300 px-3 py-2"
+        />
+      </label>
+      <label className="block">
+        <span className="text-sm font-medium text-slate-700">Email</span>
+        <input
+          required
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="mt-1 block w-full rounded-md border border-slate-300 px-3 py-2"
+        />
+      </label>
+      <label className="block">
+        <span className="text-sm font-medium text-slate-700">Phone (optional)</span>
+        <input
+          value={phone}
+          onChange={(e) => setPhone(e.target.value)}
+          className="mt-1 block w-full rounded-md border border-slate-300 px-3 py-2"
+        />
+      </label>
+      <label className="block">
+        <span className="text-sm font-medium text-slate-700">Notes (optional)</span>
+        <textarea
+          value={notes}
+          onChange={(e) => setNotes(e.target.value)}
+          rows={3}
+          className="mt-1 block w-full rounded-md border border-slate-300 px-3 py-2"
+        />
+      </label>
+      {status === 'error' && (
+        <div className="rounded-md bg-red-50 p-3 text-sm text-red-900">{errorText}</div>
+      )}
+      <button
+        type="submit"
+        disabled={status === 'sending'}
+        className="rounded-md bg-slate-900 px-5 py-2 font-medium text-white hover:bg-slate-800 disabled:opacity-60"
+      >
+        {status === 'sending' ? 'Sending...' : 'Request booking'}
+      </button>
+    </form>
+  );
+}

package/templates/profiles/booking/components/Hero.tsx

@@ -0,0 +1,20 @@
+export default function Hero() {
+  return (
+    <section className="bg-slate-900 text-white">
+      <div className="mx-auto max-w-6xl px-6 py-24">
+        <h1 className="text-4xl font-bold tracking-tight md:text-6xl">{`{{DISPLAY_NAME}}`}</h1>
+        <p className="mt-6 max-w-2xl text-lg text-slate-200">
+          {`{{PROJECT_PURPOSE_ONE_SENTENCE}}`}
+        </p>
+        <div className="mt-10">
+          <a
+            href="#book"
+            className="inline-block rounded-md bg-white px-6 py-3 text-base font-medium text-slate-900 hover:bg-slate-100"
+          >
+            Check availability
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/profiles/booking/components/ServiceList.tsx

@@ -0,0 +1,19 @@
+const services = [
+  { name: 'Standard room', description: 'Comfortable double, ensuite bath.', rate: '$180 / night' },
+  { name: 'Suite', description: 'Larger room with sitting area.', rate: '$260 / night' },
+  { name: 'Family cabin', description: 'Sleeps up to four. Private deck.', rate: '$340 / night' },
+];
+
+export default function ServiceList() {
+  return (
+    <div className="mt-8 grid gap-6 md:grid-cols-3">
+      {services.map((s) => (
+        <article key={s.name} className="rounded-lg border border-slate-200 bg-white p-6">
+          <h3 className="text-lg font-semibold">{s.name}</h3>
+          <p className="mt-2 text-slate-600">{s.description}</p>
+          <p className="mt-4 text-sm font-medium text-slate-900">{s.rate}</p>
+        </article>
+      ))}
+    </div>
+  );
+}

package/templates/profiles/booking/lib/resend.ts

@@ -0,0 +1,33 @@
+type EmailArgs = {
+  to: string;
+  from: string;
+  subject: string;
+  text: string;
+};
+
+export async function sendEmail(args: EmailArgs): Promise<{ ok: boolean; mock?: boolean }> {
+  const key = process.env.RESEND_API_KEY;
+  if (!key) {
+    console.warn('RESEND_API_KEY missing; booking email in mock mode. Email not sent.');
+    return { ok: true, mock: true };
+  }
+  try {
+    const res = await fetch('https://api.resend.com/emails', {
+      method: 'POST',
+      headers: {
+        authorization: `Bearer ${key}`,
+        'content-type': 'application/json',
+      },
+      body: JSON.stringify(args),
+    });
+    if (!res.ok) {
+      const detail = await res.text().catch(() => '');
+      console.error(`Resend failed (${res.status}): ${detail}`);
+      return { ok: false };
+    }
+    return { ok: true };
+  } catch (err) {
+    console.error('Resend network error:', err);
+    return { ok: false };
+  }
+}

package/templates/profiles/booking/lib/storage.ts

@@ -0,0 +1,44 @@
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { randomUUID } from 'node:crypto';
+
+const DATA_DIR = join(process.cwd(), 'data');
+const BOOKINGS_FILE = join(DATA_DIR, 'bookings.json');
+
+export type Booking = {
+  id: string;
+  name: string;
+  email: string;
+  phone?: string;
+  date_start: string;
+  date_end: string;
+  notes?: string;
+  status: 'pending' | 'confirmed' | 'cancelled';
+  created_at: string;
+};
+
+async function ensureFile(): Promise<void> {
+  if (!existsSync(BOOKINGS_FILE)) {
+    await mkdir(dirname(BOOKINGS_FILE), { recursive: true });
+    await writeFile(BOOKINGS_FILE, '[]\n', 'utf8');
+  }
+}
+
+export async function readBookings(): Promise<Booking[]> {
+  await ensureFile();
+  const raw = await readFile(BOOKINGS_FILE, 'utf8');
+  return JSON.parse(raw) as Booking[];
+}
+
+export async function appendBooking(input: Omit<Booking, 'id' | 'created_at'>): Promise<Booking> {
+  const bookings = await readBookings();
+  const booking: Booking = {
+    ...input,
+    id: randomUUID().slice(0, 8),
+    created_at: new Date().toISOString(),
+  };
+  bookings.push(booking);
+  await writeFile(BOOKINGS_FILE, JSON.stringify(bookings, null, 2) + '\n', 'utf8');
+  return booking;
+}

package/templates/profiles/booking/package.json.additions

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "react-day-picker": "^9.0.0"
+  }
+}

package/templates/profiles/booking/section-prompts.md

@@ -6,11 +6,11 @@ Agent: build each section using the brief in `docs/brief.md`. Honor `must_avoid`
 
 - Headline (5-9 words) about the experience being booked.
 - Subhead: one sentence on what the visitor gets when they book.
-- Primary CTA: "Check availability" or "Book now" — opens the booking form modal or scrolls to it.
+- Primary CTA: "Check availability" or "Book now" - opens the booking form modal or scrolls to it.
 
 ## Availability / Booking form
 
-- Date range picker (or single-date for appointments). Mobile-friendly is mandatory.
+- Date range picker (or single-date for appointments). Mobile-friendly is mandatory (the shipped `BookingForm.tsx` uses `react-day-picker`).
 - Guest info: name, email, phone, party size (if relevant), notes.
 - Validate server-side: no past dates, end after start, party size within room limits.
 - Loading state on submit. Success state with booking ID. Error state with clear message.
@@ -21,13 +21,9 @@ Agent: build each section using the brief in `docs/brief.md`. Honor `must_avoid`
 - Each unit: name, description (short), rate per night/hour, photo placeholder if `inputs/images/` has anything matching.
 - "Book this" CTA scrolls back to the booking form with the room pre-selected.
 
-## Deposit checkout (conditional)
+## Deposit checkout
 
-- Only render if `payments` addon is in the brief.
-- After successful booking submission, present a "Pay deposit to confirm" CTA.
-- Clicking opens Stripe Checkout via `/api/booking/deposit`.
-- On Checkout success, return to a `/booking/[id]/confirmed` page.
-- Webhook `/api/webhooks/stripe` updates `deposit_status='paid'`.
+**Pro upgrade. Not shipped in v1.** To enable Stripe deposit, see Pro tier docs and add `STRIPE_*` env vars + a `/api/booking/deposit` route + Stripe webhook handler. The shipped booking flow completes via email confirmation only.
 
 ## Confirmation emails
 
@@ -35,6 +31,12 @@ Agent: build each section using the brief in `docs/brief.md`. Honor `must_avoid`
 - Admin receives: full booking details + a link to the admin route (TBD v2).
 - Use Resend. Plain text + HTML versions.
 
+## Storage
+
+- The shipped `lib/storage.ts` writes to `data/bookings.json`. Good for v1 / demo / single-server use.
+- For production with concurrent writes, replace with Postgres. Schema sketch:
+  - `bookings(id, name, email, phone, date_start, date_end, status, notes, created_at)`
+
 ## About / Amenities
 
 - Pull from the brief's `must_have_sections`. Echo the brief's vibe.

package/templates/profiles/lead-gen/.env.example.additions

@@ -1,8 +1,8 @@
 # --- lead-gen profile additions ---
-# Email notifications for contact-form submissions
+# Email notifications for contact-form submissions via Resend
 RESEND_API_KEY=
+RESEND_FROM_EMAIL=noreply@example.com
 CONTACT_TO_EMAIL=
-CONTACT_FROM_EMAIL=noreply@example.com
 
 # Optional: forward lead payloads to a CRM as JSON
 CRM_WEBHOOK_URL=