Skip to content

Commit 702390a

Browse files
chenxsanchenxsan
authored
fetch readme.md as mdx (#5298)
* fetch readme.md as mdx * close opened img tags * fix regular expression to contain nested div[align="center"] * Revert "fix regular expression to contain nested div[align="center"]" This reverts commit 557e4e9. * optimize cleanup * use mdx for printable * concatenate mdx * fix * revert * disable concatenate docs * disable all loaders for testing * disable all plugins for testing * Revert "disable concatenate docs" This reverts commit 23cf1bb. * Revert "disable all loaders for testing" This reverts commit f673c88. * Revert "disable all plugins for testing" This reverts commit e95b09f.
1 parent c2cab7e commit 702390a

File tree

11 files changed

+169
-52
lines changed

11 files changed

+169
-52
lines changed

‎.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,5 @@ package-lock.json
1212
.cache
1313
internal-links.tap
1414
stats.json
15-
printable.md
15+
printable.mdx
1616
repositories/*.json

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
},
2626
"scripts": {
2727
"clean-dist": "rimraf ./dist",
28-
"clean-printable": "rimraf src/content/**/printable.md",
28+
"clean-printable": "rimraf src/content/**/printable.mdx",
2929
"preclean": "run-s clean-dist clean-printable",
3030
"clean": "rimraf src/content/**/_*.md src/**/_*.json repositories/*.json",
3131
"start": "npm run clean-dist && webpack serve --config webpack.dev.js --env dev --progress --node-env development",

‎src/components/Site/Site.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ function Site(props) {
9898
}))
9999
.filter(
100100
(page) =>
101-
page.title !== 'printable.md' && !page.content.includes('Printable')
101+
page.title !== 'printable.mdx' && !page.content.includes('Printable')
102102
);
103103
};
104104

‎src/remark-plugins/remark-cleanup-readme/__snapshots__/index.test.js.snap

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`cleanup readme should clean up div[align="center"] block with paragraph 1`] = `
4+
"/* @jsxRuntime classic */
5+
/* @jsx mdx */
6+
/* @jsxFrag mdx.Fragment */
7+
const MDXLayout = \\"wrapper\\";
8+
function MDXContent({components, ...props}) {
9+
return <MDXLayout components={components} {...props}><div align=\\"center\\"><p parentName=\\"div\\"><h1 parentName=\\"p\\">{\\"Imagemin Webpack\\"}</h1></p><p parentName=\\"div\\"><p parentName=\\"p\\">{\\"Plugin and Loader for \\"}<a href=\\"http://webpack.js.org/\\" parentName=\\"p\\">{\\"webpack\\"}</a>{\\" to optimize (compress) all images using \\"}<a href=\\"https://github.com/imagemin/imagemin\\" parentName=\\"p\\">{\\"imagemin\\"}</a>{\\".\\\\nDo not worry about size of images, now they are always optimized/compressed.\\"}</p></p></div></MDXLayout>;
10+
}
11+
MDXContent.isMDXComponent = true;
12+
export default MDXContent;
13+
"
14+
`;
15+
16+
exports[`cleanup readme should clean up div[align="center"] block without paragraph 1`] = `
17+
"/* @jsxRuntime classic */
18+
/* @jsx mdx */
19+
/* @jsxFrag mdx.Fragment */
20+
const MDXLayout = \\"wrapper\\";
21+
function MDXContent({components, ...props}) {
22+
return <MDXLayout components={components} {...props}><div align=\\"center\\" /></MDXLayout>;
23+
}
24+
MDXContent.isMDXComponent = true;
25+
export default MDXContent;
26+
"
27+
`;
28+
29+
exports[`cleanup readme should clean up nested div[align="center"] block 1`] = `
30+
"/* @jsxRuntime classic */
31+
/* @jsx mdx */
32+
/* @jsxFrag mdx.Fragment */
33+
const MDXLayout = \\"wrapper\\";
34+
function MDXContent({components, ...props}) {
35+
return <MDXLayout components={components} {...props}><div align=\\"center\\" /></MDXLayout>;
36+
}
37+
MDXContent.isMDXComponent = true;
38+
export default MDXContent;
39+
"
40+
`;

‎src/remark-plugins/remark-cleanup-readme/index.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const visit = require('unist-util-visit');
2+
// remove items other than paragraphs in div[align="center"]
3+
// e.g., logo, title and so on.
4+
// see the original version at https://github.com/webpack/webpack.js.org/blob/webpack-4/src/utilities/process-readme.js#L71
5+
module.exports = function remarkCleanupReadme() {
6+
return function transformer(tree) {
7+
visit(tree, 'mdxJsxFlowElement', visitor);
8+
function visitor(node) {
9+
const alignAttribute = node.attributes.find(
10+
(attribute) =>
11+
attribute.name === 'align' && attribute.value === 'center'
12+
);
13+
if (alignAttribute) {
14+
const paragraphs = node.children.filter(
15+
(child) =>
16+
child.type === 'paragraph' ||
17+
(child.type === 'mdxJsxFlowElement' && child.name === 'p')
18+
);
19+
node.children = paragraphs;
20+
}
21+
}
22+
};
23+
};

