u

code/docusaurus/src/theme/BlogPostPage/Metadata/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {PageMetadata} from '@docusaurus/theme-common';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
+export default function BlogPostPageMetadata() {
+  const {assets, metadata} = useBlogPost();
+  const {title, description, date, tags, authors, frontMatter} = metadata;
+  const {keywords} = frontMatter;
+  const image = assets.image ?? frontMatter.image;
+  return (
+    <PageMetadata
+      title={frontMatter.title_meta ?? 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>
+  );
+}

code/docusaurus/src/theme/BlogPostPage/StructuredData/index.js

@@ -0,0 +1,14 @@
+import Head from '@docusaurus/Head'
+import { useBlogPostStructuredData } from '@docusaurus/plugin-content-blog/client'
+import React from 'react'
+
+export default function BlogPostStructuredData() {
+  const structuredData = useBlogPostStructuredData()
+  return (
+    <Head>
+      <script type="application/ld+json">
+        {JSON.stringify(structuredData)}
+      </script>
+    </Head>
+  )
+}

code/docusaurus/src/theme/BlogPostPage/index.js

@@ -0,0 +1,91 @@
+import {
+  BlogPostProvider,
+  useBlogPost,
+} from '@docusaurus/plugin-content-blog/client'
+import { HtmlClassNameProvider, ThemeClassNames } from '@docusaurus/theme-common'
+import BlogLayout from '@theme/BlogLayout'
+import BlogPostItem from '@theme/BlogPostItem'
+import BlogPostPageMetadata from '@theme/BlogPostPage/Metadata'
+import BlogPostPageStructuredData from '@theme/BlogPostPage/StructuredData'
+import BlogPostPaginator from '@theme/BlogPostPaginator'
+import ContentVisibility from '@theme/ContentVisibility'
+import TOC from '@theme/TOC'
+import clsx from 'clsx'
+import React, { useEffect, useRef } from 'react'
+
+function BlogPostPageContent({ sidebar, children }) {
+  const { metadata, toc } = useBlogPost()
+  const { nextItem, prevItem, frontMatter } = metadata
+  const {
+    hide_table_of_contents: hideTableOfContents,
+    toc_min_heading_level: tocMinHeadingLevel,
+    toc_max_heading_level: tocMaxHeadingLevel,
+  } = frontMatter
+
+  const commentElement = useRef(null)
+
+  useEffect(() => {
+    // Update the document title using the browser API
+    let s = document.createElement('script')
+    s.src = 'https://giscus.app/client.js'
+    s.setAttribute('data-repo', 'oneao/docusaurus')
+    s.setAttribute('data-repo-id', 'R_kgDOQ1seUQ')
+    s.setAttribute('data-category', 'Announcements')
+    s.setAttribute('data-category-id', 'DIC_kwDOQ1seUc4C0swY')
+    s.setAttribute('data-mapping', 'pathname')
+    s.setAttribute('data-reactions-enabled', '1')
+    s.setAttribute('data-emit-metadata', '0')
+    s.setAttribute('data-input-position', 'bottom')
+    s.setAttribute('data-theme', document.documentElement.getAttribute('data-theme'))
+    s.setAttribute('data-lang', 'zh-CN')
+    s.setAttribute('crossorigin', 'anonymous')
+    s.async = true
+    commentElement.current.appendChild(s)
+  }, [])
+
+  return (
+    <BlogLayout
+      sidebar={sidebar}
+      toc={
+        !hideTableOfContents && toc.length > 0
+          ? (
+              <TOC
+                toc={toc}
+                minHeadingLevel={tocMinHeadingLevel}
+                maxHeadingLevel={tocMaxHeadingLevel}
+              />
+            )
+          : undefined
+      }
+    >
+      <ContentVisibility metadata={metadata} />
+
+      <BlogPostItem>{children}</BlogPostItem>
+
+      {(nextItem || prevItem) && (
+        <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
+      )}
+
+      <div style={{ marginTop: '20px' }} ref={commentElement}></div>
+    </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 />
+        <BlogPostPageStructuredData />
+        <BlogPostPageContent sidebar={props.sidebar}>
+          <BlogPostContent />
+        </BlogPostPageContent>
+      </HtmlClassNameProvider>
+    </BlogPostProvider>
+  )
+}

code/docusaurus/src/theme/DocItem/Layout/index.js

@@ -0,0 +1,81 @@
+import { useDoc } from '@docusaurus/plugin-content-docs/client'
+import { useWindowSize } from '@docusaurus/theme-common'
+import ContentVisibility from '@theme/ContentVisibility'
+import DocBreadcrumbs from '@theme/DocBreadcrumbs'
+import DocItemContent from '@theme/DocItem/Content'
+import DocItemFooter from '@theme/DocItem/Footer'
+import DocItemPaginator from '@theme/DocItem/Paginator'
+import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop'
+import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile'
+import DocVersionBadge from '@theme/DocVersionBadge'
+import DocVersionBanner from '@theme/DocVersionBanner'
+import clsx from 'clsx'
+import React, { useEffect, useRef } from 'react'
+import styles from './styles.module.css'
+/**
+ * Decide if the toc should be rendered, on mobile or desktop viewports
+ */
+function useDocTOC() {
+  const { frontMatter, toc } = useDoc()
+  const windowSize = useWindowSize()
+  const hidden = frontMatter.hide_table_of_contents
+  const canRender = !hidden && toc.length > 0
+  const mobile = canRender ? <DocItemTOCMobile /> : undefined
+  const desktop
+    = canRender && (windowSize === 'desktop' || windowSize === 'ssr')
+      ? (
+          <DocItemTOCDesktop />
+        )
+      : undefined
+  return {
+    hidden,
+    mobile,
+    desktop,
+  }
+}
+export default function DocItemLayout({ children }) {
+  const docTOC = useDocTOC()
+  const { metadata } = useDoc()
+
+  const commentElement = useRef(null)
+
+  useEffect(() => {
+    // Update the document title using the browser API
+    let s = document.createElement('script')
+    s.src = 'https://giscus.app/client.js'
+    s.setAttribute('data-repo', 'oneao/docusaurus')
+    s.setAttribute('data-repo-id', 'R_kgDOQ1seUQ')
+    s.setAttribute('data-category', 'Announcements')
+    s.setAttribute('data-category-id', 'DIC_kwDOQ1seUc4C0swY')
+    s.setAttribute('data-mapping', 'pathname')
+    s.setAttribute('data-reactions-enabled', '1')
+    s.setAttribute('data-emit-metadata', '0')
+    s.setAttribute('data-input-position', 'bottom')
+    s.setAttribute('data-theme', document.documentElement.getAttribute('data-theme'))
+    s.setAttribute('data-lang', 'zh-CN')
+    s.setAttribute('crossorigin', 'anonymous')
+    s.async = true
+    commentElement.current.appendChild(s)
+  }, [])
+
+  return (
+    <div className="row">
+      <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
+        <ContentVisibility metadata={metadata} />
+        <DocVersionBanner />
+        <div className={styles.docItemContainer}>
+          <article>
+            <DocBreadcrumbs />
+            <DocVersionBadge />
+            {docTOC.mobile}
+            <DocItemContent>{children}</DocItemContent>
+            <div style={{ marginTop: '20px' }} ref={commentElement}></div>
+            <DocItemFooter />
+          </article>
+          <DocItemPaginator />
+        </div>
+      </div>
+      {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
+    </div>
+  )
+}

code/docusaurus/src/theme/DocItem/Layout/styles.module.css

@@ -0,0 +1,10 @@
+.docItemContainer header + *,
+.docItemContainer article > *:first-child {
+  margin-top: 0;
+}
+
+@media (min-width: 997px) {
+  .docItemCol {
+    max-width: 75% !important;
+  }
+}