refactor(theme): use JSON-LD instead of microdata for blog structured data

packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts

@@ -174,8 +174,6 @@ describe('blog plugin', () => {
       title: 'date-matter',
       description: `date inside front matter`,
       authors: [],
-      baseBlogPermalink: '/blog',
-      baseBlogTitle: 'Blog',
       date: new Date('2019-01-01'),
       formattedDate: 'January 1, 2019',
       frontMatter: {
@@ -221,8 +219,6 @@ describe('blog plugin', () => {
           title: 'Docusaurus maintainer (translated)',
         },
       ],
-      baseBlogPermalink: '/blog',
-      baseBlogTitle: 'Blog',
       date: new Date('2018-12-14'),
       formattedDate: 'December 14, 2018',
       frontMatter: {
@@ -254,8 +250,6 @@ describe('blog plugin', () => {
       title: 'Complex Slug',
       description: `complex url slug`,
       authors: [],
-      baseBlogPermalink: '/blog',
-      baseBlogTitle: 'Blog',
       prevItem: undefined,
       nextItem: {
         permalink: '/blog/simple/slug',
@@ -302,8 +296,6 @@ describe('blog plugin', () => {
           imageURL: undefined,
         },
       ],
-      baseBlogPermalink: '/blog',
-      baseBlogTitle: 'Blog',
       prevItem: undefined,
       nextItem: {
         permalink: '/blog/draft',
@@ -335,8 +327,6 @@ describe('blog plugin', () => {
       title: 'some heading',
       description: '',
       authors: [],
-      baseBlogPermalink: '/blog',
-      baseBlogTitle: 'Blog',
       date: new Date('2019-01-02'),
       formattedDate: 'January 2, 2019',
       frontMatter: {
@@ -503,8 +493,6 @@ describe('blog plugin', () => {
       title: 'no date',
       description: `no date`,
       authors: [],
-      baseBlogPermalink: '/blog',
-      baseBlogTitle: 'Blog',
       date: noDateSourceTime,
       formattedDate,
       frontMatter: {},

packages/docusaurus-plugin-content-blog/src/blogUtils.ts

@@ -229,7 +229,6 @@ async function processBlogSourceFile(
     truncateMarker,
     showReadingTime,
     editUrl,
-    blogTitle: baseBlogTitle,
   } = options;
 
   // Lookup in localized folder in priority
@@ -330,8 +329,6 @@ async function processBlogSourceFile(
     return undefined;
   }
 
-  const baseBlogPermalink = normalizeUrl([baseUrl, routeBasePath]);
-
   const tagsBasePath = normalizeUrl([
     baseUrl,
     routeBasePath,
@@ -343,8 +340,6 @@ async function processBlogSourceFile(
     id: slug,
     metadata: {
       permalink,
-      baseBlogPermalink,
-      baseBlogTitle,
       editUrl: getBlogEditUrl(),
       source: aliasedSource,
       title,

packages/docusaurus-plugin-content-blog/src/index.ts

@@ -180,6 +180,7 @@ export default async function pluginContentBlog(
         blogArchiveComponent,
         routeBasePath,
         archiveBasePath,
+        blogTitle,
       } = options;
 
       const {addRoute, createData} = actions;
@@ -255,6 +256,8 @@ export default async function pluginContentBlog(
         ),
       );
 
+      const baseBlogPermalink = normalizeUrl([baseUrl, routeBasePath]);
+
       // Create routes for blog entries.
       await Promise.all(
         blogPosts.map(async (blogPost) => {
@@ -266,13 +269,26 @@ export default async function pluginContentBlog(
             JSON.stringify(metadata, null, 2),
           );
 
+          const blogMetadataPath = await createData(
+            `${docuHash(`${metadata.source}-blogMetadata`)}.json`,
+            JSON.stringify(
+              {
+                baseBlogPermalink,
+                blogTitle,
+              },
+              null,
+              2,
+            ),
+          );
+
           addRoute({
             path: metadata.permalink,
             component: blogPostComponent,
             exact: true,
             modules: {
               sidebar: aliasedSource(sidebarProp),
               content: metadata.source,
+              blogMetadata: aliasedSource(blogMetadataPath),
             },
           });
 

packages/docusaurus-plugin-content-blog/src/plugin-content-blog.d.ts

@@ -197,10 +197,6 @@ yarn workspace v1.22.19image` is a collocated image path, this entry will be the
     readonly formattedDate: string;
     /** Full link including base URL. */
     readonly permalink: string;
-    /** the path to the base of the blog */
-    readonly baseBlogPermalink: string;
-    /** title of the overall blog */
-    readonly baseBlogTitle: string;
     /**
      * Description used in the meta. Could be an empty string (empty content)
      */
@@ -465,6 +461,13 @@ yarn workspace v1.22.19image` is a collocated image path, this entry will be the
     blogTagsListPath: string;
   };
 
+  export type BlogMetadata = {
+    /** the path to the base of the blog */
+    baseBlogPermalink: string;
+    /** title of the overall blog */
+    blogTitle: string;
+  };
+
   export type BlogTags = {
     [permalink: string]: BlogTag;
   };
@@ -536,6 +539,7 @@ declare module '@theme/BlogPostPage' {
     BlogPostFrontMatter,
     BlogSidebar,
     PropBlogPostContent,
+    BlogMetadata,
   } from '@docusaurus/plugin-content-blog';
 
   export type FrontMatter = BlogPostFrontMatter;
@@ -547,6 +551,8 @@ declare module '@theme/BlogPostPage' {
     readonly sidebar: BlogSidebar;
     /** Content of this post as an MDX component, with useful metadata. */
     readonly content: Content;
+    /** Metadata about the blog. */
+    readonly blogMetadata: BlogMetadata;
   }
 
   export default function BlogPostPage(props: Props): JSX.Element;
@@ -560,6 +566,7 @@ declare module '@theme/BlogPostPage/StructuredData' {
   import type {
     BlogPostFrontMatter,
     PropBlogPostContent,
+    BlogMetadata,
   } from '@docusaurus/plugin-content-blog';
 
   export type FrontMatter = BlogPostFrontMatter;
@@ -572,6 +579,7 @@ declare module '@theme/BlogPostPage/StructuredData' {
     readonly assets: Assets;
     readonly frontMatter: FrontMatter;
     readonly metadata: Metadata;
+    readonly blogMetadata: BlogMetadata;
   }
 
   export default function BlogPostStructuredData(props: Props): JSX.Element;

packages/docusaurus-theme-classic/src/theme/BlogPostPage/StructuredData/index.tsx

@@ -64,8 +64,8 @@ export default function BlogPostStructuredData(props: Props): JSX.Element {
     ...(keywords ? {keywords} : {}),
     isPartOf: {
       '@type': 'Blog',
-      '@id': `${siteConfig.url}${metadata.baseBlogPermalink}`,
-      name: metadata.baseBlogTitle,
+      '@id': `${siteConfig.url}${props.blogMetadata.baseBlogPermalink}`,
+      name: props.blogMetadata.blogTitle,
     },
   };
 

packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx

@@ -17,13 +17,15 @@ import BlogPostPageStructuredData from '@theme/BlogPostPage/StructuredData';
 import TOC from '@theme/TOC';
 import type {Props} from '@theme/BlogPostPage';
 import Unlisted from '@theme/Unlisted';
-import type {BlogSidebar} from '@docusaurus/plugin-content-blog';
+import type {BlogMetadata, BlogSidebar} from '@docusaurus/plugin-content-blog';
 
 function BlogPostPageContent({
   sidebar,
+  blogMetadata,
   children,
 }: {
   sidebar: BlogSidebar;
+  blogMetadata: BlogMetadata;
   children: ReactNode;
 }): JSX.Element {
   const {metadata, toc, assets} = useBlogPost();
@@ -51,6 +53,7 @@ function BlogPostPageContent({
         frontMatter={frontMatter}
         assets={assets}
         metadata={metadata}
+        blogMetadata={blogMetadata}
       />
 
       <BlogPostItem>{children}</BlogPostItem>
@@ -72,7 +75,9 @@ export default function BlogPostPage(props: Props): JSX.Element {
           ThemeClassNames.page.blogPostPage,
         )}>
         <BlogPostPageMetadata />
-        <BlogPostPageContent sidebar={props.sidebar}>
+        <BlogPostPageContent
+          sidebar={props.sidebar}
+          blogMetadata={props.blogMetadata}>
           <BlogPostContent />
         </BlogPostPageContent>
       </HtmlClassNameProvider>