Add og-image page

assets/css/styles.min.css

@@ -1 +1 @@
-@font-face{font-display:swap;font-family:Zx Spectrum;font-style:normal;font-weight:100;font-weight:400;src:url(/wp-content/themes/zx-spectrum/assets/fonts/zx_spectrum-7-webfont.woff2) format("woff2"),url(/wp-content/themes/zx-spectrum/assets/fonts/zx_spectrum-7-webfont.woff) format("woff")}@font-face{font-display:swap;font-family:Zx Spectrum;font-style:bold;font-weight:700;src:url(/wp-content/themes/zx-spectrum/assets/fonts/zx_spectrum-7_bold-webfont.woff2) format("woff2"),url(/wp-content/themes/zx-spectrum/assets/fonts/zx_spectrum-7_bold-webfont.woff) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:100;src:url(/fonts/inter/Inter-Thin.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-Thin.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:italic;font-weight:100;src:url(/fonts/inter/Inter-ThinItalic.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-ThinItalic.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:200;src:url(/fonts/inter/Inter-ExtraLight.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-ExtraLight.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:italic;font-weight:200;src:url(/fonts/inter/Inter-ExtraLightItalic.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-ExtraLightItalic.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:300;src:url(/fonts/inter/Inter-Light.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-Light.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:italic;font-weight:300;src:url(/fonts/inter/Inter-LightItalic.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-LightItalic.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:400;src:url(/fonts/inter/Inter-Regular.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-Regular.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:italic;font-weight:400;src:url(/fonts/inter/Inter-Italic.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-Italic.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:500;src:url(/fonts/inter/Inter-Medium.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-Medium.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:italic;font-weight:500;src:url(/fonts/inter/Inter-MediumItalic.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-MediumItalic.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:600;src:url(/fonts/inter/Inter-SemiBold.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-SemiBold.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:italic;font-weight:600;src:url(/fonts/inter/Inter-SemiBoldItalic.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-SemiBoldItalic.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:700;src:url(/fonts/inter/Inter-Bold.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-Bold.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:italic;font-weight:700;src:url(/fonts/inter/Inter-BoldItalic.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-BoldItalic.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:800;src:url(/fonts/inter/Inter-ExtraBold.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-ExtraBold.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:italic;font-weight:800;src:url(/fonts/inter/Inter-ExtraBoldItalic.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-ExtraBoldItalic.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:900;src:url(/fonts/inter/Inter-Black.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-Black.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:italic;font-weight:900;src:url(/fonts/inter/Inter-BlackItalic.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-BlackItalic.woff?v=3.19) format("woff")}@font-face{font-named-instance:"Regular";font-display:swap;font-family:Inter var;font-style:normal;font-weight:100 900;src:url(/fonts/inter/Inter-roman.var.woff2?v=3.19) format("woff2")}@font-face{font-named-instance:"Italic";font-display:swap;font-family:Inter var;font-style:italic;font-weight:100 900;src:url(/fonts/inter/Inter-italic.var.woff2?v=3.19) format("woff2")}@font-face{font-display:swap;font-family:Inter var experimental;font-style:oblique 0deg 10deg;font-weight:100 900;src:url(/fonts/inter/Inter.var.woff2?v=3.19) format("woff2")}@font-face{font-display:swap;font-family:Christmas;font-style:normal;src:url(/fonts/christmas.ttf) format("ttf")}:Line truncated
+@font-face{font-display:swap;font-family:Zx Spectrum;font-style:normal;font-weight:100;font-weight:400;src:url(/wp-content/themes/zx-spectrum/assets/fonts/zx_spectrum-7-webfont.woff2) format("woff2"),url(/wp-content/themes/zx-spectrum/assets/fonts/zx_spectrum-7-webfont.woff) format("woff")}@font-face{font-display:swap;font-family:Zx Spectrum;font-style:bold;font-weight:700;src:url(/wp-content/themes/zx-spectrum/assets/fonts/zx_spectrum-7_bold-webfont.woff2) format("woff2"),url(/wp-content/themes/zx-spectrum/assets/fonts/zx_spectrum-7_bold-webfont.woff) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:100;src:url(/fonts/inter/Inter-Thin.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-Thin.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:italic;font-weight:100;src:url(/fonts/inter/Inter-ThinItalic.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-ThinItalic.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:200;src:url(/fonts/inter/Inter-ExtraLight.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-ExtraLight.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:italic;font-weight:200;src:url(/fonts/inter/Inter-ExtraLightItalic.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-ExtraLightItalic.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:300;src:url(/fonts/inter/Inter-Light.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-Light.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:italic;font-weight:300;src:url(/fonts/inter/Inter-LightItalic.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-LightItalic.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:400;src:url(/fonts/inter/Inter-Regular.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-Regular.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:italic;font-weight:400;src:url(/fonts/inter/Inter-Italic.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-Italic.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:500;src:url(/fonts/inter/Inter-Medium.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-Medium.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:italic;font-weight:500;src:url(/fonts/inter/Inter-MediumItalic.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-MediumItalic.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:600;src:url(/fonts/inter/Inter-SemiBold.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-SemiBold.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:italic;font-weight:600;src:url(/fonts/inter/Inter-SemiBoldItalic.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-SemiBoldItalic.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:700;src:url(/fonts/inter/Inter-Bold.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-Bold.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:italic;font-weight:700;src:url(/fonts/inter/Inter-BoldItalic.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-BoldItalic.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:800;src:url(/fonts/inter/Inter-ExtraBold.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-ExtraBold.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:italic;font-weight:800;src:url(/fonts/inter/Inter-ExtraBoldItalic.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-ExtraBoldItalic.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:900;src:url(/fonts/inter/Inter-Black.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-Black.woff?v=3.19) format("woff")}@font-face{font-display:swap;font-family:Inter;font-style:italic;font-weight:900;src:url(/fonts/inter/Inter-BlackItalic.woff2?v=3.19) format("woff2"),url(/fonts/inter/Inter-BlackItalic.woff?v=3.19) format("woff")}@font-face{font-named-instance:"Regular";font-display:swap;font-family:Inter var;font-style:normal;font-weight:100 900;src:url(/fonts/inter/Inter-roman.var.woff2?v=3.19) format("woff2")}@font-face{font-named-instance:"Italic";font-display:swap;font-family:Inter var;font-style:italic;font-weight:100 900;src:url(/fonts/inter/Inter-italic.var.woff2?v=3.19) format("woff2")}@font-face{font-display:swap;font-family:Inter var experimental;font-style:oblique 0deg 10deg;font-weight:100 900;src:url(/fonts/inter/Inter.var.woff2?v=3.19) format("woff2")}@font-face{font-display:swap;font-family:Christmas;font-style:normal;src:url(/fonts/christmas.ttf) format("ttf")}:Line truncated

header.php

@@ -6,6 +6,10 @@
 		<link type="application/atom+xml" rel="alternate" href="<?php bloginfo('atom_url'); ?>" title="Lewis Dale's Blog" />
 
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+		<?php $ogImage = "https://coruscating-quokka-5a905d.netlify.app/" . urlencode(get_site_url() . "/og-image?pid=" . get_the_id()) . "/opengraph"; ?>
+		<meta property="og:image" content="<?= $ogImage ?>" />
+		<meta name="twitter:image" content="<?= $ogImage ?>" />
 	</head>
 	<body <?= body_class() ?>>
 	<?php wp_body_open(); ?>

page-og-image.php

@@ -0,0 +1,21 @@
+<?php get_header() ?>
+
+<?php
+$post = get_post($_GET["pid"]);
+$author = get_the_author_meta('display_name', $post->post_author);
+?>
+
+<main class="bg-lightGrey max-w-screen">
+  <section class="wrapper-md h-screen h-[100dvh] flex flex-col justify-center items-center">
+    <ul class="basic-select w-full">
+        <li><h1 class="text-center"><?= $post->post_title ?></h1></li>
+        <li class="px-size-0 text-size-2"><time><?= date("d/m/Y, H:i A", strtotime($post->post_date_gmt)) ?></time></li>
+        <li class="px-size-0 text-size-2"><author>By <?= $author ?></author></li>
+    </ul>
+    <footer class="pt-size-2">
+      LewisDale.dev
+    </footer>
+</section>
+</main>
+
+<?php get_footer() ?>

src/cube.css

@@ -535,6 +535,11 @@ pre .comment {
 	padding: 0;
 }
 
+.px-size-0 {
+	padding-left: clamp(0.83rem, 0.90rem + -0.32vw, 0.67rem);
+	padding-right: clamp(0.83rem, 0.90rem + -0.32vw, 0.67rem);
+}
+
 .py-size-0 {
 	padding-top: clamp(0.83rem, 0.90rem + -0.32vw, 0.67rem);
 	padding-bottom: clamp(0.83rem, 0.90rem + -0.32vw, 0.67rem);