Move SEO og tags to layout

web/src/lib/components/Navbar.svelte

@@ -28,7 +28,7 @@
 
   {#snippet trail()}
     <a
-      class="btn-icon hover:variant-soft-surface hover:text-on-primary-token !mx-0"
+      class="btn-icon !mx-0 hover:variant-soft-surface hover:text-on-primary-token"
       href="https://github.com/tuckergordon/mmish"
       target="_blank"
       rel="noreferrer">

web/src/routes/+layout.server.ts

@@ -0,0 +1,11 @@
+export async function load() {
+  const meta = {
+    title: "'mmish",
+    site_name: "'mmish",
+    image: '/images/mmish.png',
+    type: 'website',
+    description:
+      "Your home for league-specific content and stats, created by your 'mmish and friends.",
+  };
+  return { meta };
+}

web/src/routes/+layout.svelte

@@ -6,9 +6,8 @@
 
   import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
   import { storePopup } from '@skeletonlabs/skeleton';
-  import type { Snippet } from 'svelte';
 
-  let { children }: { children?: Snippet } = $props();
+  let { children, data } = $props();
   storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
   // Workaround to ensure page goes back to the top when navigating
@@ -18,6 +17,15 @@
   });
 </script>
 
+<svelte:head>
+  <title>{data.meta.title}</title>
+  <meta property="og:type" content="article" />
+  <meta property="og:title" content={data.meta.title} />
+  <meta property="og:image" content={data.meta.image} />
+  <meta property="og:description" content={data.meta.description} />
+  <meta property="og:site_name" content={data.meta.site_name} />
+</svelte:head>
+
 <div class="grid grid-rows-[auto_1fr_auto]">
   <header class="sticky top-0 z-10"><Navbar /></header>
   {@render children?.()}

web/src/routes/[leagueId]/posts/[year]/[slug]/+page.svelte

@@ -8,14 +8,6 @@
   let { data } = $props();
 </script>
 
-<!-- SEO -->
-<svelte:head>
-  <title>{data.meta.title}</title>
-  <meta property="og:type" content="article" />
-  <meta property="og:title" content={data.meta.title} />
-  <meta property="og:image" content={data.meta.image} />
-</svelte:head>
-
 <article class="prose mx-auto mb-8 dark:prose-invert">
   <hgroup>
     <div class="flex items-center justify-between">

web/src/routes/api/recaps/+server.ts

@@ -0,0 +1,21 @@
+import { json, error } from '@sveltejs/kit';
+import { createClient } from 'contentful';
+
+export async function GET() {
+  if (!import.meta.env.VITE_CONTENTFUL_CLIENT_ACCESS_TOKEN) {
+    throw error(500, 'Missing VITE_CONTENTFUL_CLIENT_ACCESS_TOKEN ');
+  }
+
+  const client = createClient({
+    // This is the space ID. A space is like a project folder in Contentful terms
+    space: import.meta.env.VITE_CONTENTFUL_SPACE,
+    // This is the access token for this space. Normally you get both ID and the token in the Contentful web app
+    accessToken: import.meta.env.VITE_CONTENTFUL_CLIENT_ACCESS_TOKEN,
+  });
+  const data = await client.getEntries({ content_type: 'recap' }).catch((e) => {
+    console.error(e);
+    throw error(500, 'Problem retrieving blog posts');
+  });
+
+  return json(data);
+}