From a1e7af7e0e543b230f66374f0817116e4a63e60e Mon Sep 17 00:00:00 2001 From: tsmrachel Date: Fri, 7 Dec 2018 23:58:20 +0800 Subject: [PATCH] fix: #1114 static files in `blog/assets` is not working (#1143) * fix: #1114 static files in `blog/assets` is not working * lint fix --- .../__tests__/__snapshots__/blog.test.js.snap | 48 +++++++++++++++++++ v1/lib/server/__tests__/blog.test.js | 37 ++++++++++++++ v1/lib/server/__tests__/docs.test.js | 5 +- v1/lib/server/blog.js | 8 +++- v1/lib/server/docs.js | 20 +------- v1/lib/server/utils.js | 19 +++++++- 6 files changed, 114 insertions(+), 23 deletions(-) diff --git a/v1/lib/server/__tests__/__snapshots__/blog.test.js.snap b/v1/lib/server/__tests__/__snapshots__/blog.test.js.snap index 9e024937a1..d7f553c410 100644 --- a/v1/lib/server/__tests__/__snapshots__/blog.test.js.snap +++ b/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) +\`\`\`" +`; diff --git a/v1/lib/server/__tests__/blog.test.js b/v1/lib/server/__tests__/blog.test.js index 4665858f10..85438621ba 100644 --- a/v1/lib/server/__tests__/blog.test.js +++ b/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); + }); +}); diff --git a/v1/lib/server/__tests__/docs.test.js b/v1/lib/server/__tests__/docs.test.js index 0b49617554..6e04df3a9e 100644 --- a/v1/lib/server/__tests__/docs.test.js +++ b/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)'); diff --git a/v1/lib/server/blog.js b/v1/lib/server/blog.js index d8522b50ee..243435ec2d 100644 --- a/v1/lib/server/blog.js +++ b/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; diff --git a/v1/lib/server/docs.js b/v1/lib/server/docs.js index 72ae591b87..f88dcf667d 100644 --- a/v1/lib/server/docs.js +++ b/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, }; diff --git a/v1/lib/server/utils.js b/v1/lib/server/utils.js index cc7a90cf0b..8ce892d334 100644 --- a/v1/lib/server/utils.js +++ b/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, };