Add cache headers, real 404s, social meta, JSON-LD, robots and sitemap

src/lib/components/DiscussionsFeed.svelte

@@ -11,6 +11,10 @@
     type Author,
   } from "$lib/components/ThreadItem.svelte";
   import SortToggle from "$lib/components/SortToggle.svelte";
+  import Meta from "$lib/components/Meta.svelte";
+  import { groupStore } from "$lib/group.svelte";
+  import { groupsStore } from "$lib/groups.svelte";
+  import { MODE } from "$lib/config";
   import type { NostrUser } from "@nostr/gadgets/metadata";
   import { auth, openLogin } from "$lib/auth.svelte";
   import { openDraft } from "$lib/draft.svelte";
@@ -45,6 +49,12 @@
     if (urlSort) sortPref.value = urlSort;
   });
 
+  const about = $derived(
+    MODE === "full"
+      ? (groupsStore.list.find((g) => g.id === groupId)?.about ?? "")
+      : (groupStore.data?.about ?? ""),
+  );
+
   const flags = $derived(getGroupFlags(groupId));
   const member = $derived(membershipOf(groupId));
 
@@ -123,9 +133,7 @@
   );
 </script>
 
-<svelte:head>
-  <title>{title}</title>
-</svelte:head>
+<Meta {title} description={about} />
 
 <div class="mx-auto max-w-6xl">
   <div class="flex flex-wrap items-center justify-between gap-2 py-2">

src/lib/components/Meta.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { page } from "$app/state";
+  import { TITLE } from "$lib/config";
+  import { groupStore } from "$lib/group.svelte";
+  import { GROUP_ID, MODE } from "$lib/config";
+
+  type Props = {
+    title: string;
+    description?: string;
+    type?: "website" | "article";
+    image?: string;
+    jsonLd?: Record<string, unknown>;
+  };
+
+  let {
+    title,
+    description = "",
+    type = "website",
+    image,
+    jsonLd,
+  }: Props = $props();
+
+  // Escape "<" so the JSON can never close the script tag early.
+  const ld = $derived(
+    jsonLd ? JSON.stringify(jsonLd).replace(/</g, "\\u003c") : "",
+  );
+
+  const siteName = $derived(
+    TITLE || (MODE === "simple" ? (groupStore.data?.name ?? GROUP_ID) : ""),
+  );
+  const canonical = $derived(page.url.origin + page.url.pathname);
+</script>
+
+<svelte:head>
+  <title>{title}</title>
+  <link rel="canonical" href={canonical} />
+  {#if description}
+    <meta name="description" content={description} />
+    <meta property="og:description" content={description} />
+  {/if}
+  <meta property="og:title" content={title} />
+  <meta property="og:type" content={type} />
+  <meta property="og:url" content={canonical} />
+  {#if siteName}
+    <meta property="og:site_name" content={siteName} />
+  {/if}
+  {#if image}
+    <meta property="og:image" content={image} />
+  {/if}
+  <meta
+    name="twitter:card"
+    content={image ? "summary_large_image" : "summary"}
+  />
+  {#if ld}
+    {@html `<script type="application/ld+json">${ld}</script>`}
+  {/if}
+</svelte:head>