Merge pull request #235 from topcoder-platform/dev-center

PROD-2309 Dev Center -> dev

Author: brooketopcoder

.circleci/config.yml

@@ -63,6 +63,7 @@ build_configuration_fetch: &build_configuration_fetch
     command: |
       ./awsconfiguration.sh $DEPLOY_ENV
       ./buildenv.sh -e $DEPLOY_ENV -b ${LOGICAL_ENV}-${APPNAME}-buildvar
+      aws s3 cp s3://tc-platform-${LOGICAL_ENV}/securitymanager/${LOGICAL_ENV}-platform-ui.env ./.env
 
 lint_steps: &lint_steps
     # Initialization.

.gitignore

@@ -17,7 +17,12 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Editors
+.editorconfig
+.prettierrc

README.md

@@ -11,6 +11,7 @@ Pre-existing user interfaces will be ported to here over time until this is the
 
 - [Local Environment Setup](#local-environment-setup)
 - [Deployments](#deployments)
+- [Developer Center specific setup](#developer-center-specific-setup)
 - [Yarn Commands](#yarn-commands)
 
 # Application structure
@@ -119,6 +120,37 @@ The "dev" branch is auto-deployed to the dev environment: https://platform-mvp.t
 
 The "master" branch is auto-deployed to the production environment: https://platform-mvp.topcoder.com.
 
+## Developer Center specific setup
+
+### Contentful API Key and Space Id
+
+The app requires two environment variables, which contain the space id and the key used to access contentful and retrieve Thrive Articles.
+
+You should create a file named `.env` in the root folder, and write inside the following lines:
+
+```sh
+REACT_APP_CONTENTFUL_EDU_SPACE_ID=<space-id>
+REACT_APP_CONTENTFUL_EDU_CDN_API_KEY=<API Key>
+```
+
+We should use the same space ID and API Key as Topcoder Thrive, these are for fetching Thrive articles and videos in the landing page.
+
+### Landing page configuration
+
+We can configure up to 5 articles shown on the landing page. The articles can be from Topcoder Thrive and/or Topcoder Blog.
+
+The configuration file is located at `src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-articles-section/articles.config.ts`.
+
+We can configure the image carousel on the landing page, the configuration file is located at `src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-header/carousel-content.config.ts`.
+
+The local images for the carousel should be put in `src-ts/tools/dev-center/carousel-images`.
+
+### Getting Started page configuration.
+
+The content of the getting started page is from a Markdown text, the source is located at `src-ts/tools/dev-center/dev-center-pages/community-app/getting-started/GettingStartedGuide.md`.
+
+The local images for the markdown should be put in `src-ts/tools/dev-center/images`.
+
 ## yarn Commands
 
 | Command               | Description                                                                           |
@@ -465,8 +497,8 @@ e.g.:
 ```
 .logo-link {
     svg {
-        width: calc($pad-xxl + $pad-xxxxl);
-        height: $pad-xl;
+        width: calc($space-xxl + $space-xxxxl);
+        height: $space-xl;
         fill: none;
 
         path {

package.json

@@ -18,14 +18,21 @@
     "dependencies": {
         "@datadog/browser-logs": "^4.7.1",
         "@heroicons/react": "^1.0.6",
+        "@types/dompurify": "^2.3.3",
+        "@types/highlightjs": "^9.12.2",
+        "@types/marked": "4.0.3",
         "apexcharts": "^3.35.3",
         "axios": "^0.26.1",
         "browser-cookies": "^1.2.0",
         "classnames": "^2.3.1",
+        "contentful": "^9.1.33",
         "crypto-js": "^4.1.1",
+        "dompurify": "^2.3.10",
+        "highlight.js": "^11.6.0",
         "customize-cra": "^1.0.0",
         "html2canvas": "^1.4.1",
         "lodash": "^4.17.21",
+        "marked": "4.0.3",
         "moment": "^2.29.3",
         "moment-timezone": "^0.5.34",
         "prop-types": "^15.8.1",

src-ts/config/environments/environment.default.config.ts

@@ -32,9 +32,13 @@ export const EnvironmentConfigDefault: GlobalConfig = {
             'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJUb3Bjb2RlciBVc2VyIl0sImlzcyI6Imh0dHBzOi8vYXBpLnRvcGNvZGVyLWRldi5jb20iLCJoYW5kbGUiOiJ0ZXN0MSIsImV4cCI6MjU2MzA3NjY4OSwidXNlcklkIjoiNDAwNTEzMzMiLCJpYXQiOjE0NjMwNzYwODksImVtYWlsIjoidGVzdEB0b3Bjb2Rlci5jb20iLCJqdGkiOiJiMzNiNzdjZC1iNTJlLTQwZmUtODM3ZS1iZWI4ZTBhZTZhNGEifQ.jl6Lp_friVNwEP8nfsfmL-vrQFzOFp2IfM_HC7AwGcg',
     },
     TOPCODER_URLS: {
+        API_BASE: `${COMMUNITY_WEBSITE}/api`,
+        BLOG_PAGE: `${COMMUNITY_WEBSITE}/blog`,
         CHALLENGES_PAGE: `${COMMUNITY_WEBSITE}/challenges`,
         GIGS_PAGE: `${COMMUNITY_WEBSITE}/gigs`,
+        THRIVE_PAGE: `${COMMUNITY_WEBSITE}/thrive`,
         USER_PROFILE: `${COMMUNITY_WEBSITE}/members`,
+        WP_CONTENT: `${COMMUNITY_WEBSITE}/wp-content`,
     },
     URL: {
         ACCOUNTS_APP_CONNECTOR: 'https://accounts-auth0.topcoder-dev.com',

src-ts/config/environments/environment.prod.config.ts

@@ -30,9 +30,13 @@ export const EnvironmentConfigProd: GlobalConfig = {
           'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJUb3Bjb2RlciBVc2VyIl0sImlzcyI6Imh0dHBzOi8vYXBpLnRvcGNvZGVyLWRldi5jb20iLCJoYW5kbGUiOiJ0ZXN0MSIsImV4cCI6MjU2MzA3NjY4OSwidXNlcklkIjoiNDAwNTEzMzMiLCJpYXQiOjE0NjMwNzYwODksImVtYWlsIjoidGVzdEB0b3Bjb2Rlci5jb20iLCJqdGkiOiJiMzNiNzdjZC1iNTJlLTQwZmUtODM3ZS1iZWI4ZTBhZTZhNGEifQ.jl6Lp_friVNwEP8nfsfmL-vrQFzOFp2IfM_HC7AwGcg',
     },
     TOPCODER_URLS: {
+        API_BASE: `${COMMUNITY_WEBSITE}/api`,
+        BLOG_PAGE: `${COMMUNITY_WEBSITE}/blog`,
         CHALLENGES_PAGE: `${COMMUNITY_WEBSITE}/challenges`,
         GIGS_PAGE: `${COMMUNITY_WEBSITE}/gigs`,
+        THRIVE_PAGE: `${COMMUNITY_WEBSITE}/thrive`,
         USER_PROFILE: `${COMMUNITY_WEBSITE}/members`,
+        WP_CONTENT: `${COMMUNITY_WEBSITE}/wp-content`,
     },
     URL: {
         ACCOUNTS_APP_CONNECTOR: 'https://accounts-auth0.topcoder.com',

src-ts/declarations.d.ts

@@ -22,3 +22,8 @@ declare module '*.svg' {
 }
 
 declare module 'tc-auth-lib'
+
+declare module '*.md' {
+    const value: string
+    export default value
+}

src-ts/header/logo/Logo.module.scss

@@ -9,8 +9,8 @@
     }
 
     svg {
-        width: calc($pad-xxl + $pad-xxxxl);
-        height: $pad-xl;
+        width: calc($space-xxl + $space-xxxxl);
+        height: $space-xl;
         fill: none;
 
         path {

src-ts/header/tool-selectors/tool-selectors-narrow/ToolSelectorsNarrow.module.scss

@@ -23,9 +23,9 @@
         left: 0;
         bottom: 0;
         height: $content-height;
-        width: calc(100% - calc(2 * $pad-xxl));
+        width: calc(100% - calc(2 * $space-xxl));
         z-index: 100;
         background-color: $black-100;
-        padding: $pad-xxl;
+        padding: $space-xxl;
     }
 }

src-ts/header/tool-selectors/tool-selectors-narrow/tool-selector-narrow/ToolSelectorNarrow.module.scss

@@ -11,7 +11,7 @@
         justify-content: space-between;
         align-items: center;
         border-top: 1px solid $black-60;
-        padding: $pad-lg 0;
+        padding: $space-lg 0;
         color: $tc-white;
         font-weight: $font-weight-medium;
         background-color: $black-100;