From 3cbce4ffde0ad310615082355a9845a0f37c2ba5 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Thu, 25 Feb 2021 16:49:01 +0800 Subject: [PATCH 01/15] feat(v2): add full content into feeds --- .../__fixtures__/website/blog/long-text-r.md | 15 +++++++++++++++ .../src/blogUtils.ts | 2 ++ .../docusaurus-plugin-content-blog/src/types.ts | 1 + 3 files changed, 18 insertions(+) create mode 100644 packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/blog/long-text-r.md diff --git a/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/blog/long-text-r.md b/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/blog/long-text-r.md new file mode 100644 index 000000000000..28a2337aaaab --- /dev/null +++ b/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/blog/long-text-r.md @@ -0,0 +1,15 @@ +--- +title: Long Text +date: 2021-02-25 +--- + +Elit irure et ullamco est reprehenderit sint labore incididunt officia voluptate adipisicing occaecat sit. Id aliqua pariatur Lorem nulla dolor ad non nostrud excepteur sint anim officia minim. Aliqua elit est occaecat et ut sit minim. Laboris cupidatat anim ea ipsum esse pariatur. Consequat anim fugiat voluptate laboris elit mollit in dolor laborum. +Commodo laborum aliquip eu id aute occaecat adipisicing nisi incididunt officia sit est. Enim sit exercitation laboris deserunt sunt dolore aliquip laboris anim quis pariatur ipsum. Aute duis eiusmod id occaecat. +Anim do qui ut cillum reprehenderit veniam irure nisi duis voluptate. Esse amet non sint magna consectetur duis veniam incididunt reprehenderit. Amet do tempor mollit laboris nulla. Commodo excepteur dolor consectetur quis consectetur aute excepteur occaecat minim mollit. +Occaecat id ad proident velit magna elit incididunt adipisicing sunt reprehenderit exercitation reprehenderit. Dolor occaecat cillum consectetur veniam enim Lorem magna tempor sunt. Cupidatat duis aliqua adipisicing nulla voluptate dolore in labore proident esse excepteur culpa. Ullamco qui incididunt reprehenderit Lorem. Incididunt ipsum incididunt aliquip sunt sint eiusmod nisi Lorem. Esse est eu consectetur ex enim proident est cupidatat. +In anim mollit fugiat aliqua est. Consectetur labore voluptate reprehenderit ea. Consequat consectetur dolore aute id fugiat. Ex nisi nulla quis ex sit adipisicing et non aliquip cupidatat incididunt amet. Do nostrud cupidatat mollit minim labore nostrud amet. Cillum proident laborum dolor irure ut eiusmod deserunt minim. +Eiusmod occaecat consectetur dolore tempor officia nisi veniam incididunt ex eiusmod mollit excepteur aliquip incididunt. Occaecat consequat velit esse enim aute in. Minim culpa aliqua tempor incididunt sint amet excepteur quis deserunt. Laborum pariatur non labore enim dolor. Occaecat deserunt ullamco do labore nostrud consequat. +Ex nisi nostrud dolor esse cillum sunt do amet excepteur quis. Commodo tempor eu Lorem adipisicing laborum in anim do ut. Et ad duis proident do deserunt duis do eu enim nostrud fugiat veniam nostrud. Excepteur officia pariatur nostrud magna enim quis proident nisi minim cillum. Elit adipisicing voluptate excepteur esse consequat sunt nulla nostrud ut consectetur. Anim non consequat voluptate ipsum mollit veniam aliqua mollit anim. Aute ad aliquip veniam dolor duis veniam nostrud. +Veniam fugiat aliquip dolor id esse ad reprehenderit sint irure sit sint esse. Aute proident magna ipsum duis ullamco aute enim veniam tempor officia cupidatat aliqua. Pariatur aliqua proident sit in non non cupidatat excepteur amet ea anim sit do pariatur. Eiusmod in nisi consequat velit dolore. Reprehenderit mollit est in consectetur consectetur dolor id labore laborum sunt ullamco minim ullamco. Pariatur eiusmod consequat pariatur culpa occaecat deserunt irure. +Non fugiat pariatur ad sint mollit. In nulla est irure anim ea laborum irure incididunt. Laborum do culpa cupidatat do anim dolore. Non laborum ipsum et proident id non nostrud consectetur reprehenderit proident dolore nulla eiusmod quis. +Irure ea excepteur labore quis esse cillum officia cupidatat cupidatat. Aute amet exercitation aute ullamco culpa dolor labore anim aliqua incididunt cupidatat elit anim. Incididunt consectetur id nulla incididunt dolore cupidatat non cillum magna in sit veniam. In labore adipisicing labore est aute culpa nostrud consectetur ut sint consectetur esse commodo. Sint proident reprehenderit aliquip Lorem laboris ipsum laborum duis irure non sint. Esse dolor dolore non nostrud consequat aute culpa cillum consectetur ipsum. Qui fugiat amet commodo proident id ea ad pariatur dolor qui in. diff --git a/packages/docusaurus-plugin-content-blog/src/blogUtils.ts b/packages/docusaurus-plugin-content-blog/src/blogUtils.ts index b5384dc19037..5fd5743d2ba1 100644 --- a/packages/docusaurus-plugin-content-blog/src/blogUtils.ts +++ b/packages/docusaurus-plugin-content-blog/src/blogUtils.ts @@ -93,6 +93,7 @@ export async function generateBlogFeed( link: normalizeUrl([siteUrl, permalink]), date, description, + content: post.content }); }); @@ -231,6 +232,7 @@ export async function generateBlogPosts( : undefined, truncated: truncateMarker?.test(content) || false, }, + content, }); }), ); diff --git a/packages/docusaurus-plugin-content-blog/src/types.ts b/packages/docusaurus-plugin-content-blog/src/types.ts index 182c977d0cfe..80b423bbeba4 100644 --- a/packages/docusaurus-plugin-content-blog/src/types.ts +++ b/packages/docusaurus-plugin-content-blog/src/types.ts @@ -82,6 +82,7 @@ export interface BlogTag { export interface BlogPost { id: string; metadata: MetaData; + content: string; } export interface BlogPaginatedMetadata { From e26fbebc22c7a945b2ff55dda31d43d9f0824c72 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Wed, 3 Mar 2021 10:23:40 +0800 Subject: [PATCH 02/15] refactor(v2): update rss testcase --- .../generateBlogFeed.test.ts.snap | 62 ++++++++++++++++++- .../src/__tests__/index.test.ts | 8 ++- 2 files changed, 66 insertions(+), 4 deletions(-) diff --git a/packages/docusaurus-plugin-content-blog/src/__tests__/__snapshots__/generateBlogFeed.test.ts.snap b/packages/docusaurus-plugin-content-blog/src/__tests__/__snapshots__/generateBlogFeed.test.ts.snap index a31366164741..235320ebee6f 100644 --- a/packages/docusaurus-plugin-content-blog/src/__tests__/__snapshots__/generateBlogFeed.test.ts.snap +++ b/packages/docusaurus-plugin-content-blog/src/__tests__/__snapshots__/generateBlogFeed.test.ts.snap @@ -19,18 +19,40 @@ exports[`blogFeed atom shows feed item for each post 1`] = ` https://docusaurus.io/blog Hello Blog - 2020-02-27T00:00:00.000Z + 2021-02-25T00:00:00.000Z https://github.com/jpmonette/feed Hello Blog https://docusaurus.io/image/favicon.ico Copyright + + <![CDATA[Long Text]]> + Long Text + + 2021-02-25T00:00:00.000Z + + + <![CDATA[draft]]> draft 2020-02-27T00:00:00.000Z + <![CDATA[date-matter]]> @@ -38,6 +60,9 @@ exports[`blogFeed atom shows feed item for each post 1`] = ` 2019-01-01T00:00:00.000Z + <![CDATA[Happy 1st Birthday Slash! (translated)]]> @@ -45,6 +70,9 @@ exports[`blogFeed atom shows feed item for each post 1`] = ` 2018-12-14T00:00:00.000Z + " `; @@ -66,21 +94,43 @@ exports[`blogFeed rss can show feed without posts 1`] = ` exports[`blogFeed rss shows feed item for each post 1`] = ` " - + Hello Blog https://docusaurus.io/blog Hello Blog - Thu, 27 Feb 2020 00:00:00 GMT + Thu, 25 Feb 2021 00:00:00 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed Copyright + + <![CDATA[Long Text]]> + https://docusaurus.io/blog/long-text-r + Long Text + Thu, 25 Feb 2021 00:00:00 GMT + + + <![CDATA[draft]]> https://docusaurus.io/blog/draft draft Thu, 27 Feb 2020 00:00:00 GMT + <![CDATA[date-matter]]> @@ -88,6 +138,9 @@ exports[`blogFeed rss shows feed item for each post 1`] = ` date-matter Tue, 01 Jan 2019 00:00:00 GMT + <![CDATA[Happy 1st Birthday Slash! (translated)]]> @@ -95,6 +148,9 @@ exports[`blogFeed rss shows feed item for each post 1`] = ` Happy 1st Birthday Slash! (translated) Fri, 14 Dec 2018 00:00:00 GMT + " diff --git a/packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts b/packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts index 7d797832d622..ec3b1ac0eef9 100644 --- a/packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts +++ b/packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts @@ -210,7 +210,7 @@ describe('loadBlog', () => { expect(blogPost.metadata.editUrl).toEqual(hardcodedEditUrl); }); - expect(editUrlFunction).toHaveBeenCalledTimes(5); + expect(editUrlFunction).toHaveBeenCalledTimes(6); expect(editUrlFunction).toHaveBeenCalledWith({ blogDirPath: 'blog', blogPath: 'date-matter.md', @@ -223,6 +223,12 @@ describe('loadBlog', () => { permalink: '/blog/draft', locale: 'en', }); + expect(editUrlFunction).toHaveBeenCalledWith({ + blogDirPath: 'blog', + blogPath: 'long-text-r.md', + permalink: '/blog/long-text-r', + locale: 'en', + }); expect(editUrlFunction).toHaveBeenCalledWith({ blogDirPath: 'blog', blogPath: 'complex-slug.md', From f6788e31e4326521d6fa8bb29e1839170e779bd3 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Fri, 5 Mar 2021 10:19:30 +0800 Subject: [PATCH 03/15] refactor(v2): add rss html tag and custom component support --- .../__fixtures__/component/Typography.tsx | 6 ++ .../__fixtures__/website/blog/full-r.mdx | 36 +++++++++ .../__fixtures__/website/blog/long-text-r.md | 15 ---- .../generateBlogFeed.test.ts.snap | 76 ++++++------------- .../src/blogUtils.ts | 7 +- packages/docusaurus-utils/index.d.ts | 9 +++ packages/docusaurus-utils/package.json | 7 ++ packages/docusaurus-utils/src/index.ts | 20 +++++ packages/docusaurus-utils/src/types.ts | 10 +++ 9 files changed, 114 insertions(+), 72 deletions(-) create mode 100644 packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/component/Typography.tsx create mode 100644 packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/blog/full-r.mdx delete mode 100644 packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/blog/long-text-r.md create mode 100644 packages/docusaurus-utils/index.d.ts create mode 100644 packages/docusaurus-utils/src/types.ts diff --git a/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/component/Typography.tsx b/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/component/Typography.tsx new file mode 100644 index 000000000000..0f51f881aa5c --- /dev/null +++ b/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

{props.children}

+} +Typography.displayName = 'Typography' diff --git a/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/blog/full-r.mdx b/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/blog/full-r.mdx new file mode 100644 index 000000000000..966e8cbce018 --- /dev/null +++ b/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/blog/full-r.mdx @@ -0,0 +1,36 @@ +--- +title: Full Blog Sample +date: 2021-03-05 +--- + +

HTML Heading 1

+

HTML Heading 2

+

HTML Paragraph

+ +import Typography from '../../component/Typography' + +Import DOM + +# 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/) diff --git a/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/blog/long-text-r.md b/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/blog/long-text-r.md deleted file mode 100644 index 28a2337aaaab..000000000000 --- a/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/blog/long-text-r.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Long Text -date: 2021-02-25 ---- - -Elit irure et ullamco est reprehenderit sint labore incididunt officia voluptate adipisicing occaecat sit. Id aliqua pariatur Lorem nulla dolor ad non nostrud excepteur sint anim officia minim. Aliqua elit est occaecat et ut sit minim. Laboris cupidatat anim ea ipsum esse pariatur. Consequat anim fugiat voluptate laboris elit mollit in dolor laborum. -Commodo laborum aliquip eu id aute occaecat adipisicing nisi incididunt officia sit est. Enim sit exercitation laboris deserunt sunt dolore aliquip laboris anim quis pariatur ipsum. Aute duis eiusmod id occaecat. -Anim do qui ut cillum reprehenderit veniam irure nisi duis voluptate. Esse amet non sint magna consectetur duis veniam incididunt reprehenderit. Amet do tempor mollit laboris nulla. Commodo excepteur dolor consectetur quis consectetur aute excepteur occaecat minim mollit. -Occaecat id ad proident velit magna elit incididunt adipisicing sunt reprehenderit exercitation reprehenderit. Dolor occaecat cillum consectetur veniam enim Lorem magna tempor sunt. Cupidatat duis aliqua adipisicing nulla voluptate dolore in labore proident esse excepteur culpa. Ullamco qui incididunt reprehenderit Lorem. Incididunt ipsum incididunt aliquip sunt sint eiusmod nisi Lorem. Esse est eu consectetur ex enim proident est cupidatat. -In anim mollit fugiat aliqua est. Consectetur labore voluptate reprehenderit ea. Consequat consectetur dolore aute id fugiat. Ex nisi nulla quis ex sit adipisicing et non aliquip cupidatat incididunt amet. Do nostrud cupidatat mollit minim labore nostrud amet. Cillum proident laborum dolor irure ut eiusmod deserunt minim. -Eiusmod occaecat consectetur dolore tempor officia nisi veniam incididunt ex eiusmod mollit excepteur aliquip incididunt. Occaecat consequat velit esse enim aute in. Minim culpa aliqua tempor incididunt sint amet excepteur quis deserunt. Laborum pariatur non labore enim dolor. Occaecat deserunt ullamco do labore nostrud consequat. -Ex nisi nostrud dolor esse cillum sunt do amet excepteur quis. Commodo tempor eu Lorem adipisicing laborum in anim do ut. Et ad duis proident do deserunt duis do eu enim nostrud fugiat veniam nostrud. Excepteur officia pariatur nostrud magna enim quis proident nisi minim cillum. Elit adipisicing voluptate excepteur esse consequat sunt nulla nostrud ut consectetur. Anim non consequat voluptate ipsum mollit veniam aliqua mollit anim. Aute ad aliquip veniam dolor duis veniam nostrud. -Veniam fugiat aliquip dolor id esse ad reprehenderit sint irure sit sint esse. Aute proident magna ipsum duis ullamco aute enim veniam tempor officia cupidatat aliqua. Pariatur aliqua proident sit in non non cupidatat excepteur amet ea anim sit do pariatur. Eiusmod in nisi consequat velit dolore. Reprehenderit mollit est in consectetur consectetur dolor id labore laborum sunt ullamco minim ullamco. Pariatur eiusmod consequat pariatur culpa occaecat deserunt irure. -Non fugiat pariatur ad sint mollit. In nulla est irure anim ea laborum irure incididunt. Laborum do culpa cupidatat do anim dolore. Non laborum ipsum et proident id non nostrud consectetur reprehenderit proident dolore nulla eiusmod quis. -Irure ea excepteur labore quis esse cillum officia cupidatat cupidatat. Aute amet exercitation aute ullamco culpa dolor labore anim aliqua incididunt cupidatat elit anim. Incididunt consectetur id nulla incididunt dolore cupidatat non cillum magna in sit veniam. In labore adipisicing labore est aute culpa nostrud consectetur ut sint consectetur esse commodo. Sint proident reprehenderit aliquip Lorem laboris ipsum laborum duis irure non sint. Esse dolor dolore non nostrud consequat aute culpa cillum consectetur ipsum. Qui fugiat amet commodo proident id ea ad pariatur dolor qui in. diff --git a/packages/docusaurus-plugin-content-blog/src/__tests__/__snapshots__/generateBlogFeed.test.ts.snap b/packages/docusaurus-plugin-content-blog/src/__tests__/__snapshots__/generateBlogFeed.test.ts.snap index 235320ebee6f..f43b66cac3b8 100644 --- a/packages/docusaurus-plugin-content-blog/src/__tests__/__snapshots__/generateBlogFeed.test.ts.snap +++ b/packages/docusaurus-plugin-content-blog/src/__tests__/__snapshots__/generateBlogFeed.test.ts.snap @@ -19,30 +19,20 @@ exports[`blogFeed atom shows feed item for each post 1`] = ` https://docusaurus.io/blog Hello Blog - 2021-02-25T00:00:00.000Z + 2021-03-05T00:00:00.000Z https://github.com/jpmonette/feed Hello Blog https://docusaurus.io/image/favicon.ico Copyright - <![CDATA[Long Text]]> - Long Text - - 2021-02-25T00:00:00.000Z - - + <![CDATA[Full Blog Sample]]> + Full Blog Sample + + 2021-03-05T00:00:00.000Z + + HTML Heading 1

HTML Heading 2

HTML Paragraph

Import DOM

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
  • list1
  • list2
  • list3
  • list1
  • list2
  • list3

Normal Text Italics Text Bold Text

link +\\"image\\"/

]]> <![CDATA[draft]]> @@ -50,9 +40,7 @@ Irure ea excepteur labore quis esse cillum officia cupidatat cupidatat. Aute ame 2020-02-27T00:00:00.000Z - + this post should not be published yet

]]> <![CDATA[date-matter]]> @@ -60,9 +48,7 @@ this post should not be published yet 2019-01-01T00:00:00.000Z - + date inside front matter

]]> <![CDATA[Happy 1st Birthday Slash! (translated)]]> @@ -70,9 +56,7 @@ date inside front matter 2018-12-14T00:00:00.000Z - + Happy birthday! (translated)

]]> " `; @@ -99,28 +83,18 @@ exports[`blogFeed rss shows feed item for each post 1`] = ` Hello Blog https://docusaurus.io/blog Hello Blog - Thu, 25 Feb 2021 00:00:00 GMT + Fri, 05 Mar 2021 00:00:00 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed Copyright - <![CDATA[Long Text]]> - https://docusaurus.io/blog/long-text-r - Long Text - Thu, 25 Feb 2021 00:00:00 GMT - - + <![CDATA[Full Blog Sample]]> + https://docusaurus.io/blog/full-r + Full Blog Sample + Fri, 05 Mar 2021 00:00:00 GMT + + HTML Heading 1

