fix: #1114 static files in blog/assets is not working (#1143)

* fix: #1114 static files in `blog/assets` is not working

* lint fix

v1/lib/server/__tests__/__snapshots__/blog.test.js.snap

@@ -15,3 +15,51 @@ We are very happy to introduce [Docusaurus](https://github.com/facebook/Docusaur
   "title": "Docusaurus",
 }
 `;
+
+exports[`replaceAssetsLink does not transform document without valid assets link 1`] = `
+"
+### Existing Docs
+
+- [doc1](doc1.md)
+- [doc2](./doc2.md)
+
+### Non-existing Docs
+
+- [hahaha](hahaha.md)
+
+## Repeating Docs
+
+- [doc1](doc1.md)
+- [doc2](./doc2.md)
+
+## Do not replace this
+\`\`\`md
+![image1](assets/image1.png)
+\`\`\`
+
+\`\`\`js
+const doc1 = foo();
+console.log(\\"[image2](assets/image2.jpg)\\");
+const testStr = \`![image3](assets/image3.gif)\`;
+\`\`\`"
+`;
+
+exports[`replaceAssetsLink transform document with valid assets link 1`] = `
+"
+Docusaurus is the best :)
+
+![image1](/blog/assets/image1.png)
+
+\`\`\`js
+console.log(\\"Docusaurus\\");
+\`\`\`
+
+![image2](/blog/assets/image2.jpg)
+![image3](/blog/assets/image3.gif)
+
+Don't replace the one below
+\`\`\`md
+
+![image4](assets/image4.bmp)
+\`\`\`"
+`;

v1/lib/server/__tests__/blog.test.js

@@ -7,6 +7,8 @@
 const path = require('path');
 const fs = require('fs-extra');
 const blog = require('../blog');
+const metadataUtils = require('../metadataUtils');
+const {replaceAssetsLink} = require('../utils.js');
 
 const testFile = path.join(
   __dirname,
@@ -66,3 +68,38 @@ describe('urlToSource', () => {
     );
   });
 });
+
+describe('replaceAssetsLink', () => {
+  test('transform document with valid assets link', () => {
+    const doc1 = fs.readFileSync(
+      path.join(__dirname, '__fixtures__', 'doc1.md'),
+      'utf8',
+    );
+    const rawContent1 = metadataUtils.extractMetadata(doc1).rawContent;
+    const content1 = replaceAssetsLink(rawContent1, 'blog');
+    expect(content1).toMatchSnapshot();
+    expect(content1).toContain('![image1](/blog/assets/image1.png)');
+    expect(content1).toContain('![image2](/blog/assets/image2.jpg)');
+    expect(content1).toContain('![image3](/blog/assets/image3.gif)');
+    expect(content1).toContain('![image4](assets/image4.bmp)');
+    expect(content1).not.toContain('![image1](assets/image1.png)');
+    expect(content1).not.toContain('![image2](assets/image2.jpg)');
+    expect(content1).not.toContain('![image3](assets/image3.gif)');
+    expect(content1).not.toContain('![image4](/blog/assets/image4.bmp)');
+    expect(content1).not.toEqual(rawContent1);
+  });
+
+  test('does not transform document without valid assets link', () => {
+    const doc2 = fs.readFileSync(
+      path.join(__dirname, '__fixtures__', 'doc2.md'),
+      'utf8',
+    );
+    const rawContent2 = metadataUtils.extractMetadata(doc2).rawContent;
+    const content2 = replaceAssetsLink(rawContent2, 'blog');
+    expect(content2).toMatchSnapshot();
+    expect(content2).not.toContain('![image1](/blog/assets/image1.png)');
+    expect(content2).not.toContain('![image2](/blog/assets/image2.jpg)');
+    expect(content2).not.toContain('![image3](/blog/assets/image3.gif)');
+    expect(content2).toEqual(rawContent2);
+  });
+});

v1/lib/server/__tests__/docs.test.js

@@ -14,6 +14,7 @@ const path = require('path');
 const fs = require('fs-extra');
 const docs = require('../docs');
 const metadataUtils = require('../metadataUtils');
