refactor: ➕ add svead head component

spences10 · spences10 · commit bef38ebb3119 · 2022-05-16T21:19:35.000+01:00
diff --git a/package.json b/package.json
@@ -53,6 +53,7 @@
     "prettier": "2.6.2",
     "prettier-plugin-svelte": "2.7.0",
     "pretty-quick": "3.1.3",
+    "svead": "^0.0.3",
     "svelte": "3.48.0",
     "svelte-check": "2.7.1",
     "svelte-preprocess": "4.10.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/routes/index.md b/src/routes/index.md
@@ -11,18 +11,18 @@
     Vimeo,
     YouTube,
   } from 'sveltekit-embed'
+  import { Head } from 'svead'
+  import { page } from '$app/stores'
+
+  // Head variables 
+  let title = 'This is SvelteKit embed'
+  let description = 'Embed 3rd part media in your SvelteKit projects with SvelteKit Embed.'
+  let image = `https://og.tailgraph.com/og?fontFamily=Roboto&title=SvelteKit%20Embed&titleTailwind=text-gray-800+font-bold+text-6xl&text=Embed%203rd%20part%20media%20in%20your%20SvelteKit%20projects%20with%20SvelteKit%20Embed.&textTailwind=text-gray-700+text-2xl+mt-4&logoTailwind=h-8&bgTailwind=bg-white&footer=sveltekit-embed.vercel.app&footerTailwind=text-teal-600`
+  let website = 'https://sveltekit-embed.vercel.app'
+  let url = $page.url.toString()
 </script>
 
-<svelte:head>
-
-  <title>SvelteKit Embed</title>
-  <link rel="canonical" href="https://sveltekit-embed.vercel.app" />
-  <meta
-    name="description"
-    content="Embed 3rd part media in your SvelteKit projects with SvelteKit Embed."
-  />
-  <meta name="author" content="Scott Spence" />
-</svelte:head>
+<Head {title} {description} {image} {url} {website} />
 
 # SvelteKit Embed
 
