@django-stack/cli 0.0.1 → 0.2.0

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

@@ -0,0 +1,41 @@
+---
+import type { Post, Author } from "@django-stack/utils";
+import Image from "./Image.astro";
+
+const { post } = Astro.props as { post: Post };
+const author = typeof post.author === "object" ? (post.author as Author | null) : null;
+const date = post.published_at ? new Date(post.published_at) : null;
+---
+
+<article class="card">
+  <a href={`/blog/${post.slug}`}>
+    <Image media={post.cover} size="card" sizes="(min-width: 40rem) 22rem, 100vw" class="cover" />
+  </a>
+  <h3><a href={`/blog/${post.slug}`}>{post.title}</a></h3>
+  <p class="muted meta">
+    {date && <time datetime={date.toISOString()}>{date.toLocaleDateString("en", { dateStyle: "medium" })}</time>}
+    {author && <span> · {author.name}</span>}
+  </p>
+  {post.excerpt && <p>{post.excerpt}</p>}
+</article>
+
+<style>
+  .card h3 {
+    margin: 0.75rem 0 0.25rem;
+    line-height: 1.3;
+  }
+  .card h3 a {
+    color: inherit;
+    text-decoration: none;
+  }
+  .card :global(.cover) {
+    width: 100%;
+    aspect-ratio: 16 / 10;
+    object-fit: cover;
+    border-radius: 0.5rem;
+  }
+  .meta {
+    font-size: 0.9rem;
+    margin: 0;
+  }
+</style>

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

@@ -0,0 +1,39 @@
+---
+import type { Paginated, Post } from "@django-stack/utils";
+import PostCard from "./PostCard.astro";
+
+interface Props {
+  result: Paginated<Post>;
+  /** The URL of the list, without the page parameter. */
+  base: string;
+}
+
+const { result, base } = Astro.props;
+const { current, pages } = result.pagination;
+const pageUrl = (page: number) => (page === 1 ? base : `${base}?page=${page}`);
+---
+
+{result.data.length === 0 && <p class="muted">No posts yet.</p>}
+<div class="grid">
+  {result.data.map((post) => <PostCard post={post} />)}
+</div>
+{
+  pages > 1 && (
+    <nav class="pagination" aria-label="Pages">
+      {current > 1 && <a href={pageUrl(current - 1)}>← Newer</a>}
+      <span class="muted">
+        Page {current} of {pages}
+      </span>
+      {current < pages && <a href={pageUrl(current + 1)}>Older →</a>}
+    </nav>
+  )
+}
+
+<style>
+  .pagination {
+    display: flex;
+    gap: 1.5rem;
+    justify-content: center;
+    margin: 3rem 0;
+  }
+</style>

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

@@ -0,0 +1,14 @@
+---
+/**
+ * HTML from a Content Studio HTMLField. Django sanitizes it with an
+ * allowlist when it is saved, so it is safe to render as is.
+ */
+interface Props {
+  html: string | null | undefined;
+  class?: string;
+}
+
+const { html, class: className = "prose" } = Astro.props;
+---
+
+{html && <div class={className} set:html={html} />}

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

@@ -0,0 +1,20 @@
+---
+import { seo, type SeoInput } from "@django-stack/utils";
+import type { SiteSettings } from "@django-stack/utils";
+import { SITE_URL } from "../lib/api";
+
+interface Props {
+  page?: SeoInput | null;
+  settings: SiteSettings | null;
+  type?: "website" | "article";
+}
+
+const { page, settings, type } = Astro.props;
+const meta = seo({ page, settings, siteUrl: SITE_URL, path: Astro.url.pathname, type });
+---
+
+<title>{meta.title}</title>
+{meta.description && <meta name="description" content={meta.description} />}
+<link rel="canonical" href={meta.canonical} />
+{Object.entries(meta.openGraph).map(([property, content]) => <meta property={property} content={content} />)}
+{Object.entries(meta.twitter).map(([name, content]) => <meta name={name} content={content} />)}

package/templates/frontend-astro/src/components/blocks/CallToAction.astro

