Contentful was chosen to be our Content Management System (CMS) for the TC communities sites. We are in the process of converting “plain” ReactJS components to “Contentful ReactJS” components - such that render remote content.

 

Introduction

We have a basic starter guide related to the topic here. It describes how to setup developer environment and what is “Good Contentful Component”. There is related sub-document “ContentfulLoader” that describes mechanics driving the Contentful Components. Please start by reading those.

 

Note: There are recent updates and the documents are missing some of them but those still give very good base to start thinking in the sense of Contentful Components.

 

One of those recent developments is that we are using the new “MarkdownRenderer” component to render text content from Contentful. Read the code and understand how Contentful Components work as those required by this challenge should follow them and implement analogically. See “Banner” and “ContentBlock” as examples.

 

Updated Topcoder's Contentful types: Please use this export of Contentful space. It contains the models for the new components already defined.

Requirements

1. Contentful Quote Component

   1. Name `Quote`

   2. Should be implemented in the “Contentful” folder by following the practices described above.

   3. Styling the base default theme should follow look and feel of the quote from Jarah Meador from the Veterans community page should be named `default.scss`

   4. Additionally there should be second theme implemented following look and feel of the quote from Dave Messinger from the Cognitive community page that should be named `card.scss` and indexed via `baseTheme` like in Banner/index.jsx with possible options “Default” and “Card”

   5. The Underlying Data Model:

      1. quote.name - Just for ref entry name inside CMS. Not to be rendered, but a handy way to distinguish objects in CMS.

      2. quote.text - should be the text of the quote and support markdown rendering via the “MarkdownRenderer”

      3. quote.authorAvatar[optional] - url of avatar image to render. If not set do not render the image. Here is an example, how to load image included into a content object.

      4. quote.authorName - name of the quote author

      5. quote.authorAffiliation[optional]   - the working department of the quote author

      6. quote.baseTheme - theme to use for the quote component.

2. Contentful Video Component

   1. The Underlying Data Model:

      1. video.name - Just for ref entry name inside CMS. Not to be rendered, but a handy way to distinguish objects in CMS.

      2. video.autoplay[optional] - Start the video automatically?

      3. video.source - Source link of the video

      4. video.title - Title of the video container

      5. video.showRelatedVideoSuggestions[optional] - Disable suggestions of relevant videos after the video?

   2. We have already a component to render videos. It is located here and should be used as the base for video rendering.

   3. The component itself needs only little patch: That component needs an extra option, to disable suggestions of relevant videos after the video. Technically, it demands adding `?rel=0` query param to the URL of embed video. See how it is done for `autoplay` and implement same for `showRelatedVideoSuggestions`. Adding `?rel=0` should include a check, whether such url parameter is already in URL, and if it is - it should be properly updated, otherwise - added.

   4. Implement the needed wrapper component for the video that uses the already existing one but takes its props from a `ContentfulLoader`

3. Update Viewport

   1. Update the existing Viewport component to support the new types of Contentful Components. The mapping to use is: “quote” and “video” for the corresponding ids.

4. Demo the new components

   1. Create stand-alone demos of each component, mounted on /examples/contentful/{COMPONENT_NAME}/{COMPONENT_ID}
      and linked from the app's content page, same as it is done for existing components in Contentful. Enable use the `preview` flag on them.

5. Project tests should remain working. Linting should not produce new errors.

 

Please base your work on latest commit `ffff89e2a9a4751e05770706954e10be4ea13fa8` from new-develop branch in out community-app repo.

Final Submission Guidelines

Submit git patch file with your work.

Submit deployment and verification document. Include your `CDN_API_KEY` and `SPACE_ID` and `PREVIEW_API_KEY` keys so reviewers can test your submission when running against your Contentful space.