@django-stack/cli 0.8.1 → 0.10.0

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/
-RUN --mount=type=cache,target=/root/.npm \
-    if [ -f package-lock.json ]; then npm ci; else npm install; fi
+# No BuildKit cache mounts: Railway rejects them, and the layer is cached anyway.
+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.8.1",
-    "@django-stack/utils": "^0.8.1"
+    "@django-stack/svelte": "^0.10.0",
+    "@django-stack/utils": "^0.10.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>

package/templates/frontend-sveltekit/vite.config.ts

@@ -1,3 +1,4 @@
+import { CAPTCHA_CSP } from "@django-stack/utils";
 import adapter from "@sveltejs/adapter-node";
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vitest/config";
@@ -7,6 +8,10 @@ const backend = process.env.BACKEND_INTERNAL_URL ?? "http://localhost:8000";
 // Umami, for page analytics: only its tracker and page views, under /_a/.
 const umami = process.env.UMAMI_URL || "http://umami:3000";
 
+// SvelteKit takes keyword sources without quotes, such as self.
+const unquoted = (sources: readonly string[]) =>
+  sources.map((source) => source.replaceAll("'", "")) as never[];
+
 export default defineConfig({
   plugins: [
     sveltekit({
@@ -15,13 +20,15 @@ export default defineConfig({
       // A Content-Security-Policy on every page: scripts and styles only from
       // this site, with hashes for the ones SvelteKit inlines (hashes, not
       // nonces, so cached pages stay valid). src/hooks.server.ts adds the
-      // origin of the media files.
+      // origin of the media files. CAPTCHA_CSP allows the captcha widget of
+      // the contact form: its solver, its style and its workers.
       csp: {
         mode: "hash",
         directives: {
           "default-src": ["self"],
-          "script-src": ["self"],
-          "style-src": ["self"],
+          "script-src": ["self", ...unquoted(CAPTCHA_CSP["script-src"])],
+          "style-src": ["self", ...unquoted(CAPTCHA_CSP["style-src"])],
+          "worker-src": unquoted(CAPTCHA_CSP["worker-src"]),
           // Inline style attributes, such as the focal point of an image.
           "style-src-attr": ["unsafe-inline"],
           "base-uri": ["self"],