feat(newsroom): add CMS-backed newsroom

Author: DarthGigi

.changeset/fuzzy-newsrooms-smile.md

@@ -0,0 +1,5 @@
+---
+"skycrypt-frontend": minor
+---
+
+Add the CMS-backed newsroom with post listing, article pages, previews, and sitemap entries.

.env.example

@@ -38,4 +38,10 @@ MC_ID_CLIENT_SECRET=""
 # Patreon API
 # https://www.patreon.com/portal/registration/register-clients
 PATREON_CLIENT_ID=""
-PATREON_CLIENT_SECRET=""
+PATREON_CLIENT_SECRET=""
+
+# Payload CMS
+PUBLIC_CMS_URL="https://cms.shiiyu.moe"
+SERVER_CMS_API_URL="https://cms.shiiyu.moe" # If you're using docker, set this to the name of the CMS container
+CMS_API_TOKEN="" # Users API Key generated in CMS admin (Users → API Key tab)
+CMS_PREVIEW_TOKEN="" # Must match CMS_PREVIEW_TOKEN in SkyCrypt-CMS .env

eslint.config.ts

@@ -58,5 +58,5 @@ export default defineConfig(
       "svelte/no-useless-mustaches": "off"
     }
   },
-  { ignores: ["**/.DS_Store", "**/node_modules/", "**/build/", "**/.svelte-kit/", "**/package/", "**/.env", "**/.env.*", "**/pnpm-lock.yaml", "**/package-lock.json", "**/yarn.lock", "**/static/", "**/cache/", "**/api/*-generated-zod.ts"] }
+  { ignores: ["**/.DS_Store", "**/node_modules/", "**/build/", "**/.svelte-kit/", "**/package/", "**/.env", "**/.env.*", "**/pnpm-lock.yaml", "**/package-lock.json", "**/yarn.lock", "**/static/", "**/cache/", "**/api/*-generated-zod.ts", "**/api/cms-generated.ts"] }
 );

orval.config.ts

@@ -29,5 +29,22 @@ export default defineConfig({
     hooks: {
       afterAllFilesWrite: "prettier --write ./src/lib/shared/api/orval-generated-zod.ts"
     }
+  },
+  cms: {
+    input: "http://localhost:3000/api/openapi.json",
+    output: {
+      target: "./src/lib/shared/api/cms-generated.ts",
+      client: "fetch",
+      tsconfig: "./tsconfig.json",
+      override: {
+        mutator: {
+          path: "./src/lib/shared/api/mutator/cms-instance.ts",
+          name: "cmsFetch"
+        }
+      }
+    },
+    hooks: {
+      afterAllFilesWrite: "prettier --write ./src/lib/shared/api/cms-generated.ts"
+    }
   }
 });

pnpm-lock.yaml

@@ -1,4 +1,5 @@
 import { building } from "$app/environment";
+import { env as envPublic } from "$env/dynamic/public";
 import { auth } from "$lib/server/auth";
 import { UserRole } from "$lib/shared/roles";
 import { runMigrations } from "$src/lib/server/db/migrate";
