feat(content-blog): add full blog post html into RSS/Atom feeds

packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/component/Typography.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export const Typography: React.FC = (props) => {
+  return <p>{props.children}</p>
+}
+Typography.displayName = 'Typography'

packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/blog/mdx-blog-post.mdx

@@ -0,0 +1,36 @@
+---
+title: Full Blog Sample
+date: 2021-03-05
+---
+
+<h1>HTML Heading 1</h1>
+<h2>HTML Heading 2</h2>
+<p>HTML Paragraph</p>
+
+import Typography from '../../component/Typography'
+
+<Typography>Import DOM</Typography>
+
+# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+##### Heading 5
+
+- list1
+- list2
+- list3
+
+
+* list1
+* list2
+* list3
+
+Normal Text *Italics Text* **Bold Text**
+
+[link](https://v2.docusaurus.io/)
+![image](https://v2.docusaurus.io/)

packages/docusaurus-plugin-content-blog/src/__tests__/__snapshots__/generateBlogFeed.test.ts.snap

@@ -7,25 +7,36 @@ exports[`blogFeed atom shows feed item for each post 1`] = `
 <feed xmlns=\\"http://www.w3.org/2005/Atom\\">
     <id>https://docusaurus.io/myBaseUrl/blog</id>
     <title>Hello Blog</title>
-    <updated>2020-08-16T00:00:00.000Z</updated>
+    <updated>2021-03-05T00:00:00.000Z</updated>
     <generator>https://github.com/jpmonette/feed</generator>
     <link rel=\\"alternate\\" href=\\"https://docusaurus.io/myBaseUrl/blog\\"/>
     <subtitle>Hello Blog</subtitle>
     <icon>https://docusaurus.io/myBaseUrl/image/favicon.ico</icon>
     <rights>Copyright</rights>
+    <entry>
+        <title type=\\"html\\"><![CDATA[Full Blog Sample]]></title>
+        <id>Full Blog Sample</id>
+        <link href=\\"https://docusaurus.io/myBaseUrl/blog/mdx-blog-post\\"/>
+        <updated>2021-03-05T00:00:00.000Z</updated>
+        <summary type=\\"html\\"><![CDATA[HTML Heading 1]]></summary>
+        <content type=\\"html\\"><![CDATA[<h1>HTML Heading 1</h1><h2>HTML Heading 2</h2><p>HTML Paragraph</p><div>Import DOM</div><h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><ul><li>list1</li><li>list2</li><li>list3</li></ul><ul><li>list1</li><li>list2</li><li>list3</li></ul><p>Normal Text <em>Italics Text</em> <strong>Bold Text</strong></p><p><a href=\\"https://v2.docusaurus.io/\\">link</a>
+<img src=\\"https://v2.docusaurus.io/\\" alt=\\"image\\"/></p>]]></content>
+    </entry>
     <entry>
         <title type=\\"html\\"><![CDATA[Complex Slug]]></title>
         <id>/hey/my super path/héllô</id>
         <link href=\\"https://docusaurus.io/myBaseUrl/blog/hey/my super path/héllô\\"/>
         <updated>2020-08-16T00:00:00.000Z</updated>
         <summary type=\\"html\\"><![CDATA[complex url slug]]></summary>
+        <content type=\\"html\\"><![CDATA[<p>complex url slug</p>]]></content>
     </entry>
     <entry>
         <title type=\\"html\\"><![CDATA[Simple Slug]]></title>
         <id>/simple/slug</id>
         <link href=\\"https://docusaurus.io/myBaseUrl/blog/simple/slug\\"/>
         <updated>2020-08-15T00:00:00.000Z</updated>
         <summary type=\\"html\\"><![CDATA[simple url slug]]></summary>
+        <content type=\\"html\\"><![CDATA[<p>simple url slug</p>]]></content>
         <author>
             <name>Sébastien Lorber</name>
             <uri>https://sebastienlorber.com</uri>
@@ -37,6 +48,7 @@ exports[`blogFeed atom shows feed item for each post 1`] = `
         <link href=\\"https://docusaurus.io/myBaseUrl/blog/draft\\"/>
         <updated>2020-02-27T00:00:00.000Z</updated>
         <summary type=\\"html\\"><![CDATA[this post should not be published yet]]></summary>
+        <content type=\\"html\\"><![CDATA[<p>this post should not be published yet</p>]]></content>
     </entry>
     <entry>
         <title type=\\"html\\"><![CDATA[some heading]]></title>
@@ -50,13 +62,15 @@ exports[`blogFeed atom shows feed item for each post 1`] = `
         <link href=\\"https://docusaurus.io/myBaseUrl/blog/date-matter\\"/>
         <updated>2019-01-01T00:00:00.000Z</updated>
         <summary type=\\"html\\"><![CDATA[date inside front matter]]></summary>
+        <content type=\\"html\\"><![CDATA[<p>date inside front matter</p>]]></content>
     </entry>
     <entry>
         <title type=\\"html\\"><![CDATA[Happy 1st Birthday Slash! (translated)]]></title>
         <id>Happy 1st Birthday Slash! (translated)</id>
         <link href=\\"https://docusaurus.io/myBaseUrl/blog/2018/12/14/Happy-First-Birthday-Slash\\"/>
         <updated>2018-12-14T00:00:00.000Z</updated>
         <summary type=\\"html\\"><![CDATA[Happy birthday! (translated)]]></summary>
+        <content type=\\"html\\"><![CDATA[<p>Happy birthday! (translated)</p>]]></content>
         <author>
             <name>Yangshun Tay (translated)</name>
         </author>
@@ -71,35 +85,47 @@ exports[`blogFeed rss should not show feed without posts 1`] = `null`;
 
 exports[`blogFeed rss shows feed item for each post 1`] = `
 "<?xml version=\\"1.0\\" encoding=\\"utf-8\\"?>
-<rss version=\\"2.0\\">
+<rss version=\\"2.0\\" xmlns:dc=\\"http://purl.org/dc/elements/1.1/\\" xmlns:content=\\"http://purl.org/rss/1.0/modules/content/\\">
     <channel>
         <title>Hello Blog</title>
         <link>https://docusaurus.io/myBaseUrl/blog</link>
         <description>Hello Blog</description>
-        <lastBuildDate>Sun, 16 Aug 2020 00:00:00 GMT</lastBuildDate>
+        <lastBuildDate>Fri, 05 Mar 2021 00:00:00 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>https://github.com/jpmonette/feed</generator>
         <copyright>Copyright</copyright>
+        <item>
+            <title><![CDATA[Full Blog Sample]]></title>
+            <link>https://docusaurus.io/myBaseUrl/blog/mdx-blog-post</link>
+            <guid>Full Blog Sample</guid>
+            <pubDate>Fri, 05 Mar 2021 00:00:00 GMT</pubDate>
+            <description><![CDATA[HTML Heading 1]]></description>
+            <content:encoded><![CDATA[<h1>HTML Heading 1</h1><h2>HTML Heading 2</h2><p>HTML Paragraph</p><div>Import DOM</div><h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><ul><li>list1</li><li>list2</li><li>list3</li></ul><ul><li>list1</li><li>list2</li><li>list3</li></ul><p>Normal Text <em>Italics Text</em> <strong>Bold Text</strong></p><p><a href=\\"https://v2.docusaurus.io/\\">link</a>
+<img src=\\"https://v2.docusaurus.io/\\" alt=\\"image\\"/></p>]]></content:encoded>
+        </item>
         <item>
             <title><![CDATA[Complex Slug]]></title>
             <link>https://docusaurus.io/myBaseUrl/blog/hey/my super path/héllô</link>
             <guid>/hey/my super path/héllô</guid>
             <pubDate>Sun, 16 Aug 2020 00:00:00 GMT</pubDate>
             <description><![CDATA[complex url slug]]></description>
+            <content:encoded><![CDATA[<p>complex url slug</p>]]></content:encoded>
         </item>
         <item>
             <title><![CDATA[Simple Slug]]></title>
             <link>https://docusaurus.io/myBaseUrl/blog/simple/slug</link>
             <guid>/simple/slug</guid>
             <pubDate>Sat, 15 Aug 2020 00:00:00 GMT</pubDate>
             <description><![CDATA[simple url slug]]></description>
+            <content:encoded><![CDATA[<p>simple url slug</p>]]></content:encoded>
         </item>
         <item>
             <title><![CDATA[draft]]></title>
             <link>https://docusaurus.io/myBaseUrl/blog/draft</link>
             <guid>draft</guid>
             <pubDate>Thu, 27 Feb 2020 00:00:00 GMT</pubDate>
             <description><![CDATA[this post should not be published yet]]></description>
+            <content:encoded><![CDATA[<p>this post should not be published yet</p>]]></content:encoded>
         </item>
         <item>
             <title><![CDATA[some heading]]></title>
@@ -113,13 +139,15 @@ exports[`blogFeed rss shows feed item for each post 1`] = `
             <guid>date-matter</guid>
             <pubDate>Tue, 01 Jan 2019 00:00:00 GMT</pubDate>
             <description><![CDATA[date inside front matter]]></description>
+            <content:encoded><![CDATA[<p>date inside front matter</p>]]></content:encoded>
         </item>
         <item>
             <title><![CDATA[Happy 1st Birthday Slash! (translated)]]></title>
             <link>https://docusaurus.io/myBaseUrl/blog/2018/12/14/Happy-First-Birthday-Slash</link>
             <guid>Happy 1st Birthday Slash! (translated)</guid>
             <pubDate>Fri, 14 Dec 2018 00:00:00 GMT</pubDate>
             <description><![CDATA[Happy birthday! (translated)]]></description>
+            <content:encoded><![CDATA[<p>Happy birthday! (translated)</p>]]></content:encoded>
         </item>
     </channel>
 </rss>"

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

@@ -246,23 +246,26 @@ describe('loadBlog', () => {
   test('simple website blog dates localized', async () => {
     const siteDir = path.join(__dirname, '__fixtures__', 'website');
     const blogPostsFrench = await getBlogPosts(siteDir, {}, getI18n('fr'));
-    expect(blogPostsFrench).toHaveLength(6);
+    expect(blogPostsFrench).toHaveLength(7);
     expect(blogPostsFrench[0].metadata.formattedDate).toMatchInlineSnapshot(
-      `"16 août 2020"`,
+      `"5 mars 2021"`,
     );
     expect(blogPostsFrench[1].metadata.formattedDate).toMatchInlineSnapshot(
-      `"15 août 2020"`,
+      `"16 août 2020"`,
     );
     expect(blogPostsFrench[2].metadata.formattedDate).toMatchInlineSnapshot(
-      `"27 février 2020"`,
+      `"15 août 2020"`,
     );
     expect(blogPostsFrench[3].metadata.formattedDate).toMatchInlineSnapshot(
-      `"2 janvier 2019"`,
+      `"27 février 2020"`,
     );
     expect(blogPostsFrench[4].metadata.formattedDate).toMatchInlineSnapshot(
-      `"1 janvier 2019"`,
+      `"2 janvier 2019"`,
     );
     expect(blogPostsFrench[5].metadata.formattedDate).toMatchInlineSnapshot(
+      `"1 janvier 2019"`,
+    );
+    expect(blogPostsFrench[6].metadata.formattedDate).toMatchInlineSnapshot(
       `"14 décembre 2018"`,
     );
   });
@@ -292,7 +295,7 @@ describe('loadBlog', () => {
       expect(blogPost.metadata.editUrl).toEqual(hardcodedEditUrl);
     });
 
-    expect(editUrlFunction).toHaveBeenCalledTimes(6);
+    expect(editUrlFunction).toHaveBeenCalledTimes(7);
     expect(editUrlFunction).toHaveBeenCalledWith({
       blogDirPath: 'blog',
       blogPath: 'date-matter.md',
@@ -305,6 +308,12 @@ describe('loadBlog', () => {
       permalink: '/blog/draft',
       locale: 'en',
     });
+    expect(editUrlFunction).toHaveBeenCalledWith({
+      blogDirPath: 'blog',
+      blogPath: 'mdx-blog-post.mdx',
+      permalink: '/blog/mdx-blog-post',
+      locale: 'en',
+    });
     expect(editUrlFunction).toHaveBeenCalledWith({
       blogDirPath: 'blog',
       blogPath: 'complex-slug.md',

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

@@ -26,6 +26,7 @@ import {
   getEditUrl,
   getFolderContainingFile,
   posixPath,
+  mdxToHtml,
   replaceMarkdownLinks,
   Globby,
   normalizeFrontMatterTags,
@@ -155,6 +156,7 @@ export async function generateBlogFeed(
       link: normalizeUrl([siteUrl, permalink]),
       date,
       description,
+      content: mdxToHtml(post.content),
       author: authors.map(toFeedAuthor),
     });
   });
@@ -292,6 +294,7 @@ async function processBlogSourceFile(
       truncated: truncateMarker?.test(content) || false,
       authors,
     },
+    content,
   };
 }
 

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

@@ -554,19 +554,17 @@ export default function pluginContentBlog(
       }
 
       const feedTypes = options.feedOptions.type;
-      const {
-        siteConfig: {title},
-      } = context;
+      const feedTitle = options.feedOptions.title ?? context.siteConfig.title;
       const feedsConfig = {
         rss: {
           type: 'application/rss+xml',
           path: 'rss.xml',
-          title: `${title} Blog RSS Feed`,
+          title: `${feedTitle} RSS Feed`,
         },
         atom: {
           type: 'application/atom+xml',
           path: 'atom.xml',
-          title: `${title} Blog Atom Feed`,
+          title: `${feedTitle} Atom Feed`,
         },
       };
       const headTags: HtmlTags = [];

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

@@ -97,6 +97,7 @@ export interface BlogTag {
 export interface BlogPost {
   id: string;
   metadata: MetaData;
+  content: string;
 }
 
 export interface BlogPaginatedMetadata {

packages/docusaurus-utils/package.json

@@ -19,6 +19,7 @@
   "license": "MIT",
   "dependencies": {
     "@docusaurus/types": "2.0.0-beta.6",
+    "@mdx-js/runtime": "^1.6.22",
     "@types/github-slugger": "^1.3.0",
     "chalk": "^4.1.2",
     "escape-string-regexp": "^4.0.0",
@@ -27,6 +28,8 @@
     "gray-matter": "^4.0.3",
     "lodash": "^4.17.20",
     "micromatch": "^4.0.4",
+    "remark-mdx-remove-imports": "^1.6.22",
+    "remark-mdx-remove-exports": "^1.6.22",
     "resolve-pathname": "^3.0.0",
     "tslib": "^2.3.1"
   },
@@ -36,6 +39,11 @@
   "devDependencies": {
     "@types/dedent": "^0.7.0",
     "@types/micromatch": "^4.0.2",
+    "@types/react-dom": "^17.0.1",
     "dedent": "^0.7.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
   }
 }