diff --git a/.gitignore b/.gitignore index e961bbecbdd5..e1ad0f31030a 100644 --- a/.gitignore +++ b/.gitignore @@ -12,5 +12,5 @@ package-lock.json .cache internal-links.tap stats.json -printable.md +printable.mdx repositories/*.json diff --git a/package.json b/package.json index cc3a0959efbf..cb2cd4e01f71 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ }, "scripts": { "clean-dist": "rimraf ./dist", - "clean-printable": "rimraf src/content/**/printable.md", + "clean-printable": "rimraf src/content/**/printable.mdx", "preclean": "run-s clean-dist clean-printable", "clean": "rimraf src/content/**/_*.md src/**/_*.json repositories/*.json", "start": "npm run clean-dist && webpack serve --config webpack.dev.js --env dev --progress --node-env development", diff --git a/src/components/Site/Site.jsx b/src/components/Site/Site.jsx index bfde423d3cdb..3d2817cd0473 100644 --- a/src/components/Site/Site.jsx +++ b/src/components/Site/Site.jsx @@ -98,7 +98,7 @@ function Site(props) { })) .filter( (page) => - page.title !== 'printable.md' && !page.content.includes('Printable') + page.title !== 'printable.mdx' && !page.content.includes('Printable') ); }; diff --git a/src/remark-plugins/remark-cleanup-readme/__snapshots__/index.test.js.snap b/src/remark-plugins/remark-cleanup-readme/__snapshots__/index.test.js.snap new file mode 100644 index 000000000000..69aa6a9a301e --- /dev/null +++ b/src/remark-plugins/remark-cleanup-readme/__snapshots__/index.test.js.snap @@ -0,0 +1,40 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`cleanup readme should clean up div[align="center"] block with paragraph 1`] = ` +"/* @jsxRuntime classic */ +/* @jsx mdx */ +/* @jsxFrag mdx.Fragment */ +const MDXLayout = \\"wrapper\\"; +function MDXContent({components, ...props}) { + return

{\\"Imagemin Webpack\\"}

{\\"Plugin and Loader for \\"}{\\"webpack\\"}{\\" to optimize (compress) all images using \\"}{\\"imagemin\\"}{\\".\\\\nDo not worry about size of images, now they are always optimized/compressed.\\"}

; +} +MDXContent.isMDXComponent = true; +export default MDXContent; +" +`; + +exports[`cleanup readme should clean up div[align="center"] block without paragraph 1`] = ` +"/* @jsxRuntime classic */ +/* @jsx mdx */ +/* @jsxFrag mdx.Fragment */ +const MDXLayout = \\"wrapper\\"; +function MDXContent({components, ...props}) { + return
; +} +MDXContent.isMDXComponent = true; +export default MDXContent; +" +`; + +exports[`cleanup readme should clean up nested div[align="center"] block 1`] = ` +"/* @jsxRuntime classic */ +/* @jsx mdx */ +/* @jsxFrag mdx.Fragment */ +const MDXLayout = \\"wrapper\\"; +function MDXContent({components, ...props}) { + return
; +} +MDXContent.isMDXComponent = true; +export default MDXContent; +" +`; diff --git a/src/remark-plugins/remark-cleanup-readme/index.js b/src/remark-plugins/remark-cleanup-readme/index.js new file mode 100644 index 000000000000..c857c4f861a1 --- /dev/null +++ b/src/remark-plugins/remark-cleanup-readme/index.js @@ -0,0 +1,23 @@ +const visit = require('unist-util-visit'); +// remove items other than paragraphs in div[align="center"] +// e.g., logo, title and so on. +// see the original version at https://github.com/webpack/webpack.js.org/blob/webpack-4/src/utilities/process-readme.js#L71 +module.exports = function remarkCleanupReadme() { + return function transformer(tree) { + visit(tree, 'mdxJsxFlowElement', visitor); + function visitor(node) { + const alignAttribute = node.attributes.find( + (attribute) => + attribute.name === 'align' && attribute.value === 'center' + ); + if (alignAttribute) { + const paragraphs = node.children.filter( + (child) => + child.type === 'paragraph' || + (child.type === 'mdxJsxFlowElement' && child.name === 'p') + ); + node.children = paragraphs; + } + } + }; +}; diff --git a/src/remark-plugins/remark-cleanup-readme/index.test.js b/src/remark-plugins/remark-cleanup-readme/index.test.js new file mode 100644 index 000000000000..5d9e73ca5da3 --- /dev/null +++ b/src/remark-plugins/remark-cleanup-readme/index.test.js @@ -0,0 +1,74 @@ +const mdx = require('@mdx-js/mdx'); +describe('cleanup readme', () => { + it('should clean up div[align="center"] block without paragraph', () => { + const mdxText = ` +
+ + Babel logo + + + webpack logo + +
+`; + const html = mdx.sync(mdxText, { + remarkPlugins: [require('./index.js')], + }); + expect(html).toMatchSnapshot(); + }); + + it('should clean up div[align="center"] block with paragraph', () => { + const mdxText = ` +
+ + + +

Imagemin Webpack

+

+ Plugin and Loader for webpack to optimize (compress) all images using imagemin. + Do not worry about size of images, now they are always optimized/compressed. +

