@django-stack/cli 0.3.0 → 0.5.0

package/templates/frontend-nuxt/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "{{project_name}}-frontend",
+  "private": true,
+  "type": "module",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "start": "node .output/server/index.mjs",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "check": "nuxt typecheck",
+    "test": "vitest run",
+    "generate:types": "headless generate --url \"${API_URL:-http://localhost:8000/api}/schema\" --out src/lib/headless.ts"
+  },
+  "dependencies": {
+    "@django-headless/client": "^1.1.1",
+    "@django-stack/utils": "^0.5.0",
+    "@django-stack/vue": "^0.5.0",
+    "nuxt": "^4.6.3",
+    "nuxt-security": "^2.7.0",
+    "vue": "^3.5.44",
+    "vue-router": "^5.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.20.5",
+    "typescript": "~5.9.3",
+    "vitest": "^5.1.0",
+    "vue-tsc": "^3.3.13"
+  },
+  "engines": {
+    "node": ">=22"
+  }
+}

package/templates/frontend-nuxt/public/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-nuxt/server/plugins/media-origins.ts

@@ -0,0 +1,27 @@
+/**
+ * Images and video may come from the media origins (S3 or a CDN), which are
+ * only known when the server starts: add them to the Content-Security-Policy
+ * that nuxt.config.ts sets.
+ */
+export default defineNitroPlugin((nitroApp) => {
+  const origins = (process.env.MEDIA_ORIGINS ?? "")
+    .split(",")
+    .map((value) => {
+      try {
+        return new URL(value.trim()).origin;
+      } catch {
+        return "";
+      }
+    })
+    .filter(Boolean);
+  if (!origins.length) return;
+  nitroApp.hooks.hook("nuxt-security:routeRules", (routeRules) => {
+    const headers = routeRules["/**"]?.headers;
+    const csp = headers ? headers.contentSecurityPolicy : undefined;
+    if (!csp || typeof csp === "string") return;
+    const sources = (value: unknown): string[] =>
+      Array.isArray(value) ? value : typeof value === "string" ? [value] : [];
+    csp["img-src"] = [...sources(csp["img-src"]), ...origins];
+    csp["media-src"] = [...sources(csp["media-src"]), ...origins];
+  });
+});

package/templates/frontend-nuxt/server/routes/_content/category/[slug].get.ts

@@ -0,0 +1,13 @@
+/** A category and a page of its posts. */
+export default defineEventHandler(async (event) => {
+  const slug = getRouterParam(event, "slug") ?? "";
+  const data = await cachedContent(event, async () => {
+    const content = getContent(event);
+    const category = await content.getCategory(slug);
+    if (!category) return null;
+    const result = await content.getPosts({ category: slug, page: pageNumber(event), limit: 9 });
+    return { category, result };
+  });
+  if (!data) throw createError({ statusCode: 404, statusMessage: "Page not found" });
+  return data;
+});

package/templates/frontend-nuxt/server/routes/_content/home.get.ts

@@ -0,0 +1,10 @@
+/** The home page set in the site settings, or else the latest posts. */
+export default defineEventHandler((event) =>
+  cachedContent(event, async () => {
+    const content = getContent(event);
+    const settings = await content.getSiteSettings();
+    const home = await content.getHomePage(settings);
+    const posts = home ? null : await content.getPosts({ limit: 9 });
+    return { settings, home, posts };
+  }),
+);

package/templates/frontend-nuxt/server/routes/_content/layout.get.ts

@@ -0,0 +1,13 @@
+/** What every page shows: the site settings and the menus. */
+export default defineEventHandler(async (event) => {
+  const data = await cachedContent(event, async () => {
+    const content = getContent(event);
+    const [settings, mainMenu, footerMenu] = await Promise.all([
+      content.getSiteSettings(),
+      content.getMenu("main"),
+      content.getMenu("footer"),
+    ]);
+    return { settings, mainMenu, footerMenu, siteUrl: SITE_URL };
+  });
+  return { ...data, preview: previewToken(event) !== null };
+});

package/templates/frontend-nuxt/server/routes/_content/page.get.ts

@@ -0,0 +1,7 @@
+/** A page by its path, such as about/team. */
+export default defineEventHandler(async (event) => {
+  const path = String(getQuery(event).path ?? "");
+  const page = await cachedContent(event, () => getContent(event).getPage(path));
+  if (!page) throw createError({ statusCode: 404, statusMessage: "Page not found" });
+  return page;
+});

package/templates/frontend-nuxt/server/routes/_content/post/[slug].get.ts

@@ -0,0 +1,7 @@
+/** A post by its slug. */
+export default defineEventHandler(async (event) => {
+  const slug = getRouterParam(event, "slug") ?? "";
+  const post = await cachedContent(event, () => getContent(event).getPost(slug));
+  if (!post) throw createError({ statusCode: 404, statusMessage: "Page not found" });
+  return post;
+});

