social share tags

web/src/components/SocialShareMeta.svelte

@@ -0,0 +1,13 @@
+<script>
+	export let title = "";
+</script>
+
+<svelte:head>
+	<meta property="og:title" content={title}>
+	<meta property="og:type" content="website" />
+	<meta property="og:image" content="https://shokku.dev/share-card.png">
+	<meta name="twitter:card" content="https://shokku.dev/share-card.png">
+
+	<meta property="og:description" content="Free and open source interface for the Dokku PaaS">
+	<meta name="twitter:image:alt" content="Shokku Logo">
+</svelte:head>

web/src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script>
+	import SocialShareMeta from "$components/SocialShareMeta.svelte";
 	import Navbar from "$components/Navbar.svelte";
 	import Hero from "./Hero.svelte";
 	import Features from "./Features.svelte";
@@ -8,6 +9,7 @@
 
 <svelte:head>
 	<title>Shokku</title>
+	<SocialShareMeta title="Shokku" />
 </svelte:head>
 
 <div class="flex flex-col bg-base-300">

web/src/routes/docs/+layout.svelte

@@ -3,6 +3,7 @@
 	import {page} from "$app/stores";
 	import Navbar from "$components/Navbar.svelte";
 	import ProgressButtons from "./ProgressButtons.svelte";
+  import SocialShareMeta from "$components/SocialShareMeta.svelte";
 
 	const sidebarPages = [
 		{section: "Getting Started", ref: "/docs/intro", label: "Introduction"},
@@ -22,10 +23,13 @@
 		prevPage = (currentPage > 0) ? sidebarPages[currentPage - 1] : null;
 		nextPage = (currentPage < sidebarPages.length - 1) ? sidebarPages[currentPage + 1] : null;
 	}
+
+	$: pageTitle = `Shokku Docs - ${sidebarPages[currentPage].label}`;
 </script>
 
 <svelte:head>
-	<title>Shokku Docs - {sidebarPages[currentPage].label}</title>
+	<title>{pageTitle}</title>
+	<SocialShareMeta title={pageTitle} />
 </svelte:head>
 
 <div class="flex flex-col h-screen">