From 84bfa7bb2d51a1c2da4b191292522f7895d3563a Mon Sep 17 00:00:00 2001
From: Michel Kraemer <michel.kraemer@igd.fraunhofer.de>
Date: Sun, 14 Apr 2024 15:19:22 +0200
Subject: [PATCH] Add author and publication date to OpenGraph metadata

Refers to #158
---
 components/Header.jsx           | 13 ++++++++++---
 components/layouts/BlogPost.jsx |  2 +-
 components/layouts/Page.jsx     |  6 ++++--
 pages/blog/[[...slug]].jsx      |  4 +++-
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/components/Header.jsx b/components/Header.jsx
index ea419dd0c..d7df073da 100644
--- a/components/Header.jsx
+++ b/components/Header.jsx
@@ -1,7 +1,8 @@
 import Head from "next/head"
 import NavBar from "./NavBar"
 
-const Header = ({ title, ogUrl, ogImage, ogDescription }) => {
+const Header = ({ title, ogType = "website", ogUrl, ogImage, ogDescription,
+    ogAuthor, ogDate }) => {
   let fullTitle = (title ? title + " | " : "") + "Eclipse Vert.x"
   return (
     <header>
@@ -17,11 +18,17 @@ const Header = ({ title, ogUrl, ogImage, ogDescription }) => {
         <link rel="alternate" type="application/rss+xml" href="/feed/rss.xml" />
         <link rel="alternate" type="application/atom+xml" href="/feed/atom.xml" />
         <link rel="alternate" type="application/json" href="/feed/feed.json" />
-        <meta property="og:type" content="website"/>
+        <meta property="og:type" content={ogType}/>
         <meta property="og:title" content={fullTitle}/>
         {ogDescription !== undefined ? (
           <meta property="og:description" content={ogDescription} />
-        ): undefined}
+        ) : undefined}
+        {ogAuthor !== undefined ? (
+          <meta property="article:author" content={ogAuthor} />
+        ) : undefined}
+        {ogDate !== undefined ? (
+          <meta property="article:published_time" content={ogDate} />
+        ) : undefined}
         {ogUrl !== undefined ? (
           <meta property="og:url" content={ogUrl} />
         ) : undefined}
diff --git a/components/layouts/BlogPost.jsx b/components/layouts/BlogPost.jsx
index 906037118..4eba69553 100644
--- a/components/layouts/BlogPost.jsx
+++ b/components/layouts/BlogPost.jsx
@@ -3,7 +3,7 @@ import BlogNavBar from "../blog/BlogNavBar"
 import styles from "./BlogPost.scss?type=global"
 
 const BlogPost = (props) => (
-  <Page hashSmoothScroll {...props}>
+  <Page hashSmoothScroll ogType="article" {...props}>
     <div className="blog-post">
       <BlogNavBar categories={props.categories} />
       {props.children}
diff --git a/components/layouts/Page.jsx b/components/layouts/Page.jsx
index cb4f3f201..8f92ebaac 100644
--- a/components/layouts/Page.jsx
+++ b/components/layouts/Page.jsx
@@ -7,7 +7,8 @@ import Header from "../Header"
 import Footer from "../Footer"
 import styles from "./Page.scss"
 
-const Layout = ({ title, ogUrl, ogImage, ogDescription, narrow, hashSmoothScroll = false, children }) => {
+const Layout = ({ title, ogType, ogUrl, ogImage, ogDescription, ogAuthor, ogDate,
+    narrow, hashSmoothScroll = false, children }) => {
   const navBarState = useContext(NavBarContext.State)
   const containerRef = useRef()
 
@@ -64,7 +65,8 @@ const Layout = ({ title, ogUrl, ogImage, ogDescription, narrow, hashSmoothScroll
 
   return (
     <main className="page">
-      <Header title={title} ogUrl={ogUrl} ogImage={ogImage} ogDescription={ogDescription} />
+      <Header title={title} ogType={ogType} ogUrl={ogUrl} ogImage={ogImage}
+        ogDescription={ogDescription} ogAuthor={ogAuthor} ogDate={ogDate} />
       <div className="page-content">
         <div className={classNames("container", { "container-narrow": narrow })}
             ref={containerRef}>
diff --git a/pages/blog/[[...slug]].jsx b/pages/blog/[[...slug]].jsx
index 23f2a7d75..099091f18 100644
--- a/pages/blog/[[...slug]].jsx
+++ b/pages/blog/[[...slug]].jsx
@@ -427,10 +427,12 @@ const BlogPage = ({ post, prevPost, nextPost, relatedPosts, category, categories
 
   let url = `${process.env.baseUrl}/blog/${post.slug}`
   let ogImage = `${process.env.baseUrl}/images/previews/${post.slug}.jpg`
+  let ogAuthor = post.meta.authors !== undefined ?
+    post.meta.authors.map(a => a.name).join(", ") : undefined
 
   return (
     <BlogPost title={`${post.meta.title} | Blog`} categories={categories} ogUrl={url}
-        ogImage={ogImage} ogDescription={post.meta.summary}>
+        ogImage={ogImage} ogDescription={post.meta.summary} ogAuthor={ogAuthor} ogDate={post.date}>
       <div className="blog-post-main">
         <div className="blog-post-content">
           <h1>{post.meta.title}</h1>