@django-stack/cli 0.9.0 → 0.11.0

package/templates/frontend-astro/astro.config.mjs

@@ -1,5 +1,6 @@
 // @ts-check
 import node from "@astrojs/node";
+import { CAPTCHA_CSP, CAPTCHA_STYLE_HASH } from "@django-stack/utils";
 import { defineConfig } from "astro/config";
 
 // The Django backend: the frontend container reaches it on the Compose network.
@@ -15,14 +16,24 @@ export default defineConfig({
   server: { host: true, port: 3000 },
   // A Content-Security-Policy on every page: scripts and styles only from
   // this site, with hashes for the ones Astro inlines. src/middleware.ts adds
-  // the origin of the media files.
+  // the origin of the media files. CAPTCHA_CSP allows the captcha widget of
+  // the contact form: its solver, its style and its workers.
   security: {
     csp: {
-      directives: ["default-src 'self'", "base-uri 'self'", "form-action 'self'", "object-src 'none'"],
+      directives: [
+        "default-src 'self'",
+        "base-uri 'self'",
+        "form-action 'self'",
+        "object-src 'none'",
+        `worker-src ${CAPTCHA_CSP["worker-src"].join(" ")}`,
+      ],
       // Scripts from this site, such as the analytics tracker at /_a/script.js.
-      scriptDirective: { resources: ["'self'"] },
-      // Inline style attributes, such as the focal point of an image.
-      styleDirective: { resources: ["'self'", { resource: "'unsafe-inline'", kind: "attribute" }] },
+      scriptDirective: { resources: ["'self'", ...CAPTCHA_CSP["script-src"]] },
+      styleDirective: {
+        // Inline style attributes, such as the focal point of an image.
+        resources: ["'self'", { resource: "'unsafe-inline'", kind: "attribute" }],
+        hashes: [/** @type {`sha256-${string}`} */ (CAPTCHA_STYLE_HASH.replaceAll("'", ""))],
+      },
     },
   },
   vite: {

package/templates/frontend-astro/package.json

@@ -16,7 +16,7 @@
     "@astrojs/node": "^11.1.9",
     "@astrojs/rss": "^4.0.19",
     "@django-headless/client": "^1.1.1",
-    "@django-stack/utils": "^0.9.0",
+    "@django-stack/utils": "^0.11.0",
     "astro": "^7.4.5"
   },
   "devDependencies": {

package/templates/frontend-astro/pnpm-workspace.yaml

@@ -0,0 +1,17 @@
+# pnpm's settings for the frontend (pnpm 11 and later).
+
+# Resolve only versions published at least a day ago, so a compromised
+# release is usually caught before it reaches you. DjangoStack's own
+# packages are exempt, so a project made on a release day installs.
+minimumReleaseAge: 1440
+minimumReleaseAgeExclude:
+  - "@django-stack/*"
+
+# Which dependencies may run install scripts; pnpm refuses others.
+allowBuilds: {}
+
+# The peer ranges of @astrojs/check allow a 2.0 beta of @emnapi, which pnpm
+# picks and which crashes `astro check`. Keep @emnapi on 1.x, as npm does.
+overrides:
+  "@emnapi/core": ^1.11.3
+  "@emnapi/runtime": ^1.11.3

package/templates/frontend-astro/src/components/ContactForm.astro

@@ -1,20 +1,29 @@
 ---
 /**
  * The contact form. It posts to Django's public create route for form
- * submissions (PUBLIC_CREATE in backend/config/settings.py), which is
- * rate limited per IP address. Submissions appear in the admin.
+ * submissions (PUBLIC_CREATE in backend/config/settings.py), which is rate
+ * limited per IP address and, unless CAPTCHA=off, needs the token of the
+ * captcha widget. Submissions appear in the admin.
  */
+import { CAPTCHA_ATTRIBUTES, captchaEnabled } from "@django-stack/utils";
+
+const captcha = captchaEnabled(process.env.CAPTCHA);
 ---
 
 <form class="contact-form" data-endpoint="/api/content.formsubmission">
   <label>Name <input name="name" required maxlength="200" autocomplete="name" /></label>
   <label>Email <input name="email" type="email" required autocomplete="email" /></label>
   <label>Message <textarea name="message" required maxlength="5000" rows="6"></textarea></label>
+  {captcha && <cap-widget {...CAPTCHA_ATTRIBUTES}></cap-widget>}
   <button class="button" type="submit">Send</button>
   <p class="status" role="status" aria-live="polite"></p>
 </form>
 
 <script>
+  import { loadCaptcha, resetCaptcha } from "@django-stack/utils";
+
+  if (document.querySelector("form.contact-form cap-widget")) void loadCaptcha();
+
   for (const form of document.querySelectorAll<HTMLFormElement>("form.contact-form")) {
     form.addEventListener("submit", async (event) => {
       event.preventDefault();
@@ -29,8 +38,15 @@
           body: JSON.stringify(Object.fromEntries(new FormData(form))),
         });
         if (response.status === 429) throw new Error("Too many messages; try again in a minute.");
-        if (!response.ok) throw new Error("The message could not be sent. Check the fields and try again.");
+        if (!response.ok) {
+          const errors = await response.json().catch(() => ({}));
+          // A token is valid once, so the widget verifies again.
+          resetCaptcha(form);
+          if (errors.captcha) throw new Error("Verify that you are human, then send the message again.");
+          throw new Error("The message could not be sent. Check the fields and try again.");
+        }
         form.reset();
+        resetCaptcha(form);
         status.textContent = "Thank you, your message was sent.";
       } catch (error) {
         status.textContent = error instanceof Error ? error.message : String(error);

package/templates/frontend-astro/src/middleware.ts

@@ -1,4 +1,5 @@
 import { defineMiddleware } from "astro:middleware";
+import { reportError } from "@django-stack/utils";
 import { getContent, PREVIEW_COOKIE } from "./lib/api";
 import { getCached, store } from "./lib/cache";
 
@@ -38,7 +39,14 @@ export const onRequest = defineMiddleware(async (context, next) => {
     if (hit) return hit;
   }
 
-  let response = await next();
+  let response: Response;
+  try {
+    response = await next();
+  } catch (error) {
+    // Sent to Sentry with ERRORS=sentry; Astro logs it and renders the error page.
+    await reportError(error, { request });
+    throw error;
+  }
 
   // Redirects that editors manage in the admin, for paths that do not exist.
   if (response.status === 404 && request.method === "GET") {

package/templates/frontend-next/AGENTS.md

@@ -12,7 +12,7 @@ src/app/                 routes: /, /[...path], /blog, /blog/[slug], /category/[
 src/app/layout.tsx       the page shell: menus, footer, preview banner
 src/components/          the post list, the menu links and the contact form
 src/lib/api.ts           getContent(): content helpers with the read-only key, drafts in preview; pageMetadata()
-src/lib/headless.ts      generated API types; do not edit, run `npm run generate:types`
+src/lib/headless.ts      generated API types; do not edit, run `{{pm_run}} generate:types`
 src/proxy.ts             Content-Security-Policy with a nonce, security headers, the dev proxy to Django
 next.config.ts           standalone output, the in-memory data cache
 ```
@@ -55,5 +55,5 @@ Run them in the `frontend` container (`docker compose exec frontend <command>`):
 
 | Task | Command |
 |------|---------|
-| Type-check | `npm run check` |
-| Test | `npm test` |
+| Type-check | `{{pm_run}} check` |
+| Test | `{{pm_run}} test` |

package/templates/frontend-next/Dockerfile

@@ -7,10 +7,13 @@ WORKDIR /app
 ENV NEXT_TELEMETRY_DISABLED=1
 
 FROM base AS deps
-COPY package.json package-lock.json* ./
+{{pm_setup}}
+COPY {{pm_manifests}} ./
 COPY vendor/ vendor/
 # No BuildKit cache mounts: Railway rejects them, and the layer is cached anyway.
-RUN if [ -f package-lock.json ]; then npm ci; else npm install; fi
+RUN {{pm_install}}
+# The package manager only installs: npm, which comes with Node.js, runs
+# the scripts of package.json below.
 
 FROM deps AS dev
 EXPOSE 3000

package/templates/frontend-next/package.json

@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "@django-headless/client": "^1.1.1",
-    "@django-stack/next": "^0.9.0",
-    "@django-stack/react": "^0.9.0",
-    "@django-stack/utils": "^0.9.0",
+    "@django-stack/next": "^0.11.0",
+    "@django-stack/react": "^0.11.0",
+    "@django-stack/utils": "^0.11.0",
     "next": "^16.4.4",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",

package/templates/frontend-next/pnpm-workspace.yaml

@@ -0,0 +1,11 @@
+# pnpm's settings for the frontend (pnpm 11 and later).
+
+# Resolve only versions published at least a day ago, so a compromised
+# release is usually caught before it reaches you. DjangoStack's own
+# packages are exempt, so a project made on a release day installs.
+minimumReleaseAge: 1440
+minimumReleaseAgeExclude:
+  - "@django-stack/*"
+
+# Which dependencies may run install scripts; pnpm refuses others.
+allowBuilds: {}

package/templates/frontend-next/src/app/[...path]/page.tsx

@@ -1,4 +1,5 @@
 import { Blocks } from "@django-stack/react";
+import { captchaEnabled } from "@django-stack/utils";
 import type { Metadata } from "next";
 import { ContactForm } from "@/components/ContactForm";
 import { getContent, notFoundOrRedirect, pageMetadata } from "@/lib/api";
@@ -22,7 +23,7 @@ export default async function ContentPage({ params }: Props) {
     <article className="narrow">
       <h1>{page.title}</h1>
       <Blocks blocks={page.body} />
-      {page.path === "contact" ? <ContactForm /> : null}
+      {page.path === "contact" ? <ContactForm captcha={captchaEnabled(process.env.CAPTCHA)} /> : null}
     </article>
   );
 }

package/templates/frontend-next/src/components/ContactForm.tsx

@@ -3,11 +3,14 @@
 /**
  * The contact form. It posts to Django's public create route for form
  * submissions (PUBLIC_CREATE in backend/config/settings.py), which is rate
- * limited per IP address. Submissions appear in the admin.
+ * limited per IP address and, unless CAPTCHA=off, needs the token of the
+ * captcha widget. Submissions appear in the admin.
  */
+import { Captcha } from "@django-stack/react";
+import { resetCaptcha } from "@django-stack/utils";
 import { type FormEvent, useState } from "react";
 
-export function ContactForm() {
+export function ContactForm({ captcha = true }: { captcha?: boolean }) {
   const [status, setStatus] = useState("");
   const [sending, setSending] = useState(false);
 
@@ -23,8 +26,15 @@ export function ContactForm() {
         body: JSON.stringify(Object.fromEntries(new FormData(form))),
       });
       if (response.status === 429) throw new Error("Too many messages; try again in a minute.");
-      if (!response.ok) throw new Error("The message could not be sent. Check the fields and try again.");
+      if (!response.ok) {
+        const errors = await response.json().catch(() => ({}));
+        // A token is valid once, so the widget verifies again.
+        resetCaptcha(form);
+        if (errors.captcha) throw new Error("Verify that you are human, then send the message again.");
+        throw new Error("The message could not be sent. Check the fields and try again.");
+      }
       form.reset();
+      resetCaptcha(form);
       setStatus("Thank you, your message was sent.");
     } catch (error) {
       setStatus(error instanceof Error ? error.message : String(error));
@@ -44,6 +54,7 @@ export function ContactForm() {
       <label>
         Message <textarea name="message" required maxLength={5000} rows={6} />
       </label>
+      {captcha ? <Captcha /> : null}
       <button className="button" type="submit" disabled={sending}>
         Send
       </button>

package/templates/frontend-next/src/instrumentation.ts

@@ -0,0 +1,12 @@
+import { reportError } from "@django-stack/utils";
+import type { Instrumentation } from "next";
+
+/** Server errors go to Sentry with ERRORS=sentry; Next.js logs them as well. */
+export const onRequestError: Instrumentation.onRequestError = async (error, request) => {
+  const id = request.headers["x-request-id"];
+  await reportError(error, {
+    method: request.method,
+    path: request.path,
+    requestId: Array.isArray(id) ? id[0] : id,
+  });
+};

package/templates/frontend-next/src/proxy.ts

@@ -1,4 +1,5 @@
 import { contentSecurityPolicy, mediaOrigins, PREVIEW_COOKIE, SECURITY_HEADERS } from "@django-stack/next";
+import { captchaEnabled } from "@django-stack/utils";
 import { type NextRequest, NextResponse } from "next/server";
 
 const dev = process.env.NODE_ENV === "development";
@@ -11,6 +12,8 @@ const backend = process.env.BACKEND_INTERNAL_URL ?? "http://localhost:8000";
 const TRACKER_PATHS = /^\/_a\/(script\.js|api\/send)$/;
 const umami = process.env.UMAMI_URL || "http://umami:3000";
 const media = mediaOrigins();
+// The captcha widget of the contact form, unless CAPTCHA=off.
+const captcha = captchaEnabled(process.env.CAPTCHA);
 
 export function proxy(request: NextRequest) {
   const { pathname, search } = request.nextUrl;
@@ -23,7 +26,7 @@ export function proxy(request: NextRequest) {
 
   // A fresh nonce for every page: Next adds it to the scripts it renders.
   const nonce = Buffer.from(crypto.randomUUID()).toString("base64");
-  const policy = contentSecurityPolicy({ nonce, mediaOrigins: media, dev });
+  const policy = contentSecurityPolicy({ nonce, mediaOrigins: media, dev, captcha });
   const headers = new Headers(request.headers);
   headers.set("Content-Security-Policy", policy);
 

package/templates/frontend-nuxt/AGENTS.md

@@ -13,7 +13,7 @@ src/pages/                   routes: /, /[...path], /blog, /blog/[slug], /catego
 src/layouts/default.vue      the page shell: menus, footer, preview banner
 src/components/              the post list and the contact form
 src/composables/             useContent() loads from server/routes/_content and follows redirects; usePageSeo() sets the SEO tags
-src/lib/headless.ts          generated API types; do not edit, run `npm run generate:types`
+src/lib/headless.ts          generated API types; do not edit, run `{{pm_run}} generate:types`
 server/routes/_content/      the content the pages load, cached in memory
 server/routes/               sitemap.xml, rss.xml, robots.txt, /preview, /revalidate
 server/utils/content.ts      getContent(): content helpers with the read-only key, drafts in preview
@@ -60,5 +60,5 @@ Run them in the `frontend` container (`docker compose exec frontend <command>`):
 
 | Task | Command |
 |------|---------|
-| Type-check | `npm run check` |
-| Test | `npm test` |
+| Type-check | `{{pm_run}} check` |
+| Test | `{{pm_run}} test` |

package/templates/frontend-nuxt/Dockerfile

@@ -7,10 +7,13 @@ WORKDIR /app
 ENV NUXT_TELEMETRY_DISABLED=1
 
 FROM base AS deps
-COPY package.json package-lock.json* ./
+{{pm_setup}}
+COPY {{pm_manifests}} ./
 COPY vendor/ vendor/
 # No BuildKit cache mounts: Railway rejects them, and the layer is cached anyway.
-RUN if [ -f package-lock.json ]; then npm ci --ignore-scripts; else npm install --ignore-scripts; fi
+RUN {{pm_install_no_scripts}}
+# The package manager only installs: npm, which comes with Node.js, runs
+# the scripts of package.json below.
 
 FROM deps AS dev
 EXPOSE 3000

package/templates/frontend-nuxt/nuxt.config.ts

@@ -1,3 +1,5 @@
+import { CAPTCHA_CSP } from "@django-stack/utils";
+
 // The Django backend: the frontend container reaches it on the Compose network.
 const backend = process.env.BACKEND_INTERNAL_URL ?? "http://localhost:8000";
 // Umami, for page analytics: only its tracker and page views, under /_a/.
@@ -42,7 +44,8 @@ export default defineNuxtConfig({
   // Security headers, with a Content-Security-Policy on every page in
   // production: scripts and styles only from this site, with a nonce for
   // the ones Nuxt inlines. server/plugins/media-origins.ts adds the origin
-  // of the media files.
+  // of the media files. CAPTCHA_CSP allows the captcha widget of the contact
+  // form: its solver, its style and its workers.
   security: {
     nonce: true,
     rateLimiter: false,
@@ -52,8 +55,9 @@ export default defineNuxtConfig({
         process.env.NODE_ENV === "production"
           ? {
               "default-src": ["'self'"],
-              "script-src": ["'self'", "'nonce-{{nonce}}'", "'strict-dynamic'"],
-              "style-src": ["'self'", "'nonce-{{nonce}}'"],
+              "script-src": ["'self'", "'nonce-{{nonce}}'", "'strict-dynamic'", ...CAPTCHA_CSP["script-src"]],
+              "style-src": ["'self'", "'nonce-{{nonce}}'", ...CAPTCHA_CSP["style-src"]],
+              "worker-src": [...CAPTCHA_CSP["worker-src"]],
               // Inline style attributes, such as the focal point of an image.
               "style-src-attr": ["'unsafe-inline'"],
               "img-src": ["'self'", "data:"],

package/templates/frontend-nuxt/package.json

@@ -15,8 +15,8 @@
   },
   "dependencies": {
     "@django-headless/client": "^1.1.1",
-    "@django-stack/utils": "^0.9.0",
-    "@django-stack/vue": "^0.9.0",
+    "@django-stack/utils": "^0.11.0",
+    "@django-stack/vue": "^0.11.0",
     "nuxt": "^4.6.3",
     "nuxt-security": "^2.7.0",
     "vue": "^3.5.44",

package/templates/frontend-nuxt/pnpm-workspace.yaml

@@ -0,0 +1,13 @@
+# pnpm's settings for the frontend (pnpm 11 and later).
+
+# Resolve only versions published at least a day ago, so a compromised
+# release is usually caught before it reaches you. DjangoStack's own
+# packages are exempt, so a project made on a release day installs.
+minimumReleaseAge: 1440
+minimumReleaseAgeExclude:
+  - "@django-stack/*"
+
+# Which dependencies may run install scripts; pnpm refuses others.
+allowBuilds:
+  # Its install script checks its binary.
+  esbuild: true

package/templates/frontend-nuxt/server/plugins/errors.ts

@@ -0,0 +1,14 @@
+import { reportError } from "@django-stack/utils";
+
+/** Server errors go to Sentry with ERRORS=sentry; Nuxt logs them as well. */
+export default defineNitroPlugin((nitroApp) => {
+  nitroApp.hooks.hook("error", async (error, { event }) => {
+    const status = (error as { statusCode?: number }).statusCode ?? 500;
+    if (status < 500) return;
+    await reportError(error, {
+      method: event?.method,
+      path: event?.path,
+      requestId: event?.headers.get("x-request-id"),
+    });
+  });
+});

package/templates/frontend-nuxt/server/routes/_content/layout.get.ts

@@ -1,3 +1,5 @@
+import { captchaEnabled } from "@django-stack/utils";
+
 /** What every page shows: the site settings and the menus. */
 export default defineEventHandler(async (event) => {
   const data = await cachedContent(event, async () => {
@@ -14,5 +16,7 @@ export default defineEventHandler(async (event) => {
     preview: previewToken(event) !== null,
     // Page analytics: Umami's tracker, served from this site at /_a/.
     analytics: process.env.UMAMI_WEBSITE_ID || null,
+    // The captcha widget of the contact form, unless CAPTCHA=off.
+    captcha: captchaEnabled(process.env.CAPTCHA),
   };
 });

package/templates/frontend-nuxt/src/components/ContactForm.vue

@@ -1,9 +1,14 @@
 <!--
   The contact form. It posts to Django's public create route for form
   submissions (PUBLIC_CREATE in backend/config/settings.py), which is rate
-  limited per IP address. Submissions appear in the admin.
+  limited per IP address and, unless CAPTCHA=off, needs the token of the
+  captcha widget. Submissions appear in the admin.
 -->
 <script setup lang="ts">
+import { resetCaptcha } from "@django-stack/utils";
+import { Captcha } from "@django-stack/vue";
+
+const { data: layout } = useLayoutContent();
 const status = ref("");
 const sending = ref(false);
 
@@ -18,8 +23,15 @@ async function submit(event: Event) {
       body: JSON.stringify(Object.fromEntries(new FormData(form))),
     });
     if (response.status === 429) throw new Error("Too many messages; try again in a minute.");
-    if (!response.ok) throw new Error("The message could not be sent. Check the fields and try again.");
+    if (!response.ok) {
+      const errors = await response.json().catch(() => ({}));
+      // A token is valid once, so the widget verifies again.
+      resetCaptcha(form);
+      if (errors.captcha) throw new Error("Verify that you are human, then send the message again.");
+      throw new Error("The message could not be sent. Check the fields and try again.");
+    }
     form.reset();
+    resetCaptcha(form);
     status.value = "Thank you, your message was sent.";
   } catch (error) {
     status.value = error instanceof Error ? error.message : String(error);
@@ -34,6 +46,7 @@ async function submit(event: Event) {
     <label>Name <input name="name" required maxlength="200" autocomplete="name" /></label>
     <label>Email <input name="email" type="email" required autocomplete="email" /></label>
     <label>Message <textarea name="message" required maxlength="5000" rows="6"></textarea></label>
+    <Captcha v-if="layout?.captcha !== false" />
     <button class="button" type="submit" :disabled="sending">Send</button>
     <p class="status" role="status" aria-live="polite">{{ status }}</p>
   </form>

package/templates/frontend-sveltekit/AGENTS.md

@@ -13,7 +13,7 @@ src/routes/+layout.svelte    the page shell: SEO tags, menus, footer, preview ba
 src/lib/components/          the post list and the contact form
 src/lib/server/api.ts        getContent(): content helpers with the read-only key, drafts in preview
 src/lib/server/cache.ts      the in-memory page cache that /revalidate empties
-src/lib/headless.ts          generated API types; do not edit, run `npm run generate:types`
+src/lib/headless.ts          generated API types; do not edit, run `{{pm_run}} generate:types`
 src/hooks.server.ts          page cache, editor-managed redirects, security headers
 vite.config.ts               SvelteKit's options (Node adapter, Content-Security-Policy) and the dev proxy to Django
 ```
@@ -49,5 +49,5 @@ Run them in the `frontend` container (`docker compose exec frontend <command>`):
 
 | Task | Command |
 |------|---------|
-| Type-check | `npm run check` |
-| Test | `npm test` |
+| Type-check | `{{pm_run}} check` |
+| Test | `{{pm_run}} test` |

package/templates/frontend-sveltekit/Dockerfile

@@ -6,10 +6,13 @@ FROM node:22-alpine AS base
 WORKDIR /app
 
 FROM base AS deps
-COPY package.json package-lock.json* ./
+{{pm_setup}}
+COPY {{pm_manifests}} ./
 COPY vendor/ vendor/
 # No BuildKit cache mounts: Railway rejects them, and the layer is cached anyway.
-RUN if [ -f package-lock.json ]; then npm ci; else npm install; fi
+RUN {{pm_install}}
+# The package manager only installs: npm, which comes with Node.js, runs
+# the scripts of package.json below.
 
 FROM deps AS dev
 EXPOSE 3000
@@ -17,7 +20,7 @@ CMD ["npm", "run", "dev"]
 
 FROM deps AS build
 COPY . .
-RUN npm run build && npm prune --omit=dev
+RUN npm run build && {{pm_prune}}
 
 FROM base AS prod
 # The proxy in front sets X-Forwarded-Proto, so links and cookies use https.

package/templates/frontend-sveltekit/package.json

@@ -19,8 +19,8 @@
   },
   "dependencies": {
     "@django-headless/client": "^1.1.1",
-    "@django-stack/svelte": "^0.9.0",
-    "@django-stack/utils": "^0.9.0"
+    "@django-stack/svelte": "^0.11.0",
+    "@django-stack/utils": "^0.11.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-node": "^6.0.1",

package/templates/frontend-sveltekit/pnpm-workspace.yaml

@@ -0,0 +1,11 @@
+# pnpm's settings for the frontend (pnpm 11 and later).
+
+# Resolve only versions published at least a day ago, so a compromised
+# release is usually caught before it reaches you. DjangoStack's own
+# packages are exempt, so a project made on a release day installs.
+minimumReleaseAge: 1440
+minimumReleaseAgeExclude:
+  - "@django-stack/*"
+
+# Which dependencies may run install scripts; pnpm refuses others.
+allowBuilds: {}

package/templates/frontend-sveltekit/src/hooks.server.ts

@@ -1,5 +1,6 @@
+import { reportError } from "@django-stack/utils";
 import { redirect } from "@sveltejs/kit";
-import type { Handle } from "@sveltejs/kit/hooks";
+import type { Handle, HandleServerError } from "@sveltejs/kit/hooks";
 import { getContent, PREVIEW_COOKIE } from "#lib/server/api.ts";
 import { getCached, store } from "#lib/server/cache.ts";
 import { dev } from "$app/env";
@@ -68,3 +69,14 @@ export const handle: Handle = async ({ event, resolve }) => {
   }
   return response;
 };
+
+/**
+ * Errors of the site's code are logged, as SvelteKit does by default, and
+ * go to Sentry with ERRORS=sentry. Errors such as a 404 are not.
+ */
+export const handleError: HandleServerError = async ({ kind, error, issues, event }) => {
+  if (kind === "validation") console.error("Remote function schema validation failed:", issues);
+  if (kind !== "unknown") return;
+  console.error(error instanceof Error ? error.stack : String(error));
+  await reportError(error, { request: event.request });
+};

package/templates/frontend-sveltekit/src/lib/components/ContactForm.svelte

@@ -1,9 +1,14 @@
 <!--
   The contact form. It posts to Django's public create route for form
   submissions (PUBLIC_CREATE in backend/config/settings.py), which is rate
-  limited per IP address. Submissions appear in the admin.
+  limited per IP address and, unless CAPTCHA=off, needs the token of the
+  captcha widget. Submissions appear in the admin.
 -->
 <script lang="ts">
+  import { Captcha } from "@django-stack/svelte";
+  import { resetCaptcha } from "@django-stack/utils";
+
+  let { captcha = true }: { captcha?: boolean } = $props();
   let status = $state("");
   let sending = $state(false);
 
@@ -19,8 +24,15 @@
         body: JSON.stringify(Object.fromEntries(new FormData(form))),
       });
       if (response.status === 429) throw new Error("Too many messages; try again in a minute.");
-      if (!response.ok) throw new Error("The message could not be sent. Check the fields and try again.");
+      if (!response.ok) {
+        const errors = await response.json().catch(() => ({}));
+        // A token is valid once, so the widget verifies again.
+        resetCaptcha(form);
+        if (errors.captcha) throw new Error("Verify that you are human, then send the message again.");
+        throw new Error("The message could not be sent. Check the fields and try again.");
+      }
       form.reset();
+      resetCaptcha(form);
       status = "Thank you, your message was sent.";
     } catch (error) {
       status = error instanceof Error ? error.message : String(error);
@@ -34,6 +46,7 @@
   <label>Name <input name="name" required maxlength="200" autocomplete="name" /></label>
   <label>Email <input name="email" type="email" required autocomplete="email" /></label>
   <label>Message <textarea name="message" required maxlength="5000" rows="6"></textarea></label>
+  {#if captcha}<Captcha />{/if}
   <button class="button" type="submit" disabled={sending}>Send</button>
   <p class="status" role="status" aria-live="polite">{status}</p>
 </form>

package/templates/frontend-sveltekit/src/routes/+layout.server.ts

@@ -1,3 +1,4 @@
+import { captchaEnabled } from "@django-stack/utils";
 import { getContent, PREVIEW_COOKIE, SITE_URL } from "#lib/server/api.ts";
 import type { LayoutServerLoad } from "./$types";
 
@@ -16,5 +17,7 @@ export const load: LayoutServerLoad = async ({ cookies }) => {
     siteUrl: SITE_URL,
     // Page analytics: Umami's tracker, served from this site at /_a/.
     analytics: process.env.UMAMI_WEBSITE_ID || null,
+    // The captcha widget of the contact form, unless CAPTCHA=off.
+    captcha: captchaEnabled(process.env.CAPTCHA),
   };
 };

package/templates/frontend-sveltekit/src/routes/[...path]/+page.svelte

@@ -8,5 +8,5 @@
 <article class="narrow">
   <h1>{data.page.title}</h1>
   <Blocks blocks={data.page.body} />
-  {#if data.page.path === "contact"}<ContactForm />{/if}
+  {#if data.page.path === "contact"}<ContactForm captcha={data.captcha} />{/if}
 </article>