@@ -0,0 +1,23 @@
+---
+import type { CallToActionBlock } from "@django-stack/utils";
+
+const { block } = Astro.props as { block: CallToActionBlock };
+---
+
+<aside class="cta">
+  <h2>{block.value.title}</h2>
+  {block.value.text && <p>{block.value.text}</p>}
+  <a class="button" href={block.value.button_url}>{block.value.button_label}</a>
+</aside>
+
+<style>
+  .cta {
+    margin: 2.5rem 0;
+    padding: 2rem;
+    border-radius: 0.75rem;
+    background: var(--color-accent-soft);
+  }
+  .cta h2 {
+    margin-top: 0;
+  }
+</style>

package/templates/frontend-astro/src/components/blocks/Image.astro

@@ -0,0 +1,24 @@
+---
+import type { ImageBlock } from "@django-stack/utils";
+import Image from "../Image.astro";
+
+const { block } = Astro.props as { block: ImageBlock };
+---
+
+<figure class="block-image">
+  <Image media={block.value.image} size="content" sizes="(min-width: 48rem) 44rem, 100vw" />
+  {block.value.caption && <figcaption class="muted">{block.value.caption}</figcaption>}
+</figure>
+
+<style>
+  figure {
+    margin: 2rem 0;
+  }
+  figure :global(img) {
+    border-radius: 0.5rem;
+  }
+  figcaption {
+    font-size: 0.9rem;
+    margin-top: 0.5rem;
+  }
+</style>

package/templates/frontend-astro/src/components/blocks/Quote.astro

@@ -0,0 +1,10 @@
+---
+import type { QuoteBlock } from "@django-stack/utils";
+
+const { block } = Astro.props as { block: QuoteBlock };
+---
+
+<blockquote class="prose">
+  <p>{block.value.text}</p>
+  {block.value.attribution && <footer class="muted">{block.value.attribution}</footer>}
+</blockquote>

package/templates/frontend-astro/src/components/blocks/Text.astro

@@ -0,0 +1,8 @@
+---
+import type { TextBlock } from "@django-stack/utils";
+import RichText from "../RichText.astro";
+
+const { block } = Astro.props as { block: TextBlock };
+---
+
+<RichText html={block.value.body} />

package/templates/frontend-astro/src/layouts/Base.astro

@@ -0,0 +1,122 @@
+---
+import { linkHref, type SeoInput } from "@django-stack/utils";
+import Image from "../components/Image.astro";
+import RichText from "../components/RichText.astro";
+import Seo from "../components/Seo.astro";
+import { getContent, PREVIEW_COOKIE } from "../lib/api";
+import "../styles/global.css";
+
+interface Props {
+  page?: SeoInput | null;
+  type?: "website" | "article";
+}
+
+const { page, type } = Astro.props;
+const content = getContent(Astro.cookies);
+const [settings, mainMenu, footerMenu] = await Promise.all([
+  content.getSiteSettings(),
+  content.getMenu("main"),
+  content.getMenu("footer"),
+]);
+const preview = Astro.cookies.has(PREVIEW_COOKIE);
+const path = Astro.url.pathname;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="alternate" type="application/rss+xml" title={settings?.site_name ?? "RSS"} href="/rss.xml" />
+    <Seo page={page} settings={settings} type={type} />
+  </head>
+  <body>
+    {
+      preview && (
+        <div class="preview-banner">
+          Preview: drafts are shown. <a href="/preview/exit">Leave preview</a>
+        </div>
+      )
+    }
+    <header class="site-header">
+      <div class="container bar">
+        <a class="brand" href="/">
+          {settings?.logo ? <Image media={settings.logo} size="thumbnail" alt={settings.site_name} eager /> : settings?.site_name}
+        </a>
+        <nav aria-label="Main">
+          {
+            mainMenu?.items.map((item) => {
+              const href = linkHref(item);
+              const current = href === path || (href !== "/" && path.startsWith(`${href}/`));
+              return (
+                <a href={href} aria-current={current ? "page" : undefined}>
+                  {item.value.label}
+                </a>
+              );
+            })
+          }
+        </nav>
+      </div>
+    </header>
+    <main>
+      <slot />
+    </main>
+    <footer class="site-footer">
+      <div class="container bar muted">
+        <RichText html={settings?.footer_text} class="footer-text" />
+        <nav aria-label="Footer">
+          {footerMenu?.items.map((item) => <a href={linkHref(item)}>{item.value.label}</a>)}
+          {Object.entries(settings?.social_links ?? {}).map(([name, url]) => <a href={url} rel="me">{name}</a>)}
+        </nav>
+      </div>
+    </footer>
+  </body>
+</html>
+
+<style>
+  .site-header {
+    border-bottom: 1px solid var(--color-line);
+  }
+  .bar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    justify-content: space-between;
+    padding-block: 1rem;
+  }
+  .brand {
+    font-weight: 700;
+    font-size: 1.2rem;
+    color: inherit;
+    text-decoration: none;
+  }
+  .brand :global(img) {
+    height: 2.5rem;
+    width: auto;
+  }
+  nav {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.25rem;
+  }
+  nav a {
+    text-decoration: none;
+  }
+  nav a[aria-current="page"] {
+    font-weight: 600;
+    text-decoration: underline;
+  }
+  main {
+    min-height: 70vh;
+    padding-block: 2rem 4rem;
+  }
+  .site-footer {
+    border-top: 1px solid var(--color-line);
+    font-size: 0.9rem;
+  }
+  .site-footer :global(.footer-text p) {
+    margin: 0;
+  }
+</style>

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