HTML Heading 2

HTML Paragraph

Import DOM

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
  • list1
  • list2
  • list3
  • list1
  • list2
  • list3

Normal Text Italics Text Bold Text

link +\\"image\\"/

]]> <![CDATA[draft]]> @@ -128,9 +102,7 @@ Irure ea excepteur labore quis esse cillum officia cupidatat cupidatat. Aute ame draft Thu, 27 Feb 2020 00:00:00 GMT - + this post should not be published yet

]]> <![CDATA[date-matter]]> @@ -138,9 +110,7 @@ this post should not be published yet date-matter Tue, 01 Jan 2019 00:00:00 GMT - + date inside front matter

]]> <![CDATA[Happy 1st Birthday Slash! (translated)]]> @@ -148,9 +118,7 @@ date inside front matter Happy 1st Birthday Slash! (translated) Fri, 14 Dec 2018 00:00:00 GMT - + Happy birthday! (translated)

]]> " diff --git a/packages/docusaurus-plugin-content-blog/src/blogUtils.ts b/packages/docusaurus-plugin-content-blog/src/blogUtils.ts index 5fd5743d2ba1..a046eb49c574 100644 --- a/packages/docusaurus-plugin-content-blog/src/blogUtils.ts +++ b/packages/docusaurus-plugin-content-blog/src/blogUtils.ts @@ -28,6 +28,7 @@ import { getFolderContainingFile, posixPath, getDateTimeFormat, + mdxToHtml, } from '@docusaurus/utils'; import {LoadContext} from '@docusaurus/types'; import {keyBy} from 'lodash'; @@ -82,7 +83,7 @@ export async function generateBlogFeed( copyright: feedOptions.copyright, }); - blogPosts.forEach((post) => { + for (const post of blogPosts) { const { id, metadata: {title: metadataTitle, permalink, date, description}, @@ -93,9 +94,9 @@ export async function generateBlogFeed( link: normalizeUrl([siteUrl, permalink]), date, description, - content: post.content + content: mdxToHtml(post.content), }); - }); + } return feed; } diff --git a/packages/docusaurus-utils/index.d.ts b/packages/docusaurus-utils/index.d.ts new file mode 100644 index 000000000000..795cfb868cac --- /dev/null +++ b/packages/docusaurus-utils/index.d.ts @@ -0,0 +1,9 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +declare module '@mdx-js/runtime'; +declare module 'remark-mdx-remove-imports'; diff --git a/packages/docusaurus-utils/package.json b/packages/docusaurus-utils/package.json index 72c2da667444..107a78a7bfba 100644 --- a/packages/docusaurus-utils/package.json +++ b/packages/docusaurus-utils/package.json @@ -20,6 +20,7 @@ "dependencies": { "@docusaurus/types": "2.0.0-alpha.70", "@types/github-slugger": "^1.3.0", + "@mdx-js/runtime": "^1.6.22", "chalk": "^4.1.0", "escape-string-regexp": "^4.0.0", "fs-extra": "^9.1.0", @@ -29,9 +30,15 @@ "lodash": "^4.17.20", "lodash.camelcase": "^4.3.0", "lodash.kebabcase": "^4.1.1", + "react": "^17.0.1", + "react-dom": "^17.0.1", + "remark-mdx-remove-imports": "^1.6.22", "resolve-pathname": "^3.0.0" }, "engines": { "node": ">=12.13.0" + }, + "devDependencies": { + "@types/react-dom": "^17.0.1" } } diff --git a/packages/docusaurus-utils/src/index.ts b/packages/docusaurus-utils/src/index.ts index adc92a863c7a..f4c27ae6a956 100644 --- a/packages/docusaurus-utils/src/index.ts +++ b/packages/docusaurus-utils/src/index.ts @@ -19,6 +19,11 @@ import { TranslationFileContent, TranslationFile, } from '@docusaurus/types'; +import React from 'react'; +import ReactDOMServer from 'react-dom/server'; +import MDX from '@mdx-js/runtime'; +import removeImports from 'remark-mdx-remove-imports'; +import {MDXToHtmlOptions} from './types'; // @ts-expect-error: no typedefs :s import resolvePathnameUnsafe from 'resolve-pathname'; @@ -662,3 +667,18 @@ export function parseMarkdownHeadingId( return {text: heading, id: undefined}; } } + +/** + * Transform mdx text to plain html text. + * Without import node + */ +export function mdxToHtml( + mdxStr: string, + options: MDXToHtmlOptions = {}, +): string { + return ReactDOMServer.renderToString( + React.createElement(MDX, {remarkPlugins: [removeImports], ...options}, [ + mdxStr, + ]), + ); +} diff --git a/packages/docusaurus-utils/src/types.ts b/packages/docusaurus-utils/src/types.ts new file mode 100644 index 000000000000..9d7ff6af8650 --- /dev/null +++ b/packages/docusaurus-utils/src/types.ts @@ -0,0 +1,10 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +export interface MDXToHtmlOptions { + remarkPlugins?: unknown[]; +} From 8f9b7887f1b1cd593b2e7c27b04a74b1e5bb8f34 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Fri, 5 Mar 2021 10:47:40 +0800 Subject: [PATCH 04/15] chore(v2): update yarn lockfile --- yarn.lock | 49 ++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 46 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 21db31167209..1d813d884d18 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2443,7 +2443,7 @@ stringify-entities "^3.0.1" stringify-object "^3.3.0" -"@mdx-js/mdx@^1.6.21": +"@mdx-js/mdx@1.6.22", "@mdx-js/mdx@^1.6.21": version "1.6.22" resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.22.tgz#8a723157bf90e78f17dc0f27995398e6c731f1ba" integrity sha512-AMxuLxPz2j5/6TpF/XSdKpQP1NlG0z11dFOlq+2IP/lSgl11GY8ji6S/rgsViN/L0BDvHvUMruRb7ub+24LUYA== @@ -2468,11 +2468,20 @@ unist-builder "2.0.3" unist-util-visit "2.0.3" -"@mdx-js/react@^1.5.8", "@mdx-js/react@^1.6.21": +"@mdx-js/react@1.6.22", "@mdx-js/react@^1.5.8", "@mdx-js/react@^1.6.21": version "1.6.22" resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.6.22.tgz#ae09b4744fddc74714ee9f9d6f17a66e77c43573" integrity sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg== +"@mdx-js/runtime@^1.6.22": + version "1.6.22" + resolved "https://registry.npmjs.org/@mdx-js/runtime/-/runtime-1.6.22.tgz#3edd388bf68a519ffa1aaf9c446b548165102345" + integrity sha512-p17spaO2+55VLCuxXA3LVHC4phRx60NR2XMdZ+qgVU1lKvEX4y88dmFNOzGDCPLJ03IZyKrJ/rPWWRiBrd9JrQ== + dependencies: + "@mdx-js/mdx" "1.6.22" + "@mdx-js/react" "1.6.22" + buble-jsx-only "^0.19.8" + "@mdx-js/util@1.6.22": version "1.6.22" resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.6.22.tgz#219dfd89ae5b97a8801f015323ffa4b62f45718b" @@ -3661,6 +3670,13 @@ "@types/webpack" "*" "@types/webpack-dev-server" "*" +"@types/react-dom@^17.0.1": + version "17.0.1" + resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.1.tgz#d92d77d020bfb083e07cc8e0ac9f933599a4d56a" + integrity sha512-yIVyopxQb8IDZ7SOHeTovurFq+fXiPICa+GV3gp0Xedsl+MwQlMLKmvrnEjFbQxjliH5YVAEWFh975eVNmKj7Q== + dependencies: + "@types/react" "*" + "@types/react-helmet@*", "@types/react-helmet@^6.0.0": version "6.1.0" resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.0.tgz#af586ed685f4905e2adc7462d1d65ace52beee7a" @@ -5373,6 +5389,19 @@ btoa-lite@^1.0.0: resolved "https://registry.yarnpkg.com/btoa-lite/-/btoa-lite-1.0.0.tgz#337766da15801210fdd956c22e9c6891ab9d0337" integrity sha1-M3dm2hWAEhD92VbCLpxokaudAzc= +buble-jsx-only@^0.19.8: + version "0.19.8" + resolved "https://registry.npmjs.org/buble-jsx-only/-/buble-jsx-only-0.19.8.tgz#6e3524aa0f1c523de32496ac9aceb9cc2b493867" + integrity sha512-7AW19pf7PrKFnGTEDzs6u9+JZqQwM1VnLS19OlqYDhXomtFFknnoQJAPHeg84RMFWAvOhYrG7harizJNwUKJsA== + dependencies: + acorn "^6.1.1" + acorn-dynamic-import "^4.0.0" + acorn-jsx "^5.0.1" + chalk "^2.4.2" + magic-string "^0.25.3" + minimist "^1.2.0" + regexpu-core "^4.5.4" + buble@0.19.6: version "0.19.6" resolved "https://registry.yarnpkg.com/buble/-/buble-0.19.6.tgz#915909b6bd5b11ee03b1c885ec914a8b974d34d3" @@ -13088,7 +13117,7 @@ macos-release@^2.2.0: resolved "https://registry.yarnpkg.com/macos-release/-/macos-release-2.3.0.tgz#eb1930b036c0800adebccd5f17bc4c12de8bb71f" integrity sha512-OHhSbtcviqMPt7yfw5ef5aghS2jzFVKEFyCJndQt2YpSQ9qRVSEv2axSJI1paVThEu+FFGs584h/1YhxjVqajA== -magic-string@^0.25.0, magic-string@^0.25.1, magic-string@^0.25.2, magic-string@^0.25.7: +magic-string@^0.25.0, magic-string@^0.25.1, magic-string@^0.25.2, magic-string@^0.25.3, magic-string@^0.25.7: version "0.25.7" resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051" integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA== @@ -17394,6 +17423,13 @@ remark-footnotes@2.0.0: resolved "https://registry.yarnpkg.com/remark-footnotes/-/remark-footnotes-2.0.0.tgz#9001c4c2ffebba55695d2dd80ffb8b82f7e6303f" integrity sha512-3Clt8ZMH75Ayjp9q4CorNeyjwIxHFcTkaektplKGl2A1jNGEUey8cKL0ZC5vJwfcD5GFGsNLImLG/NGzWIzoMQ== +remark-mdx-remove-imports@^1.6.22: + version "1.6.22" + resolved "https://registry.npmjs.org/remark-mdx-remove-imports/-/remark-mdx-remove-imports-1.6.22.tgz#79f711c95359cff437a120d1fbdc1326ec455826" + integrity sha512-lmjAXD8Ltw0TsvBzb45S+Dxx7LTJAtDaMneMAv8LAUIPEyYoKkmGbmVsiF0/pY6mhM1Q16swCmu1TN+ie/vn/A== + dependencies: + unist-util-remove "2.0.0" + remark-mdx@1.6.22, remark-mdx@^1.6.21: version "1.6.22" resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.6.22.tgz#06a8dab07dcfdd57f3373af7f86bd0e992108bbd" @@ -20100,6 +20136,13 @@ unist-util-remove-position@^3.0.0: dependencies: unist-util-visit "^2.0.0" +unist-util-remove@2.0.0: + version "2.0.0" + resolved "https://registry.npmjs.org/unist-util-remove/-/unist-util-remove-2.0.0.tgz#32c2ad5578802f2ca62ab808173d505b2c898488" + integrity sha512-HwwWyNHKkeg/eXRnE11IpzY8JT55JNM1YCwwU9YNCnfzk6s8GhPXrVBBZWiwLeATJbI7euvoGSzcy9M29UeW3g== + dependencies: + unist-util-is "^4.0.0" + unist-util-remove@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/unist-util-remove/-/unist-util-remove-2.0.1.tgz#fa13c424ff8e964f3aa20d1098b9a690c6bfaa39" From a7c40540c4836410c5d3d659ee823abee25ffffd Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Fri, 5 Mar 2021 11:00:14 +0800 Subject: [PATCH 05/15] test(v2): fix testcase error --- .../src/__tests__/index.test.ts | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts b/packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts index ec3b1ac0eef9..5cf49b4ff639 100644 --- a/packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts +++ b/packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts @@ -167,20 +167,23 @@ 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(5); + expect(blogPostsFrench).toHaveLength(6); 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( - `"1 janvier 2019"`, + `"27 février 2020"`, ); expect(blogPostsFrench[4].metadata.formattedDate).toMatchInlineSnapshot( + `"1 janvier 2019"`, + ); + expect(blogPostsFrench[5].metadata.formattedDate).toMatchInlineSnapshot( `"14 décembre 2018"`, ); }); @@ -225,8 +228,8 @@ describe('loadBlog', () => { }); expect(editUrlFunction).toHaveBeenCalledWith({ blogDirPath: 'blog', - blogPath: 'long-text-r.md', - permalink: '/blog/long-text-r', + blogPath: 'full-r.mdx', + permalink: '/blog/full-r', locale: 'en', }); expect(editUrlFunction).toHaveBeenCalledWith({ From 6d9942fe980bb2c8c85b94d584aeadd1bff47c26 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Sun, 7 Mar 2021 18:34:23 +0800 Subject: [PATCH 06/15] chore: @docusaurus/utils: move react and react-dom to peerDependencies --- packages/docusaurus-utils/package.json | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/docusaurus-utils/package.json b/packages/docusaurus-utils/package.json index 107a78a7bfba..c6ff40f857b7 100644 --- a/packages/docusaurus-utils/package.json +++ b/packages/docusaurus-utils/package.json @@ -19,8 +19,8 @@ "license": "MIT", "dependencies": { "@docusaurus/types": "2.0.0-alpha.70", - "@types/github-slugger": "^1.3.0", "@mdx-js/runtime": "^1.6.22", + "@types/github-slugger": "^1.3.0", "chalk": "^4.1.0", "escape-string-regexp": "^4.0.0", "fs-extra": "^9.1.0", @@ -30,8 +30,6 @@ "lodash": "^4.17.20", "lodash.camelcase": "^4.3.0", "lodash.kebabcase": "^4.1.1", - "react": "^17.0.1", - "react-dom": "^17.0.1", "remark-mdx-remove-imports": "^1.6.22", "resolve-pathname": "^3.0.0" }, @@ -40,5 +38,9 @@ }, "devDependencies": { "@types/react-dom": "^17.0.1" + }, + "peerDependencies": { + "react": "^17.0.1", + "react-dom": "^17.0.1" } } From c7b29046ac2db657f423c3aab8d3c6fb75749655 Mon Sep 17 00:00:00 2001 From: slorber Date: Thu, 7 Oct 2021 17:44:20 +0200 Subject: [PATCH 07/15] fix merge issues --- .../blog/{full-r.mdx => mdx-blog-post.mdx} | 0 .../generateBlogFeed.test.ts.snap | 154 ++++++++++++++++++ .../src/__tests__/index.test.ts | 14 +- 3 files changed, 162 insertions(+), 6 deletions(-) rename packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/blog/{full-r.mdx => mdx-blog-post.mdx} (100%) create mode 100644 packages/docusaurus-plugin-content-blog/src/__tests__/__snapshots__/generateBlogFeed.test.ts.snap diff --git a/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/blog/full-r.mdx b/packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/blog/mdx-blog-post.mdx similarity index 100% rename from packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/blog/full-r.mdx rename to packages/docusaurus-plugin-content-blog/src/__tests__/__fixtures__/website/blog/mdx-blog-post.mdx diff --git a/packages/docusaurus-plugin-content-blog/src/__tests__/__snapshots__/generateBlogFeed.test.ts.snap b/packages/docusaurus-plugin-content-blog/src/__tests__/__snapshots__/generateBlogFeed.test.ts.snap new file mode 100644 index 000000000000..8914514cebaa --- /dev/null +++ b/packages/docusaurus-plugin-content-blog/src/__tests__/__snapshots__/generateBlogFeed.test.ts.snap @@ -0,0 +1,154 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`blogFeed atom should not show feed without posts 1`] = `null`; + +exports[`blogFeed atom shows feed item for each post 1`] = ` +" + + https://docusaurus.io/myBaseUrl/blog + Hello Blog + 2021-03-05T00:00:00.000Z + https://github.com/jpmonette/feed + + Hello Blog + https://docusaurus.io/myBaseUrl/image/favicon.ico + Copyright + + <![CDATA[Full Blog Sample]]> + Full Blog Sample + + 2021-03-05T00:00:00.000Z + + HTML Heading 1

