Leon SerfatyandClaude Opus 5
3e9ba07175
Turnstile bot protection (sign-in, sign-up, password-reset): - Register Better Auth's captcha plugin with the cloudflare-turnstile provider; endpoints listed explicitly rather than relying on defaults. /reset-password is intentionally excluded — it is reached only via a single-use emailed token. - Add an explicit-render Turnstile widget component. Tokens are single-use, so each form resets the challenge after a failed submit; submit stays disabled until a token is held. - Read the site key server-side and pass it down as a prop, so rotating it does not require a rebuild. - Fail fast in production when TURNSTILE_SECRET_KEY is missing, and when a secret is set without a site key (that combination would demand a token no form can produce, locking every user out). - Pass a throwaway secret during `next build` in the Dockerfile, mirroring the existing BETTER_AUTH_SECRET treatment, so image builds don't need it. CSP fixes in middleware (these blocked Turnstile entirely): - Add frame-src for challenges.cloudflare.com. Without it the widget's iframe fell back to default-src 'self' and was blocked outright. - Allow 'unsafe-eval' and websockets in DEVELOPMENT only. `next dev` compiles with eval(), so the strict policy threw EvalError and killed hydration — no client JS ran at all, which also meant form submit handlers never fired. Production policy is unchanged and still strict. Also included (concurrent work in the tree): - Admin organizations pages and lib/admin/orgs. - Episode moderation migration, SEO metadata (sitemap, robots, JSON-LD, OG/Twitter images, manifest), Umami analytics, not-found page. Local dev database: docker-compose.dev.yml provisions Postgres 18 on port 5443 (5432-5442 are in use by other local projects). Note: `npx tsc --noEmit` currently fails in app/(app)/team/page.tsx — an `invitations` prop the component does not accept. This predates the commit and will fail `next build` until fixed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
90 lines
3.0 KiB
TypeScript
90 lines
3.0 KiB
TypeScript
import { readFile } from "node:fs/promises";
|
|
import { join } from "node:path";
|
|
import { ImageResponse } from "next/og";
|
|
import { BRAND_HEX, SITE_NAME } from "@/lib/seo";
|
|
|
|
/**
|
|
* The default social card for every route that does not define its own.
|
|
* Rendered at build/request time by Satori — no binary asset to keep in sync.
|
|
*/
|
|
export const alt = `${SITE_NAME} — from a topic idea to a finished podcast in minutes`;
|
|
export const size = { width: 1200, height: 630 };
|
|
export const contentType = "image/png";
|
|
|
|
/**
|
|
* The real brand mark, inlined as a data URI. Satori cannot fetch a relative URL
|
|
* (there is no origin while rendering), so the PNG is read off disk and embedded.
|
|
*/
|
|
async function brandMarkDataUri() {
|
|
const file = await readFile(join(process.cwd(), "app", "icon.png"));
|
|
return `data:image/png;base64,${file.toString("base64")}`;
|
|
}
|
|
|
|
export default async function OpengraphImage() {
|
|
const mark = await brandMarkDataUri();
|
|
|
|
return new ImageResponse(
|
|
(
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "space-between",
|
|
background: "#0d0d0d",
|
|
padding: 72,
|
|
}}
|
|
>
|
|
{/* Brand accent — a soft corner glow. Satori has no blur filter, so the
|
|
falloff is a radial gradient rather than an opaque disc, which would
|
|
otherwise cut a hard edge straight through the headline. */}
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: -340,
|
|
right: -300,
|
|
width: 900,
|
|
height: 900,
|
|
borderRadius: 9999,
|
|
background: `radial-gradient(circle, ${BRAND_HEX}cc 0%, ${BRAND_HEX}33 45%, ${BRAND_HEX}00 70%)`,
|
|
display: "flex",
|
|
}}
|
|
/>
|
|
|
|
<div style={{ display: "flex", alignItems: "center", gap: 20 }}>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img src={mark} alt="" width={64} height={64} />
|
|
<div style={{ display: "flex", fontSize: 30, fontWeight: 700, color: "#ffffff" }}>
|
|
{SITE_NAME}
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
fontSize: 76,
|
|
fontWeight: 800,
|
|
lineHeight: 1.08,
|
|
letterSpacing: -2,
|
|
color: "#ffffff",
|
|
maxWidth: 940,
|
|
}}
|
|
>
|
|
From a topic idea to a finished podcast in minutes
|
|
</div>
|
|
<div style={{ display: "flex", fontSize: 30, color: "#a3a3a3", maxWidth: 900 }}>
|
|
AI writes the script, records multi-voice audio, and designs the cover art.
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: "flex", fontSize: 26, color: BRAND_HEX, fontWeight: 600 }}>
|
|
Script · Voice · Cover art — one workflow
|
|
</div>
|
|
</div>
|
|
),
|
|
size
|
|
);
|
|
}
|