docs: Setup social sharing for blogposts (#8102)

2026-03-25 15:37:08 +01:00
parent 5b4dd40593
commit 3a9805e255
7 changed files with 340 additions and 0 deletions
@@ -0,0 +1,33 @@
+import React from 'react';
+import Info from '@theme-original/BlogPostItem/Header/Info';
+import type InfoType from '@theme/BlogPostItem/Header/Info';
+import type { WrapperProps } from '@docusaurus/types';
+import { useBlogPost } from '@docusaurus/plugin-content-blog/client';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import SocialShare from '@site/src/components/SocialShare';
+
+type Props = WrapperProps<typeof InfoType>;
+
+function buildPostUrl(siteUrl: string, permalink: string): string {
+  const base = siteUrl.endsWith('/') ? siteUrl.slice(0, -1) : siteUrl;
+  return `${base}${permalink}`;
+}
+
+export default function InfoWrapper(props: Props): JSX.Element {
+  const { metadata, isBlogPostPage } = useBlogPost();
+  const { siteConfig } = useDocusaurusContext();
+
+  const postUrl = buildPostUrl(siteConfig.url, metadata.permalink);
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '0.25rem' }}>
+      <Info {...props} />
+      {isBlogPostPage && (
+        <>
+          <span style={{ margin: '0 0.125rem' }}> · </span>
+          <SocialShare url={postUrl} title={metadata.title} />
+        </>
+      )}
+    </div>
+  );
+}