package/templates/frontend-nuxt/server/routes/_content/posts.get.ts

@@ -0,0 +1,4 @@
+/** A page of posts, newest first. */
+export default defineEventHandler((event) =>
+  cachedContent(event, () => getContent(event).getPosts({ page: pageNumber(event), limit: 9 })),
+);

package/templates/frontend-nuxt/server/routes/_content/redirect.get.ts

@@ -0,0 +1,7 @@
+/** The redirect an editor set up in the admin for a path, if any. */
+export default defineEventHandler(async (event) => {
+  const path = String(getQuery(event).path ?? "/");
+  const redirect = await cachedContent(event, () => getContent(event).resolveRedirect(path));
+  if (!redirect) throw createError({ statusCode: 404, statusMessage: "No redirect" });
+  return { new_path: redirect.new_path, permanent: redirect.permanent };
+});

package/templates/frontend-nuxt/server/routes/_content/tag/[slug].get.ts

@@ -0,0 +1,13 @@
+/** A tag and a page of its posts. */
+export default defineEventHandler(async (event) => {
+  const slug = getRouterParam(event, "slug") ?? "";
+  const data = await cachedContent(event, async () => {
+    const content = getContent(event);
+    const tag = await content.getTag(slug);
+    if (!tag) return null;
+    const result = await content.getPosts({ tag: slug, page: pageNumber(event), limit: 9 });
+    return { tag, result };
+  });
+  if (!data) throw createError({ statusCode: 404, statusMessage: "Page not found" });
+  return data;
+});

package/templates/frontend-nuxt/server/routes/preview/exit.get.ts

@@ -0,0 +1,4 @@
+export default defineEventHandler((event) => {
+  deleteCookie(event, PREVIEW_COOKIE, { path: "/" });
+  return sendRedirect(event, "/", 302);
+});

package/templates/frontend-nuxt/server/routes/preview/index.get.ts

@@ -0,0 +1,26 @@
+import { verifyPreviewToken } from "@django-stack/utils";
+
+/**
+ * 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 default defineEventHandler(async (event) => {
+  const query = getQuery(event);
+  const token = typeof query.token === "string" ? query.token : null;
+  if (!(await verifyPreviewToken(process.env.PREVIEW_SECRET, token))) {
+    setResponseStatus(event, 401);
+    return "The preview link is invalid or has expired.";
+  }
+  const expires = Number(token?.split(".")[0]);
+  setCookie(event, PREVIEW_COOKIE, token ?? "", {
+    path: "/",
+    httpOnly: true,
+    sameSite: "lax",
+    secure: getRequestProtocol(event) === "https",
+    expires: new Date(expires * 1000),
+  });
+  const path = typeof query.path === "string" ? query.path : "/";
+  // Only paths on this site, never another origin.
+  return sendRedirect(event, path.startsWith("/") && !path.startsWith("//") ? path : "/", 302);
+});

package/templates/frontend-nuxt/server/routes/revalidate.post.ts

@@ -0,0 +1,15 @@
+import { verifyWebhook } from "@django-stack/utils";
+
+/**
+ * Django calls this after editors change content (REVALIDATE_URL), signed
+ * with REVALIDATE_SECRET. It empties the content cache, so the next visit
+ * renders the new content.
+ */
+export default defineEventHandler(async (event) => {
+  const { valid, payload } = await verifyWebhook(toWebRequest(event), process.env.REVALIDATE_SECRET);
+  if (!valid) {
+    setResponseStatus(event, 401);
+    return { detail: "Invalid signature." };
+  }
+  return { purged: purgeAll(), changes: payload?.changes.length ?? 0 };
+});

package/templates/frontend-nuxt/server/routes/robots.txt.get.ts

@@ -0,0 +1,4 @@
+export default defineEventHandler((event) => {
+  setResponseHeader(event, "Content-Type", "text/plain; charset=utf-8");
+  return `User-agent: *\nDisallow: /admin/\nDisallow: /preview\n\nSitemap: ${SITE_URL}/sitemap.xml\n`;
+});

package/templates/frontend-nuxt/server/routes/rss.xml.get.ts

@@ -0,0 +1,19 @@
+export default defineEventHandler(async (event) => {
+  const body = await cachedContent(event, async () => {
+    const content = getContent(event);
+    const [settings, posts] = await Promise.all([content.getSiteSettings(), content.getPosts({ limit: 20 })]);
+    return 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,
+      })),
+    });
+  });
+  setResponseHeader(event, "Content-Type", "application/rss+xml; charset=utf-8");
+  return body;
+});

package/templates/frontend-nuxt/server/routes/sitemap.xml.get.ts

