Adding SEO tag to all pages and fixing up privacy page to not have React remnants.

src/routes/about/+page.svelte

@@ -9,6 +9,7 @@
 	import Remix from '@iconify-icons/simple-icons/remix';
 	import Svelte from '@iconify-icons/simple-icons/svelte';
 	import TypeScript from '@iconify-icons/simple-icons/typescript';
+	import SEO from "$lib/components/SEO.svelte";
 	import space_needle from '$lib/assets/images/space-needle.png?run';
 	import tortie_derp from '$lib/assets/images/tortie_derp.jpg?run';
 	import orange_derp from '$lib/assets/images/orange_derp.jpg?run';
@@ -16,9 +17,7 @@
 	import ExternalLink from '$root/lib/components/ExternalLink.svelte';
 </script>
 
-<svelte:head>
+<SEO title="About" />
-	<title>About | Bradley Shellnut</title>
-</svelte:head>
 
 <div class="about">
 	<div>

src/routes/articles/[page]/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
+	import SEO from "$lib/components/SEO.svelte";
 	import Pagination from "$lib/components/pagination/index.svelte";
-	import SEO from "$root/lib/components/SEO.svelte";
 	import type { Article } from "$root/lib/types/article";
 	import type { PageData } from "./$types";
 
@@ -14,10 +14,7 @@
 	$: seoTitle = `Tech Articles - Page ${currentPage} | Bradley Shellnut`;
 </script>
 
-<svelte:head>
+<SEO title={seoTitle} />
-	<title>{seoTitle}</title>
-	<meta name="og:site_name" content={seoTitle} />
-</svelte:head>
 
 <div class="pageStyles">
 	<h1 style="margin-bottom: 2rem">Favorite Tech Articles</h1>

src/routes/portfolio/+page.svelte

@@ -8,6 +8,7 @@
     TabPanels,
   } from "@rgossiaux/svelte-headlessui";
 	import GitHub from '@iconify-icons/simple-icons/github';
+	import SEO from '$lib/components/SEO.svelte';
 	import Portfolio from '$lib/components/Portfolio.svelte';
 	import personalSite from "$lib/assets/images/Bradley_Shellnut_New_Site.png?run";
   import weddingWebsite from "$lib/assets/images/Wedding_Website.png?run";
@@ -22,9 +23,7 @@
 	export let data: PageData;
 </script>
 
-<svelte:head>
+<SEO title="Portfolio" />
-	<title>Portfolio | Bradley Shellnut</title>
-</svelte:head>
 
 <h1>Portfolio!</h1>
 <TabGroup>

src/routes/privacy/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import SEO from "$root/lib/components/SEO.svelte";
+	import ExternalLink from "$root/lib/components/ExternalLink.svelte";
+import SEO from "$root/lib/components/SEO.svelte";
 </script>
 
 <SEO title="Privacy Blog" />
@@ -15,30 +16,11 @@
 		they are willing to give to any business/entity.
 	</p>
 	<p>
-		For the sake of transparency I am using{' '}
+		For the sake of transparency I am using <ExternalLink ariaLabel="Umami Analytics FAQ" href="https://umami.is/docs/faq" showIcon>Umami Analytics</ExternalLink> to anonymously track visits to my site. You can completely block this if you want by either using an AdBlocker like
-		<a
+		<ExternalLink ariaLabel="uBlock Origin" href="https://ublockorigin.com/" showIcon>uBlock Origin</ExternalLink> or setting your browser to send "Do Not Track" requests as I honor them.
-			target="_blank"
-			aria-label="Umami Analytics FAQ"
-			href="https://umami.is/docs/faq"
-			rel="noreferrer"
-		>
-			Umami Analytics
-		</a>{' '}
-		to anonymously track visits to my site. You can completely block this
-		if you want by either using an AdBlocker like{' '}
-		<a
-			target="_blank"
-			aria-label="uBlock Origin"
-			href="https://ublockorigin.com/"
-			rel="noreferrer"
-		>
-			uBlock Origin
-		</a>{' '}
-		and/or set your browser to send "Do Not Track" requests as I honor
-		them.
 	</p>
 </div>
