From 26d4eee1b848c604fe5c46dbf12302ac15cb0849 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Sun, 29 Jan 2023 16:04:05 -0800
Subject: [PATCH] Adding SEO component and including in all pages.

---
 src/lib/components/SEO.svelte     | 51 +++++++++++++++++++++++++++++++
 src/routes/+layout.svelte         |  3 ++
 src/routes/+page.svelte           |  5 ++-
 src/routes/about/+page.svelte     |  5 +++
 src/routes/articles/+page.svelte  | 10 ++++++
 src/routes/portfolio/+page.svelte |  5 +++
 src/routes/privacy/+page.svelte   |  5 +++
 src/routes/uses/+page.svelte      |  5 +++
 8 files changed, 86 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/SEO.svelte

diff --git a/src/lib/components/SEO.svelte b/src/lib/components/SEO.svelte
new file mode 100644
index 0000000..0c9e83f
--- /dev/null
+++ b/src/lib/components/SEO.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { PUBLIC_SITE_URL } from "$env/static/public";
+	const siteUrl = PUBLIC_SITE_URL || 'https://bradleyshellnut.com';
+
+  const defaultMetadata = {
+    defaultTitle: 'Bradley Shellnut',
+    defaultDescription: "My name is Bradley Shellnut and I'm a Full Stack Software Engineer.",
+    defaultImage: '/b_shell_nut_favicon.png',
+    siteUrl,
+  };
+
+	export let title = defaultMetadata.defaultTitle;
+	export let description = defaultMetadata.defaultDescription;
+	export let image = defaultMetadata.defaultImage;
+	export let location: string = '';
+
+  const seo = {
+    title,
+    description,
+    image: `${siteUrl}${image}`,
+    url: `${siteUrl}${location || ``}`,
+  };
+</script>
+
+<svelte:head>
+	<title>{`${seo.title} - ${defaultMetadata.defaultTitle}`}</title>
+	<link rel="icon" type="image/gif" href="/b_shell_nut_favicon.gif" />
+	<meta name="description" content={seo.description} />
+	<meta name="og:type" content="website" />
+	<meta name="og:title" content={seo.title} />
+	{#if seo.url}
+		<meta name="og:url" content={seo.url} />
+	{/if}
+	<meta name="og:description" content={seo.description} />
+	<meta name="og:site_name" content={seo.title} />
+	<meta name="og:image" content={seo.image || '/b_shell_nut_favicon.png'} />
+	<meta name="og:locale" content="en_US" />
+	<meta name="twitter:card" content="summary" />
+	<!-- <meta name="twitter:site" content="@" /> -->
+	<!-- <meta name="twitter:creator" content="@" /> -->
+	{#if seo.url}
+		<meta name="twitter:url" content={seo.url} />
+	{/if}
+	<meta name="twitter:title" content={seo.title} />
+	<meta name="twitter:description" content={seo.description} />
+	<meta
+		name="twitter:image"
+		content={seo.image || '/b_shell_nut_favicon.png'}
+	/>
+	<meta name="theme-color" content="#272727" />
+</svelte:head>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index abab947..7c1b69c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,8 +3,11 @@
 	import Header from '$lib/components/header/index.svelte';
 	import Footer from '$lib/components/footer/index.svelte';
 	import '$root/styles/styles.pcss';
+	import SEO from '$root/lib/components/SEO.svelte';
 </script>
 
+<SEO />
+
 <div class="wrapper">
 	<Header />
 	<main>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b063ce4..5dc0814 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { PageData } from "./$types";
+	import SEO from '$lib/components/SEO.svelte';
 
 	export let data: PageData;
   const userNames = {
@@ -9,9 +10,7 @@
   };
 </script>
 
-<svelte:head>
-	<title>Bored Game | Home</title>
-</svelte:head>
+<SEO title="Home" />
 
 <div class="home">
 	<div>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index e69de29..a1db8eb 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import SEO from "$root/lib/components/SEO.svelte";
+</script>
+
+<SEO title="About" />
\ No newline at end of file
diff --git a/src/routes/articles/+page.svelte b/src/routes/articles/+page.svelte
index e69de29..1e36813 100644
--- a/src/routes/articles/+page.svelte
+++ b/src/routes/articles/+page.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { PageData } from "./$types";
+	import SEO from "$root/lib/components/SEO.svelte";
+
+	export let data: PageData;
+
+	const currentPage: number = 1;
+</script>
+
+<SEO title={`Tech Articles - Page ${currentPage}`} />
diff --git a/src/routes/portfolio/+page.svelte b/src/routes/portfolio/+page.svelte
index e69de29..8acaa50 100644
--- a/src/routes/portfolio/+page.svelte
+++ b/src/routes/portfolio/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import SEO from "$root/lib/components/SEO.svelte";
+</script>
+
+<SEO title="Portfolio" />
diff --git a/src/routes/privacy/+page.svelte b/src/routes/privacy/+page.svelte
index e69de29..7c33f3a 100644
--- a/src/routes/privacy/+page.svelte
+++ b/src/routes/privacy/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import SEO from "$root/lib/components/SEO.svelte";
+</script>
+
+<SEO title="Privacy Blog" />
\ No newline at end of file
diff --git a/src/routes/uses/+page.svelte b/src/routes/uses/+page.svelte
index e69de29..a6867d4 100644
--- a/src/routes/uses/+page.svelte
+++ b/src/routes/uses/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import SEO from "$root/lib/components/SEO.svelte";
+</script>
+
+<SEO title="Uses" />
\ No newline at end of file