@@ -0,0 +1,29 @@
+export default defineEventHandler(async (event) => {
+  const body = await cachedContent(event, async () => {
+    const content = getContent(event);
+    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 })),
+    ];
+    return `<?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>`;
+  });
+  setResponseHeader(event, "Content-Type", "application/xml; charset=utf-8");
+  return body;
+});

package/templates/frontend-nuxt/server/utils/cache.ts

@@ -0,0 +1,48 @@
+/**
+ * A small in-memory cache of the content the pages load. 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.
+ */
+
+const MAX_ENTRIES = Number(process.env.CACHE_MAX_ENTRIES ?? 500);
+const TTL = Number(process.env.CACHE_TTL ?? 300) * 1000;
+const entries = new Map<string, { value: unknown; expires: number }>();
+
+export function getCached<T>(key: string): T | undefined {
+  const entry = entries.get(key);
+  if (!entry) return undefined;
+  if (entry.expires < Date.now()) {
+    entries.delete(key);
+    return undefined;
+  }
+  // Move to the end: the oldest entries are evicted first.
+  entries.delete(key);
+  entries.set(key, entry);
+  return entry.value as T;
+}
+
+export function store<T>(key: string, value: T): T {
+  if (TTL <= 0) return value;
+  entries.set(key, { value, expires: Date.now() + TTL });
+  while (entries.size > MAX_ENTRIES) {
+    const oldest = entries.keys().next().value;
+    if (oldest === undefined) break;
+    entries.delete(oldest);
+  }
+  return value;
+}
+
+/** The cached value for key, or the result of load, which is then cached. */
+export async function cached<T>(key: string, load: () => Promise<T>): Promise<T> {
+  const hit = getCached<T>(key);
+  if (hit !== undefined) return hit;
+  return store(key, await load());
+}
+
+/** Empties the cache; returns the number of entries removed. */
+export function purgeAll(): number {
+  const size = entries.size;
+  entries.clear();
+  return size;
+}

package/templates/frontend-nuxt/server/utils/content.ts

@@ -0,0 +1,41 @@
+/**
+ * Content access for the server routes. The API key is read from
+ * API_READ_KEY on the server; pages load content through the routes in
+ * server/routes/_content, so the key never reaches the browser.
+ */
+
+import { createClient, createContent } from "@django-stack/utils";
+import type { H3Event } from "h3";
+import type { Models } from "../../src/lib/headless";
+
+export const PREVIEW_COOKIE = "stack_preview";
+
+export const SITE_URL = (process.env.SITE_URL ?? "http://localhost:3000").replace(/\/$/, "");
+
+export function previewToken(event: H3Event): string | null {
+  return getCookie(event, PREVIEW_COOKIE) ?? null;
+}
+
+/** The typed Django Headless client, with drafts when the request carries a preview cookie. */
+export function getClient(event: H3Event) {
+  return createClient<Models>({ previewToken: previewToken(event) });
+}
+
+/** The content helpers, with drafts when the request carries a preview cookie. */
+export function getContent(event: H3Event) {
+  return createContent(getClient(event));
+}
+
+/**
+ * Content for a request, from the cache unless the request is a preview.
+ * The key is the request's path and query.
+ */
+export function cachedContent<T>(event: H3Event, load: () => Promise<T>): Promise<T> {
+  if (previewToken(event) || import.meta.dev) return load();
+  return cached(event.path, load);
+}
+
+/** The page number of a list, from ?page=. */
+export function pageNumber(event: H3Event): number {
+  return Math.max(1, Number(getQuery(event).page) || 1);
+}

package/templates/frontend-nuxt/server/utils/rss.ts

