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:
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:
- 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).
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.