add social preview image and metadata

src/lib/types.ts

@@ -8,6 +8,7 @@ export type Post = {
 	categories: Categories[]
 	published: boolean
     readTime: number
+    socialPreview?: string
 }
 
 export type WorkEntry = {

src/posts/2024-03-07_apple-vision-pro.md

@@ -8,6 +8,7 @@ categories:
   - XR
   - Apple
 published: true
+socialPreview: /apple-vision-pro/apple-vision-pro.webp
 ---
 
 ![Apple Vision Pro](/apple-vision-pro/apple-vision-pro.webp)

src/routes/+layout.svelte

@@ -7,6 +7,10 @@
 	export let data;
 </script>
 
+<svelte:head>
+	<meta property="og:url" content={`https://candrewlee14.github.io${data.pathname}`} />
+</svelte:head>
+
 <div class="flex flex-row min-w-screen h-2">
 	{#each ['bg-red-400 dark:bg-red-600', 'bg-yellow-400 dark:bg-yellow-600', 'bg-green-400 dark:bg-green-600', 'bg-violet-400 dark:bg-violet-600'] as color}
 		<div class={`flex-grow ${color}`}>&nbsp;</div>

src/routes/+page.svelte

@@ -4,11 +4,18 @@
 </script>
 
 <svelte:head>
+	<title>About Me - Andrew Lee</title>
 	<meta
 		name="description"
-		content="Hello, I'm Andrew Lee! I'm a software developer and student at the University of Utah. Learn more about me!"
+		content="Hello, I'm Andrew Lee! Learn more about me here."
 	/>
-	<title>About Me - Andrew Lee</title>
+	<meta property="og:title" content="About Me - Andrew Lee" />
+	<meta property="og:description" content="Hello, I'm Andrew Lee! Learn more about me here." />
+	<meta property="og:image" content="https://candrewlee14.github.io/candrewlee14-social-preview.png" />
+	<meta property="og:type" content="profile" />
+	<meta property="og:profile:first_name" content="Andrew" />
+	<meta property="og:profile:last_name" content="Lee" />
+	<meta property="og:profile:username" content="candrewlee14" />
 </svelte:head>
 
 <div>

src/routes/blog/+page.svelte

@@ -4,7 +4,7 @@
 	import utc from 'dayjs/plugin/utc';
 	import timezone from 'dayjs/plugin/timezone'; // dependent on utc plugin
 	import { andrewTz } from '$lib/posts';
-	
+
 	dayjs.extend(utc);
 	dayjs.extend(timezone);
 
@@ -15,8 +15,12 @@
 	<title>Blog - Andrew Lee</title>
 	<meta
 		name="description"
-		content="Hello, I'm Andrew Lee! I'm a software developer and student at the University of Utah. Check out my blog!"
+		content="Hello, I'm Andrew Lee! Check out my blog!"
 	/>
+	<meta property="og:title" content="Blog - Andrew Lee" />
+	<meta property="og:description" content="Hello, I'm Andrew Lee! Check out my blog!" />
+	<meta property="og:image" content="https://candrewlee14.github.io/candrewlee14-social-preview.png" />
+	<meta property="og:type" content="website" />
 </svelte:head>
 
 <div class="w-full h-full flex justify-center pb-6">

src/routes/blog/[slug]/+page.svelte

@@ -2,17 +2,24 @@
 	import dayjs from 'dayjs';
 	import utc from 'dayjs/plugin/utc';
 	import timezone from 'dayjs/plugin/timezone'; // dependent on utc plugin
+	import { andrewTz } from '$lib/posts';
 	dayjs.extend(utc);
 	dayjs.extend(timezone);
 
-	const andrewTz = 'America/Denver';
-
 	export let data;
 </script>
 
 <svelte:head>
 	<title>{data.meta.title} - Andrew Lee</title>
-	<meta name="description" content={data.meta.description} />
+	<meta property="og:title" content={data.meta.title} />
+	<meta property="og:description" content={`${data.meta.description} - Written by Andrew Lee`}/>
+	<meta
+		property="og:image"
+		content={data.meta.socialPreview
+			? `https://candrewlee14.github.io${data.meta.socialPreview}`
+			: 'https://candrewlee14.github.io/candrewlee14-social-preview.png'}
+	/>
+	<meta property="og:type" content="website" />
 </svelte:head>
 
 <div class="flex flex-col items-center">

src/routes/work/+page.svelte

@@ -124,11 +124,18 @@
 </script>
 
 <svelte:head>
+	<title>Work - Andrew Lee</title>
 	<meta
 		name="description"
-		content="Hello, I'm Andrew Lee! I'm a software developer and student at the University of Utah. View my work experience here."
+		content="Hello, I'm Andrew Lee! View my work experience here."
 	/>
-	<title>Work - Andrew Lee</title>
+	<meta property="og:title" content="Work - Andrew Lee" />
+	<meta
+		property="og:description"
+		content="Hello, I'm Andrew Lee! View my work experience here."
+	/>
+	<meta name="og:image" content="https://candrewlee14.github.io/candrewlee14-social-preview.png" />
+	<meta property="og:type" content="website" />
 </svelte:head>
 
 <div class="flex flex-col items-center -ml-2">