From 09354ab738540349778bc7a704e323c05216047d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ramos?= <165856+hramos@users.noreply.github.com> Date: Mon, 30 Oct 2017 15:47:13 -0700 Subject: [PATCH] [BREAKING] Rename Marked to MarkdownBlock (#162) * Switch to Remarkable * Clean up references to custom code blocks * Remove valdiateDOMNesting warning * Add syntax highlighting * Add Reason support * Breaking change: prismColor to codeColor, remove CompLibrary.Prism, expose hljs * Completely remove Prism and associated CSS rules * Support loading plugins and scripts * Remove CSS rules, allowing Highlight.js theme to be used entirely * Remove unnecessary webplayer script * Rename Marked to MarkdownBlock * Rename Marked to MarkdownBlock * Remove Marked.js --- docs/api-pages.md | 8 ++++---- examples/basics/pages/en/index.js | 4 ++-- lib/core/BlogPost.js | 6 +++--- lib/core/CompLibrary.js | 6 +++--- lib/core/Doc.js | 4 ++-- lib/core/GridBlock.js | 10 +++++----- lib/core/{Marked.js => MarkdownBlock.js} | 9 ++++++--- lib/server/server.js | 2 +- website/pages/en/index.js | 2 +- website/siteConfig.js | 1 + 10 files changed, 28 insertions(+), 24 deletions(-) rename lib/core/{Marked.js => MarkdownBlock.js} (68%) diff --git a/docs/api-pages.md b/docs/api-pages.md index 9f9b26332d44..879ea8b64b72 100644 --- a/docs/api-pages.md +++ b/docs/api-pages.md @@ -22,16 +22,16 @@ If you wish to use your own components inside the website folder, use `process.c Docusaurus provides the following components in `CompLibrary`: -### `CompLibrary.Marked` +### `CompLibrary.MarkdownBlock` -A React component that parses Markdown to html. +A React component that parses markdown and renders to HTML. Example: ```jsx -const Marked = CompLibrary.Marked; +const MarkdownBlock = CompLibrary.MarkdownBlock; -[Markdown syntax for a link](http://www.example.com) +[Markdown syntax for a link](http://www.example.com) ``` ### `CompLibrary.Container` diff --git a/examples/basics/pages/en/index.js b/examples/basics/pages/en/index.js index 034813712dbe..f57264b6ae8c 100755 --- a/examples/basics/pages/en/index.js +++ b/examples/basics/pages/en/index.js @@ -8,7 +8,7 @@ const React = require("react"); const CompLibrary = require("../../core/CompLibrary.js"); -const Marked = CompLibrary.Marked; /* Used to read markdown */ +const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */ const Container = CompLibrary.Container; const GridBlock = CompLibrary.GridBlock; @@ -126,7 +126,7 @@ class Index extends React.Component { style={{ textAlign: "center" }} >

Feature Callout

- These are features of this project + These are features of this project diff --git a/lib/core/BlogPost.js b/lib/core/BlogPost.js index 6307224399fd..d4e1ee05d415 100644 --- a/lib/core/BlogPost.js +++ b/lib/core/BlogPost.js @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -const Marked = require("./Marked.js"); +const MarkdownBlock = require("./MarkdownBlock.js"); const React = require("react"); // inner blog component for the article itself, without sidebar/header/footer @@ -28,12 +28,12 @@ class BlogPost extends React.Component { content = content.split("")[0]; return (
- {content} + {content} {hasSplit}
); } - return {content}; + return {content}; } renderAuthorPhoto() { diff --git a/lib/core/CompLibrary.js b/lib/core/CompLibrary.js index d49152b01c89..d8f9dbf74811 100644 --- a/lib/core/CompLibrary.js +++ b/lib/core/CompLibrary.js @@ -5,13 +5,13 @@ * LICENSE file in the root directory of this source tree. */ -const Marked = require("./Marked.js"); +const MarkdownBlock = require("./MarkdownBlock.js"); const Container = require("./Container.js"); const GridBlock = require("./GridBlock.js"); -// collection of other components to provide to users +// A collection of components to provide to users module.exports = { - Marked: Marked, + MarkdownBlock: MarkdownBlock, Container: Container, GridBlock: GridBlock }; diff --git a/lib/core/Doc.js b/lib/core/Doc.js index eba3f8928f3a..efe1d2069b1b 100644 --- a/lib/core/Doc.js +++ b/lib/core/Doc.js @@ -6,7 +6,7 @@ */ const React = require("react"); -const Marked = require("./Marked.js"); +const MarkdownBlock = require("./MarkdownBlock.js"); const translate = require("../server/translate.js").translate; @@ -51,7 +51,7 @@ class Doc extends React.Component {

{this.props.title}

- {this.props.content} + {this.props.content}
); diff --git a/lib/core/GridBlock.js b/lib/core/GridBlock.js index bb3ca3f854d8..8e57735129f5 100755 --- a/lib/core/GridBlock.js +++ b/lib/core/GridBlock.js @@ -8,7 +8,7 @@ const React = require("react"); const classNames = require("classnames"); -const Marked = require("./Marked.js"); +const MarkdownBlock = require("./MarkdownBlock.js"); class GridBlock extends React.Component { renderBlock(block) { @@ -38,9 +38,9 @@ class GridBlock extends React.Component { {topLeftImage}
{this.renderBlockTitle(block.title)} - + {block.content} - +
{bottomRightImage} @@ -73,9 +73,9 @@ class GridBlock extends React.Component { if (title) { return (

- + {title} - +

); } else { diff --git a/lib/core/Marked.js b/lib/core/MarkdownBlock.js similarity index 68% rename from lib/core/Marked.js rename to lib/core/MarkdownBlock.js index 2b7110d069ff..267c604afc2b 100644 --- a/lib/core/Marked.js +++ b/lib/core/MarkdownBlock.js @@ -5,12 +5,14 @@ * LICENSE file in the root directory of this source tree. */ -/* Marked component is used to parse markdown to html */ +/** + * The MarkdownBlock component is used to parse markdown and render to HTML. + */ const React = require('react'); const Remarkable = require('./Remarkable'); -class Marked extends React.Component { +class MarkdownBlock extends React.Component { render() { return ( @@ -18,4 +20,5 @@ class Marked extends React.Component { } } -module.exports = Marked; +module.exports = MarkdownBlock; + diff --git a/lib/server/server.js b/lib/server/server.js index 484273676bc0..5585e47f6357 100644 --- a/lib/server/server.js +++ b/lib/server/server.js @@ -239,7 +239,7 @@ function execute(port) { if (metadata.layout && siteConfig.layouts[metadata.layout]) { Doc = siteConfig.layouts[metadata.layout]({ React, - Marked: require("../core/Marked.js") + MarkdownBlock: require("../core/MarkdownBlock.js") }); } diff --git a/website/pages/en/index.js b/website/pages/en/index.js index 368893d10a1c..bcd29cd59a5f 100755 --- a/website/pages/en/index.js +++ b/website/pages/en/index.js @@ -8,9 +8,9 @@ const React = require("react"); const CompLibrary = require("../../core/CompLibrary.js"); -const Marked = CompLibrary.Marked; /* Used to read markdown */ const Container = CompLibrary.Container; const GridBlock = CompLibrary.GridBlock; +const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */ const siteConfig = require(process.cwd() + "/siteConfig.js"); diff --git a/website/siteConfig.js b/website/siteConfig.js index 84092105b5bb..dd24bd38e8cd 100644 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -71,4 +71,5 @@ const siteConfig = { } }; + module.exports = siteConfig;