HTML Heading 2

HTML Paragraph

Import DOM

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
  • list1
  • list2
  • list3
  • list1
  • list2
  • list3

Normal Text Italics Text Bold Text

link +\\"image\\"/

]]> + + + <![CDATA[Complex Slug]]> + /hey/my super path/héllô + + 2020-08-16T00:00:00.000Z + + complex url slug

]]> + + + <![CDATA[Simple Slug]]> + /simple/slug + + 2020-08-15T00:00:00.000Z + + simple url slug

]]> + + Sébastien Lorber + https://sebastienlorber.com + + + + <![CDATA[draft]]> + draft + + 2020-02-27T00:00:00.000Z + + this post should not be published yet

]]> + + + <![CDATA[some heading]]> + some heading + + 2019-01-02T00:00:00.000Z + + + <![CDATA[date-matter]]> + date-matter + + 2019-01-01T00:00:00.000Z + + date inside front matter

]]> + + + <![CDATA[Happy 1st Birthday Slash! (translated)]]> + Happy 1st Birthday Slash! (translated) + + 2018-12-14T00:00:00.000Z + + Happy birthday! (translated)

]]> + + Yangshun Tay (translated) + + + Sébastien Lorber (translated) + + +" +`; + +exports[`blogFeed rss should not show feed without posts 1`] = `null`; + +exports[`blogFeed rss shows feed item for each post 1`] = ` +" + + + Hello Blog + https://docusaurus.io/myBaseUrl/blog + Hello Blog + Fri, 05 Mar 2021 00:00:00 GMT + https://validator.w3.org/feed/docs/rss2.html + https://github.com/jpmonette/feed + Copyright + + <![CDATA[Full Blog Sample]]> + https://docusaurus.io/myBaseUrl/blog/mdx-blog-post + Full Blog Sample + Fri, 05 Mar 2021 00:00:00 GMT + + HTML Heading 1

