create readme

This commit is contained in:
JCEEE
2026-07-26 11:29:19 +01:00
commit fe99dc4479
+184
View File
@@ -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.31.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.