diff --git a/packages/docusaurus-init/templates/bootstrap/docs/doc1.md b/packages/docusaurus-init/templates/bootstrap/docs/doc1.md index 69bc29545b..f344218b3a 100644 --- a/packages/docusaurus-init/templates/bootstrap/docs/doc1.md +++ b/packages/docusaurus-init/templates/bootstrap/docs/doc1.md @@ -89,6 +89,11 @@ Reference-style: ![alt text][logo] [logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png 'Logo Title Text 2' +Images from any folder can be used by providing path to file. Path should be relative to markdown file. + +![img](../static/img/logo.svg) + + --- ## Code diff --git a/packages/docusaurus-init/templates/classic/docs/doc1.md b/packages/docusaurus-init/templates/classic/docs/doc1.md index 69bc29545b..c6799eacab 100644 --- a/packages/docusaurus-init/templates/classic/docs/doc1.md +++ b/packages/docusaurus-init/templates/classic/docs/doc1.md @@ -89,6 +89,10 @@ Reference-style: ![alt text][logo] [logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png 'Logo Title Text 2' +Images from any folder can be used by providing path to file. Path should be relative to markdown file. + +![img](../static/img/logo.svg) + --- ## Code diff --git a/packages/docusaurus-init/templates/facebook/docs/doc1.md b/packages/docusaurus-init/templates/facebook/docs/doc1.md index 69bc29545b..c6799eacab 100644 --- a/packages/docusaurus-init/templates/facebook/docs/doc1.md +++ b/packages/docusaurus-init/templates/facebook/docs/doc1.md @@ -89,6 +89,10 @@ Reference-style: ![alt text][logo] [logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png 'Logo Title Text 2' +Images from any folder can be used by providing path to file. Path should be relative to markdown file. + +![img](../static/img/logo.svg) + --- ## Code diff --git a/packages/docusaurus-mdx-loader/src/index.js b/packages/docusaurus-mdx-loader/src/index.js index 851ff6cc0b..f87151e959 100644 --- a/packages/docusaurus-mdx-loader/src/index.js +++ b/packages/docusaurus-mdx-loader/src/index.js @@ -13,6 +13,7 @@ const matter = require('gray-matter'); const stringifyObject = require('stringify-object'); const slug = require('./remark/slug'); const rightToc = require('./remark/rightToc'); +const relativePath = require('./remark/transformImage'); const DEFAULT_OPTIONS = { rehypePlugins: [], @@ -29,6 +30,10 @@ module.exports = async function (fileString) { remarkPlugins: [ ...(reqOptions.beforeDefaultRemarkPlugins || []), ...DEFAULT_OPTIONS.remarkPlugins, + [ + relativePath, + {staticDir: reqOptions.staticDir, filePath: this.resourcePath}, + ], ...(reqOptions.remarkPlugins || []), ], rehypePlugins: [ diff --git a/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__snapshots__/index.test.js.snap b/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__snapshots__/index.test.js.snap new file mode 100644 index 0000000000..371c08d683 --- /dev/null +++ b/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__snapshots__/index.test.js.snap @@ -0,0 +1,20 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`transform md images to 1`] = ` +"![img](https://example.com/img.png) + + + +{\\"img\\"} + +{\\"img\\"} ![img](/img.png) + +## Heading + +\`\`\`md +![img](./img.png) +\`\`\` + +{\\"img\\"} +" +`; diff --git a/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/fixtures/fail.md b/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/fixtures/fail.md new file mode 100644 index 0000000000..778aa15715 --- /dev/null +++ b/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/fixtures/fail.md @@ -0,0 +1 @@ +![img](/img/post.png) diff --git a/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/fixtures/img.md b/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/fixtures/img.md new file mode 100644 index 0000000000..1959b19e23 --- /dev/null +++ b/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/fixtures/img.md @@ -0,0 +1,15 @@ +![img](https://example.com/img.png) + +![](./img.png) + +![img](./img.png) + +![img](./img.png 'Title') ![img](/img.png) + +## Heading + +```md +![img](./img.png) +``` + +![img](img.png) diff --git a/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/fixtures/img.png b/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/fixtures/img.png new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/index.test.js b/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/index.test.js new file mode 100644 index 0000000000..c995bda007 --- /dev/null +++ b/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/index.test.js @@ -0,0 +1,38 @@ +/** + * 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 {join} from 'path'; +import remark from 'remark'; +import mdx from 'remark-mdx'; +import vfile from 'to-vfile'; +import plugin from '../index'; +import slug from '../../slug/index'; + +const processFixture = async (name, options) => { + const path = join(__dirname, 'fixtures', `${name}.md`); + const file = await vfile.read(path); + const result = await remark() + .use(slug) + .use(mdx) + .use(plugin, {...options, filePath: path}) + .process(file); + + return result.toString(); +}; + +test('fail if image donot exists', async () => { + expect( + processFixture('fail', {staticDir: join(__dirname, 'fixtures')}), + ).rejects.toBeInstanceOf(Error); +}); + +test('transform md images to ', async () => { + const result = await processFixture('img', { + staticDir: join(__dirname, 'fixtures'), + }); + expect(result).toMatchSnapshot(); +}); diff --git a/packages/docusaurus-mdx-loader/src/remark/transformImage/index.js b/packages/docusaurus-mdx-loader/src/remark/transformImage/index.js new file mode 100644 index 0000000000..d0c6171a07 --- /dev/null +++ b/packages/docusaurus-mdx-loader/src/remark/transformImage/index.js @@ -0,0 +1,59 @@ +/** + * 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. + */ + +const visit = require('unist-util-visit'); +const path = require('path'); +const url = require('url'); +const fs = require('fs-extra'); + +const plugin = (options) => { + const transformer = (root) => { + visit(root, 'image', (node) => { + if (!url.parse(node.url).protocol) { + if (!path.isAbsolute(node.url)) { + if ( + !fs.existsSync(path.join(path.dirname(options.filePath), node.url)) + ) { + throw new Error( + `Image ${path.join( + path.dirname(options.filePath), + node.url, + )} used in ${options.filePath} not found.`, + ); + } + node.type = 'jsx'; + node.value = ``; + if (node.url) { + delete node.url; + } + if (node.alt) { + delete node.alt; + } + if (node.title) { + delete node.title; + } + } else if (!fs.existsSync(path.join(options.staticDir, node.url))) { + throw new Error( + `Image ${path.join(options.staticDir, node.url)} used in ${ + options.filePath + } not found.`, + ); + } + } + }); + }; + + return transformer; +}; + +module.exports = plugin; diff --git a/packages/docusaurus-plugin-content-blog/package.json b/packages/docusaurus-plugin-content-blog/package.json index c8f1c7f977..c46dba7081 100644 --- a/packages/docusaurus-plugin-content-blog/package.json +++ b/packages/docusaurus-plugin-content-blog/package.json @@ -18,6 +18,7 @@ "@docusaurus/mdx-loader": "^2.0.0-alpha.58", "@docusaurus/types": "^2.0.0-alpha.58", "@docusaurus/utils": "^2.0.0-alpha.58", + "@docusaurus/core": "2.0.0-alpha.58", "@hapi/joi": "^17.1.1", "feed": "^4.1.0", "fs-extra": "^8.1.0", @@ -28,7 +29,6 @@ "remark-admonitions": "^1.2.1" }, "peerDependencies": { - "@docusaurus/core": "^2.0.0", "react": "^16.8.4", "react-dom": "^16.8.4" }, diff --git a/packages/docusaurus-plugin-content-blog/src/index.ts b/packages/docusaurus-plugin-content-blog/src/index.ts index bece97f97b..1b4c64a6a5 100644 --- a/packages/docusaurus-plugin-content-blog/src/index.ts +++ b/packages/docusaurus-plugin-content-blog/src/index.ts @@ -10,6 +10,7 @@ import kebabCase from 'lodash.kebabcase'; import path from 'path'; import admonitions from 'remark-admonitions'; import {normalizeUrl, docuHash, aliasedSitePath} from '@docusaurus/utils'; +import {STATIC_DIR_NAME} from '@docusaurus/core/lib/constants'; import {ValidationError} from '@hapi/joi'; import { @@ -363,6 +364,7 @@ export default function pluginContentBlog( options: { remarkPlugins, rehypePlugins, + staticDir: path.join(siteDir, STATIC_DIR_NAME), // Note that metadataPath must be the same/in-sync as // the path from createData for each MDX. metadataPath: (mdxPath: string) => { diff --git a/packages/docusaurus-plugin-content-docs/package.json b/packages/docusaurus-plugin-content-docs/package.json index ba503297ea..d0722d6d7f 100644 --- a/packages/docusaurus-plugin-content-docs/package.json +++ b/packages/docusaurus-plugin-content-docs/package.json @@ -33,10 +33,10 @@ "lodash.pickby": "^4.6.0", "lodash.sortby": "^4.6.0", "remark-admonitions": "^1.2.1", - "shelljs": "^0.8.4" + "shelljs": "^0.8.4", + "@docusaurus/core": "^2.0.0-alpha.58" }, "peerDependencies": { - "@docusaurus/core": "^2.0.0", "react": "^16.8.4", "react-dom": "^16.8.4" }, diff --git a/packages/docusaurus-plugin-content-docs/src/index.ts b/packages/docusaurus-plugin-content-docs/src/index.ts index e00ee58322..b1faf9e2af 100644 --- a/packages/docusaurus-plugin-content-docs/src/index.ts +++ b/packages/docusaurus-plugin-content-docs/src/index.ts @@ -13,6 +13,7 @@ import globby from 'globby'; import fs from 'fs-extra'; import path from 'path'; import admonitions from 'remark-admonitions'; +import {STATIC_DIR_NAME} from '@docusaurus/core/lib/constants'; import { normalizeUrl, docuHash, @@ -524,6 +525,7 @@ Available document ids= options: { remarkPlugins, rehypePlugins, + staticDir: path.join(siteDir, STATIC_DIR_NAME), metadataPath: (mdxPath: string) => { // Note that metadataPath must be the same/in-sync as // the path from createData for each MDX. diff --git a/website/docs/markdown-features.mdx b/website/docs/markdown-features.mdx index 9556513329..5a77e2dd56 100644 --- a/website/docs/markdown-features.mdx +++ b/website/docs/markdown-features.mdx @@ -959,8 +959,11 @@ You can use images by requiring them and using an image tag through MDX: # My markdown page -``` +or + +![](./assets/docusaurus-asset-example-banner.png) +``` The ES imports syntax also works: ```mdx