From 5c552c22b7b70c35137cc1f39905472113e4eae5 Mon Sep 17 00:00:00 2001 From: endiliey Date: Mon, 9 Dec 2019 18:58:10 +0700 Subject: [PATCH 1/5] fix(v2): move metadata export to mdx-loader to prevent any weird mdx parsing --- packages/docusaurus-mdx-loader/README.md | 9 ++++ packages/docusaurus-mdx-loader/package.json | 1 + packages/docusaurus-mdx-loader/src/index.js | 13 +++++ .../src/index.ts | 19 ++++--- .../src/markdownLoader.ts | 22 +-------- .../src/index.ts | 18 +++++-- .../src/markdown/index.ts | 49 ++++++------------- packages/docusaurus/src/commands/start.ts | 2 +- 8 files changed, 68 insertions(+), 65 deletions(-) diff --git a/packages/docusaurus-mdx-loader/README.md b/packages/docusaurus-mdx-loader/README.md index ddca9dc255e9..05705a966619 100644 --- a/packages/docusaurus-mdx-loader/README.md +++ b/packages/docusaurus-mdx-loader/README.md @@ -38,3 +38,12 @@ Array of rehype plugins to manipulate the MDXHAST ### `remarkPlugins` Array of remark plugins to manipulate the MDXAST + +### `metadataPath` +A function to provide the metadataPath depending on current loaded MDX path that will be embedded as the MDX metadata. +Example +```js +const metadataPath = (mdxPath) => { + return path.join('/some/metadata/path', `${path.basename(mdxPath)}-metadata.json`); +} +``` diff --git a/packages/docusaurus-mdx-loader/package.json b/packages/docusaurus-mdx-loader/package.json index 252e2be3d79f..69e9c08e7374 100644 --- a/packages/docusaurus-mdx-loader/package.json +++ b/packages/docusaurus-mdx-loader/package.json @@ -13,6 +13,7 @@ "@mdx-js/mdx": "^1.5.1", "@mdx-js/react": "^1.5.1", "escape-html": "^1.0.3", + "fs-extra": "^8.1.0", "github-slugger": "^1.2.1", "gray-matter": "^4.0.2", "loader-utils": "^1.2.3", diff --git a/packages/docusaurus-mdx-loader/src/index.js b/packages/docusaurus-mdx-loader/src/index.js index c276e52630c3..e27f832e6569 100644 --- a/packages/docusaurus-mdx-loader/src/index.js +++ b/packages/docusaurus-mdx-loader/src/index.js @@ -6,6 +6,7 @@ */ const {getOptions} = require('loader-utils'); +const {readFile} = require('fs-extra'); const mdx = require('@mdx-js/mdx'); const emoji = require('remark-emoji'); const slug = require('remark-slug'); @@ -43,6 +44,18 @@ module.exports = async function(fileString) { return callback(err); } + // If metadataPath is provided, we read metadata & then embed it to this MDX content + if (options.metadataPath && typeof options.metadataPath === 'function') { + const metadataPath = options.metadataPath(this.resourcePath); + + if (metadataPath) { + // Add as dependency of this loader result so that we can recompile if metadata is changed + this.addDependency(metadataPath); + const metadata = await readFile(metadataPath, 'utf8'); + result = `export const metadata = ${metadata};\n${result}`; + } + } + const code = ` import React from 'react'; import { mdx } from '@mdx-js/react'; diff --git a/packages/docusaurus-plugin-content-blog/src/index.ts b/packages/docusaurus-plugin-content-blog/src/index.ts index fab06349edf8..8fae5da393e0 100644 --- a/packages/docusaurus-plugin-content-blog/src/index.ts +++ b/packages/docusaurus-plugin-content-blog/src/index.ts @@ -8,7 +8,7 @@ import fs from 'fs-extra'; import _ from 'lodash'; import path from 'path'; -import {normalizeUrl, docuHash} from '@docusaurus/utils'; +import {normalizeUrl, docuHash, aliasedSitePath} from '@docusaurus/utils'; import { PluginOptions, @@ -69,9 +69,10 @@ export default function pluginContentBlog( opts: Partial, ): Plugin { const options: PluginOptions = {...DEFAULT_OPTIONS, ...opts}; - const contentPath = path.resolve(context.siteDir, options.path); + const {siteDir, generatedFilesDir} = context; + const contentPath = path.resolve(siteDir, options.path); const dataDir = path.join( - context.generatedFilesDir, + generatedFilesDir, 'docusaurus-plugin-content-blog', ); @@ -231,7 +232,7 @@ export default function pluginContentBlog( blogPosts.map(async blogPost => { const {id, metadata} = blogPost; await createData( - // Note that this created data path must be in sync with markdownLoader.ts metadataPath + // Note that this created data path must be in sync with metadataPath provided to mdx-loader `${docuHash(metadata.source)}.json`, JSON.stringify(metadata, null, 2), ); @@ -373,13 +374,19 @@ export default function pluginContentBlog( options: { remarkPlugins, rehypePlugins, + // Note that metadataPath must be the same/ in-sync as the path from createData for each MDX + metadataPath: (mdxPath: string) => { + const aliasedSource = aliasedSitePath(mdxPath, siteDir); + return path.join( + dataDir, + `${docuHash(aliasedSource)}.json`, + ); + }, }, }, { loader: path.resolve(__dirname, './markdownLoader.js'), options: { - dataDir, - siteDir: context.siteDir, truncateMarker, }, }, diff --git a/packages/docusaurus-plugin-content-blog/src/markdownLoader.ts b/packages/docusaurus-plugin-content-blog/src/markdownLoader.ts index a94a6ff22cc6..97798d473bf9 100644 --- a/packages/docusaurus-plugin-content-blog/src/markdownLoader.ts +++ b/packages/docusaurus-plugin-content-blog/src/markdownLoader.ts @@ -8,14 +8,11 @@ const {parseQuery, getOptions} = require('loader-utils'); import {loader} from 'webpack'; import {truncate} from './blogUtils'; -import path from 'path'; -import {readFile} from 'fs-extra'; -import {aliasedSitePath, docuHash} from '@docusaurus/utils'; export = function(fileString: string) { const callback = this.async(); - const {truncateMarker, siteDir, dataDir} = getOptions(this); + const {truncateMarker}: {truncateMarker: RegExp | string} = getOptions(this); let finalContent = fileString; @@ -24,20 +21,5 @@ export = function(fileString: string) { if (truncated) { finalContent = truncate(fileString, truncateMarker); } - - // Read metadata & then embed it to this markdown content - // Note that metadataPath must be the same/ in-sync as the path from createData - const aliasedSource = aliasedSitePath(this.resourcePath, siteDir); - const metadataPath = path.join(dataDir, `${docuHash(aliasedSource)}.json`); - - // Add metadataPath as dependency of this loader result so that we can recompile if metadata is changed - this.addDependency(metadataPath); - - readFile(metadataPath, 'utf8', function(err, metadata) { - if (err) return callback && callback(err); - - const metadataStr = `export const metadata = ${metadata};`; - // We need to add two lines break so that mdx won't mistake it as part of previous paragraph - callback && callback(null, finalContent + '\n\n' + metadataStr); - }); + return callback && callback(null, finalContent); } as loader.Loader; diff --git a/packages/docusaurus-plugin-content-docs/src/index.ts b/packages/docusaurus-plugin-content-docs/src/index.ts index 2a96ab2d36f9..d5185d123831 100644 --- a/packages/docusaurus-plugin-content-docs/src/index.ts +++ b/packages/docusaurus-plugin-content-docs/src/index.ts @@ -9,7 +9,12 @@ import _ from 'lodash'; import globby from 'globby'; import fs from 'fs-extra'; import path from 'path'; -import {normalizeUrl, docuHash, objectWithKeySorted} from '@docusaurus/utils'; +import { + normalizeUrl, + docuHash, + objectWithKeySorted, + aliasedSitePath, +} from '@docusaurus/utils'; import {LoadContext, Plugin, RouteConfig} from '@docusaurus/types'; import createOrder from './order'; @@ -285,7 +290,7 @@ export default function pluginContentDocs( const routes = await Promise.all( metadataItems.map(async metadataItem => { await createData( - // Note that this created data path must be in sync with markdown/index.ts metadataPath + // Note that this created data path must be in sync with metadataPath provided to mdx-loader `${docuHash(metadataItem.source)}.json`, JSON.stringify(metadataItem, null, 2), ); @@ -404,13 +409,20 @@ export default function pluginContentDocs( options: { remarkPlugins, rehypePlugins, + metadataPath: (mdxPath: string) => { + // Note that metadataPath must be the same/ in-sync as the path from createData for each MDX + const aliasedSource = aliasedSitePath(mdxPath, siteDir); + return path.join( + dataDir, + `${docuHash(aliasedSource)}.json`, + ); + }, }, }, { loader: path.resolve(__dirname, './markdown/index.js'), options: { siteDir, - dataDir, docsDir, sourceToPermalink: sourceToPermalink, versionedDir, diff --git a/packages/docusaurus-plugin-content-docs/src/markdown/index.ts b/packages/docusaurus-plugin-content-docs/src/markdown/index.ts index efb974006796..6f842ef0d288 100644 --- a/packages/docusaurus-plugin-content-docs/src/markdown/index.ts +++ b/packages/docusaurus-plugin-content-docs/src/markdown/index.ts @@ -5,46 +5,25 @@ * LICENSE file in the root directory of this source tree. */ -import path from 'path'; -import {readFile} from 'fs-extra'; import {getOptions} from 'loader-utils'; import {loader} from 'webpack'; import linkify from './linkify'; -import {docuHash, aliasedSitePath} from '@docusaurus/utils'; export = function(fileString: string) { const callback = this.async(); - const { - dataDir, - docsDir, - siteDir, - versionedDir, - sourceToPermalink, - } = getOptions(this); - - // Replace all markdown linking to correct url - const linkifiedStr = linkify( - fileString, - this.resourcePath, - docsDir, - siteDir, - sourceToPermalink, - versionedDir, + const {docsDir, siteDir, versionedDir, sourceToPermalink} = getOptions(this); + return ( + callback && + callback( + null, + linkify( + fileString, + this.resourcePath, + docsDir, + siteDir, + sourceToPermalink, + versionedDir, + ), + ) ); - - // Read metadata & then embed it to this markdown content - // Note that metadataPath must be the same/ in-sync as the path from createData - const aliasedSource = aliasedSitePath(this.resourcePath, siteDir); - const metadataPath = path.join(dataDir, `${docuHash(aliasedSource)}.json`); - - // Add metadataPath as dependency of this loader result so that we can recompile if metadata is changed - this.addDependency(metadataPath); - - readFile(metadataPath, 'utf8', function(err, metadata) { - if (err) return callback && callback(err); - - const metadataStr = `export const metadata = ${metadata}`; - // We need to add two lines break so that mdx won't mistake it as part of previous paragraph - callback && callback(null, linkifiedStr + '\n\n' + metadataStr); - }); } as loader.Loader; diff --git a/packages/docusaurus/src/commands/start.ts b/packages/docusaurus/src/commands/start.ts index 6cb989d715e5..d0b358509705 100644 --- a/packages/docusaurus/src/commands/start.ts +++ b/packages/docusaurus/src/commands/start.ts @@ -122,7 +122,7 @@ export async function start( // https://webpack.js.org/configuration/dev-server const devServerConfig: WebpackDevServer.Configuration = { compress: true, - clientLogLevel: 'error', + clientLogLevel: 'info', hot: true, hotOnly: cliOptions.hotOnly, quiet: true, From 5f2e087cdd1ec2b32743eebe463ad8b054ba114d Mon Sep 17 00:00:00 2001 From: endiliey Date: Mon, 9 Dec 2019 19:03:11 +0700 Subject: [PATCH 2/5] refactor --- packages/docusaurus-mdx-loader/src/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/docusaurus-mdx-loader/src/index.js b/packages/docusaurus-mdx-loader/src/index.js index e27f832e6569..6c6bea03970a 100644 --- a/packages/docusaurus-mdx-loader/src/index.js +++ b/packages/docusaurus-mdx-loader/src/index.js @@ -44,6 +44,8 @@ module.exports = async function(fileString) { return callback(err); } + let exportStr = `export const frontMatter = ${stringifyObject(data)};`; + // If metadataPath is provided, we read metadata & then embed it to this MDX content if (options.metadataPath && typeof options.metadataPath === 'function') { const metadataPath = options.metadataPath(this.resourcePath); @@ -52,7 +54,7 @@ module.exports = async function(fileString) { // Add as dependency of this loader result so that we can recompile if metadata is changed this.addDependency(metadataPath); const metadata = await readFile(metadataPath, 'utf8'); - result = `export const metadata = ${metadata};\n${result}`; + exportStr += `\nexport const metadata = ${metadata};`; } } @@ -60,7 +62,7 @@ module.exports = async function(fileString) { import React from 'react'; import { mdx } from '@mdx-js/react'; - export const frontMatter = ${stringifyObject(data)}; + ${exportStr} ${result} `; From 0c0dd4b16e434487f44243269fd29b6e51a134a6 Mon Sep 17 00:00:00 2001 From: endiliey Date: Mon, 9 Dec 2019 19:05:02 +0700 Subject: [PATCH 3/5] nits --- packages/docusaurus-mdx-loader/README.md | 8 -------- packages/docusaurus/src/commands/start.ts | 2 +- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/docusaurus-mdx-loader/README.md b/packages/docusaurus-mdx-loader/README.md index 05705a966619..b6e5b7ab4d74 100644 --- a/packages/docusaurus-mdx-loader/README.md +++ b/packages/docusaurus-mdx-loader/README.md @@ -39,11 +39,3 @@ Array of rehype plugins to manipulate the MDXHAST ### `remarkPlugins` Array of remark plugins to manipulate the MDXAST -### `metadataPath` -A function to provide the metadataPath depending on current loaded MDX path that will be embedded as the MDX metadata. -Example -```js -const metadataPath = (mdxPath) => { - return path.join('/some/metadata/path', `${path.basename(mdxPath)}-metadata.json`); -} -``` diff --git a/packages/docusaurus/src/commands/start.ts b/packages/docusaurus/src/commands/start.ts index d0b358509705..6cb989d715e5 100644 --- a/packages/docusaurus/src/commands/start.ts +++ b/packages/docusaurus/src/commands/start.ts @@ -122,7 +122,7 @@ export async function start( // https://webpack.js.org/configuration/dev-server const devServerConfig: WebpackDevServer.Configuration = { compress: true, - clientLogLevel: 'info', + clientLogLevel: 'error', hot: true, hotOnly: cliOptions.hotOnly, quiet: true, From 8d92f08979a139057f9b05ab0df873cd8aded4ec Mon Sep 17 00:00:00 2001 From: endiliey Date: Mon, 9 Dec 2019 19:09:39 +0700 Subject: [PATCH 4/5] nits --- packages/docusaurus-mdx-loader/README.md | 3 +++ packages/docusaurus-mdx-loader/src/index.js | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/docusaurus-mdx-loader/README.md b/packages/docusaurus-mdx-loader/README.md index b6e5b7ab4d74..1737799afd8e 100644 --- a/packages/docusaurus-mdx-loader/README.md +++ b/packages/docusaurus-mdx-loader/README.md @@ -39,3 +39,6 @@ Array of rehype plugins to manipulate the MDXHAST ### `remarkPlugins` Array of remark plugins to manipulate the MDXAST +### `metadataPath` +A function to provide the metadataPath depending on current loaded MDX path that will be exported as the MDX metadata. +``` diff --git a/packages/docusaurus-mdx-loader/src/index.js b/packages/docusaurus-mdx-loader/src/index.js index 6c6bea03970a..50ad93ce9b70 100644 --- a/packages/docusaurus-mdx-loader/src/index.js +++ b/packages/docusaurus-mdx-loader/src/index.js @@ -46,7 +46,7 @@ module.exports = async function(fileString) { let exportStr = `export const frontMatter = ${stringifyObject(data)};`; - // If metadataPath is provided, we read metadata & then embed it to this MDX content + // Read metadata for this MDX and export it if (options.metadataPath && typeof options.metadataPath === 'function') { const metadataPath = options.metadataPath(this.resourcePath); From d74a94e5a6138dd94ededb66e0009607601ca18f Mon Sep 17 00:00:00 2001 From: endiliey Date: Mon, 9 Dec 2019 19:24:58 +0700 Subject: [PATCH 5/5] nits --- packages/docusaurus-mdx-loader/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/docusaurus-mdx-loader/README.md b/packages/docusaurus-mdx-loader/README.md index 1737799afd8e..797a09a19350 100644 --- a/packages/docusaurus-mdx-loader/README.md +++ b/packages/docusaurus-mdx-loader/README.md @@ -41,4 +41,3 @@ Array of remark plugins to manipulate the MDXAST ### `metadataPath` A function to provide the metadataPath depending on current loaded MDX path that will be exported as the MDX metadata. -```