HTML Heading 2

HTML Paragraph

Import DOM

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
  • list1
  • list2
  • list3
  • list1
  • list2
  • list3

Normal Text Italics Text Bold Text

link +\\"image\\"/

]]> + + + <![CDATA[Complex Slug]]> + https://docusaurus.io/myBaseUrl/blog/hey/my super path/héllô + /hey/my super path/héllô + Sun, 16 Aug 2020 00:00:00 GMT + + complex url slug

]]> + + + <![CDATA[Simple Slug]]> + https://docusaurus.io/myBaseUrl/blog/simple/slug + /simple/slug + Sat, 15 Aug 2020 00:00:00 GMT + + simple url slug

]]> + + + <![CDATA[draft]]> + https://docusaurus.io/myBaseUrl/blog/draft + draft + Thu, 27 Feb 2020 00:00:00 GMT + + this post should not be published yet

]]> + + + <![CDATA[some heading]]> + https://docusaurus.io/myBaseUrl/blog/heading-as-title + some heading + Wed, 02 Jan 2019 00:00:00 GMT + + + <![CDATA[date-matter]]> + https://docusaurus.io/myBaseUrl/blog/date-matter + date-matter + Tue, 01 Jan 2019 00:00:00 GMT + + date inside front matter

]]> + + + <![CDATA[Happy 1st Birthday Slash! (translated)]]> + https://docusaurus.io/myBaseUrl/blog/2018/12/14/Happy-First-Birthday-Slash + Happy 1st Birthday Slash! (translated) + Fri, 14 Dec 2018 00:00:00 GMT + + Happy birthday! (translated)

]]> + + +" +`; diff --git a/packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts b/packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts index d75305984a94..238b4f04fef7 100644 --- a/packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts +++ b/packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts @@ -246,7 +246,7 @@ 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( `"5 mars 2021"`, ); @@ -258,12 +258,14 @@ describe('loadBlog', () => { ); expect(blogPostsFrench[3].metadata.formattedDate).toMatchInlineSnapshot( `"27 février 2020"`, - // `"2 janvier 2019"`, ); 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"`, ); }); @@ -293,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', @@ -308,8 +310,8 @@ describe('loadBlog', () => { }); expect(editUrlFunction).toHaveBeenCalledWith({ blogDirPath: 'blog', - blogPath: 'full-r.mdx', - permalink: '/blog/full-r', + blogPath: 'mdx-blog-post.mdx', + permalink: '/blog/mdx-blog-post', locale: 'en', }); expect(editUrlFunction).toHaveBeenCalledWith({ From 7eced09eb21082c7fe3550cfea0843aff95f16b8 Mon Sep 17 00:00:00 2001 From: slorber Date: Thu, 7 Oct 2021 18:00:47 +0200 Subject: [PATCH 08/15] create mdxUtils --- packages/docusaurus-utils/src/index.ts | 21 +-------------- packages/docusaurus-utils/src/mdxUtils.ts | 33 +++++++++++++++++++++++ 2 files changed, 34 insertions(+), 20 deletions(-) create mode 100644 packages/docusaurus-utils/src/mdxUtils.ts diff --git a/packages/docusaurus-utils/src/index.ts b/packages/docusaurus-utils/src/index.ts index ac12e77b73d7..cbba730789b1 100644 --- a/packages/docusaurus-utils/src/index.ts +++ b/packages/docusaurus-utils/src/index.ts @@ -17,11 +17,6 @@ import { TranslationFileContent, TranslationFile, } from '@docusaurus/types'; -import React from 'react'; -import ReactDOMServer from 'react-dom/server'; -import MDX from '@mdx-js/runtime'; -import removeImports from 'remark-mdx-remove-imports'; -import {MDXToHtmlOptions} from './types'; // @ts-expect-error: no typedefs :s import resolvePathnameUnsafe from 'resolve-pathname'; @@ -30,6 +25,7 @@ import {posixPath as posixPathImport} from './posixPath'; import {simpleHash, docuHash} from './hashUtils'; import {normalizeUrl} from './normalizeUrl'; +export * from './mdxUtils'; export * from './normalizeUrl'; export * from './tags'; @@ -447,18 +443,3 @@ export function parseMarkdownHeadingId(heading: string): { return {text: heading, id: undefined}; } } - -/** - * Transform mdx text to plain html text. - * Without import node - */ -export function mdxToHtml( - mdxStr: string, - options: MDXToHtmlOptions = {}, -): string { - return ReactDOMServer.renderToString( - React.createElement(MDX, {remarkPlugins: [removeImports], ...options}, [ - mdxStr, - ]), - ); -} diff --git a/packages/docusaurus-utils/src/mdxUtils.ts b/packages/docusaurus-utils/src/mdxUtils.ts new file mode 100644 index 000000000000..cbacaddf2f64 --- /dev/null +++ b/packages/docusaurus-utils/src/mdxUtils.ts @@ -0,0 +1,33 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import ReactDOMServer from 'react-dom/server'; +import MDX from '@mdx-js/runtime'; +import removeImports from 'remark-mdx-remove-imports'; + +type MDXToHtmlOptions = { + remarkPlugins?: unknown[]; +}; + +// TODO this was created to convert Docusaurus blog posts for the RSS feed +// The implementation won't work well in all cases +// Some MDX won't render correctly +/** + * Transform mdx text to plain html text. + * Without import node + */ +export function mdxToHtml( + mdxStr: string, + options: MDXToHtmlOptions = {}, +): string { + return ReactDOMServer.renderToString( + React.createElement(MDX, {remarkPlugins: [removeImports], ...options}, [ + mdxStr, + ]), + ); +} From 84369c1b389b414c263c7c61b2206775de302b8b Mon Sep 17 00:00:00 2001 From: slorber Date: Thu, 7 Oct 2021 18:01:30 +0200 Subject: [PATCH 09/15] add test MDX blog post --- .../2021-10-07-blog-post-mdx-tests.mdx | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 website/_dogfooding/_blog tests/2021-10-07-blog-post-mdx-tests.mdx diff --git a/website/_dogfooding/_blog tests/2021-10-07-blog-post-mdx-tests.mdx b/website/_dogfooding/_blog tests/2021-10-07-blog-post-mdx-tests.mdx new file mode 100644 index 000000000000..1a196ab0f6d3 --- /dev/null +++ b/website/_dogfooding/_blog tests/2021-10-07-blog-post-mdx-tests.mdx @@ -0,0 +1,26 @@ +--- +title: Blog post MDX tests +authors: + - slorber +--- + +Some MDX tests, mostly to test how the RSS feed render those + + + +```mdx-code-block +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + + This is an apple 🍎 + + + This is an orange 🍊 + + + This is a banana 🍌 + + +``` From 23b9bc4f9309c00357d86f150fd8ed3b6aad11a7 Mon Sep 17 00:00:00 2001 From: slorber Date: Thu, 7 Oct 2021 18:05:13 +0200 Subject: [PATCH 10/15] add test MDX blog post --- .../2021-10-07-blog-post-mdx-tests.mdx | 30 ++++++++++++++++--- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/website/_dogfooding/_blog tests/2021-10-07-blog-post-mdx-tests.mdx b/website/_dogfooding/_blog tests/2021-10-07-blog-post-mdx-tests.mdx index 1a196ab0f6d3..89c0381e348d 100644 --- a/website/_dogfooding/_blog tests/2021-10-07-blog-post-mdx-tests.mdx +++ b/website/_dogfooding/_blog tests/2021-10-07-blog-post-mdx-tests.mdx @@ -8,19 +8,41 @@ Some MDX tests, mostly to test how the RSS feed render those -```mdx-code-block +## Imports + +Here are some imports: + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +## Exports + +Here are some exports: + +export const someExport = 42; + +## Tabs test + +Here are some tabs: + - + This is an apple 🍎 This is an orange 🍊 - - This is a banana 🍌 + + +Here are some tabs, inside `mdx-code-block`: + +```mdx-code-block + + + This is an apple 🍎 + + + This is an orange 🍊 ``` From 9c513adb6d369d7291ef90fe196a74af830e5b92 Mon Sep 17 00:00:00 2001 From: slorber Date: Thu, 7 Oct 2021 18:06:02 +0200 Subject: [PATCH 11/15] add test MDX blog post --- ...st-mdx-tests.mdx => 2021-10-07-blog-post-mdx-feed-tests.mdx} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename website/_dogfooding/_blog tests/{2021-10-07-blog-post-mdx-tests.mdx => 2021-10-07-blog-post-mdx-feed-tests.mdx} (95%) diff --git a/website/_dogfooding/_blog tests/2021-10-07-blog-post-mdx-tests.mdx b/website/_dogfooding/_blog tests/2021-10-07-blog-post-mdx-feed-tests.mdx similarity index 95% rename from website/_dogfooding/_blog tests/2021-10-07-blog-post-mdx-tests.mdx rename to website/_dogfooding/_blog tests/2021-10-07-blog-post-mdx-feed-tests.mdx index 89c0381e348d..3c2511a7ebc0 100644 --- a/website/_dogfooding/_blog tests/2021-10-07-blog-post-mdx-tests.mdx +++ b/website/_dogfooding/_blog tests/2021-10-07-blog-post-mdx-feed-tests.mdx @@ -1,5 +1,5 @@ --- -title: Blog post MDX tests +title: Blog post MDX Feed tests authors: - slorber --- From 06b2257c9ba79ca179a6d49652cea6b9a4b00fb8 Mon Sep 17 00:00:00 2001 From: slorber Date: Thu, 7 Oct 2021 18:37:33 +0200 Subject: [PATCH 12/15] add tests for mdxUtils --- packages/docusaurus-utils/package.json | 1 + .../src/__tests__/mdxUtils.test.ts | 133 ++++++++++++++++++ .../{index.d.ts => src/dependencies.d.ts} | 3 + packages/docusaurus-utils/src/mdxUtils.ts | 24 ++-- packages/docusaurus-utils/src/types.ts | 10 -- yarn.lock | 7 + 6 files changed, 154 insertions(+), 24 deletions(-) create mode 100644 packages/docusaurus-utils/src/__tests__/mdxUtils.test.ts rename packages/docusaurus-utils/{index.d.ts => src/dependencies.d.ts} (76%) delete mode 100644 packages/docusaurus-utils/src/types.ts diff --git a/packages/docusaurus-utils/package.json b/packages/docusaurus-utils/package.json index b48a74c7c1f6..59a2e2c1b853 100644 --- a/packages/docusaurus-utils/package.json +++ b/packages/docusaurus-utils/package.json @@ -29,6 +29,7 @@ "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" }, diff --git a/packages/docusaurus-utils/src/__tests__/mdxUtils.test.ts b/packages/docusaurus-utils/src/__tests__/mdxUtils.test.ts new file mode 100644 index 000000000000..15e63d13226b --- /dev/null +++ b/packages/docusaurus-utils/src/__tests__/mdxUtils.test.ts @@ -0,0 +1,133 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import {mdxToHtml} from '../mdxUtils'; + +describe('mdxToHtml', () => { + test('work with simple markdown', () => { + const mdxString = ` +# title + +title text **bold** + +## subtitle + +subtitle text *italic* + +> Quote + + `; + + expect(mdxToHtml(mdxString)).toMatchInlineSnapshot( + `"

