@django-stack/cli 0.0.1 → 0.2.0

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

@@ -0,0 +1,24 @@
+---
+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 tag = await content.getTag(slug);
+
+if (!tag) {
+  return Astro.rewrite("/404");
+}
+
+const page = Math.max(1, Number(Astro.url.searchParams.get("page")) || 1);
+const result = await content.getPosts({ tag: slug, page, limit: 9 });
+---
+
+<Base page={{ title: `#${tag.name}` }}>
+  <section class="container">
+    <p class="muted">Tag</p>
+    <h1>#{tag.name}</h1>
+    <PostList result={result} base={`/tag/${slug}`} />
+  </section>
+</Base>

package/templates/frontend-astro/src/styles/global.css

@@ -0,0 +1,101 @@
+/* A small, plain stylesheet: replace it with your own design. */
+:root {
+  --color-bg: #ffffff;
+  --color-text: #1d2420;
+  --color-muted: #5b6862;
+  --color-line: #e3e8e4;
+  --color-accent: #0c4b33;
+  --color-accent-soft: #e8f3ee;
+  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --width: 72rem;
+  --width-text: 44rem;
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg: #111614;
+    --color-text: #e6ebe8;
+    --color-muted: #a1aba6;
+    --color-line: #2a322e;
+    --color-accent: #6fcf9f;
+    --color-accent-soft: #1b2a23;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-family: var(--font-body);
+  line-height: 1.6;
+}
+
+a {
+  color: var(--color-accent);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+.container {
+  width: min(100% - 2rem, var(--width));
+  margin-inline: auto;
+}
+
+.narrow {
+  width: min(100% - 2rem, var(--width-text));
+  margin-inline: auto;
+}
+
+.muted {
+  color: var(--color-muted);
+}
+
+.prose h2,
+.prose h3 {
+  line-height: 1.25;
+  margin-top: 2em;
+}
+
+.prose blockquote {
+  margin: 2rem 0;
+  padding-left: 1.25rem;
+  border-left: 4px solid var(--color-accent);
+}
+
+.button {
+  display: inline-block;
+  padding: 0.6rem 1.2rem;
+  border-radius: 0.5rem;
+  background: var(--color-accent);
+  color: var(--color-bg);
+  font-weight: 600;
+  text-decoration: none;
+  border: 0;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+.grid {
+  display: grid;
+  gap: 2rem;
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+}
+
+.preview-banner {
+  background: #fde68a;
+  color: #422006;
+  padding: 0.5rem 1rem;
+  text-align: center;
+  font-size: 0.9rem;
+}

package/templates/frontend-astro/test/blocks.test.ts

@@ -0,0 +1,42 @@
+import { experimental_AstroContainer as AstroContainer } from "astro/container";
+import { describe, expect, it } from "vitest";
+import Blocks from "../src/components/Blocks.astro";
+
+const image = {
+  id: "1",
+  type: "image",
+  name: "Photo",
+  alt: "A photo",
+  url: "http://localhost:3000/media/photo",
+  width: 1600,
+  height: 900,
+  focal_point: null,
+  sizes: { content: { url: "http://localhost:3000/media/content.webp", width: 1200, height: 675 } },
+};
+
+describe("Blocks", () => {
+  it("renders every block type and skips unknown ones", async () => {
+    const container = await AstroContainer.create();
+    const html = await container.renderToString(Blocks, {
+      props: {
+        blocks: [
+          { id: "a", type: "text", value: { body: "<p>Hello <strong>world</strong></p>" } },
+          { id: "b", type: "image", value: { image, caption: "A caption" } },
+          { id: "c", type: "quote", value: { text: "Quoted", attribution: "Someone" } },
+          {
+            id: "d",
+            type: "call_to_action",
+            value: { title: "Act", text: "", button_label: "Go", button_url: "/go" },
+          },
+          { id: "e", type: "unknown", value: {} },
+        ],
+      },
+    });
+    expect(html).toContain("<strong>world</strong>");
+    expect(html).toContain('src="http://localhost:3000/media/content.webp"');
+    expect(html).toContain('alt="A photo"');
+    expect(html).toContain("A caption");
+    expect(html).toContain("Quoted");
+    expect(html).toContain('href="/go"');
+  });
+});

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

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import { getCached, purgeAll, store } from "../src/lib/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-astro/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}

package/templates/frontend-astro/vitest.config.ts

@@ -0,0 +1,8 @@
+/// <reference types="vitest/config" />
+import { getViteConfig } from "astro/config";
+
+export default getViteConfig({
+  test: {
+    include: ["test/**/*.test.ts"],
+  },
+});