@django-stack/cli 0.0.1 → 0.2.0

package/templates/frontend-astro/src/lib/headless.ts

@@ -0,0 +1,344 @@
+// Generated by django-headless from the OpenAPI schema of the API. Do not edit this file:
+// run `headless generate` again when the exposed models change.
+
+export interface ContentAuthor {
+  id: number;
+  name: string;
+  slug: string;
+  bio: string;
+  avatar: string | null;
+}
+
+export interface ContentCategory {
+  id: number;
+  name: string;
+  slug: string;
+  description: string;
+}
+
+export interface ContentFormSubmission {
+  id: number;
+  name: string;
+  /** Format: email. */
+  email: string;
+  message: string;
+  /** Format: date-time. */
+  created_at: string;
+}
+
+export interface ContentFormSubmissionInput {
+  name: string;
+  /** Format: email. */
+  email: string;
+  message: string;
+}
+
+export interface ContentMenu {
+  id: number;
+  name: string;
+  /** The frontend asks for a menu by this name, such as main. */
+  slug: string;
+  items: { [key: string]: unknown };
+}
+
+export interface ContentPage {
+  id: number;
+  status: "draft" | "published";
+  /** Leave empty to publish right away. A future date schedules the publication. Format: date-time. */
+  published_at: string | null;
+  seo_title: string;
+  seo_description: string;
+  title: string;
+  slug: string;
+  path: string;
+  body: { [key: string]: unknown };
+  order: number;
+  /** Shown when the page is shared; 1200 × 630 works best. */
+  share_image: string | null;
+  parent: number | null;
+  is_published: boolean;
+}
+
+export interface ContentPost {
+  id: number;
+  status: "draft" | "published";
+  /** Leave empty to publish right away. A future date schedules the publication. Format: date-time. */
+  published_at: string | null;
+  seo_title: string;
+  seo_description: string;
+  title: string;
+  slug: string;
+  /** A short summary for lists and search results. */
+  excerpt: string;
+  body: { [key: string]: unknown };
+  /** Shown when the page is shared; 1200 × 630 works best. */
+  share_image: string | null;
+  cover: string | null;
+  author: number | null;
+  categories: number[];
+  tags: number[];
+  is_published: boolean;
+}
+
+export interface ContentRedirect {
+  id: number;
+  /** Such as /old-page, without the domain. */
+  old_path: string;
+  /** A path on the site or a full URL. */
+  new_path: string;
+  /** 301 when on, 302 when off. */
+  permanent: boolean;
+}
+
+export interface ContentSiteSettings {
+  id: number;
+  site_name: string;
+  tagline: string;
+  seo_description: string;
+  /** Such as {"Mastodon": "https://..."}. */
+  social_links: { [key: string]: unknown };
+  footer_text: string;
+  logo: string | null;
+  /** The page shown at /. Without one, the home page lists the latest posts. */
+  home_page: number | null;
+  /** The default image for social sharing. */
+  share_image: string | null;
+}
+
+export interface ContentStudioMediaLibraryMedia {
+  /** Format: uuid. */
+  id: string;
+  name: string;
+  /** Describes a picture for screen readers */
+  alt_text: string;
+  type: "image" | "video" | "audio" | "file";
+  /** Format: binary. */
+  file: string;
+  /** Read from the file, such as an image's width and height. */
+  metadata: { [key: string]: unknown };
+  /** Set by editors for some types of media, such as a focal point. */
+  properties: { [key: string]: unknown };
+}
+
+export interface ContentTag {
+  id: number;
+  name: string;
+  slug: string;
+}
+
+export type Models = {
+  "content.author": {
+    item: ContentAuthor;
+    input: never;
+    id: number;
+    filters: {
+      posts: number;
+      id: number;
+      name: string;
+      slug: string;
+      bio: string;
+      avatar: string;
+    };
+    lookups: {
+      slug: string;
+    };
+    expandable: {
+      posts: { model: "content.post"; many: true; nullable: false };
+      avatar: { model: "content_studio_media_library.media"; many: false; nullable: true };
+    };
+    readOnly: true;
+    singleton: false;
+    paginated: true;
+  };
+  "content.category": {
+    item: ContentCategory;
+    input: never;
+    id: number;
+    filters: {
+      posts: number;
+      id: number;
+      name: string;
+      slug: string;
+      description: string;
+    };
+    lookups: {
+      slug: string;
+    };
+    expandable: {
+      posts: { model: "content.post"; many: true; nullable: false };
+    };
+    readOnly: true;
+    singleton: false;
+    paginated: true;
+  };
+  "content.formsubmission": {
+    item: ContentFormSubmission;
+    input: ContentFormSubmissionInput;
+    id: number;
+    filters: {
+      id: number;
+      name: string;
+      email: string;
+      message: string;
+      created_at: string | Date;
+    };
+    lookups: {};
+    expandable: {};
+    readOnly: false;
+    singleton: false;
+    paginated: true;
+  };
+  "content.menu": {
+    item: ContentMenu;
+    input: never;
+    id: number;
+    filters: {
+      id: number;
+      name: string;
+      slug: string;
+      items: string;
+    };
+    lookups: {
+      slug: string;
+    };
+    expandable: {};
+    readOnly: true;
+    singleton: false;
+    paginated: true;
+  };
+  "content.page": {
+    item: ContentPage;
+    input: never;
+    id: number;
+    filters: {
+      children: number;
+      id: number;
+      status: "draft" | "published";
+      published_at: string | Date;
+      seo_title: string;
+      seo_description: string;
+      share_image: string;
+      title: string;
+      slug: string;
+      parent: number;
+      path: string;
+      body: string;
+      order: number;
+    };
+    lookups: {};
+    expandable: {
+      children: { model: "content.page"; many: true; nullable: false };
+      share_image: { model: "content_studio_media_library.media"; many: false; nullable: true };
+      parent: { model: "content.page"; many: false; nullable: true };
+    };
+    readOnly: true;
+    singleton: false;
+    paginated: true;
+  };
+  "content.post": {
+    item: ContentPost;
+    input: never;
+    id: number;
+    filters: {
+      id: number;
+      status: "draft" | "published";
+      published_at: string | Date;
+      seo_title: string;
+      seo_description: string;
+      share_image: string;
+      title: string;
+      slug: string;
+      excerpt: string;
+      cover: string;
+      body: string;
+      author: number;
+      categories: number;
+      tags: number;
+    };
+    lookups: {
+      slug: string;
+    };
+    expandable: {
+      share_image: { model: "content_studio_media_library.media"; many: false; nullable: true };
+      cover: { model: "content_studio_media_library.media"; many: false; nullable: true };
+      author: { model: "content.author"; many: false; nullable: true };
+      categories: { model: "content.category"; many: true; nullable: false };
+      tags: { model: "content.tag"; many: true; nullable: false };
+    };
+    readOnly: true;
+    singleton: false;
+    paginated: true;
+  };
+  "content.redirect": {
+    item: ContentRedirect;
+    input: never;
+    id: number;
+    filters: {
+      id: number;
+      old_path: string;
+      new_path: string;
+      permanent: boolean;
+    };
+    lookups: {
+      old_path: string;
+    };
+    expandable: {};
+    readOnly: true;
+    singleton: false;
+    paginated: true;
+  };
+  "content.sitesettings": {
+    item: ContentSiteSettings;
+    input: never;
+    id: string | number;
+    filters: {};
+    lookups: {};
+    expandable: {
+      logo: { model: "content_studio_media_library.media"; many: false; nullable: true };
+      home_page: { model: "content.page"; many: false; nullable: true };
+      share_image: { model: "content_studio_media_library.media"; many: false; nullable: true };
+    };
+    readOnly: true;
+    singleton: true;
+    paginated: true;
+  };
+  "content.tag": {
+    item: ContentTag;
+    input: never;
+    id: number;
+    filters: {
+      posts: number;
+      id: number;
+      name: string;
+      slug: string;
+    };
+    lookups: {
+      slug: string;
+    };
+    expandable: {
+      posts: { model: "content.post"; many: true; nullable: false };
+    };
+    readOnly: true;
+    singleton: false;
+    paginated: true;
+  };
+  "content_studio_media_library.media": {
+    item: ContentStudioMediaLibraryMedia;
+    input: never;
+    id: string;
+    filters: {
+      id: string;
+      file: string;
+      name: string;
+      alt_text: string;
+      metadata: string;
+      properties: string;
+      type: "image" | "video" | "audio" | "file";
+    };
+    lookups: {};
+    expandable: {};
+    readOnly: true;
+    singleton: false;
+    paginated: true;
+  };
+};

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