@@ -28,7 +29,18 @@ const headersHandler = (async ({ event, resolve }) => {
   response.headers.set("Permissions-Policy", "accelerometer=(), autoplay=(), camera=(), encrypted-media=(), fullscreen=(), gyroscope=(), magnetometer=(), microphone=(), midi=(), payment=(), picture-in-picture=(), publickey-credentials-get=(), sync-xhr=(), usb=(), xr-spatial-tracking=(), geolocation=()");
   response.headers.set("X-Content-Type-Options", "nosniff");
   response.headers.set("Strict-Transport-Security", "max-age=31536000; includeSubDomains; preload");
-  response.headers.set("X-Frame-Options", "DENY");
+
+  // Clickjacking protection. The newsroom draft preview must be embeddable in the Payload
+  // CMS admin's live-preview iframe, so allow only the CMS origin to frame that one route;
+  // everything else stays frame-locked.
+  const isNewsroomPreview = url.pathname.startsWith("/newsroom/") && url.searchParams.get("preview") === "1";
+  if (isNewsroomPreview) {
+    const cms = envPublic.PUBLIC_CMS_URL?.trim();
+    response.headers.append("Content-Security-Policy", `frame-ancestors 'self'${cms ? ` ${cms}` : ""}`);
+  } else {
+    response.headers.set("X-Frame-Options", "DENY");
+    response.headers.append("Content-Security-Policy", "frame-ancestors 'none'");
+  }
 
   // Cross-Origin policies
   // COEP intentionally unsafe-none: tightening would require all cross-origin

src/hooks.server.ts

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import ChevronLeft from "@lucide/svelte/icons/chevron-left";
+  import ChevronRight from "@lucide/svelte/icons/chevron-right";
+  import ChevronsLeft from "@lucide/svelte/icons/chevrons-left";
+  import ChevronsRight from "@lucide/svelte/icons/chevrons-right";
+  import { Button } from "bits-ui";
+
+  interface Props {
+    page: number;
+    totalPages: number;
+    baseHref: string;
+  }
+
+  let { page, totalPages, baseHref }: Props = $props();
+
+  const hrefFor = (n: number) => {
+    if (n <= 1) return baseHref;
+    const sep = baseHref.includes("?") ? "&" : "?";
+    return `${baseHref}${sep}page=${n}`;
+  };
+
+  const atFirst = $derived(page <= 1);
+  const atLast = $derived(page >= totalPages);
+
+  const btnClass = "flex size-9 items-center justify-center rounded-lg bg-background-grey text-text transition-all duration-150 ease-out hover:scale-105 hover:bg-background-lore aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-40 aria-disabled:hover:scale-100 aria-disabled:hover:bg-background-grey";
+</script>
+
+{#if totalPages > 1}
+  <nav aria-label="Pagination" class="flex items-center justify-end gap-1">
+    <span class="px-3 text-sm font-semibold text-text/80 tabular-nums">
+      Page <span class="font-bold text-text">{page}</span> of <span class="font-bold text-text">{totalPages}</span>
+    </span>
+    <Button.Root href={atFirst ? undefined : hrefFor(1)} aria-disabled={atFirst} aria-label="First page" data-sveltekit-preload-data="hover" class={btnClass}>
+      <ChevronsLeft class="size-4" />
+    </Button.Root>
+    <Button.Root href={atFirst ? undefined : hrefFor(page - 1)} aria-disabled={atFirst} aria-label="Previous page" data-sveltekit-preload-data="hover" class={btnClass}>
+      <ChevronLeft class="size-4" />
+    </Button.Root>
+    <Button.Root href={atLast ? undefined : hrefFor(page + 1)} aria-disabled={atLast} aria-label="Next page" data-sveltekit-preload-data="hover" class={btnClass}>
+      <ChevronRight class="size-4" />
+    </Button.Root>
+    <Button.Root href={atLast ? undefined : hrefFor(totalPages)} aria-disabled={atLast} aria-label="Last page" data-sveltekit-preload-data="hover" class={btnClass}>
+      <ChevronsRight class="size-4" />
+    </Button.Root>
+  </nav>
+{/if}

src/lib/components/newsroom/Pagination.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { getPreferences } from "$ctx";
+  import TypeBadge from "$lib/components/newsroom/TypeBadge.svelte";
+  import { clientLocale } from "$lib/hooks/client-locale.svelte";
+  import { cn } from "$lib/shared/utils";
+  import type { Author, AuthorView, Post } from "$types";
+  import ImageIcon from "@lucide/svelte/icons/image";
+  import Star from "@lucide/svelte/icons/star";
+  import { Avatar, Button } from "bits-ui";
+
+  /** `as` sets the title's heading level so the card fits its surrounding document outline. */
+  const { post, as = "h3" }: { post: Post; as?: "h2" | "h3" } = $props();
+
+  const preferences = getPreferences();
+
+  const dateFormatter = $derived(new Intl.DateTimeFormat(clientLocale.current, { year: "numeric", month: "long", day: "numeric" }));
+  const formatDate = (iso: string | null | undefined): string => {
+    if (!iso) return "";
+    try {
+      return dateFormatter.format(new Date(iso));
+    } catch {
+      return iso;
+    }
+  };
+
+  const authorOf = (author: Author | string): AuthorView => (typeof author === "string" ? { id: author, name: "Unknown" } : author);
+
+  const author = $derived(authorOf(post.author));
+  const displayName = $derived(author.displayName?.trim() || author.name);
+  const initials = $derived(displayName.slice(0, 2).toUpperCase());
+  const thumb = $derived(post.heroImage?.sizes?.card ?? post.heroImage?.sizes?.thumbnail ?? (post.heroImage ? { url: post.heroImage.url, width: post.heroImage.width, height: post.heroImage.height } : null));
+  const visibleTags = $derived(post.tags?.slice(0, 3) ?? []);
+  const overflowTags = $derived((post.tags?.length ?? 0) - visibleTags.length);
+</script>
+
+<Button.Root href="/newsroom/{post.slug}" data-sveltekit-preload-data="hover" class={cn("group relative flex h-full w-full min-w-0 flex-col overflow-hidden rounded-lg text-left", preferences.performanceMode ? "bg-background-grey" : "backdrop-blur-lg backdrop-brightness-150 backdrop-contrast-60 dark:backdrop-brightness-50 dark:backdrop-contrast-100")}>
+  <div class="relative aspect-video w-full overflow-hidden bg-background-lore">
+    {#if thumb && post.heroImage}
+      <Avatar.Root class="size-full transition-transform duration-300 ease-out group-hover:scale-105">
+        <Avatar.Image src={thumb.url} alt={post.heroImage.alt ?? ""} width={thumb.width} height={thumb.height} loading="lazy" class="size-full object-cover" />
+        <Avatar.Fallback class="flex size-full items-center justify-center bg-text/10">
+          <ImageIcon class="size-6" aria-label="Image failed to load" />
+        </Avatar.Fallback>
+      </Avatar.Root>
+    {/if}
+    <div class="pointer-events-none absolute inset-0 bg-linear-to-t from-background/70 via-background/10 to-transparent group-hover:opacity-0 transition-opacity duration-300 ease-out"></div>
+    {#if post.featured}
+      <Star class="size-6 absolute top-2 left-2 shrink-0 fill-gold text-gold" aria-label="Featured" />
+    {/if}
+  </div>
+  <div class="flex flex-1 flex-col gap-2.5 p-4">
+    <div class="flex items-center justify-between gap-4 text-sm">
+      <div class="flex min-w-0 items-center justify-center gap-2">
+        {#if author.mcUuid}
+          <Avatar.Root class="size-4 shrink-0">
+            <Avatar.Image loading="lazy" src="https://nmsr.nickac.dev/face/{author.mcUuid}" alt={displayName} class="size-full [image-rendering:pixelated]" />
+            <Avatar.Fallback class="flex size-full items-center justify-center bg-text/10 text-[0.5rem] font-semibold text-text/60 uppercase">{initials}</Avatar.Fallback>
+          </Avatar.Root>
+        {/if}
+        <span class="truncate text-text/60">{displayName}</span>
+      </div>
+      <time datetime={post.publishedAt} class="shrink-0 text-text/60">{formatDate(post.publishedAt)}</time>
+    </div>
+
+    <svelte:element this={as} class="text-xl leading-tight font-bold text-text transition-colors group-hover:text-hover">{post.title}</svelte:element>
+
+    {#if post.excerpt}
+      <p class="line-clamp-3 text-sm leading-relaxed text-text/80">{post.excerpt}</p>
+    {/if}
+
+    <div class="mt-auto flex flex-wrap items-center gap-1.5 pt-1">
+      <TypeBadge type={post.type} />
+      {#each visibleTags as tag (tag)}
+        <span class="rounded-full bg-text/10 px-2 py-0.5 text-[10px] font-medium text-text/70">#{tag}</span>
+      {/each}
+      {#if overflowTags > 0}
+        <span class="rounded-full bg-text/10 px-2 py-0.5 text-[10px] font-medium text-text/50">+{overflowTags}</span>
+      {/if}
+    </div>
+  </div>
+</Button.Root>

src/lib/components/newsroom/PostCard.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Block } from "$types";
+  import Image from "./lexical/elements/Image.svelte";
+  import RichText from "./lexical/elements/RichText.svelte";
+
+  const { body }: { body: Block[] } = $props();
+</script>
+
+{#each body as block, i (block.id ?? i)}
+  {#if block.blockType === "image"}
+    <Image {block} />
+  {:else if block.blockType === "richText"}
+    <RichText {block} />
+  {/if}
+{/each}

src/lib/components/newsroom/PostRenderer.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" module>
+  import type { PostType } from "$types";
+
+  const TYPE_STYLES: Record<PostType, string> = {
+    announcement: "bg-gold/15 text-gold",
+    news: "bg-link/15 text-link",
+    update: "bg-minecraft-a/15 text-minecraft-a",
+    changelog: "bg-minecraft-d/15 text-minecraft-d",
+    guide: "bg-minecraft-b/15 text-minecraft-b",
+    event: "bg-minecraft-c/15 text-minecraft-c"
+  };
+
+  export const POST_TYPE_LABELS: Record<PostType, string> = {
+    announcement: "Announcement",
+    news: "News",
+    update: "Update",
+    changelog: "Changelog",
+    guide: "Guide",
+    event: "Event"
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "$lib/shared/utils";
+
+  const { type, class: className }: { type: PostType; class?: string } = $props();
+</script>
+
+<span class={cn("inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold tracking-wide uppercase backdrop-blur-sm", TYPE_STYLES[type], className)}>
+  {POST_TYPE_LABELS[type]}
+</span>