fix: seo metadata

Author: KodingDev

package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview",
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
     "format": "prettier --plugin-search-dir . --write . && eslint . --fix",
-    "tunnel": "cloudflared tunnel run --url http://localhost:5174",
+    "tunnel": "cloudflared tunnel run --url http://localhost:5173",
     "build:projects": "pnpm run -r --filter ./projects/* build"
   },
   "devDependencies": {

src/components/seo/OpenGraph.svelte

@@ -13,6 +13,7 @@
 <script lang="ts">
   export let siteTitle: string;
   export let pageTitle: string;
+  export let description: string;
   export let url: string;
 
   export let image: { url: string; alt: string } | undefined = undefined;
@@ -26,6 +27,7 @@
   <meta property="og:locale" content={ogLanguage} />
   <meta property="og:title" content={pageTitle} />
   <meta property="og:url" content={url} />
+  <meta property="og:description" content={description} />
 
   <meta property="og:type" content="website" />
 

src/components/seo/Seo.svelte

@@ -31,11 +31,12 @@
   };
 
   const url = `${website.siteUrl}${slug || ''}`;
-  const pageTitle = `${title || 'Commission'} | ${website.siteTitle}`;
+  const pageTitle = `${title || 'Site'} | ${website.siteTitle}`;
 
   const openGraphProps = {
     url,
     pageTitle,
+    description,
 
     image: ogImage,
     squareImage: ogSquareImage,

src/lib/data/commissions/livillon/artist.ts

@@ -11,8 +11,8 @@ export default {
 
   commissions: [
     {
-      slug: 'commission-1',
-      title: 'Commission 1',
+      slug: 'emotes',
+      title: 'Emotes',
       description: 'My set of emotes that I commissioned Livillon for.',
       images: [Commission1Set1, Commission1Set2],
       links: [

src/routes/art/[artist]/[slug]/+page.svelte

@@ -8,7 +8,11 @@
   export let data: PageData;
 </script>
 
-<Seo title={data.commission.title} description={data.commission.description || ''} twitterImage={{ url: data.commission.images[0], alt: 'Illustration' }} />
+<Seo
+  title={data.commission.title}
+  description={data.commission.description || ''}
+  twitterImage={{ url: data.commission.images[0].fallback.src, alt: 'Illustration' }}
+/>
 
 <div class="layout-container pt-40 pb-36">
   <div class="flex flex-col gap-6">