@@ -0,0 +1,69 @@
+import { defineMiddleware } from "astro:middleware";
+import { getContent, PREVIEW_COOKIE } from "./lib/api";
+import { getCached, store } from "./lib/cache";
+
+const SECURITY_HEADERS: Record<string, string> = {
+  "X-Content-Type-Options": "nosniff",
+  "Referrer-Policy": "strict-origin-when-cross-origin",
+  "X-Frame-Options": "DENY",
+  "Permissions-Policy": "camera=(), microphone=(), geolocation=()",
+};
+
+const CACHEABLE = /^(text\/html|application\/xml|application\/rss\+xml|text\/plain)/;
+
+// Where media files come from when they are not on this site: S3 or a CDN.
+const MEDIA_ORIGINS = (process.env.MEDIA_ORIGINS ?? "")
+  .split(",")
+  .map((value) => {
+    try {
+      return new URL(value.trim()).origin;
+    } catch {
+      return "";
+    }
+  })
+  .filter(Boolean)
+  .map((origin) => ` ${origin}`)
+  .join("");
+const MEDIA_DIRECTIVES = `img-src 'self' data:${MEDIA_ORIGINS}; media-src 'self'${MEDIA_ORIGINS}`;
+
+export const onRequest = defineMiddleware(async (context, next) => {
+  const { request, url, cookies } = context;
+  const preview = cookies.has(PREVIEW_COOKIE);
+  const cacheable =
+    request.method === "GET" && !preview && !import.meta.env.DEV && !url.pathname.startsWith("/_");
+  const key = url.pathname + url.search;
+
+  if (cacheable) {
+    const hit = getCached(key);
+    if (hit) return hit;
+  }
+
+  let response = await next();
+
+  // Redirects that editors manage in the admin, for paths that do not exist.
+  if (response.status === 404 && request.method === "GET") {
+    const redirect = await getContent(cookies)
+      .resolveRedirect(url.pathname)
+      .catch(() => null);
+    if (redirect) {
+      return context.redirect(redirect.new_path, redirect.permanent ? 301 : 302);
+    }
+  }
+
+  for (const [name, value] of Object.entries(SECURITY_HEADERS)) {
+    if (!response.headers.has(name)) response.headers.set(name, value);
+  }
+  // Images and video may come from the media origins. Astro builds the
+  // policy while it renders, so the directives are added to its header.
+  const csp = response.headers.get("Content-Security-Policy");
+  if (csp && !csp.includes("img-src")) {
+    response.headers.set("Content-Security-Policy", `${csp.trim().replace(/;$/, "")}; ${MEDIA_DIRECTIVES};`);
+  }
+  if (preview) response.headers.set("Cache-Control", "private, no-store");
+
+  const type = response.headers.get("Content-Type") ?? "";
+  if (cacheable && response.status === 200 && CACHEABLE.test(type)) {
+    response = await store(key, response);
+  }
+  return response;
+});

