-
-
Notifications
You must be signed in to change notification settings - Fork 32.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[docs] Use custom webpack loader for markdown (#26774)
- Loading branch information
Showing
185 changed files
with
1,099 additions
and
2,556 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| const { promises: fs, readFileSync } = require('fs'); | ||
| const path = require('path'); | ||
| const { notEnglishMarkdownRegExp, prepareMarkdown } = require('./parseMarkdown'); | ||
|
|
||
| /** | ||
| * @param {string} string | ||
| */ | ||
| function upperCaseFirst(string) { | ||
| return `${string[0].toUpperCase()}${string.slice(1)}`; | ||
| } | ||
|
|
||
| /** | ||
| * @param {string} key | ||
| * @example keyToJSIdentifier('index.md') === 'IndexMd' | ||
| * @example keyToJSIdentifier('index-ja.md') === 'IndexJaMd' | ||
| */ | ||
| function keyToJSIdentifier(key) { | ||
| const delimiter = /(\.|-)/; | ||
| return key | ||
| .split(delimiter) | ||
| .filter((part) => !delimiter.test(part)) | ||
| .map(upperCaseFirst) | ||
| .join(''); | ||
| } | ||
|
|
||
| /** | ||
| * @example findTranslatedVersions('/a/b/index.md') === ['index-en.md', 'index-ja.md', 'index.md'] | ||
| * @param {string} englishFilepath An absolute path to the english version written in markdown (.md) | ||
| */ | ||
| async function findTranslatedVersions(englishFilepath) { | ||
| const filename = path.basename(englishFilepath, '.md'); | ||
| const files = await fs.readdir(path.dirname(englishFilepath)); | ||
|
|
||
| // Given: index.md | ||
| // Match: index-en.md, index-ja.md | ||
| // Don't Match: otherindex-en.md, index-eng.md, index-e.md, index.tsx | ||
| const translatedVersionRegExp = new RegExp(`^${filename}${notEnglishMarkdownRegExp.source}`); | ||
|
|
||
| return files | ||
| .filter((filepath) => { | ||
| return translatedVersionRegExp.test(filepath); | ||
| }) | ||
| .concat(path.basename(englishFilepath)); | ||
| } | ||
|
|
||
| /** | ||
| * @type {import('webpack').loader.Loader} | ||
| */ | ||
| module.exports = async function demoLoader() { | ||
| const rawKeys = await findTranslatedVersions(this.resourcePath); | ||
|
|
||
| // TODO: Remove requireRaw mock (needs work in prepareMarkdown) | ||
| const requireRaw = (key) => { | ||
| const filepath = path.join(path.dirname(this.resourcePath), key); | ||
| this.addDependency(filepath); | ||
| return readFileSync(filepath, { encoding: 'utf-8' }); | ||
| }; | ||
| requireRaw.keys = () => rawKeys; | ||
| const pageFilename = this.context.replace(this.rootContext, '').replace(/^\/src\/pages\//, ''); | ||
| const { docs } = prepareMarkdown({ pageFilename, requireRaw }); | ||
|
|
||
| const demos = {}; | ||
| const demoKeys = []; | ||
| new Set( | ||
| docs.en.rendered | ||
| .filter((markdownOrComponentConfig) => { | ||
| return typeof markdownOrComponentConfig !== 'string' && markdownOrComponentConfig.demo; | ||
| }) | ||
| .map((demoConfig) => { | ||
| return path.basename(demoConfig.demo); | ||
| }), | ||
| ).forEach((filename) => { | ||
| const demoName = `pages/${pageFilename}/${filename | ||
| .replace(/\.\//g, '') | ||
| .replace(/\.tsx/g, '.js')}`; | ||
|
|
||
| demos[demoName] = { | ||
| module: filename, | ||
| raw: requireRaw(filename), | ||
| }; | ||
| demoKeys.push(filename); | ||
|
|
||
| try { | ||
| const moduleTS = filename.replace(/\.js$/, '.tsx'); | ||
| const rawTS = requireRaw(moduleTS); | ||
|
|
||
| demos[demoName].moduleTS = moduleTS; | ||
| demos[demoName].rawTS = rawTS; | ||
| demoKeys.push(moduleTS); | ||
| } catch (error) { | ||
| // TS version of the demo doesn't exist. This is fine. | ||
| } | ||
| }); | ||
|
|
||
| /** | ||
| * @param {string} key | ||
| */ | ||
| function getRequireDemoIdentifier(key) { | ||
| return keyToJSIdentifier(key); | ||
| } | ||
|
|
||
| const transformed = ` | ||
| ${demoKeys | ||
| .map((key) => { | ||
| return `import ${getRequireDemoIdentifier(key)} from './${key}';`; | ||
| }) | ||
| .join('\n')} | ||
| export const docs = ${JSON.stringify(docs, null, 2)}; | ||
| export const demos = ${JSON.stringify(demos, null, 2)}; | ||
| export function requireDemo(module) { | ||
| return { | ||
| ${demoKeys | ||
| .map((key) => { | ||
| // TODO: Remove ES module interop once all demos are loaded via loader | ||
| // i.e. replace `{ default: ... }` with `...` | ||
| return `'${key}': { default: ${getRequireDemoIdentifier(key)} }`; | ||
| }) | ||
| .join(',\n')} | ||
| }[module]; | ||
| } | ||
| requireDemo.keys = () => { | ||
| return ${JSON.stringify(demoKeys, null, 2)} | ||
| }`; | ||
|
|
||
| return transformed; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| { | ||
| "name": "@material-ui/markdown", | ||
| "version": "0.1.0", | ||
| "private": true, | ||
| "type": "commonjs", | ||
| "main": "./parseMarkdown.js", | ||
| "exports": { | ||
| ".": "./parseMarkdown.js", | ||
| "./loader": "./loader.js", | ||
| "./prism": "./prism.js" | ||
| }, | ||
| "dependencies": { | ||
| "lodash": "^4.17.15", | ||
| "marked": "^2.0.0", | ||
| "prismjs": "^1.17.1" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
docs/src/modules/utils/textToHash.test.js → docs/packages/markdown/textToHash.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,7 @@ | ||
| import * as React from 'react'; | ||
| import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; | ||
| import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; | ||
| import { docs } from '!@material-ui/markdown/loader!./2019-developer-survey-results.md'; | ||
|
|
||
| const pageFilename = 'blog/2019-developer-survey-results'; | ||
| const requireRaw = require.context('!raw-loader!./', false, /2019-developer-survey-results\.md$/); | ||
|
|
||
| export default function Page({ docs }) { | ||
| export default function Page() { | ||
| return <TopLayoutBlog docs={docs} />; | ||
| } | ||
|
|
||
| Page.getInitialProps = () => { | ||
| const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); | ||
| return { demos, docs }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,7 @@ | ||
| import * as React from 'react'; | ||
| import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; | ||
| import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; | ||
| import { docs } from '!@material-ui/markdown/loader!./2019.md'; | ||
|
|
||
| const pageFilename = 'blog/2019'; | ||
| const requireRaw = require.context('!raw-loader!./', false, /2019\.md$/); | ||
|
|
||
| export default function Page({ docs }) { | ||
| export default function Page() { | ||
| return <TopLayoutBlog docs={docs} />; | ||
| } | ||
|
|
||
| Page.getInitialProps = () => { | ||
| const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); | ||
| return { demos, docs }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,7 @@ | ||
| import * as React from 'react'; | ||
| import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; | ||
| import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; | ||
| import { docs } from '!@material-ui/markdown/loader!./2020-developer-survey-results.md'; | ||
|
|
||
| const pageFilename = 'blog/2020-developer-survey-results'; | ||
| const requireRaw = require.context('!raw-loader!./', false, /2020-developer-survey-results\.md$/); | ||
|
|
||
| export default function Page({ docs }) { | ||
| export default function Page() { | ||
| return <TopLayoutBlog docs={docs} />; | ||
| } | ||
|
|
||
| Page.getInitialProps = () => { | ||
| const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); | ||
| return { demos, docs }; | ||
| }; |
Oops, something went wrong.