+const {replaceAssetsLink} = require('../utils.js');
 
 jest.mock('../env', () => ({
   translation: {
@@ -186,7 +187,7 @@ describe('getFile', () => {
 
 describe('replaceAssetsLink', () => {
   test('transform document with valid assets link', () => {
-    const content1 = docs.replaceAssetsLink(rawContent1);
+    const content1 = replaceAssetsLink(rawContent1, 'docs');
     expect(content1).toMatchSnapshot();
     expect(content1).toContain('![image1](/docs/assets/image1.png)');
     expect(content1).toContain('![image2](/docs/assets/image2.jpg)');
@@ -200,7 +201,7 @@ describe('replaceAssetsLink', () => {
   });
 
   test('does not transform document without valid assets link', () => {
-    const content2 = docs.replaceAssetsLink(rawContent2);
+    const content2 = replaceAssetsLink(rawContent2, 'docs');
     expect(content2).toMatchSnapshot();
     expect(content2).not.toContain('![image1](/docs/assets/image1.png)');
     expect(content2).not.toContain('![image2](/docs/assets/image2.jpg)');

v1/lib/server/blog.js

@@ -7,8 +7,9 @@
 const React = require('react');
 const path = require('path');
 const fs = require('fs-extra');
-const {renderToStaticMarkupWithDoctype} = require('./renderUtils');
 const metadataUtils = require('./metadataUtils');
+const {replaceAssetsLink} = require('./utils.js');
+const {renderToStaticMarkupWithDoctype} = require('./renderUtils');
 
 function urlToSource(url) {
   if (!url || typeof url !== 'string') {
@@ -56,7 +57,10 @@ function getMetadata(file) {
     fs.readFileSync(file, {encoding: 'utf8'}),
   );
   const metadata = Object.assign(
-    {path: fileToUrl(file), content: result.rawContent},
+    {
+      path: fileToUrl(file),
+      content: replaceAssetsLink(result.rawContent, 'blog'),
+    },
     result.metadata,
   );
   metadata.id = metadata.title;

v1/lib/server/docs.js

@@ -16,6 +16,7 @@ const env = require('./env.js');
 const {renderToStaticMarkupWithDoctype} = require('./renderUtils');
 const readMetadata = require('./readMetadata.js');
 const {insertTOC} = require('../core/toc.js');
+const {replaceAssetsLink} = require('./utils.js');
 const {getPath} = require('../core/utils.js');
 
 const docsPart = `${siteConfig.docsUrl ? `${siteConfig.docsUrl}/` : ''}`;
@@ -102,22 +103,6 @@ function mdToHtmlify(oldContent, mdToHtml, metadata) {
   return content;
 }
 
-function replaceAssetsLink(oldContent) {
-  let fencedBlock = false;
-  const lines = oldContent.split('\n').map(line => {
-    if (line.trim().startsWith('```')) {
-      fencedBlock = !fencedBlock;
-    }
-    return fencedBlock
-      ? line
-      : line.replace(
-          /\]\(assets\//g,
-          `](${siteConfig.baseUrl}${docsPart}assets/`,
-        );
-  });
-  return lines.join('\n');
-}
-
 function getMarkup(rawContent, mdToHtml, metadata) {
   // generate table of contents
   let content = insertTOC(rawContent);
@@ -126,7 +111,7 @@ function getMarkup(rawContent, mdToHtml, metadata) {
   content = mdToHtmlify(content, mdToHtml, metadata);
 
   // replace any relative links to static assets (not in fenced code blocks) to absolute links
-  content = replaceAssetsLink(content);
+  content = replaceAssetsLink(content, 'docs');
 
   const DocsLayout = require('../core/DocsLayout.js');
   return renderToStaticMarkupWithDoctype(
@@ -164,5 +149,4 @@ module.exports = {
   getFilePath,
   getRedirectMarkup,
   mdToHtmlify,
-  replaceAssetsLink,
 };

v1/lib/server/utils.js

@@ -4,12 +4,12 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
 const cssnano = require('cssnano');
 const autoprefixer = require('autoprefixer');
 const postcss = require('postcss');
 const path = require('path');
 const escapeStringRegexp = require('escape-string-regexp');
+const siteConfig = require('../../website/siteConfig.js');
 
 function getSubDir(file, refDir) {
   const subDir = path.dirname(path.relative(refDir, file)).replace(/\\/g, '/');
@@ -66,10 +66,27 @@ function autoPrefixCss(cssContent) {
     .then(result => result.css);
 }
 
+function replaceAssetsLink(oldContent, location) {
+  let fencedBlock = false;
+  const lines = oldContent.split('\n').map(line => {
+    if (line.trim().startsWith('```')) {
+      fencedBlock = !fencedBlock;
+    }
+    return fencedBlock
+      ? line
+      : line.replace(
+          /\]\(assets\//g,
+          `](${siteConfig.baseUrl}${location}/assets/`,
+        );
+  });
+  return lines.join('\n');
+}
+
 module.exports = {
   getSubDir,
   getLanguage,
   isSeparateCss,
   minifyCss,
   autoPrefixCss,
+  replaceAssetsLink,
 };