Skip to content

Commit d25a536

Browse files
kkartunovkkartunov
committed
Sync hot-fixes with develop 
2 parents dac18b7 + 94056b7 commit d25a536

File tree

116 files changed

+2434
-188
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

116 files changed

+2434
-188
lines changed

‎.circleci/config.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -180,8 +180,8 @@ workflows:
180180
context : org-global
181181
filters:
182182
branches:
183-
only:
184-
- legacy-tco
183+
only:
184+
- legacy-tco
185185
# This is beta env for production soft releases
186186
- "build-prod-beta":
187187
context : org-global

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
![Dev Build Status](https://img.shields.io/circleci/project/github/topcoder-platform/community-app/develop.svg?label=develop)
22
![Master Build Status](https://img.shields.io/circleci/project/github/topcoder-platform/community-app/master.svg?label=master)
3+
[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=topcoder-platform_community-app&metric=alert_status)](https://sonarcloud.io/dashboard?id=topcoder-platform_community-app)
4+
[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=topcoder-platform_community-app&metric=security_rating)](https://sonarcloud.io/dashboard?id=topcoder-platform_community-app)
5+
[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=topcoder-platform_community-app&metric=vulnerabilities)](https://sonarcloud.io/dashboard?id=topcoder-platform_community-app)
36

47
# Topcoder Community App
58
New version of Topcoder Community website.

‎docs/contentful/ContentBlock.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Content Block
2+
The first content type you should consider for your content elements inside a viewport. It allows you to insert into the page arbitrary text (supporting Markdown and HTML syntax), as well as misc inline UI elements, specific to our website (buttons, internal hyper-references, modals, etc.). It also supports the *image + text* type of content, for cases when, rather than an inline image, you need some special layout of the image with respect to the textual content. We also support different styles for content blocks via themes.
3+
4+
## Fields
5+
![](./pics/ContentBlock.png)

‎docs/contentful/Countdown.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Countdown
2+
Generic Countdown model. Renders a countdown timer until `endDate` is reached.
3+
4+
## Fields
5+
![](./pics/Countdown.png)

‎docs/contentful/DashboardAnnouncement.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Dashboard Announcement
2+
An announcement scheduled to be shown in the Topcoder's member dashboard.
3+
4+
## Fields
5+
![](./pics/DashboardAnnouncement.png)

‎docs/contentful/Dropdown.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Dropdown
2+
The component for blocks of content rendered in dropdows. Renders a list of **Dropdown Items** objects, that provide content for it.
3+
4+
## Fields
5+
**Dropdown**
6+
![](./pics/Dropdown.png)
7+
8+
**Dropdown Item**
9+
![](./pics/DropdownItem.png)

‎docs/contentful/NavigationMenu.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Navigation Menu
2+
Model that will render navigation menus of links with optional sub-links/menus. Menu items are controlled by **Navigation Menu Item** componets. We plan to add support for [Route](./Route.md) components as well in near future.
3+
4+
## Fields
5+
**Navigation Menu**
6+
![](./pics/NavigationMenu.png)
7+
8+
**Navigation Menu Item**
9+
![](./pics/NavigationMenuItem.png)

‎docs/contentful/Route.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Route
2+
A Route that can render a Viewport at its endpoint, and also include sub-routes with Viewports. When linked to community-app it will render its [Viewport](./viewport.md) under the specified `URL`.
3+
4+
## Fields
5+
![](./pics/Route.png)

‎docs/contentful/accordion.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Accordion
2+
The component for blocks of content. Each accordion holds a list of **AccordionItem** objects, that provide content for it.
3+
4+
## Fields
5+
**Accordion**
6+
![](./pics/Accordion.png)
7+
8+
**Accordion Item**
9+
![](./pics/AccordionItem.png)

‎docs/contentful/banner.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Banner
2+
This content type provides banners: large background image, some textual content, positioned above it, and also some extra background just under the text, to improve its readability against the main background image. We support a few different banner styles via themes. Moving forward, probably, we will merge **Banner** type into **ContentBlock** one at some point, as there is no much differences between them in term of data they rely on.
3+
4+
## Fields
5+
![](./pics/Banner.png)

‎docs/contentful/component-design.md

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
# Design of a Good Contentful Component
2+
3+
At the moment, [Contentful Banner](https://github.com/topcoder-platform/community-app/tree/new-develop/src/shared/components/Contentful/Banner)
4+
component should be taken as an example of a good Contentful Component. Please,
5+
design and implement other contentful components in a similar way.
6+
7+
The Banner implements a content block with background image, and a smaller
8+
content area, which is intended to contain some textual content. The actual
9+
design can be very different, compare header banners at the following pages:
10+
- [Blockchain Community](https://community-app.topcoder-dev.com/community/blockchain)
11+
- [TopGear Community](https://community-app.topcoder-dev.com/community/wipro)
12+
- [Veterans Community](https://community-app.topcoder-dev.com/community/veterans)
13+
14+
### Architecture of The Banner
15+
- [`Banner.jsx`](https://github.com/topcoder-platform/community-app/tree/new-develop/src/shared/components/Contentful/Banner)
16+
is a simple functional component that, given all banner data as props, renders
17+
corresponding JSX markup.
18+
19+
Note that:
20+
- It uses [react-css-super-themr](https://www.npmjs.com/package/react-css-super-themr)
21+
for the base theme management. In addition, it also takes additional styles
22+
from `banner` prop and injects them as inline styles. The reasoning behind
23+
it is: (1) themr themes are responsible for the base theme of a banner,
24+
which can be selected by a single switch in CMS; (2) additional inline
25+
styles allow to further customise any style details from CMS, if necessary.
26+
It might be necessary for banners; for example, position and size of the
27+
banner content is different at each page of TopGear community.
28+
29+
Banner themes are located [here](https://github.com/topcoder-platform/community-app/tree/new-develop/src/shared/components/Contentful/Banner/themes).
30+
31+
- It tries to be as generic as possible. It does not ask for banner title,
32+
and text as separate props; it just assumes that all content will be
33+
provided as Markdown code, thus any textual content can be rendered into it.
34+
35+
- [`index.js`](https://github.com/topcoder-platform/community-app/blob/new-develop/src/shared/components/Contentful/Banner/index.jsx)
36+
takes care about the loading of banner data from Contentful, selection of the
37+
theme specified in CMS, and then it uses `Banner.jsx` for the actual rendering.
38+
39+
For data loading you should use [`ContentfulLoader`](ContentfulLoader)
40+
container. You see that in case of the banner, two nested `ContenfulLoader`
41+
containers are used: the first one to get most of the banner data, and the
42+
second one to get data of the background image.
43+
44+
### Design of The Underlying Data Model
45+
46+
There are a few things to pay attention for:
47+
48+
- Banner has a `name` field, which is not used for rendering! It is there to
49+
help distinguish different content objects within CMS. In some cases, it makes
50+
sense to use the same field to name a data object, and also to render it as
51+
a title of the component, but even then it will be convenient to have an
52+
additional optional field that allows to specify a title different from
53+
the object name in CMS;
54+
55+
- `text` and `backgroundImage` fields are self-explanatory: they just allow to
56+
provided textual content of the banner, and the background image;
57+
58+
- `baseTheme` (**Banner Style**) field allows to select the base banner theme.
59+
This acts as selector of one of valid themr themes for the component. In most
60+
cases, selecting the theme should be the only style-related setting user need
61+
to do. If there are some other appearance-related settings that will be set
62+
for each instance of object, they can be exposed as dedicated fields in CMS.
63+
64+
- `containerStyles`, `contentWrapperStyles`, `contentStyles`: in case of the
65+
banners, for TopGear community appearance of the banner on different pages
66+
demands customization (position of content, size and color of its background
67+
are different on each page). It makes no sence to expose related style settings
68+
as seprate fields in CMS, as there will be many of them, it will just pollute
69+
the data model; thus these fields accept JSON objects that allow to apply any
70+
extra custom styling to each HTML element of the banner, if necessary.
71+
72+
Once again, it is our last resort, you won't need this for most of the components
73+
you create.

‎docs/contentful/content-types.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
### Primary Content Types
2+
3+
- **Viewport** – A generic container for other objects, that renders its
4+
children into a column. At the moment, the following content types are supported
5+
as viewport children: **Accordion**, **Banner**, **ContentBlock**. Moving
6+
forward, the plan is (i) to support nested viewports; (ii) to add different
7+
layout options for viewport content. This will allow to flexibily construct
8+
complex layouts out of viewports, thus treat viewports as the main content
9+
layout and grouping component.
10+
11+
- **ContentBlock** – The first content type you should consider for your
12+
content elements inside a viewport. It allows you to insert into the page
13+
arbitrary text (supporting Markdown and HTML syntax), as well as misc inline
14+
UI elements, specific to our website (buttons, internal hyper-references, etc.).
15+
It also supports the *image + text* type of content, for cases when, rather
16+
than an inline image, you need some special layout of the image with respect
17+
to the textual content. We also support different styles for content blocks.
18+
19+
- **Banner** – This content type provides banners: large background image,
20+
some textual content, positioned above it, and also some extra background just
21+
under the text, to improve its readability against the main background image.
22+
We support a few different banner styles. Moving forward, probably, we will
23+
merge **Banner** type into **ContentBlock** one at some point, as there is
24+
no much differences between them in term of data they rely on.
25+
26+
- **Accordion** – The component for FAQ blocks. Each accordion holds
27+
a list of **AccordionItem** objects, that provide
28+
*Brief Question – Not necessarily brief answer* type of content.
29+
30+
- **Quote** - Component for styled quote blocks. Supports themes and author avatar, name, affiliation.
31+
32+
- **Video** - Component to embed external videos via source url. Supports multiple options like `autoplay` and etc.
33+
34+
- **Route** – It will allow create new pages from within CMS. For each
35+
page you will be be able to specify the URL where it should be mounted, the
36+
title, thumbnail, and other SEO meta-data, along with the viewport that page
37+
should render for visitors. It will be possible to nest pages, to simplify
38+
the hanlding of routing.

‎docs/contentful/content-writer-basics.md

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# Basics
2+
As content writer, you will spend most of your time in Contentful, creating new
3+
or editing existing content objects, belonging to various types, and assembling
4+
them together into web pages that fulfil your goals.
5+
6+
Here is one screen you will see often – content listing:
7+
![](./pics/01-content-listing.png)
8+
9+
In addition to the list of content (at the screenshot it shows all
10+
non-archived content entries of *viewport* type, with their names, last update,
11+
author, and status), pay attention to:
12+
13+
- The panels above and left of the list allow to filter it in multiple ways, and
14+
also store and reuse the searches you need often;
15+
16+
- The *Add entry* button let you create new entries;
17+
18+
- The *Media* tab in the very top menu gives acess to the listing of assets
19+
(images, documents, etc.) loaded directly into CMS. The asset listing looks
20+
and works similar to the content listing.
21+
22+
Here is a typical content editing screen (the amount and types of input fields
23+
inside the main part of the page, depends on the type of content object you edit,
24+
in this case – *viewport* object):
25+
![](./pics/02-content-edit-screen.png)
26+
27+
Here are the most important things to note:
28+
- The *Name* field – it may work differently for some content types, but
29+
our general convention is to have the *Name* field for each object as its name
30+
inside CMS, that is used for book-keeping, and is not rendered at the website.
31+
In some cases, it might be rendered as the default object title, but an extra
32+
*Title* field will be provided then to override the rendered name.
33+
34+
***Beware:*** Currently, especially for *viewports* and *banners*, we often
35+
rely on their names to query objects to render at specific pages of the website.
36+
**Changing names of such objects will break pages relying on them**. Stick to
37+
clear object names in form similar to *Website Segment – Page – Purpose*,
38+
e.g. *Blockchain Community – Home* for the entire page, and
39+
*Blockchain Community – Home – Get Started* for specific content
40+
block.
41+
42+
- The *Content* input at the screenshot contains links to other content objects,
43+
that will be rendered by the viewport as children. Those child objects are
44+
independent objects, that can be published / edited independently of parent
45+
viewport, and also can be rendered in different viewports at the same time.
46+
In the later case, you should remember that they are still represent the
47+
same object, if you edit it, the edited version will be used everywhere
48+
that object is referenced.
49+
50+
**The colored dots**, that you may see in different places of CMS UI, denote
51+
the current status of related objects:
52+
- *Orange* – Draft, not published yet;
53+
- *Blue* – Published, but there are further edits pending to be published;
54+
- *Green* – Published, no pending edits to publish.
55+
56+
- Contentful CMS automatically saves all your edits (see the *Last saved*
57+
status under the *Publish* button to double-check whether you edits are
58+
saved). Typically, you will see your edits at our website only once you
59+
have published them. However, for most of object types, we support previews:
60+
the button in right panel will take you to a specially constructed pages of
61+
our website, where you will see the latest version of your object, no matter
62+
published or draft.

‎docs/contentful/custom-inline-components-in-markdown-fields.md

Lines changed: 39 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@
22

33
You can use the following custom markup inside Markdown fields of Contentful
44
components to render custom inline components in the textual blocks. This should
5-
work inside ContentBlock entries, and can be easily supported in entries of
6-
other types (we just have not went through all of them to ensure they work
7-
the same way).
5+
work inside ContentBlock entries, and is supported in entries of
6+
other types too.
87

9-
### Buttons
8+
## Buttons
109

1110
- #### Button
1211
*Example:* `<Button to="/target/link">Label</Button>`
@@ -29,7 +28,14 @@ the same way).
2928
[Secondary Button](https://community-app.topcoder.com/examples/buttons/) that
3029
acts as a hyperlink;
3130

32-
### Custom Component
31+
- #### Legacy TCO Button
32+
*Example:* `<TCOButton theme="tco18">TCO18/17 View Competition Rules</TCOButton>`
33+
34+
Renders
35+
[TCOX Legacy Button](https://community-app.topcoder.com/examples/contentful/contentblock/FNmL56lEahdv0irLASC5a) that
36+
acts as a hyperlink;
37+
38+
## Custom Component
3339

3440
- #### JoinCommunity
3541
*Example:* `<JoinCommunity label="Join Now" />`
@@ -84,7 +90,7 @@ the same way).
8490
component works only with YouTube videos, and the URL should be similar to
8591
`https://www.youtube.com/embed/mD12LIqdxqk` ().
8692

87-
### Links
93+
## Links
8894

8995
- #### Link
9096
*Example:* `<Link to="/target/link">Link text</Link>`
@@ -96,3 +102,30 @@ the same way).
96102
`https:`) it creates links that make transition without reloading the app.
97103
Sometime later we should update our code to handle any links this way.
98104

105+
## Modals
106+
Rendering modal dialogs after click on various triggers like text, link, image, icon and etc. The content of the modal window is referenced by `id` of the modal component which itself is just a wrapper to [Content Block](./ContentBlock.md), [Banner](./banner.md) or [Viewport](./viewport.md).
107+
108+
**Modal Fields**
109+
![](./pics/Modal.png)
110+
111+
*Examples of modal usage:*
112+
113+
https://community-app.topcoder.com/examples/contentful/contentblock/75fw42BmbyloyIseNH7gsY
114+
115+
```html
116+
__Text/Link__
117+
<Modal id="6U2MKViRUKnJsw6PbO6201">[Link: Modal](https://topcoder.com)</Modal>
118+
<Modal id="6U2MKViRUKnJsw6PbO6201"><p>Text: Modal</p></Modal>
119+
120+
__Buttons__
121+
<Modal id="4crW9mh55lHR0ouu9SbJ5i"><PrimaryButton>PrimaryButton: Modal</PrimaryButton></Modal>
122+
<Modal id="4crW9mh55lHR0ouu9SbJ5i"><Button>Button: Modal</Button></Modal>
123+
124+
__Icons__
125+
<Modal id="6U2MKViRUKnJsw6PbO6201">![icon winners](//images.ctfassets.net/b5f1djy59z3a/5cVC8JlvDyOkyumW8QI6Ek/ff16caeac6145da87caf07fe60b7ec67/icon_winners.png)</Modal>
126+
<Modal id="6U2MKViRUKnJsw6PbO6201">![Icon MM](//images.ctfassets.net/b5f1djy59z3a/2mI6cWIpYhTZltYlWmiBGc/8f70d6c5ecbd56ea6408c2c5ff8b5cb1/Icon_MM.svg)</Modal>
127+
<Modal id="6U2MKViRUKnJsw6PbO6201"><i className="fa fa-user" /></Modal>
128+
129+
__Inline Styled__
130+
<Modal id="6U2MKViRUKnJsw6PbO6201"><img src="//images.ctfassets.net/b5f1djy59z3a/5cVC8JlvDyOkyumW8QI6Ek/ff16caeac6145da87caf07fe60b7ec67/icon_winners.png" style="width: 40px"/></Modal>
131+
```

‎docs/contentful/environment-setup.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Environment Setup
2+
3+
It is not feasible to have a common Contentful environment for development. You
4+
should register your own free Contentful account, and use it for development and
5+
testing. To facilitate review of your solution, provide reviewers with access to
6+
your Contentful space.
7+
8+
To sync with the current config of Topcoder's Contentful account, install
9+
[Contentful CLI](https://www.npmjs.com/package/contentful-cli):
10+
```bash
11+
$ npm install -g contentful-cli contentful-migration-cli
12+
$ contentful login
13+
```
14+
15+
Then download and import
16+
[the TC core](https://github.com/topcoder-platform/community-app/blob/develop/config/contentful/tc-core.json) file which will create all core content types used by Topcoder integration:
17+
```bash
18+
$ contentful space import --space-id <DESTINATION_SPACE_ID> --content-file <JSON_FILE_TO_IMPORT> --content-model-only
19+
```
20+
21+
To run Community App locally against your Contentful account:
22+
1. In Contentful web-interface, generate API keys for
23+
[content delivery](https://www.contentful.com/developers/docs/references/content-delivery-api/)
24+
and [preview](https://www.contentful.com/developers/docs/references/content-preview-api/) APIs.
25+
2. On your system you should provide them to Community App via environment
26+
variables. The most convenient way is to create a setup file like this:
27+
```bash
28+
#!/bin/bash
29+
export CONTENTFUL_CDN_API_KEY="<GENERATED CONTENT DELIVERY KEY>"
30+
export CONTENTFUL_LOCAL_MODE=1
31+
export CONTENTFUL_PREVIEW_API_KEY="<GENERATED CONTENT PREVIEW KEY>"
32+
export CONTENTFUL_SPACE_ID="<YOUR_CONTENTFUL_SPACE_ID>"
33+
```
34+
Then, before running Community App from a new console, source it (provided
35+
you have named it `set-contentful-env.sh`), and then run the app:
36+
```bash
37+
$ source ./set-contentful-env.sh
38+
$ NODE_CONFIG_ENV=development npm run dev
39+
```

0 commit comments

Comments
 (0)