@@ -0,0 +1,44 @@
+/** An RSS 2.0 feed. */
+
+export interface FeedItem {
+  title: string;
+  /** A path on the site, such as /blog/hello-world. */
+  link: string;
+  description?: string | null;
+  pubDate?: Date | null;
+}
+
+const escapeXml = (text: string) =>
+  text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+
+export function rssFeed(feed: {
+  title: string;
+  description: string;
+  site: string;
+  items: FeedItem[];
+}): string {
+  const items = feed.items.map((item) => {
+    const url = escapeXml(new URL(item.link, `${feed.site}/`).href);
+    return [
+      "    <item>",
+      `      <title>${escapeXml(item.title)}</title>`,
+      `      <link>${url}</link>`,
+      `      <guid isPermaLink="true">${url}</guid>`,
+      item.description ? `      <description>${escapeXml(item.description)}</description>` : "",
+      item.pubDate ? `      <pubDate>${item.pubDate.toUTCString()}</pubDate>` : "",
+      "    </item>",
+    ]
+      .filter(Boolean)
+      .join("\n");
+  });
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0">
+  <channel>
+    <title>${escapeXml(feed.title)}</title>
+    <description>${escapeXml(feed.description)}</description>
+    <link>${escapeXml(`${feed.site}/`)}</link>
+${items.join("\n")}
+  </channel>
+</rss>
+`;
+}

package/templates/frontend-nuxt/src/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

package/templates/frontend-nuxt/src/assets/main.css

@@ -0,0 +1,126 @@
+/* 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;
+}
+
+/* Blocks, from @django-stack/vue. */
+.block-image {
+  margin: 2rem 0;
+}
+
+.block-image img {
+  border-radius: 0.5rem;
+}
+
+.block-image figcaption {
+  font-size: 0.9rem;
+  margin-top: 0.5rem;
+}
+
+.cta {
+  margin: 2.5rem 0;
+  padding: 2rem;
+  border-radius: 0.75rem;
+  background: var(--color-accent-soft);
+}
+
+.cta h2 {
+  margin-top: 0;
+}

package/templates/frontend-nuxt/src/components/ContactForm.vue

@@ -0,0 +1,66 @@
+<!--
+  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.
+-->
+<script setup lang="ts">
+const status = ref("");
+const sending = ref(false);
+
+async function submit(event: Event) {
+  const form = event.currentTarget as HTMLFormElement;
+  sending.value = true;
+  status.value = "Sending…";
+  try {
+    const response = await fetch("/api/content.formsubmission", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      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.");
+    form.reset();
+    status.value = "Thank you, your message was sent.";
+  } catch (error) {
+    status.value = error instanceof Error ? error.message : String(error);
+  } finally {
+    sending.value = false;
+  }
+}
+</script>
+
+<template>
+  <form class="contact-form" @submit.prevent="submit">
+    <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>
+    <button class="button" type="submit" :disabled="sending">Send</button>
+    <p class="status" role="status" aria-live="polite">{{ status }}</p>
+  </form>
+</template>
+
+<style scoped>
+.contact-form {
+  display: grid;
+  gap: 1rem;
+  max-width: 32rem;
+  margin-top: 2rem;
+}
+label {
+  display: grid;
+  gap: 0.25rem;
+  font-weight: 600;
+}
+input,
+textarea {
+  font: inherit;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-line);
+  border-radius: 0.375rem;
+  background: transparent;
+  color: inherit;
+}
+button {
+  justify-self: start;
+}
+</style>

package/templates/frontend-nuxt/src/components/PostCard.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { Image } from "@django-stack/vue";
+import type { Author, Post } from "@django-stack/utils";
+
+const props = defineProps<{ post: Post }>();
+const author = computed(() => (typeof props.post.author === "object" ? (props.post.author as Author | null) : null));
+const date = computed(() => (props.post.published_at ? new Date(props.post.published_at) : null));
+</script>
+
+<template>
+  <article class="card">
+    <NuxtLink :to="`/blog/${post.slug}`">
+      <Image :media="post.cover" size="card" sizes="(min-width: 40rem) 22rem, 100vw" class="cover" />
+    </NuxtLink>
+    <h3><NuxtLink :to="`/blog/${post.slug}`">{{ post.title }}</NuxtLink></h3>
+    <p class="muted meta">
+      <time v-if="date" :datetime="date.toISOString()">{{ date.toLocaleDateString("en", { dateStyle: "medium" }) }}</time>
+      <span v-if="author"> · {{ author.name }}</span>
+    </p>
+    <p v-if="post.excerpt">{{ post.excerpt }}</p>
+  </article>
+</template>
+
+<style scoped>
+.card h3 {
+  margin: 0.75rem 0 0.25rem;
+  line-height: 1.3;
+}
+.card h3 a {
+  color: inherit;
+  text-decoration: none;
+}
+.card :deep(.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-nuxt/src/components/PostList.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { Paginated, Post } from "@django-stack/utils";
+
+const props = defineProps<{
+  result: Paginated<Post>;
+  /** The URL of the list, without the page parameter. */
+  base: string;
+}>();
+const current = computed(() => props.result.pagination.current);
+const pages = computed(() => props.result.pagination.pages);
+const pageUrl = (page: number) => (page === 1 ? props.base : `${props.base}?page=${page}`);
+</script>
+
+<template>
+  <p v-if="result.data.length === 0" class="muted">No posts yet.</p>
+  <div class="grid">
+    <PostCard v-for="post in result.data" :key="post.id" :post="post" />
+  </div>
+  <nav v-if="pages > 1" class="pagination" aria-label="Pages">
+    <NuxtLink v-if="current > 1" :to="pageUrl(current - 1)">← Newer</NuxtLink>
+    <span class="muted">Page {{ current }} of {{ pages }}</span>
+    <NuxtLink v-if="current < pages" :to="pageUrl(current + 1)">Older →</NuxtLink>
+  </nav>
+</template>
+
+<style scoped>
+.pagination {
+  display: flex;
+  gap: 1.5rem;
+  justify-content: center;
+  margin: 3rem 0;
+}
+</style>