fix: og images (#540)

tolgee · Mar 14, 2024 · b5865ae · b5865ae
1 parent 92971e5
commit b5865ae
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 30 deletions.
diff --git a/src/theme/BlogPostItem/Footer/index.tsx b/src/theme/BlogPostItem/Footer/index.tsx
@@ -6,9 +6,12 @@ import TagsListInline from '@theme/TagsListInline';
 import ReadMoreLink from '@theme/BlogPostItem/Footer/ReadMoreLink';
 import styles from './styles.module.css';
 import { AuthorSummary } from '../../../component/AuthorSummary';
+import Head from '@docusaurus/Head';
 export default function BlogPostItemFooter() {
   const { metadata, isBlogPostPage } = useBlogPost();
-  const { tags, title, editUrl, hasTruncateMarker, authors } = metadata;
+  const { tags, title, editUrl, hasTruncateMarker, authors, frontMatter } =
+    metadata;
+  const { image } = frontMatter;
   // A post is truncated if it's in the "list view" and it has a truncate marker
   const truncatedPost = !isBlogPostPage && hasTruncateMarker;
   const tagsExists = tags.length > 0;
@@ -18,38 +21,47 @@ export default function BlogPostItemFooter() {
     return null;
   }
   return (
-    <footer
-      className={clsx(
-        'row docusaurus-mt-lg',
-        isBlogPostPage && styles.blogPostFooterDetailsFull
+    <>
+      {image && (
+        <Head>
+          <meta property="og:image" content={image} />
+        </Head>
       )}
-    >
-      {!truncatedPost &&
-        authors.map((author, i) => {
-          return <AuthorSummary key={i} author={author} />;
-        })}
+      {renderFooter ? (
+        <footer
+          className={clsx(
+            'row docusaurus-mt-lg',
+            isBlogPostPage && styles.blogPostFooterDetailsFull
+          )}
+        >
+          {!truncatedPost &&
+            authors.map((author, i) => {
+              return <AuthorSummary key={i} author={author} />;
+            })}
 
-      {tagsExists && (
-        <div className={clsx('col', { 'col--9': truncatedPost })}>
-          <TagsListInline tags={tags} />
-        </div>
-      )}
+          {tagsExists && (
+            <div className={clsx('col', { 'col--9': truncatedPost })}>
+              <TagsListInline tags={tags} />
+            </div>
+          )}
 
-      {isBlogPostPage && editUrl && (
-        <div className="col margin-top--sm">
-          <EditThisPage editUrl={editUrl} />
-        </div>
-      )}
+          {isBlogPostPage && editUrl && (
+            <div className="col margin-top--sm">
+              <EditThisPage editUrl={editUrl} />
+            </div>
+          )}
 
-      {truncatedPost && (
-        <div
-          className={clsx('col text--right', {
-            'col--3': tagsExists,
-          })}
-        >
-          <ReadMoreLink blogPostTitle={title} to={metadata.permalink} />
-        </div>
-      )}
-    </footer>
+          {truncatedPost && (
+            <div
+              className={clsx('col text--right', {
+                'col--3': tagsExists,
+              })}
+            >
+              <ReadMoreLink blogPostTitle={title} to={metadata.permalink} />
+            </div>
+          )}
+        </footer>
+      ) : null}
+    </>
   );
 }
diff --git a/src/theme/LayoutContent.tsx b/src/theme/LayoutContent.tsx
@@ -76,6 +76,8 @@ export const LayoutContent = ({ children }) => {
           content="boppg6u2f0982xhjbg7jtr9odtchvk"
         />
       </Head>
+      {/** default og image can be overriten in the Head */}
+      <meta property="og:image" content="/img/og-default.svg" />
       {trackingId && (
         <div
           dangerouslySetInnerHTML={{