Community App: Contentful Components

Community App is Topcoder's community-facing app. Recently we decided to power some of its static pages by Contentful CMS. We have already figured out the setup we need, and prepared all code necessary for the integration. In this challenge we want to familiarize you with it, and we also ask you to improve one existing contentful component, and also to create another new one.

For this challenge you should work out of new-develop branch of Community App, commit 210cd6e338f84317805cdad85dd678a83ce55d91.

1. Read this and this Community App Wiki pages. They explain how to setup your environment for local development of contentful components, and how a good contentful component is expected to look and behave.
2. For the existing Banner component you will create a new theme, call it default_sub-community. It should implement the style of banner on Blockchain community (#3 at this screenshot, also live at https://blockchain.topcoder.com). In the existing sub-community code, you will find existing version of such theme; you should create a new version of it, that suites the new Banner component (you are not supposed to modify JSX code of the Banner). Update Contentful Banner model to allow selection of this new theme for banners. In blockchain community add the code to render these contentful banners right under the existing banner (also leave the existing banner in place, for now).
3. Create a new contentful component, called ContentBlock, and the corresponding Contentful data model. This block should be a single component that is able to power blocks #4, 5, 6 at the screenshot. Basically it should consist of:
   1. Container that fills entire width of parent block. White by default, but can be recolored by extra styles specified in CMS (#4 at the screenshot).
   2. The main textual content, with the maximal width restricted by $screen-lg size, and also having 30px padding on left and right sides (#4 at the screenshot).
   3. An optional image. If the image is provided, the block should turn into ##5-6 at the screenshot: the image will occupy half of the width, and the textual content will occupy the other half. Position of the image (left or right) should be determined based on the odd/even order of the block in the page layout (via css selectors). In the mobile view a block with image should collapse into column view: textual content under the image.
   4. Create two themes for this component: default one will be the same style as in blockchain community Home page; veterans style should match these blocks in veterans community. In case of veterans community, the textual content will have colored backgrounds. The default background colors should be added into the theme, and they should alter based on block order in the page. CMS should allow to add custom style for the content, that will allow to tune color of a specific block as necessary.
4. The new ContentBlock component should be demonstrated both as a standalone page, and inside blockchain / veterans community. For demonstration inside communities, create another contentful component, called Viewport (we already have a model for that). The Viewport data are just a list of content objects to render inside the viewport, and the component will just render all its objects into the page where it is used. Thus, for Home pages of Blockchain and Veterans communities you will add the code to show a single Viewport (similar to how banners are now embed into TopGear community pages), and it will be possible to add multipl content blocks into that viewport, completely modifying the page.

Resume: You should create two new components (ContentBlock and Viewport), and also an additional theme for Banner. The new components should follow the same architecture as the Banner. They should be flexible enough to re-create home pages of Blockchain and Veterans pages (sure, only the content that corresponds to them; e.g. the quote at Veterans is out of scope) using them. They should be flexible to be used in other communities.

In case of any doubts, do not hesitate to ask questions in the challenge forum!

Final Submission Guidelines

Submit Git patch for Community App, export of your Contentful space, and a brief demo video demonstrating implemented components in action.