-<div style="margin-top: 2.5rem;">
+<div>
 	<h2>Useful Resources</h2>
 	<p>
 		Here are a few sites/lists of privacy oriented software for you to
@@ -46,34 +28,13 @@
 	</p>
 	<ul>
 		<li>
-			<a
+			<ExternalLink ariaLabel="Privacy Respecting Software" href="https://github.com/Lissy93/personal-security-checklist/blob/master/5_Privacy_Respecting_Software.md" showIcon>Privacy Respecting Software</ExternalLink>
-				target="_blank"
-				aria-label="Privacy Respecting Software"
-				href="https://github.com/Lissy93/personal-security-checklist/blob/master/5_Privacy_Respecting_Software.md"
-				rel="noreferrer"
-			>
-				Privacy Respecting Software
-			</a>
 		</li>
 		<li>
-			<a
+			<ExternalLink ariaLabel="Privacy Guides" href="https://www.privacyguides.org/" showIcon>Privacy Guides</ExternalLink>
-				target="_blank"
-				aria-label="Privacy Guides"
-				href="https://www.privacyguides.org/"
-				rel="noreferrer"
-			>
-				Privacy Guides
-			</a>
 		</li>
 		<li>
-			<a
+			<ExternalLink ariaLabel="Ethical Alternatives" href="https://ethical.net/resources/" showIcon>Ethical Alternatives</ExternalLink>
-				target="_blank"
-				aria-label="Ethical Alternatives"
-				href="https://ethical.net/resources/"
-				rel="noreferrer"
-			>
-				Ethical Alternatives
-			</a>
 		</li>
 	</ul>
 </div>
@@ -81,59 +42,20 @@
 	<h3>Privacy Centric Paid Services I use:</h3>
 	<ul>
 		<li>
-			Article Saving:{' '}
+			Article Saving: <ExternalLink ariaLabel="Wallabag Article Saver" href="https://wallabag.com/" showIcon>Wallabag</ExternalLink>
-			<a
-				target="_blank"
-				aria-label="Wallabag Article Saver"
-				href="https://github.com/wallabag/wallabag"
-				rel="noreferrer"
-			>
-				Wallabag
-			</a>
 		</li>
 		<li>
-			Anonymous Email Forwarding:{' '}
+			Anonymous Email Forwarding:
-			<a
+			<ExternalLink ariaLabel="AnonAddy Email Forwarding" href="https://anonaddy.com/" showIcon>AnonAddy</ExternalLink>
-				target="_blank"
-				aria-label="AnonAddy Email Forwarding"
-				href="https://anonaddy.com/"
-				rel="noreferrer"
-			>
-				AnonAddy
-			</a>
 		</li>
 		<li>
-			Email:{' '}
+			Email: <ExternalLink ariaLabel="ProtonMail" href="https://protonmail.com/" showIcon>ProtonMail</ExternalLink>
-			<a
-				target="_blank"
-				aria-label="ProtonMail"
-				href="https://protonmail.com"
-				rel="noreferrer"
-			>
-				ProtonMail
-			</a>
 		</li>
 		<li>
-			Notes:{' '}
+			Notes: <ExternalLink ariaLabel="Joplin" href="https://joplinapp.org/" showIcon>Joplin Notes</ExternalLink>
-			<a
-				target="_blank"
-				aria-label="Standard Notes"
-				href="https://standardnotes.org/"
-				rel="noreferrer"
-			>
-				Standard Notes
-			</a>
 		</li>
 		<li>
-			VPN:{' '}
+			VPN: <ExternalLink ariaLabel="Mullvad VPN" href="https://mullvad.net/" showIcon>Mullvad VPN</ExternalLink>
-			<a
-				target="_blank"
-				aria-label="Mullvad VPN"
-				href="https://mullvad.net/en/"
-				rel="noreferrer"
-			>
-				Mullvad VPN
-			</a>
 		</li>
 	</ul>
 </div>
