From 071d5ddad6ff87810728517c07155061d2b1dd65 Mon Sep 17 00:00:00 2001
From: Vincent Morrill <vmorrilll@gmail.com>
Date: Sat, 21 Sep 2024 10:18:14 -0500
Subject: [PATCH] feat: update meta tags in layout and mod page

layout page now uses dynamic handling of <meta> tags and supplies default metadata.

refs #177, #174, #172
---
 src/routes/+layout.svelte       | 20 +++++++++++++++++++-
 src/routes/mod/[modId]/+page.ts |  7 ++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1f20ee93a..f3feeda64 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { page } from '$app/stores'; // Importing this enables dynamic handling of <meta> tags
+
   import LoginDialog from '$lib/components/auth/LoginDialog.svelte';
   import { setContextClient } from '@urql/svelte';
   import { onMount } from 'svelte';
@@ -16,7 +18,13 @@
   import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
 
   export let data: LayoutData;
-
+  // Using the $page store, this script supplies default metadeta
+  const defaultMeta = {
+    title: 'Satisfactory Mod Repository',
+    description: 'Your source for mods!',
+    image: '/assets/favicon.ico',
+    url: $page.url.origin + $page.url.pathname
+  };
   const { client, tolgee } = data;
 
   initializeStores();
@@ -83,6 +91,7 @@
 </script>
 
 <svelte:head>
+  <!-- STATIC head elements that don't change across page nav -->
   <link rel="icon" type="image/x-icon" href="{base}/assets/favicon.ico" />
   <link rel="apple-touch-icon" sizes="180x180" href="{base}/assets/apple-touch-icon.png?v=69P26YMB35" />
   <link rel="icon" type="image/png" sizes="32x32" href="{base}/assets/favicon-32x32.png?v=69P26YMB35" />
@@ -96,6 +105,15 @@
 
   <link rel="preload" href="{base}/assets/fonts/flow-rounded.woff" as="font" type="font/woff" />
 
+  <!-- Ensure the meta tags are only rendered if no duplication occurs -->
+  <!-- Title and meta tags dynamically controlled by page data or default values -->
+  <title>{$page.data.meta?.title || defaultMeta.title} - SMR</title>
+  <meta name="description" content={$page.data.meta?.description || defaultMeta.description} />
+  <meta property="og:title" content="{$page.data.meta?.title || defaultMeta.title} - SMR" />
+  <meta property="og:description" content={$page.data.meta?.description || defaultMeta.description} />
+  <meta property="og:image" content={$page.data.meta?.image || defaultMeta.image} />
+  <meta property="og:url" content={$page.data.meta?.url || defaultMeta.url} />
+
   {#if gTag}
     <script async src="https://www.googletagmanager.com/gtag/js?id={gTag}"></script>
     <script>
diff --git a/src/routes/mod/[modId]/+page.ts b/src/routes/mod/[modId]/+page.ts
index 8ac7651dc..83706e4f4 100644
--- a/src/routes/mod/[modId]/+page.ts
+++ b/src/routes/mod/[modId]/+page.ts
@@ -13,5 +13,10 @@ export const load: PageLoad = async ({ params, parent }) => ({
       client: (await parent()).client,
       variables: { mod: params.modId }
     })
-  }))
+  })),
+  meta: {
+    title: 'Mods',
+    description: 'Mods available from the Satisfactory Mod Repository',
+    image: '/assets/favicon.ico'
+  }
 });