sunrise-sunset: add metatags (including preview image)

src/routes/sunrise-sunset/+page.svelte

@@ -7,6 +7,7 @@
   import { writable } from "svelte/store";
   import Navbar from "$lib/components/Navbar.svelte";
 
+  import MetaTags from "./MetaTags.svelte";
   import type { ISunriseSunsetGuessingHistory } from "./ISunriseSunsetGuessingHistory.js";
 
   let hasGuessingHistoryBeenLoaded = false;
@@ -93,6 +94,8 @@
   });
 </script>
 
+<MetaTags />
+
 <Navbar />
 
 <div class="page">

src/routes/sunrise-sunset/MetaTags.svelte

@@ -0,0 +1,38 @@
+<script>
+  const title = "Sunrise, Sunset?";
+  const description =
+    "Is it clearly a sunrise? Prove it in this obviously simple daily challenge.";
+  const canonicalUrl = "https://thomaswilson.xyz/sunrise-sunset";
+  const imageUrl = "https://thomaswilson.xyz/sunrise-sunset-art.png";
+</script>
+
+<title>Sunrise, Sunset?</title>
+<meta name="title" content={title} />
+<meta name="description" content={description} />
+
+<!-- Open Graph / Facebook -->
+<meta property="og:type" content="website" />
+<meta property="og:url" content={canonicalUrl} />
+<meta property="og:title" content={title} />
+<meta property="og:description" content={description} />
+<meta property="og:image" content={imageUrl} />
+<meta property="og:image:type" content="image/png" />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="628" />
+<meta
+  property="og:image:alt"
+  content="An Illustration of a Sunrise (or sunset)"
+/>
+
+<!-- Twitter -->
+<meta property="twitter:card" content="summary_large_image" />
+<meta
+  property="twitter:url"
+  content="https://thomaswilson.xyz/sunrise-sunset"
+/>
+<meta property="twitter:title" content="Sunrise, Sunset?" />
+<meta
+  property="twitter:description"
+  content="It's a simple question: it is a sunrise or a sunset?"
+/>
+<meta property="twitter:image" content={imageUrl} />