title

title text bold

subtitle

subtitle text italic

Quote

"`, + ); + }); + + test('work with MDX imports', () => { + const mdxString = ` +# title + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +text + + `; + + expect(mdxToHtml(mdxString)).toMatchInlineSnapshot( + `"

title

text

"`, + ); + }); + + test('work with MDX exports', () => { + const mdxString = ` +# title + +export const someExport = 42 + +export const MyLocalComponent = () => "result" + +export const toc = [ + {id: "title",label: "title"} +] + +text + + + `; + + expect(mdxToHtml(mdxString)).toMatchInlineSnapshot( + `"

title

text

"`, + ); + }); + + test('work with MDX Tabs', () => { + const mdxString = ` +# title + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + + This is an apple 🍎 + + + This is an orange 🍊 + + + +text + + + `; + + // TODO this is not an ideal behavior! + // There is a warning "Component TabItem was not imported, exported, or provided by MDXProvider as global scope" + // Theme + MDX config should provide a list of React components to put in MDX scope + expect(mdxToHtml(mdxString)).toMatchInlineSnapshot( + `"

title

This is an apple 🍎
This is an orange 🍊

text

"`, + ); + }); + + test('work with MDX Tabs with ```mdx-code-block', () => { + const mdxString = ` +# title + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +\`\`\`mdx-code-block + + + This is an apple 🍎 + + + This is an orange 🍊 + + +\`\`\` + +text + + `; + + // TODO bad behavior! + // ```mdx-code-block should be unwrapped and inner MDX content should be evaluated + expect(mdxToHtml(mdxString)).toMatchInlineSnapshot(` + "

