fix: custom blog plugin metadata

releases/4.0.0/index.mdx

@@ -6,6 +6,8 @@ date: 2024-03-01
 
 **Resoto is now Fix Inventory.** This wasn't originally planned, but an idea that [Matthias](https://linkedin.com/in/matthias-veit) came up with a few weeks ago.
 
+{/* truncate */}
+
 We updated our GitHub README to list and explain the various components of Fix, and the list looked like this:
 
 - `fixfrontend`
@@ -157,8 +159,6 @@ And—before the rumor mill gets going, let's set the record straight: the d
 - [`12024086`](https://github.com/someengineering/fix/commit/12024086) <span class="badge badge--secondary">fixinventory</span> Bump 4.0.0 (#1935)
 - [`593b5cc2`](https://github.com/someengineering/fix/commit/593b5cc2) <span class="badge badge--secondary">ci</span> Bypass waits when publish workflow triggered manually (#1936)
 
-{/* truncate */}
-
 ## Docker Images
 
 - `somecr.io/someengineering/fixcore:4.0.0`

src/theme/BlogPostPage/Metadata.tsx

@@ -0,0 +1,58 @@
+import { PageMetadata } from '@docusaurus/theme-common';
+import { useBlogPost } from '@docusaurus/theme-common/internal';
+import { openGraph } from '@site/src/utils/og';
+
+export default function BlogPostPageMetadata(): JSX.Element {
+  const { frontMatter, assets, metadata } = useBlogPost();
+  const {
+    title,
+    description,
+    date,
+    tags,
+    authors,
+    formattedDate,
+    readingTime,
+  } = metadata;
+
+  const { keywords } = frontMatter;
+
+  const image =
+    assets.image ??
+    frontMatter.image ??
+    openGraph({
+      title,
+      metadata: formattedDate
+        ? `${formattedDate}${
+            readingTime ? ` · ${Math.ceil(readingTime)} min read` : ''
+          }`
+        : null,
+      authors,
+    });
+  return (
+    <PageMetadata
+      title={title}
+      description={description}
+      keywords={keywords}
+      image={image}
+    >
+      <meta property="og:type" content="article" />
+      <meta property="article:published_time" content={date} />
+      {/* TODO double check those article meta array syntaxes, see https://ogp.me/#array */}
+      {authors.some((author) => author.url) && (
+        <meta
+          property="article:author"
+          content={authors
+            .map((author) => author.url)
+            .filter(Boolean)
+            .join(',')}
+        />
+      )}
+      {tags.length > 0 && (
+        <meta
+          property="article:tag"
+          content={tags.map((tag) => tag.label).join(',')}
+        />
+      )}
+    </PageMetadata>
+  );
+}