fork refine

documentation/src/theme/BlogPostPage/Metadata/index.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { PageMetadata } from "@docusaurus/theme-common";
+import { useBlogPost } from "@docusaurus/theme-common/internal";
+
+export default function BlogPostPageMetadata() {
+    const { assets, metadata } = useBlogPost();
+    const { title, description, date, tags, authors, frontMatter } = metadata;
+    const { keywords } = frontMatter;
+
+    const image = frontMatter.social_image ?? assets.image ?? frontMatter.image;
+
+    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>
+    );
+}

documentation/src/theme/BlogPostPage/index.js

@@ -0,0 +1,46 @@
+import React from "react";
+import clsx from "clsx";
+import {
+    HtmlClassNameProvider,
+    ThemeClassNames,
+} from "@docusaurus/theme-common";
+import {
+    BlogPostProvider,
+    useBlogPost,
+} from "@docusaurus/theme-common/internal";
+import BlogLayout from "@theme/BlogLayout";
+import BlogPostPageMetadata from "@theme/BlogPostPage/Metadata";
+import { BlogTOC } from "../../refine-theme/blog-toc";
+
+import { BlogPostPageView, PostPaginator } from "../../components/blog";
+
+function BlogPostPageContent({ children }) {
+    const { metadata, toc } = useBlogPost();
+    const { relatedPosts } = metadata;
+
+    return (
+        <BlogLayout toc={<BlogTOC toc={toc} />}>
+            <BlogPostPageView>{children}</BlogPostPageView>
+            <PostPaginator title="Related Articles" posts={relatedPosts} />
+        </BlogLayout>
+    );
+}
+
+export default function BlogPostPage(props) {
+    const BlogPostContent = props.content;
+    return (
+        <BlogPostProvider content={props.content} isBlogPostPage>
+            <HtmlClassNameProvider
+                className={clsx(
+                    ThemeClassNames.wrapper.blogPages,
+                    ThemeClassNames.page.blogPostPage,
+                )}
+            >
+                <BlogPostPageMetadata />
+                <BlogPostPageContent>
+                    <BlogPostContent />
+                </BlogPostPageContent>
+            </HtmlClassNameProvider>
+        </BlogPostProvider>
+    );
+}