‎src/remark-plugins/remark-cleanup-readme/index.test.js

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
const mdx = require('@mdx-js/mdx');
2+
describe('cleanup readme', () => {
3+
it('should clean up div[align="center"] block without paragraph', () => {
4+
const mdxText = `
5+
<div align="center">
6+
<a href="https://github.com/babel/babel">
7+
<img src="https://rawgit.com/babel/logo/master/babel.svg" alt="Babel logo" width="200" height="200" />
8+
</a>
9+
<a href="https://github.com/webpack/webpack">
10+
<img src="https://webpack.js.org/assets/icon-square-big.svg" alt="webpack logo" width="200" height="200" />
11+
</a>
12+
</div>
13+
`;
14+
const html = mdx.sync(mdxText, {
15+
remarkPlugins: [require('./index.js')],
16+
});
17+
expect(html).toMatchSnapshot();
18+
});
19+
20+
it('should clean up div[align="center"] block with paragraph', () => {
21+
const mdxText = `
22+
<div align="center">
23+
<a href="https://github.com/webpack/webpack">
24+
<img width="200" height="200" hspace="10"
25+
src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg" />
26+
</a>
27+
<h1>Imagemin Webpack</h1>
28+
<p>
29+
Plugin and Loader for <a href="http://webpack.js.org/">webpack</a> to optimize (compress) all images using <a href="https://github.com/imagemin/imagemin">imagemin</a>.
30+
Do not worry about size of images, now they are always optimized/compressed.
31+
</p>
32+
</div>
33+
`;
34+
const html = mdx.sync(mdxText, {
35+
remarkPlugins: [require('./index.js')],
36+
});
37+
expect(html).toMatchSnapshot();
38+
});
39+
40+
it('should clean up nested div[align="center"] block ', () => {
41+
// see https://github.com/webpack-contrib/postcss-loader/blob/master/README.md
42+
const mdxText = `
43+
<div align="center">
44+
<img
45+
width="180"
46+
height="180"
47+
hspace="10"
48+
alt="PostCSS Logo"
49+
src="https://api.postcss.org/logo.svg" />
50+
<a href="https://github.com/webpack/webpack">
51+
<img
52+
width="200"
53+
height="200"
54+
hspace="10"
55+
src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg" />
56+
</a>
57+
<div align="center">
58+
<a href="https://evilmartians.com/?utm_source=postcss">
59+
<img
60+
src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
61+
alt="Sponsored by Evil Martians"
62+
width="236"
63+
height="54"
64+
vspace="10" />
65+
</a>
66+
</div>
67+
</div>
68+
`;
69+
const html = mdx.sync(mdxText, {
70+
remarkPlugins: [require('./index.js')],
71+
});
72+
expect(html).toMatchSnapshot();
73+
});
74+
});

‎src/scripts/concatenate-docs.js

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@ const front = require('front-matter');
55

66
// root path
77
const rootPath = path.join('src', 'content');
8-
const outFileName = 'printable.md';
8+
const outFileName = 'printable.mdx';
99

1010
console.info(
11-
'Concatenating *.md files of each content directory to create chapter-wide help files to be used for printing'
11+
'Concatenating *.mdx files of each content directory to create chapter-wide help files to be used for printing'
1212
);
1313

