Adding og-images (hopefully)

src/_includes/base.njk

@@ -26,7 +26,7 @@
 		<link rel="alternate" type="application/json" title="LewisDale.Dev JSON Feed" href="{{ feed.json if feed.json else "/feed.json" }}">
 		
 		<link rel="me" href="proven.lol/f730ca">
-		<link rel="me" href="https://social.lewisdale.dev/@lewis">
+		<link rel="me" href="https://social.lol/@lewis">
 		<link rel="me" href="https://github.com/LewisDaleUK">
 
 		<link rel="webmention" href="https://cms.lewisdale.dev/wp-json/webmention/1.0/endpoint">
@@ -35,6 +35,7 @@
 
 		<meta name="author" content="{{ metadata.author.name }}">
 		<meta name="description" content="{{ description }}">
+		{% ogImage "./src/_includes/components/ogImage.njk", { title: pageTitle or title, subTitle: description } %}
 	</head>
 	<body>
 		<header class="wrapper-lg row space-between">

src/_includes/components/ogImage.njk

@@ -0,0 +1,12 @@
+<div style="height: 100%; width: 100%; display: flex; align-items: stretch; background-color: #262626;">
+    <div style="display: flex; flex-direction: column; flex-grow: 1;  align-items: center; margin: 80px; background-color: #262626;">
+        <div style="display: flex; flex-grow: 1; flex-direction: column; align-items: center; justify-content: center; font-family: 'Space Grotesk'; font-weight: 500; color: #e5e5e5; text-align: center;">
+            <h1 style="font-size: 80px;">{{ title }}</h1>
+            <h2 style="font-size: 44px;">{{ subTitle }}</h2>
+        </div>
+        <div style="font-family: 'Space Grotesk'; font-weight: 500; color: #e5e5e5; letter-spacing: -0.8rem; font-size: 120px; justify-self: flex-end; flex-grow: 0; margin-bottom: 10px; display: flex;">LD</div>
+        <div style="display: flex; justify-self: flex-end; flex-grow: 0; font-family: 'Space Grotesk'; font-weight: 500; color: #e5e5e5; text-align: center;">
+            <h3 style="font-size: 20px;">LewisDale.dev</h3>
+        </div>
+    </div>
+</div>