@@ -0,0 +1,24 @@
+/**
+ * Content access for pages and endpoints. Server-side only: the API key is
+ * read from API_READ_KEY and never reaches the browser.
+ */
+
+import { createClient, createContent } from "@django-stack/utils";
+import type { AstroCookies } from "astro";
+import type { Models } from "./headless";
+
+export const PREVIEW_COOKIE = "stack_preview";
+
+/** The content helpers, with drafts when the request carries a preview cookie. */
+export function getContent(cookies: AstroCookies) {
+  const previewToken = cookies.get(PREVIEW_COOKIE)?.value ?? null;
+  const client = createClient<Models>({ previewToken });
+  return createContent(client);
+}
+
+/** The typed Django Headless client, for queries the content helpers do not cover. */
+export function getClient(cookies?: AstroCookies) {
+  return createClient<Models>({ previewToken: cookies?.get(PREVIEW_COOKIE)?.value ?? null });
+}
+
+export const SITE_URL = (process.env.SITE_URL ?? "http://localhost:3000").replace(/\/$/, "");

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

@@ -0,0 +1,58 @@
+/**
+ * A small in-memory cache of rendered pages. Django calls /revalidate after
+ * editors change content, which empties it; entries also expire after
+ * CACHE_TTL seconds (default 300). One frontend process, one cache: with
+ * several replicas, put a shared cache or CDN in front instead.
+ */
+
+interface Entry {
+  body: string;
+  status: number;
+  headers: [string, string][];
+  expires: number;
+}
+
+const MAX_ENTRIES = Number(process.env.CACHE_MAX_ENTRIES ?? 500);
+const TTL = Number(process.env.CACHE_TTL ?? 300) * 1000;
+const entries = new Map<string, Entry>();
+
+export function getCached(key: string): Response | null {
+  const entry = entries.get(key);
+  if (!entry) return null;
+  if (entry.expires < Date.now()) {
+    entries.delete(key);
+    return null;
+  }
+  // Move to the end: the oldest entries are evicted first.
+  entries.delete(key);
+  entries.set(key, entry);
+  const headers = new Headers(entry.headers);
+  headers.set("X-Cache", "HIT");
+  return new Response(entry.body, { status: entry.status, headers });
+}
+
+export async function store(key: string, response: Response): Promise<Response> {
+  if (TTL <= 0) return response;
+  const body = await response.text();
+  entries.set(key, {
+    body,
+    status: response.status,
+    headers: [...response.headers.entries()].filter(([name]) => name.toLowerCase() !== "set-cookie"),
+    expires: Date.now() + TTL,
+  });
+  while (entries.size > MAX_ENTRIES) {
+    const oldest = entries.keys().next().value;
+    if (oldest === undefined) break;
+    entries.delete(oldest);
+  }
+  const headers = new Headers(response.headers);
+  headers.set("X-Cache", "MISS");
+  return new Response(body, { status: response.status, headers });
+}
+
+/** Empties the cache; returns the number of entries removed. */
+export function purgeAll(): number {
+  const size = entries.size;
+  entries.clear();
+  return size;
+}