commit fe99dc4479ea61ff917126ef40337c3caea42e09 Author: JCEEE <0xjceee@proton.me> Date: Sun Jul 26 11:29:19 2026 +0100 create readme diff --git a/README.md b/README.md new file mode 100644 index 0000000..8ed29d4 --- /dev/null +++ b/README.md @@ -0,0 +1,184 @@ +# Something to Say + +URL-based poster maker on Cloudflare Workers. paste text into the URL and get a styled image back. + +## Prerequisites + +- Node.js 18+ +- A Cloudflare account with Workers enabled +- (Optional) An Upstash Redis account for PNG caching + +## Setup + +### 1. Install dependencies + +```sh +npm install +``` + +### 2. Login to Wrangler (Cloudflare CLI) + +```sh +npx wrangler login +``` + +A browser window opens — authorise the CLI to access your Cloudflare account. + +### 3. Create the D1 database (request tracking) + +```sh +npx wrangler d1 create image_cache_db +``` + +Copy the returned `database_id` into `wrangler.toml` under `[[d1_databases]]`. + +Then run the migration: + +```sh +# local dev +npx wrangler d1 execute image_cache_db --local --file=./schema.sql + +# production (after first deploy) +npx wrangler d1 execute image_cache_db --remote --file=./schema.sql +``` + +### 4. Set up Upstash Redis (optional, for PNG caching) + +PNG generation is slow without caching. SVG is instant. Redis caches generated PNGs so repeat requests are fast. + +1. Go to https://upstash.com and sign up +2. Create a **Redis** database (free tier is enough) +3. Copy the **REST URL** and **REST Token** from the dashboard + +**For local dev:** Create `.dev.vars` in the project root: + +``` +UPSTASH_REDIS_REST_URL=https://your-upstash-url.upstash.io +UPSTASH_REDIS_REST_TOKEN=your-token +``` + +**For production:** + +```sh +npx wrangler secret put UPSTASH_REDIS_REST_URL +# paste the URL, press Enter, Ctrl+D + +npx wrangler secret put UPSTASH_REDIS_REST_TOKEN +# paste the token, press Enter, Ctrl+D +``` + +### 5. Configure a custom domain + +Before you can route a worker to your own domain, the domain must exist in your Cloudflare account as a **zone**. + +**If your domain isn't in Cloudflare yet:** + +1. Go to the Cloudflare dashboard → **Add a Site** +2. Enter your domain (e.g. `mydomain.com`), pick the free plan +3. Cloudflare will show two nameserver addresses (e.g. `ns1.cloudflare.com`, `ns2.cloudflare.com`) +4. At your domain registrar, update the nameservers to those Cloudflare-provided ones +5. Wait for propagation (minutes to hours — Cloudflare checks automatically) +6. Your domain now appears under **Websites** in the dashboard + +Once the domain is in Cloudflare, you have two options: + +> **Note:** Worker custom domains are managed under **Workers & Pages** in the Cloudflare dashboard (not the DNS section). The dashboard shows each custom domain's status and lets you remove or re-trigger provisioning. + +#### Option A: automatic via `custom_domain` (recommended) + +Add to `wrangler.toml`: + +```toml +routes = [ + { pattern = "yourdomain.com", custom_domain = true } +] +``` + +On deploy (`npx wrangler deploy`), Cloudflare auto-provisions the DNS record and SSL certificate. No manual DNS changes needed. + +Also update `PUBLIC_BASE_URL` so OG image URLs are correct: + +```toml +[vars] +PUBLIC_BASE_URL = "https://yourdomain.com" +``` + +#### Option B: manual CNAME record + +If `custom_domain` doesn't work (e.g. the zone isn't fully active yet), create the record manually: + +1. Cloudflare dashboard → your domain → **DNS** +2. **Add Record**: + - Type: `CNAME` + - Name: the subdomain, e.g. `say` (for `say.mydomain.com`) + - Target: your worker's `*.workers.dev` URL (shown after `wrangler deploy`, e.g. `my-worker.jeancnicolas.workers.dev`) + - Proxy: Proxied (orange cloud) +3. Remove the `routes` block from `wrangler.toml` (the CNAME handles routing instead) or keep it — they can coexist. + +#### Verify + +After deploying with either option, visit your domain. If it doesn't resolve, check: + +- **Is the domain listed under Websites in your Cloudflare dashboard?** If not, add it first (steps above). +- **Did you redeploy after adding the route?** Run `npx wrangler deploy` again. +- **Check route status:** `npx wrangler triggers` shows the current routes for your worker. +- **DNS propagation:** `dig say.mydomain.com` or use an online DNS checker to see if the record resolves. + +## Local dev + +```sh +npm run dev +``` + +Opens at `http://localhost:8787`. + +## Deploy + +```sh +npx wrangler deploy +``` + +### First deploy checklist + +After the first deploy: + +1. **D1 migration** (if not done yet): + ```sh + npx wrangler d1 execute image_cache_db --remote --file=./schema.sql + ``` +2. **Redeploy** to pick up any config changes: + ```sh + npx wrangler deploy + ``` + +## How it works + +- `/` — interactive editor (drag sliders, pick themes, preview live) +- `/say/hello/world?theme=neon-noir` — styled poster as SVG (instant) +- `/say/hello/world?theme=neon-noir&png` — styled poster as PNG (slower, cached) +- `?svg` / `?png` — explicitly request format +- `?preset=x` — platform presets (twitter, linkedin, instagram, etc.) +- `?vw=N` — custom viewport width (px) +- `?scale` — fluid mode (lines fill the container width) +- `?ir=0.8` — inner content width ratio (0.3–1.0, default 1.0) +- Inline markers: `**bold**`, `*italic*`, `==highlight==`, `~underline~`, `{accent:text}`, `{color:text}` + +## Updating secrets + +To update an existing secret: + +```sh +npx wrangler secret put UPSTASH_REDIS_REST_URL +``` + +Then redeploy. No code changes needed. + +## Viewing logs + +```sh +npx wrangler tail +``` + +## Cache headers + +PNG responses include `X-Cache: HIT` or `X-Cache: MISS` so you can verify Redis caching in the Network tab.