title

<Tabs>
+        <TabItem value="apple" label="Apple">
+          This is an apple 🍎
+        </TabItem>
+        <TabItem value="orange" label="Orange">
+          This is an orange 🍊
+        </TabItem>
+      </Tabs>
+

text

" + `); + }); +}); diff --git a/packages/docusaurus-utils/index.d.ts b/packages/docusaurus-utils/src/dependencies.d.ts similarity index 76% rename from packages/docusaurus-utils/index.d.ts rename to packages/docusaurus-utils/src/dependencies.d.ts index 795cfb868cac..05f37c5549f1 100644 --- a/packages/docusaurus-utils/index.d.ts +++ b/packages/docusaurus-utils/src/dependencies.d.ts @@ -5,5 +5,8 @@ * LICENSE file in the root directory of this source tree. */ +// Dependencies with missing typedefs + declare module '@mdx-js/runtime'; declare module 'remark-mdx-remove-imports'; +declare module 'remark-mdx-remove-exports'; diff --git a/packages/docusaurus-utils/src/mdxUtils.ts b/packages/docusaurus-utils/src/mdxUtils.ts index cbacaddf2f64..6e7ac813491c 100644 --- a/packages/docusaurus-utils/src/mdxUtils.ts +++ b/packages/docusaurus-utils/src/mdxUtils.ts @@ -9,24 +9,20 @@ import React from 'react'; import ReactDOMServer from 'react-dom/server'; import MDX from '@mdx-js/runtime'; import removeImports from 'remark-mdx-remove-imports'; +import removeExports from 'remark-mdx-remove-exports'; -type MDXToHtmlOptions = { - remarkPlugins?: unknown[]; -}; - -// TODO this was created to convert Docusaurus blog posts for the RSS feed -// The implementation won't work well in all cases -// Some MDX won't render correctly /** - * Transform mdx text to plain html text. - * Without import node + * Transform mdx text to plain html text + * Initially created to convert MDX blog posts to HTML for the RSS feed + * without import/export nodes + * + * TODO not ideal implementation, won't work well with MDX elements! + * TODO theme+global site config should be able to declare MDX comps in scope for rendering the RSS feeds + * see also https://github.com/facebook/docusaurus/issues/4625 */ -export function mdxToHtml( - mdxStr: string, - options: MDXToHtmlOptions = {}, -): string { +export function mdxToHtml(mdxStr: string): string { return ReactDOMServer.renderToString( - React.createElement(MDX, {remarkPlugins: [removeImports], ...options}, [ + React.createElement(MDX, {remarkPlugins: [removeImports, removeExports]}, [ mdxStr, ]), ); diff --git a/packages/docusaurus-utils/src/types.ts b/packages/docusaurus-utils/src/types.ts deleted file mode 100644 index 9d7ff6af8650..000000000000 --- a/packages/docusaurus-utils/src/types.ts +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -export interface MDXToHtmlOptions { - remarkPlugins?: unknown[]; -} diff --git a/yarn.lock b/yarn.lock index 87211291e5b9..d4d50847873c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17237,6 +17237,13 @@ remark-math@^3.0.1: resolved "https://registry.yarnpkg.com/remark-math/-/remark-math-3.0.1.tgz#85a02a15b15cad34b89a27244d4887b3a95185bb" integrity sha512-epT77R/HK0x7NqrWHdSV75uNLwn8g9qTyMqCRCDujL0vj/6T6+yhdrR7mjELWtkse+Fw02kijAaBuVcHBor1+Q== +remark-mdx-remove-exports@^1.6.22: + version "1.6.22" + resolved "https://registry.yarnpkg.com/remark-mdx-remove-exports/-/remark-mdx-remove-exports-1.6.22.tgz#9e34f3d02c9c54b02ca0a1fde946449338d06ecb" + integrity sha512-7g2uiTmTGfz5QyVb+toeX25frbk1Y6yd03RXGPtqx0+DVh86Gb7MkNYbk7H2X27zdZ3CQv1W/JqlFO0Oo8IxVA== + dependencies: + unist-util-remove "2.0.0" + remark-mdx-remove-imports@^1.6.22: version "1.6.22" resolved "https://registry.yarnpkg.com/remark-mdx-remove-imports/-/remark-mdx-remove-imports-1.6.22.tgz#79f711c95359cff437a120d1fbdc1326ec455826" From 5e858fc7c6fd98d26048f500ac83caccf29f8362 Mon Sep 17 00:00:00 2001 From: slorber Date: Thu, 7 Oct 2021 18:54:12 +0200 Subject: [PATCH 13/15] minor feed title fix --- packages/docusaurus-plugin-content-blog/src/index.ts | 8 +++----- website/_dogfooding/dogfooding.config.js | 1 + 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/docusaurus-plugin-content-blog/src/index.ts b/packages/docusaurus-plugin-content-blog/src/index.ts index 4c2f5729304f..3cb75b946a6f 100644 --- a/packages/docusaurus-plugin-content-blog/src/index.ts +++ b/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 = []; diff --git a/website/_dogfooding/dogfooding.config.js b/website/_dogfooding/dogfooding.config.js index f3ce28b47736..a51cc1b1697a 100644 --- a/website/_dogfooding/dogfooding.config.js +++ b/website/_dogfooding/dogfooding.config.js @@ -28,6 +28,7 @@ const dogfoodingPluginInstances = [ postsPerPage: 3, feedOptions: { type: 'all', + title: 'Docusaurus Tests', copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`, }, }), From 8e49ec8d949de21d81e8444ebdd8510efc01385a Mon Sep 17 00:00:00 2001 From: slorber Date: Thu, 7 Oct 2021 19:12:16 +0200 Subject: [PATCH 14/15] comment --- packages/docusaurus-utils/src/mdxUtils.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/docusaurus-utils/src/mdxUtils.ts b/packages/docusaurus-utils/src/mdxUtils.ts index 6e7ac813491c..a8028896fc02 100644 --- a/packages/docusaurus-utils/src/mdxUtils.ts +++ b/packages/docusaurus-utils/src/mdxUtils.ts @@ -20,7 +20,10 @@ import removeExports from 'remark-mdx-remove-exports'; * TODO theme+global site config should be able to declare MDX comps in scope for rendering the RSS feeds * see also https://github.com/facebook/docusaurus/issues/4625 */ -export function mdxToHtml(mdxStr: string): string { +export function mdxToHtml( + mdxStr: string, + // TODO allow providing components/scope here, see https://github.com/mdx-js/mdx/tree/v1.6.13/packages/runtime +): string { return ReactDOMServer.renderToString( React.createElement(MDX, {remarkPlugins: [removeImports, removeExports]}, [ mdxStr, From c4d84b18ab7099dbf9a413462b15ec0c5439df22 Mon Sep 17 00:00:00 2001 From: slorber Date: Fri, 8 Oct 2021 12:29:21 +0200 Subject: [PATCH 15/15] comment --- website/_dogfooding/dogfooding.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/_dogfooding/dogfooding.config.js b/website/_dogfooding/dogfooding.config.js index a51cc1b1697a..ab350802069a 100644 --- a/website/_dogfooding/dogfooding.config.js +++ b/website/_dogfooding/dogfooding.config.js @@ -28,7 +28,7 @@ const dogfoodingPluginInstances = [ postsPerPage: 3, feedOptions: { type: 'all', - title: 'Docusaurus Tests', + title: 'Docusaurus Tests Blog', copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`, }, }),