Community App - Markdown Rendering to ReactJS Components + Support of Custom JSX in Markdown

Key Information

The challenge is finished.

Challenge Overview

Community App is the member-facing Topcoder frontend (for this challenge you will work out of the commit 9677c9c9f55d498b2baa3b6584a7f2867b6f5ed2 in the contentful-components branch). In a few places we use Markdown markup for the source content of the pages. The primary use case is for Contentful CMS integration (read this brief on the current integration of Contentful, and related development). The way it works now is:
  • Contentful serves some textual content in form of Markdown markup;
  • Community App relies on the markdown-it package to convert MD into HTML, then injects resulting HTML code into container component via the dangerouslySetInnerHTML prop (e.g. here).
We want to improve the rendering in two ways: (i) render MD into ReactJS components; (ii) on the way allow to include JSX markup into MD, to be able inline custom components from Community App - this is the primary purpose of this challenge, we want to be able to include buttons, e.g. JoinCommunity button, into textual content created in CMS.

markdown-it allows to tune rendering rules. Under the hood it always converts MD into an AST, then renders the AST into HTML with help of a renderer, which defines how each of AST elements should be rendered. The default renderer only renders into HTML. Its code is just 335 lines of JS, and it is quite simple, thus, we believe, it should be possible to write, based on it, a new renderer that renders into ReactJS components, and also recognizes some of JSX tags, specific to Community App, and renders them as corresponding components.

In principle, for MD > ReactJS rendering there are existing markdown-it plugins, that seems to do just that, but it seems that none of them is actively used / developed, thus it will be better to implement and control that code ourselves. Though, if you find a plugin, you believe, is good enough, and can be further extended to support our usecase, feel free to propose / discuss that.

To resume, there are two primary requirements in this challenge:
  • Implement MD > ReactJS rendering on top of markdown-it (and update existing contentful components to use that instead of HTML injection);
  • Implement support of embed JSX inside MD. We should be able to embed the following components into MD: JoinCommunity, Button, Link. Further adding of support for new inline components should be as easy as just adding a new line into renderer code, which basically maps a JSX tag to our custom ReactJS component that should be used to render it.
As usually, stick to the best development practices, and do not hesitate to discuss any ideas / clear any doubts in the challenge forum.

Final Submission Guidelines

Submit Git patch for the Community App, along with a brief demo video.


2018 Topcoder(R) Open


Final Review:

Community Review Board


User Sign-Off


ID: 30065736