package/templates/frontend-astro/src/pages/404.astro

@@ -0,0 +1,13 @@
+---
+import Base from "../layouts/Base.astro";
+
+Astro.response.status = 404;
+---
+
+<Base page={{ title: "Page not found" }}>
+  <section class="narrow">
+    <h1>Page not found</h1>
+    <p>The page you are looking for does not exist or has moved.</p>
+    <p><a href="/">Go to the home page</a></p>
+  </section>
+</Base>

package/templates/frontend-astro/src/pages/[...slug].astro

@@ -0,0 +1,21 @@
+---
+import Blocks from "../components/Blocks.astro";
+import ContactForm from "../components/ContactForm.astro";
+import Base from "../layouts/Base.astro";
+import { getContent } from "../lib/api";
+
+const path = Astro.params.slug ?? "";
+const page = await getContent(Astro.cookies).getPage(path);
+
+if (!page) {
+  return Astro.rewrite("/404");
+}
+---
+
+<Base page={page}>
+  <article class="narrow">
+    <h1>{page.title}</h1>
+    <Blocks blocks={page.body} />
+    {page.path === "contact" && <ContactForm />}
+  </article>
+</Base>

package/templates/frontend-astro/src/pages/blog/[slug].astro

@@ -0,0 +1,50 @@
+---
+import type { Author, Taxonomy } from "@django-stack/utils";
+import Blocks from "../../components/Blocks.astro";
+import Image from "../../components/Image.astro";
+import Base from "../../layouts/Base.astro";
+import { getContent } from "../../lib/api";
+
+const post = await getContent(Astro.cookies).getPost(Astro.params.slug ?? "");
+
+if (!post) {
+  return Astro.rewrite("/404");
+}
+
+const author = typeof post.author === "object" ? (post.author as Author | null) : null;
+const categories = post.categories.filter((item): item is Taxonomy => typeof item === "object");
+const tags = post.tags.filter((item): item is Taxonomy => typeof item === "object");
+const date = post.published_at ? new Date(post.published_at) : null;
+---
+
+<Base page={post} type="article">
+  <article class="narrow">
+    <p class="muted">
+      {date && <time datetime={date.toISOString()}>{date.toLocaleDateString("en", { dateStyle: "long" })}</time>}
+      {author && <span> · {author.name}</span>}
+      {categories.map((category) => <span> · <a href={`/category/${category.slug}`}>{category.name}</a></span>)}
+    </p>
+    <h1>{post.title}</h1>
+    <Image media={post.cover} size="content" sizes="(min-width: 48rem) 44rem, 100vw" class="cover" eager />
+    <Blocks blocks={post.body} />
+    {
+      tags.length > 0 && (
+        <p class="tags">
+          {tags.map((tag) => <a href={`/tag/${tag.slug}`}>#{tag.name}</a>)}
+        </p>
+      )
+    }
+  </article>
+</Base>
+
+<style>
+  article :global(.cover) {
+    width: 100%;
+    border-radius: 0.75rem;
+  }
+  .tags {
+    display: flex;
+    gap: 1rem;
+    margin-top: 3rem;
+  }
+</style>

package/templates/frontend-astro/src/pages/blog/index.astro

@@ -0,0 +1,15 @@
+---
+import PostList from "../../components/PostList.astro";
+import Base from "../../layouts/Base.astro";
+import { getContent } from "../../lib/api";
+
+const page = Math.max(1, Number(Astro.url.searchParams.get("page")) || 1);
+const result = await getContent(Astro.cookies).getPosts({ page, limit: 9 });
+---
+
+<Base page={{ title: "Blog" }}>
+  <section class="container">
+    <h1>Blog</h1>
+    <PostList result={result} base="/blog" />
+  </section>
+</Base>

package/templates/frontend-astro/src/pages/category/[slug].astro

@@ -0,0 +1,25 @@
+---
+import PostList from "../../components/PostList.astro";
+import Base from "../../layouts/Base.astro";
+import { getContent } from "../../lib/api";
+
+const content = getContent(Astro.cookies);
+const slug = Astro.params.slug ?? "";
+const category = await content.getCategory(slug);
+
+if (!category) {
+  return Astro.rewrite("/404");
+}
+
+const page = Math.max(1, Number(Astro.url.searchParams.get("page")) || 1);
+const result = await content.getPosts({ category: slug, page, limit: 9 });
+---
+
+<Base page={{ title: category.name, seo_description: category.description ?? "" }}>
+  <section class="container">
+    <p class="muted">Category</p>
+    <h1>{category.name}</h1>
+    {category.description && <p>{category.description}</p>}
+    <PostList result={result} base={`/category/${slug}`} />
+  </section>
+</Base>

package/templates/frontend-astro/src/pages/index.astro

@@ -0,0 +1,28 @@
+---
+import Blocks from "../components/Blocks.astro";
+import PostList from "../components/PostList.astro";
+import Base from "../layouts/Base.astro";
+import { getContent } from "../lib/api";
+
+const content = getContent(Astro.cookies);
+const settings = await content.getSiteSettings();
+const home = await content.getHomePage(settings);
+const posts = home ? null : await content.getPosts({ limit: 9 });
+---
+
+<Base page={home}>
+  {
+    home ? (
+      <article class="narrow">
+        <h1>{home.title}</h1>
+        <Blocks blocks={home.body} />
+      </article>
+    ) : (
+      <section class="container">
+        <h1>{settings?.site_name ?? "Latest posts"}</h1>
+        {settings?.tagline && <p class="muted">{settings.tagline}</p>}
+        {posts && <PostList result={posts} base="/" />}
+      </section>
+    )
+  }
+</Base>

package/templates/frontend-astro/src/pages/preview/exit.ts

@@ -0,0 +1,7 @@
+import type { APIRoute } from "astro";
+import { PREVIEW_COOKIE } from "../../lib/api";
+
+export const GET: APIRoute = ({ cookies, redirect }) => {
+  cookies.delete(PREVIEW_COOKIE, { path: "/" });
+  return redirect("/", 302);
+};

package/templates/frontend-astro/src/pages/preview/index.ts

@@ -0,0 +1,26 @@
+import { verifyPreviewToken } from "@django-stack/utils";
+import type { APIRoute } from "astro";
+import { PREVIEW_COOKIE } from "../../lib/api";
+
+/**
+ * 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: APIRoute = async ({ url, cookies, redirect }) => {
+  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.
+  return redirect(path.startsWith("/") && !path.startsWith("//") ? path : "/", 302);
+};

package/templates/frontend-astro/src/pages/revalidate.ts

@@ -0,0 +1,19 @@
+import { verifyWebhook } from "@django-stack/utils";
+import type { APIRoute } from "astro";
+import { purgeAll } from "../lib/cache";
+
+/**
+ * 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: APIRoute = async ({ request }) => {
+  const { valid, payload } = await verifyWebhook(request, process.env.REVALIDATE_SECRET);
+  if (!valid) {
+    return new Response(JSON.stringify({ detail: "Invalid signature." }), { status: 401 });
+  }
+  const purged = purgeAll();
+  return new Response(JSON.stringify({ purged, changes: payload?.changes.length ?? 0 }), {
+    headers: { "Content-Type": "application/json" },
+  });
+};

package/templates/frontend-astro/src/pages/robots.txt.ts

@@ -0,0 +1,7 @@
+import type { APIRoute } from "astro";
+import { SITE_URL } from "../lib/api";
+
+export const GET: APIRoute = () =>
+  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-astro/src/pages/rss.xml.ts

@@ -0,0 +1,19 @@
+import rss from "@astrojs/rss";
+import type { APIRoute } from "astro";
+import { getContent, SITE_URL } from "../lib/api";
+
+export const GET: APIRoute = async ({ cookies }) => {
+  const content = getContent(cookies);
+  const [settings, posts] = await Promise.all([content.getSiteSettings(), content.getPosts({ limit: 20 })]);
+  return rss({
+    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,
+      ...(post.published_at ? { pubDate: new Date(post.published_at) } : {}),
+    })),
+  });
+};

package/templates/frontend-astro/src/pages/sitemap.xml.ts

@@ -0,0 +1,29 @@
+import type { APIRoute } from "astro";
+import { getContent, SITE_URL } from "../lib/api";
+
+export const GET: APIRoute = 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" } });
+};