# Alpha's Words

Next.js 13 (App Router) + Tailwind. Monochrome, one-pager, essays sourced locally first and mirrored from Medium.

## What changed from the original build

**Fixed**
- `public/og-image.png` was an 11-byte text file that just said "placeholder" — not an image. Replaced with real, dynamically generated share cards using Next's file-convention `opengraph-image` (see `app/opengraph-image.tsx` and `app/words/[slug]/opengraph-image.tsx`). Every post now gets its own branded card with its real title, topic, and reading time — generated on the fly, not borrowed from whatever image Medium happened to embed.
- Domain corrected from `alphadube.com` to `alphaswords.com` in every canonical tag, `metadataBase`, and Open Graph URL.
- Mobile navigation — the header used to hide all nav links below the `sm` breakpoint with no fallback. Added a working hamburger menu (`components/site-header.tsx`).
- Newsletter form now actually posts to `/api/subscribe`, which forwards to Buttondown (see **Environment variables** below) instead of just flipping local React state.
- Post content is now sanitized with `sanitize-html` instead of fragile regex stripping — and inline images in the body are preserved instead of being deleted.
- The site is now the actual source of truth: `content/essays.ts` holds essays that live here first. Medium (`lib/rss.ts`) is merged in as a mirror; if the Medium feed is briefly unreachable, the page just shows local essays instead of a hardcoded fake fallback post.
- Added `app/sitemap.ts` and `app/robots.ts` (Next's file-convention SEO routes).
- Added a real favicon (`app/icon.tsx`).
- Removed ~30 unused dependencies (every shadcn/ui component, Radix packages, Supabase, react-hook-form, recharts, etc.) that were bundled but never imported anywhere. `package.json` is now just what's actually used, plus `sanitize-html`.
- Restored About (full chapters), Now, Projects, and Contact sections, and added a closing "A question for you" + related essays + real share buttons (X, LinkedIn, copy link) to the post template — all part of the original brief that had dropped out of this build.

**Left as-is / your call**
- The grayscale→color hover filter on article images (`article-image` in `globals.css`) — a deliberate touch, easy to remove if you don't like it.
- Lora + Inter as the type pairing (rather than Fraunces, which came up in earlier direction) — swap in `app/layout.tsx` if you'd rather use something else.

## Adding a new essay

Add an object to the array in `content/essays.ts`. That's it — it'll appear on the homepage and get its own page and its own share card automatically. If you later mirror it on Medium, paste the Medium URL into `mediumUrl` on that object.

## Environment variables

Set these in your host's dashboard (Netlify: Site settings → Environment variables):

| Variable | Required | Purpose |
|---|---|---|
| `BUTTONDOWN_API_KEY` | No, but recommended | Wires the newsletter form to [Buttondown](https://buttondown.email). Without it, the form tells the visitor honestly that it isn't connected yet rather than pretending to succeed. Swap `app/api/subscribe/route.ts` for a different provider's API if you use something else (ConvertKit, Mailchimp, etc.) — the surrounding form code doesn't need to change. |

## Running it

```bash
npm install
npm run dev
```

This sandbox doesn't have network access, so dependencies haven't been installed or build-verified here — run `npm install && npm run build` locally or let Netlify do it on deploy to catch anything that needs a second look.

## Deployment

`netlify.toml` is already set up with `@netlify/plugin-nextjs`. Push to a repo connected to Netlify, or deploy directly. Vercel works too (it's a stock Next.js app) — no config file needed there.