1414
// getDirectoryRecursive() recursively walks through all sub directories of the provided path
15-
// concatenates the .md files content in each directory, sorted by their FrontMatter sort
16-
// attribute, and creates a compound MarkDown file named by using the directory name,
17-
// prefixed by an underscore and suffixed by '_all.md' from the concatenated content
15+
// concatenates the .mdx files content in each directory, sorted by their FrontMatter sort
16+
// attribute, and creates a compound mdx file named by using the directory name,
17+
// prefixed by an underscore and suffixed by '_all.mdx' from the concatenated content
1818
// in the corresponding directory.
1919
function getDirectoryRecursive(basePath) {
2020
console.log(`Processing: ${basePath}`);
@@ -34,14 +34,26 @@ function getDirectoryRecursive(basePath) {
3434
// if the directory entry is a directory, recurse into that directory
3535
if (fs.statSync(fullPath).isDirectory()) {
3636
getDirectoryRecursive(fullPath);
37-
} else if (fullPath.endsWith('.md') || fullPath.endsWith('.mdx')) {
38-
fileContents[fileContents.length] = front(
39-
fs.readFileSync(fullPath).toString()
40-
);
37+
} else if (fullPath.endsWith('.mdx')) {
38+
// import the respective mdx file
39+
// prefix a `W` to prevent filename like 12345.mdx
40+
const basename = path
41+
.basename(file, '.mdx')
42+
.split('-')
43+
.map((x) => x.toUpperCase())
44+
.join('');
45+
fileContents[fileContents.length] = {
46+
...front(fs.readFileSync(fullPath).toString()),
47+
body: `
48+
import W${basename} from './${file}'
49+
50+
<W${basename} />
51+
`,
52+
};
4153
}
4254
}
4355

44-
// sort MarkDown files by FrontMatter 'sort' attribute (QuickSort)
56+
// sort mdx files by FrontMatter 'sort' attribute (QuickSort)
4557
for (let i = 0; i < fileContents.length - 1; ++i)
4658
for (let j = i + 1; j < fileContents.length; ++j) {
4759
const left = fileContents[i].attributes;
@@ -73,7 +85,6 @@ contributors:
7385
targetFile.on('error', (error) => {
7486
throw error;
7587
});
76-
7788
for (let file of fileContents) {
7889
// use FrontMatter 'title' attribute as main heading of target file
7990
targetFile.write(os.EOL + os.EOL + '# ' + file.attributes.title + os.EOL);

‎src/utilities/fetch-package-readmes.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ async function main() {
3434
const url = `https://raw.githubusercontent.com/${repo}/master/README.md`;
3535
const htmlUrl = `https://github.com/${repo}`;
3636
const editUrl = `${htmlUrl}/edit/master/README.md`;
37-
const fileName = path.resolve(outputDir, `_${packageName}.md`);
37+
const fileName = path.resolve(outputDir, `_${packageName}.mdx`);
3838

3939
let title = packageName;
4040

‎src/utilities/process-readme.js

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -92,12 +92,11 @@ function getMatches(string, regex) {
9292

9393
module.exports = function processREADME(body, options = {}) {
9494
let processingString = body
95-
// remove items other than paragraphs in div[align="center"]
96-
// e.g., logo, title and so on.
97-
.replace(/[^]*?<div align="center">([^]*?)<\/div>/, (match, content) => {
98-
let parsed = content.match(/<p>\s+([^]*?)\s+<\/?p>/);
99-
return parsed ? parsed[1] : '';
100-
})
95+
// close <img> tags
96+
.replace(
97+
/<(img\s[^>]*?src\s*=\s*['"][^'"]*?['"][^>/]*?)>(?![^<]*<\/img)/g,
98+
'<$1/>'
99+
)
101100
// Replace lone h1 formats
102101
.replace(/<h1.*?>.+?<\/h1>/, '')
103102
.replace(/^# .+/m, '')

‎src/utilities/process-readme.test.js

Lines changed: 0 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -28,35 +28,4 @@ describe('processReadme', () => {
2828
'- [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)'
2929
);
3030
});
31-
32-
it('should clean up div[align="center"] block with paragraph', () => {
33-
const loaderMDData = `
34-
<div align="center">
35-
<a href="https://github.com/webpack/webpack">
36-
<img width="200" height="200" hspace="10"
37-
src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg">
38-
</a>
39-
<h1>Imagemin Webpack</h1>
40-
<p>
41-
Plugin and Loader for <a href="http://webpack.js.org/">webpack</a> to optimize (compress) all images using <a href="https://github.com/imagemin/imagemin">imagemin</a>.
42-
Do not worry about size of images, now they are always optimized/compressed.
43-
</p>
44-
</div>`;
45-
expect(processReadme(loaderMDData))
46-
.toEqual(`Plugin and Loader for <a href="http://webpack.js.org/">webpack</a> to optimize (compress) all images using <a href="https://github.com/imagemin/imagemin">imagemin</a>.
47-
Do not worry about size of images, now they are always optimized/compressed.`);
48-
});
49-
50-
it('should clean up div[align="center"] block without paragraph', () => {
51-
const loaderMDData = `
52-
<div align="center">
53-
<a href="https://github.com/babel/babel">
54-
<img src="https://rawgit.com/babel/logo/master/babel.svg" alt="Babel logo" width="200" height="200">
55-
</a>
56-
<a href="https://github.com/webpack/webpack">
57-
<img src="https://webpack.js.org/assets/icon-square-big.svg" alt="webpack logo" width="200" height="200">
58-
</a>
59-
</div>`;
60-
expect(processReadme(loaderMDData)).toEqual('');
61-
});
6231
});

‎webpack.common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const mdPlugins = [
88
require('remark-slug'),
99
remarkResponsiveTable,
1010
require('remark-emoji'),
11+
require('./src/remark-plugins/remark-cleanup-readme/index.js'),
1112
[
1213
require('./src/remark-plugins/remark-custom-asides/index.js'),
1314
{

0 commit comments

Comments
 (0)