@django-stack/cli 0.3.0 → 0.5.0

package/templates/frontend-sveltekit/src/routes/blog/[slug]/+page.server.ts

@@ -0,0 +1,9 @@
+import { error } from "@sveltejs/kit";
+import { getContent } from "#lib/server/api.ts";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async ({ params, cookies }) => {
+  const post = await getContent(cookies).getPost(params.slug);
+  if (!post) error(404, "Page not found");
+  return { post, seo: post, seoType: "article" as const };
+};

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { Blocks, Image } from "@django-stack/svelte";
+  import type { Author, Taxonomy } from "@django-stack/utils";
+
+  let { data } = $props();
+  const post = $derived(data.post);
+  const author = $derived(typeof post.author === "object" ? (post.author as Author | null) : null);
+  const categories = $derived(post.categories.filter((item): item is Taxonomy => typeof item === "object"));
+  const tags = $derived(post.tags.filter((item): item is Taxonomy => typeof item === "object"));
+  const date = $derived(post.published_at ? new Date(post.published_at) : null);
+</script>
+
+<article class="narrow">
+  <p class="muted">
+    {#if date}<time datetime={date.toISOString()}>{date.toLocaleDateString("en", { dateStyle: "long" })}</time>{/if}
+    {#if author}<span> · {author.name}</span>{/if}
+    {#each categories as category (category.slug)}
+      <span> · <a href="/category/{category.slug}">{category.name}</a></span>
+    {/each}
+  </p>
+  <h1>{post.title}</h1>
+  <Image media={post.cover} size="content" sizes="(min-width: 48rem) 44rem, 100vw" class="cover" eager />
+  <Blocks blocks={post.body} />
+  {#if tags.length > 0}
+    <p class="tags">
+      {#each tags as tag (tag.slug)}<a href="/tag/{tag.slug}">#{tag.name}</a>{/each}
+    </p>
+  {/if}
+</article>
+
+<style>
+  article :global(.cover) {
+    width: 100%;
+    border-radius: 0.75rem;
+  }
+  .tags {
+    display: flex;
+    gap: 1rem;
+    margin-top: 3rem;
+  }
+</style>

package/templates/frontend-sveltekit/src/routes/category/[slug]/+page.server.ts

@@ -0,0 +1,11 @@
+import { error } from "@sveltejs/kit";
+import { getContent, pageNumber } from "#lib/server/api.ts";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async ({ params, cookies, url }) => {
+  const content = getContent(cookies);
+  const category = await content.getCategory(params.slug);
+  if (!category) error(404, "Page not found");
+  const result = await content.getPosts({ category: params.slug, page: pageNumber(url), limit: 9 });
+  return { category, result, seo: { title: category.name, seo_description: category.description ?? "" } };
+};

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import PostList from "#lib/components/PostList.svelte";
+
+  let { data } = $props();
+</script>
+
+<section class="container">
+  <p class="muted">Category</p>
+  <h1>{data.category.name}</h1>
+  {#if data.category.description}<p>{data.category.description}</p>{/if}
+  <PostList result={data.result} base="/category/{data.category.slug}" />
+</section>

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

@@ -0,0 +1,27 @@
+import { verifyPreviewToken } from "@django-stack/utils";
+import { redirect } from "@sveltejs/kit";
+import { PREVIEW_COOKIE } from "#lib/server/api.ts";
+import type { RequestHandler } from "./$types";
+
+/**
+ * Opens a page with drafts shown. The admin's Preview button links here with
+ * a token Django signed with PREVIEW_SECRET; the token is kept in a cookie
+ * and sent to the API with every request until it expires.
+ */
+export const GET: RequestHandler = async ({ url, cookies }) => {
+  const token = url.searchParams.get("token");
+  if (!(await verifyPreviewToken(process.env.PREVIEW_SECRET, token))) {
+    return new Response("The preview link is invalid or has expired.", { status: 401 });
+  }
+  const expires = Number(token?.split(".")[0]);
+  cookies.set(PREVIEW_COOKIE, token ?? "", {
+    path: "/",
+    httpOnly: true,
+    sameSite: "lax",
+    secure: url.protocol === "https:",
+    expires: new Date(expires * 1000),
+  });
+  const path = url.searchParams.get("path") ?? "/";
+  // Only paths on this site, never another origin.
+  redirect(302, path.startsWith("/") && !path.startsWith("//") ? path : "/");
+};

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

@@ -0,0 +1,8 @@
+import { redirect } from "@sveltejs/kit";
+import { PREVIEW_COOKIE } from "#lib/server/api.ts";
+import type { RequestHandler } from "./$types";
+
+export const GET: RequestHandler = ({ cookies }) => {
+  cookies.delete(PREVIEW_COOKIE, { path: "/" });
+  redirect(302, "/");
+};

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

@@ -0,0 +1,16 @@
+import { verifyWebhook } from "@django-stack/utils";
+import { json } from "@sveltejs/kit";
+import { purgeAll } from "#lib/server/cache.ts";
+import type { RequestHandler } from "./$types";
+
+/**
+ * Django calls this after editors change content (REVALIDATE_URL), signed
+ * with REVALIDATE_SECRET. It empties the page cache, so the next visit
+ * renders the new content.
+ */
+export const POST: RequestHandler = async ({ request }) => {
+  const { valid, payload } = await verifyWebhook(request, process.env.REVALIDATE_SECRET);
+  if (!valid) return json({ detail: "Invalid signature." }, { status: 401 });
+  const purged = purgeAll();
+  return json({ purged, changes: payload?.changes.length ?? 0 });
+};

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

@@ -0,0 +1,7 @@
+import { SITE_URL } from "#lib/server/api.ts";
+import type { RequestHandler } from "./$types";
+
+export const GET: RequestHandler = () =>
+  new Response(`User-agent: *\nDisallow: /admin/\nDisallow: /preview\n\nSitemap: ${SITE_URL}/sitemap.xml\n`, {
+    headers: { "Content-Type": "text/plain; charset=utf-8" },
+  });

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

@@ -0,0 +1,20 @@
+import { getContent, SITE_URL } from "#lib/server/api.ts";
+import { rssFeed } from "#lib/server/rss.ts";
+import type { RequestHandler } from "./$types";
+
+export const GET: RequestHandler = async ({ cookies }) => {
+  const content = getContent(cookies);
+  const [settings, posts] = await Promise.all([content.getSiteSettings(), content.getPosts({ limit: 20 })]);
+  const body = rssFeed({
+    title: settings?.site_name ?? "Blog",
+    description: settings?.seo_description || settings?.tagline || "",
+    site: SITE_URL,
+    items: posts.data.map((post) => ({
+      title: post.title,
+      link: `/blog/${post.slug}`,
+      description: post.excerpt,
+      pubDate: post.published_at ? new Date(post.published_at) : null,
+    })),
+  });
+  return new Response(body, { headers: { "Content-Type": "application/rss+xml; charset=utf-8" } });
+};

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

@@ -0,0 +1,29 @@
+import { getContent, SITE_URL } from "#lib/server/api.ts";
+import type { RequestHandler } from "./$types";
+
+export const GET: RequestHandler = async ({ cookies }) => {
+  const content = getContent(cookies);
+  const [pages, posts, settings] = await Promise.all([
+    content.getAllPages(),
+    content.getAllPosts(),
+    content.getSiteSettings(),
+  ]);
+  const urls = [
+    { loc: "/", lastmod: null },
+    { loc: "/blog", lastmod: null },
+    ...pages
+      .filter((page) => page.id !== settings?.home_page)
+      .map((page) => ({ loc: `/${page.path}`, lastmod: page.published_at })),
+    ...posts.map((post) => ({ loc: `/blog/${post.slug}`, lastmod: post.published_at })),
+  ];
+  const body = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${urls
+  .map(
+    ({ loc, lastmod }) =>
+      `  <url><loc>${SITE_URL}${loc}</loc>${lastmod ? `<lastmod>${lastmod.slice(0, 10)}</lastmod>` : ""}</url>`,
+  )
+  .join("\n")}
+</urlset>`;
+  return new Response(body, { headers: { "Content-Type": "application/xml; charset=utf-8" } });
+};

package/templates/frontend-sveltekit/src/routes/tag/[slug]/+page.server.ts

@@ -0,0 +1,11 @@
+import { error } from "@sveltejs/kit";
+import { getContent, pageNumber } from "#lib/server/api.ts";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async ({ params, cookies, url }) => {
+  const content = getContent(cookies);
+  const tag = await content.getTag(params.slug);
+  if (!tag) error(404, "Page not found");
+  const result = await content.getPosts({ tag: params.slug, page: pageNumber(url), limit: 9 });
+  return { tag, result, seo: { title: `#${tag.name}` } };
+};

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

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import PostList from "#lib/components/PostList.svelte";
+
+  let { data } = $props();
+</script>
+
+<section class="container">
+  <p class="muted">Tag</p>
+  <h1>#{data.tag.name}</h1>
+  <PostList result={data.result} base="/tag/{data.tag.slug}" />
+</section>

package/templates/frontend-sveltekit/static/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="#0c4b33"/><path d="M8 9h10a6 6 0 0 1 0 12h-4v3H8z" fill="#44b78b"/><path d="M14 13h4a2 2 0 0 1 0 4h-4z" fill="#0c4b33"/></svg>

package/templates/frontend-sveltekit/template.json

@@ -0,0 +1,5 @@
+{
+  "label": "SvelteKit",
+  "url": "https://svelte.dev/docs/kit",
+  "security": "https://github.com/sveltejs/kit/security"
+}

package/templates/frontend-sveltekit/test/cache.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import { getCached, purgeAll, store } from "../src/lib/server/cache";
+
+describe("page cache", () => {
+  it("stores, serves and purges pages", async () => {
+    purgeAll();
+    expect(getCached("/about")).toBeNull();
+    const response = await store(
+      "/about",
+      new Response("<h1>About</h1>", { headers: { "Content-Type": "text/html" } }),
+    );
+    expect(response.headers.get("X-Cache")).toBe("MISS");
+    expect(await response.text()).toBe("<h1>About</h1>");
+
+    const hit = getCached("/about");
+    expect(hit?.headers.get("X-Cache")).toBe("HIT");
+    expect(await hit?.text()).toBe("<h1>About</h1>");
+
+    expect(purgeAll()).toBe(1);
+    expect(getCached("/about")).toBeNull();
+  });
+});

package/templates/frontend-sveltekit/test/rss.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { rssFeed } from "../src/lib/server/rss";
+
+describe("RSS feed", () => {
+  it("lists the posts with absolute links, escaped", () => {
+    const xml = rssFeed({
+      title: "News & notes",
+      description: "",
+      site: "https://example.com",
+      items: [{ title: "<Hello>", link: "/blog/hello", pubDate: new Date("2026-01-02T03:04:05Z") }],
+    });
+    expect(xml).toContain("<title>News &amp; notes</title>");
+    expect(xml).toContain("<title>&lt;Hello&gt;</title>");
+    expect(xml).toContain("<link>https://example.com/blog/hello</link>");
+    expect(xml).toContain("<pubDate>Fri, 02 Jan 2026 03:04:05 GMT</pubDate>");
+  });
+});

package/templates/frontend-sveltekit/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "$app/tsconfig",
+  "include": ["src", "test", "*"],
+  "exclude": ["src/service-worker"]
+}

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

@@ -0,0 +1,47 @@
+import adapter from "@sveltejs/adapter-node";
+import { sveltekit } from "@sveltejs/kit/vite";
+import { defineConfig } from "vitest/config";
+
+// The Django backend: the frontend container reaches it on the Compose network.
+const backend = process.env.BACKEND_INTERNAL_URL ?? "http://localhost:8000";
+
+export default defineConfig({
+  plugins: [
+    sveltekit({
+      // A Node server: pages render on request, so a publish shows within seconds.
+      adapter: adapter(),
+      // 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.
+      csp: {
+        mode: "hash",
+        directives: {
+          "default-src": ["self"],
+          "script-src": ["self"],
+          "style-src": ["self"],
+          // Inline style attributes, such as the focal point of an image.
+          "style-src-attr": ["unsafe-inline"],
+          "base-uri": ["self"],
+          "form-action": ["self"],
+          "object-src": ["none"],
+        },
+      },
+    }),
+  ],
+  server: {
+    host: true,
+    port: 3000,
+    strictPort: true,
+    // Django calls /revalidate at http://frontend:3000 on the Compose network.
+    allowedHosts: ["frontend"],
+    // In development, serve Django's paths from the same origin as the site,
+    // like the reverse proxy does in production.
+    proxy: Object.fromEntries(
+      ["/admin", "/api", "/media", "/static"].map((path) => [path, { target: backend, changeOrigin: false }]),
+    ),
+  },
+  test: {
+    include: ["test/**/*.test.ts"],
+  },
+});