+
+ `; + const html = mdx.sync(mdxText, { + remarkPlugins: [require('./index.js')], + }); + expect(html).toMatchSnapshot(); + }); + + it('should clean up nested div[align="center"] block ', () => { + // see https://github.com/webpack-contrib/postcss-loader/blob/master/README.md + const mdxText = ` +
+ PostCSS Logo + + + +
+ + Sponsored by Evil Martians + +
+
+ `; + const html = mdx.sync(mdxText, { + remarkPlugins: [require('./index.js')], + }); + expect(html).toMatchSnapshot(); + }); +}); diff --git a/src/scripts/concatenate-docs.js b/src/scripts/concatenate-docs.js index 7885ed25d93c..8f665cde2b31 100644 --- a/src/scripts/concatenate-docs.js +++ b/src/scripts/concatenate-docs.js @@ -5,16 +5,16 @@ const front = require('front-matter'); // root path const rootPath = path.join('src', 'content'); -const outFileName = 'printable.md'; +const outFileName = 'printable.mdx'; console.info( - 'Concatenating *.md files of each content directory to create chapter-wide help files to be used for printing' + 'Concatenating *.mdx files of each content directory to create chapter-wide help files to be used for printing' ); // getDirectoryRecursive() recursively walks through all sub directories of the provided path -// concatenates the .md files content in each directory, sorted by their FrontMatter sort -// attribute, and creates a compound MarkDown file named by using the directory name, -// prefixed by an underscore and suffixed by '_all.md' from the concatenated content +// concatenates the .mdx files content in each directory, sorted by their FrontMatter sort +// attribute, and creates a compound mdx file named by using the directory name, +// prefixed by an underscore and suffixed by '_all.mdx' from the concatenated content // in the corresponding directory. function getDirectoryRecursive(basePath) { console.log(`Processing: ${basePath}`); @@ -34,14 +34,26 @@ function getDirectoryRecursive(basePath) { // if the directory entry is a directory, recurse into that directory if (fs.statSync(fullPath).isDirectory()) { getDirectoryRecursive(fullPath); - } else if (fullPath.endsWith('.md') || fullPath.endsWith('.mdx')) { - fileContents[fileContents.length] = front( - fs.readFileSync(fullPath).toString() - ); + } else if (fullPath.endsWith('.mdx')) { + // import the respective mdx file + // prefix a `W` to prevent filename like 12345.mdx + const basename = path + .basename(file, '.mdx') + .split('-') + .map((x) => x.toUpperCase()) + .join(''); + fileContents[fileContents.length] = { + ...front(fs.readFileSync(fullPath).toString()), + body: ` +import W${basename} from './${file}' + + +`, + }; } } - // sort MarkDown files by FrontMatter 'sort' attribute (QuickSort) + // sort mdx files by FrontMatter 'sort' attribute (QuickSort) for (let i = 0; i < fileContents.length - 1; ++i) for (let j = i + 1; j < fileContents.length; ++j) { const left = fileContents[i].attributes; @@ -73,7 +85,6 @@ contributors: targetFile.on('error', (error) => { throw error; }); - for (let file of fileContents) { // use FrontMatter 'title' attribute as main heading of target file targetFile.write(os.EOL + os.EOL + '# ' + file.attributes.title + os.EOL); diff --git a/src/utilities/fetch-package-readmes.js b/src/utilities/fetch-package-readmes.js index e1b3fb638ac6..a95ca867f8e8 100644 --- a/src/utilities/fetch-package-readmes.js +++ b/src/utilities/fetch-package-readmes.js @@ -34,7 +34,7 @@ async function main() { const url = `https://raw.githubusercontent.com/${repo}/master/README.md`; const htmlUrl = `https://github.com/${repo}`; const editUrl = `${htmlUrl}/edit/master/README.md`; - const fileName = path.resolve(outputDir, `_${packageName}.md`); + const fileName = path.resolve(outputDir, `_${packageName}.mdx`); let title = packageName; diff --git a/src/utilities/process-readme.js b/src/utilities/process-readme.js index f2abf877908c..066ab289ec72 100644 --- a/src/utilities/process-readme.js +++ b/src/utilities/process-readme.js @@ -92,12 +92,11 @@ function getMatches(string, regex) { module.exports = function processREADME(body, options = {}) { let processingString = body - // remove items other than paragraphs in div[align="center"] - // e.g., logo, title and so on. - .replace(/[^]*?
([^]*?)<\/div>/, (match, content) => { - let parsed = content.match(/

\s+([^]*?)\s+<\/?p>/); - return parsed ? parsed[1] : ''; - }) + // close tags + .replace( + /<(img\s[^>]*?src\s*=\s*['"][^'"]*?['"][^>/]*?)>(?![^<]*<\/img)/g, + '<$1/>' + ) // Replace lone h1 formats .replace(/.+?<\/h1>/, '') .replace(/^# .+/m, '') diff --git a/src/utilities/process-readme.test.js b/src/utilities/process-readme.test.js index 0dae2439f6ff..ac93b9a5114b 100644 --- a/src/utilities/process-readme.test.js +++ b/src/utilities/process-readme.test.js @@ -28,35 +28,4 @@ describe('processReadme', () => { '- [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)' ); }); - - it('should clean up div[align="center"] block with paragraph', () => { - const loaderMDData = ` -

- - - -

Imagemin Webpack

-

- Plugin and Loader for webpack to optimize (compress) all images using imagemin. - Do not worry about size of images, now they are always optimized/compressed. -

-
`; - expect(processReadme(loaderMDData)) - .toEqual(`Plugin and Loader for webpack to optimize (compress) all images using imagemin. - Do not worry about size of images, now they are always optimized/compressed.`); - }); - - it('should clean up div[align="center"] block without paragraph', () => { - const loaderMDData = ` -`; - expect(processReadme(loaderMDData)).toEqual(''); - }); }); diff --git a/webpack.common.js b/webpack.common.js index 6b7dc2374071..f8a86792a8a3 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -8,6 +8,7 @@ const mdPlugins = [ require('remark-slug'), remarkResponsiveTable, require('remark-emoji'), + require('./src/remark-plugins/remark-cleanup-readme/index.js'), [ require('./src/remark-plugins/remark-custom-asides/index.js'), {