use full urls in head meta, add opengraph image

diff --git a/src/components/head/article.astro b/src/components/head/article.astro
index a7eaec6a4760373725ed54bc995b4986f00c2315..563116c01641edea6afd9c6bf94ac99ae610c0d2 100644 (file)
--- a/src/components/head/article.astro
+++ b/src/components/head/article.astro
@@ -9,7 +9,6 @@ interface Props {
 
 const { publishedTime, modifiedTime, tags = [] } = Astro.props;
 ---
-
 <meta property="og:type" content="article" />
 <meta property="article:published_time" content={publishedTime} />
 <meta property="article:modified_time" content={modifiedTime} />

diff --git a/src/components/head/base.astro b/src/components/head/base.astro
index 93e39189c61f88d0a5f55ca6cc4f255ab470bf6c..dadd84ddc521245a93825107e0318580971b8ea1 100644 (file)
--- a/src/components/head/base.astro
+++ b/src/components/head/base.astro
@@ -31,8 +31,8 @@ const { title, description } = Astro.props;
 <meta name="twitter:creator" content={SiteMetadata.socials.x.username} />
 <meta name="twitter:title" content={`${title} | ${SiteMetadata.title}`} />
 <meta name="twitter:description" content={description} />
-<meta name="twitter:image" property="og:image" content={`https://v1.screenshot.11ty.dev/${canonicalURL}opengraph/9:16/`} />
-<meta property="og:image:type" content="image/jpeg" />
+<meta name="twitter:image" property="og:image" content={new URL(`opengraph/?title=${title}`, Astro.site)} />
+<meta property="og:image:type" content="image/svg+xml" />
 <meta property="og:image:width" content="1200" />
 <meta property="og:image:height" content="630" />
 <meta property="og:locale" content="en_US" />
@@ -41,5 +41,5 @@ const { title, description } = Astro.props;
 <meta property="og:updated_time" content={new Date().toISOString()} />
 <title>{`${title} | ${SiteMetadata.title}`}</title>
 <link rel="canonical" href={canonicalURL} />
-<link rel="sitemap" href="/sitemap-index.xml" />
+<link rel="sitemap" href={new URL("sitemap-index.xml", Astro.site)} />
 <link rel="alternate" type="application/rss+xml" title={SiteMetadata.title} href={new URL("feed.xml", Astro.site)} />
\ No newline at end of file

diff --git a/src/pages/opengraph.astro b/src/pages/opengraph.astro
new file mode 100644 (file)
index 0000000..d6d8464
--- /dev/null
+++ b/src/pages/opengraph.astro
@@ -0,0 +1,60 @@
+---
+import '@fontsource-variable/public-sans';
+import SiteMetadata from '@data/metadata.json';
+---
+<svg width="1200" height="630" viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+      <circle class="dot" cx="2" cy="2" r="1" />
+    </pattern>
+  </defs>
+
+  <rect width="100%" height="100%" fill="url(#grid)"/>
+  <foreignObject x="0" y="0" width="1200" height="600">
+    <div id="title" xmlns="http://www.w3.org/1999/xhtml" />
+  </foreignObject>
+  <text id="description" x="805" y="600">by {SiteMetadata.author.name}</text>
+</svg>
+
+<style>
+  svg {
+    color: #000000;
+    fill: #000000;
+    font-family: "Public Sans Variable", sans-serif;
+    font-feature-settings: "kern" 1, "kern";
+    font-kerning: normal;
+    font-weight: 400;
+    text-anchor: middle;
+  }
+  .dot {
+    fill: #888888;
+  }
+  #title {
+    font-weight: 700;
+    font-size: 5rem;
+    padding: 1rem;
+  }
+  #description {
+    font-size: 5rem;
+  }
+</style>
+
+<script>
+  function decodeHTMLEntities(text: string) {
+               const textarea = document.createElement("textarea");
+               textarea.innerHTML = text;
+               return textarea.value;
+       };
+
+  const params = new URLSearchParams(window.location.search);
+       let rawTitle = params.get("title") || 'Untitled';
+  if (rawTitle.length >= 120) {
+    rawTitle = rawTitle.substring(0, 117) + '…';
+  };
+  const title = decodeHTMLEntities(rawTitle);
+
+  const titleElement = document.getElementById("title");
+  if (titleElement) {
+    titleElement.textContent = title;
+  };
+</script>
\ No newline at end of file