@@ -141,48 +63,10 @@
 	<h3>NAS Servers for Self Hosting:</h3>
 	<ul>
 		<li>
-			<a
+			<ExternalLink ariaLabel="Synology NAS" href="https://synology.com/" showIcon>Synology NAS</ExternalLink>: An easy, not cheap, local solution for Google Services like Drive, Photos, Calendar, other services using Docker, etc. (Yes I should use <ExternalLink ariaLabel="NextCloud Local Hosting Service" href="https://nextcloud.com/" showIcon>NextCloud Local Hosting Service</ExternalLink>...maybe eventually)
-				target="_blank"
-				aria-label="Synology NAS"
-				href="https://synology.com/"
-				rel="noreferrer"
-			>
-				Synology
-			</a>
-			: An easy, not cheap, local solution for Google Services like Drive,
-			Drive, Photos, Calendar, other services using Docker, etc. (Yes I
-			should use{' '}
-			<a
-				target="_blank"
-				aria-label="NextCloud Local Hosting Service"
-				href="https://nextcloud.com/"
-				rel="noreferrer"
-			>
-				NextCloud
-			</a>
-			...maybe eventually)
 		</li>
 		<li>
-			Mac Mini: Used as a{' '}
+			Mac Mini: Used as a <ExternalLink ariaLabel="Plex" href="https://www.plex.tv/" showIcon>Plex Server</ExternalLink> for my Movies/TV/Music until I build a dedicated NAS and maybe switch to <ExternalLink ariaLabel="JellyFin" href="https://jellyfin.org/" showIcon>JellyFin</ExternalLink> soon.
-			<a
-				target="_blank"
-				aria-label="Plex"
-				href="https://www.plex.tv/"
-				rel="noreferrer"
-			>
-				Plex Server
-			</a>{' '}
-			for my Movies/TV/Music until I build a dedicated NAS and maybe
-			switch to{' '}
-			<a
-				target="_blank"
-				aria-label="JellyFin"
-				href="https://jellyfin.org/"
-				rel="noreferrer"
-			>
-				JellyFin
-			</a>{' '}
-			once it is more mature.
 		</li>
 	</ul>
 </div>
@@ -190,26 +74,7 @@
 	<h3>Software Deployed:</h3>
 	<ul>
 		<li>
-			<a
+			<ExternalLink ariaLabel="Syncthing File Synchronization" href="https://github.com/syncthing/syncthing" showIcon>Syncthing</ExternalLink>: An open source file synchronization program.
-				target="_blank"
-				aria-label="Traefik Cloud Proxy"
-				href="https://github.com/traefik/traefik"
-				rel="noreferrer"
-			>
-				Traefik
-			</a>
-			: A HTTP reverse proxy and load balancer.
-		</li>
-		<li>
-			<a
-				target="_blank"
-				aria-label="Syncthing File Synchronization"
-				href="https://github.com/syncthing/syncthing"
-				rel="noreferrer"
-			>
-				Syncthing
-			</a>
-			: An open source file synchronization program.
 		</li>
 	</ul>
 </div>
@@ -218,4 +83,11 @@
 	div {
 		margin-bottom: 2rem;
 	}
+	p {
+		margin-bottom: 1rem;
+	}
+	ul {
+		list-style-type: square;
+		padding-inline-start: 4rem;
+	}
 </style>

src/routes/uses/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Img from '@zerodevx/svelte-img';
+	import SEO from "$lib/components/SEO.svelte";
 	import desktop from '$lib/assets/images/Desktop_so_clean.jpg?run';
 	import HardwareAccessories from '$lib/content/uses/hardware-accessories.md';
 	import Development from '$lib/content/uses/development.md';
@@ -7,9 +8,7 @@
 	import ExternalLink from '$root/lib/components/ExternalLink.svelte';
 </script>
 
-<svelte:head>
+<SEO title="Uses" />
-	<title>Uses | Bradley Shellnut</title>
-</svelte:head>
 
 <div class="uses">
 	<div>