fix(newsroom): render social embeds as large-image cards

Wire the `/newsroom` listing and `/newsroom/<slug>` posts to emit
`twitter:card=summary_large_image`, set `og:image` to the post's hero
variant (and a branded graphic on the listing), and exclude the routes
from the layout-level SvelteSeo so the homepage defaults stop bleeding
into the embed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: DarthGigi

.changeset/large-newsroom-embeds.md

@@ -0,0 +1,5 @@
+---
+"skycrypt-frontend": patch
+---
+
+Render newsroom posts and the listing page as `summary_large_image` social embeds with the post's hero image (or a branded graphic on the listing), and stop the homepage SEO defaults from leaking into them.

src/routes/+layout.svelte

@@ -37,7 +37,7 @@
   const internalState = initInternalState();
   const position = writable<ToasterProps["position"]>("bottom-right");
   const theme = writable<ToasterProps["theme"]>("dark");
-  const noEmbedUrls = ["/stats/"];
+  const noEmbedUrls = ["/stats/", "/newsroom"];
   const packs = new PacksContext();
   const websiteJsonLd = {
     "@context": "https://schema.org",

src/routes/newsroom/+page.svelte

@@ -28,7 +28,24 @@
   afterNavigate(markVisiblePostsSeen);
 </script>
 
-<SvelteSeo title="Newsroom | SkyCrypt" description="Latest announcements and updates from the SkyCrypt team" canonical="https://sky.shiiyu.moe/newsroom" />
+<SvelteSeo
+  title="Newsroom | SkyCrypt"
+  description="Latest announcements and updates from the SkyCrypt team"
+  canonical="https://sky.shiiyu.moe/newsroom"
+  openGraph={{
+    type: "website",
+    title: "Newsroom | SkyCrypt",
+    description: "Latest announcements and updates from the SkyCrypt team",
+    site_name: "SkyCrypt",
+    images: [{ url: "https://sky.shiiyu.moe/img/newsroom.avif", width: 1200, height: 630, alt: "SkyCrypt Newsroom" }]
+  }}
+  twitter={{
+    card: "summary_large_image",
+    title: "Newsroom | SkyCrypt",
+    description: "Latest announcements and updates from the SkyCrypt team",
+    image: "https://sky.shiiyu.moe/img/newsroom.avif",
+    imageAlt: "SkyCrypt Newsroom"
+  }} />
 
 <main class="@container mx-auto flex max-w-272 flex-col gap-6 pt-5 pr-[max(1.25rem,env(safe-area-inset-right))] pb-[max(1.25rem,env(safe-area-inset-bottom))] pl-[max(1.25rem,env(safe-area-inset-left))]">
   <div class={cn("flex flex-col gap-4 rounded-lg p-5 @md:flex-row @md:items-center @md:justify-between", preferences.performanceMode ? "bg-background-grey" : "backdrop-blur-lg backdrop-brightness-150 backdrop-contrast-60 dark:backdrop-brightness-50 dark:backdrop-contrast-100")}>

src/routes/newsroom/[slug]/+page.svelte

@@ -48,7 +48,7 @@
   const heroHeight = $derived(post.heroImage?.sizes?.hero?.height ?? post.heroImage?.height ?? undefined);
   const heroAlt = $derived(post.heroImage?.alt ?? post.title);
 
-  const ogImages = $derived(post.heroImage?.url ? [{ url: post.heroImage.url, width: post.heroImage.width ?? undefined, height: post.heroImage.height ?? undefined, alt: post.heroImage.alt ?? post.title }] : []);
+  const ogImages = $derived(heroSrc ? [{ url: heroSrc, width: heroWidth, height: heroHeight, alt: heroAlt }] : []);
 
   const containerClass = $derived(cn("rounded-lg", preferences.performanceMode ? "bg-background-grey" : "backdrop-blur-lg backdrop-brightness-150 backdrop-contrast-60 dark:backdrop-brightness-50 dark:backdrop-contrast-100"));
 
@@ -67,11 +67,19 @@
     type: "article",
     title: post.title,
     description: post.excerpt ?? post.title,
+    site_name: "SkyCrypt",
     images: ogImages,
     article: {
       published_time: post.publishedAt ?? undefined,
       author: [displayName]
     }
+  }}
+  twitter={{
+    card: "summary_large_image",
+    title: post.title,
+    description: post.excerpt ?? post.title,
+    image: heroSrc ?? undefined,
+    imageAlt: heroAlt
   }} />
 
 <article class="mx-auto flex max-w-3xl flex-col gap-6 px-[max(1.25rem,env(safe-area-inset-right))] py-8">