PROD-2309 Dev Center -> dev

.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;

src-ts/header/tool-selectors/tool-selectors-wide/ToolSelectorsWide.module.scss

@@ -4,7 +4,7 @@
     display: flex;
     align-items: center;
     border-left: solid 1px $black-80;
-    padding-left: $pad-md;
+    padding-left: $space-md;
 
     @include ltemd {
         display: none;

src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.module.scss

@@ -10,12 +10,12 @@
 
     a {
         display: block;
-        padding: 11px $pad-md;
+        padding: 11px $space-md;
         text-align: center;
     }
 
     .active-indicator {
-        width: $pad-xxl;
+        width: $space-xxl;
         height: 2px;
     }
 

src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.module.scss

@@ -1,6 +1,6 @@
 @import '../../../../../lib/styles/includes';
 
-$overlaySquare: $pad-xxxxl;
+$overlaySquare: $space-xxxxl;
 
 .profile-avatar,
 .overlay {

src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.module.scss

@@ -7,18 +7,18 @@ $arrowTipIconHeight: 9px;
     @extend .body-ultra-small;
     position: absolute;
     z-index: 1000;
-    top: calc($pad-xxxxl + 4px + $arrowTipIconHeight);
-    right: calc(-1 * $pad-xxxxl / 2);
+    top: calc($space-xxxxl + 4px + $arrowTipIconHeight);
+    right: calc(-1 * $space-xxxxl / 2);
     width: 168px;
     display: flex;
     flex-direction: column;
     filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.2));
 
     background-color: $tc-white;
     color: $black-100;
-    border-radius: $pad-sm;
+    border-radius: $space-sm;
 
-    padding: $pad-sm $pad-lg $pad-lg;
+    padding: $space-sm $space-lg $space-lg;
 
     .arrow-tip {
         display: flex;
@@ -37,7 +37,7 @@ $arrowTipIconHeight: 9px;
     }
 
     hr {
-        margin: $pad-sm 0;
+        margin: $space-sm 0;
     }
 
     .nav-item {
@@ -46,7 +46,7 @@ $arrowTipIconHeight: 9px;
         align-items: center;
         gap: 4px;
         + .nav-item {
-            margin-top: $pad-sm;
+            margin-top: $space-sm;
         }
 
         .icon {

src-ts/header/utility-selectors/UtilitySelectors.module.scss

@@ -3,5 +3,5 @@
 .utility-selectors {
     display: flex;
     justify-content: flex-end;
-    min-width: calc($pad-xxl + $pad-xxxxl);
+    min-width: calc($space-xxl + $space-xxxxl);
 }

src-ts/lib/avatar/Avatar.module.scss

@@ -4,7 +4,7 @@
 $avatar-size-sm: 32px;
 $border-size-sm: $border;
 $avatar-size-xl: 120px;
-$border-size-xl: $pad-xs;
+$border-size-xl: $space-xs;
 
 .avatar-container {
     overflow: hidden;

src-ts/lib/breadcrumb/Breadcrumb.module.scss

@@ -7,21 +7,33 @@
 }
 
 .breadcrumb {
-    padding: $pad-md 0;
+    padding: $space-md 0;
     max-width: $xxl-min;
     margin: 0 auto;
     @include pagePaddings;
 
     @include ltemd {
-        padding-top: $pad-xs;
-        padding-bottom: $pad-xs;
+        padding-top: $space-xs;
+        padding-bottom: $space-xs;
     }
 
     ol {
         display: flex;
         padding-left: 0px;
         margin: 0;
 
+        &.hidden-mobile {
+            @include ltemd {
+                display: none;
+            }
+        }
+
+        &.show-mobile {
+            @include gtelg {
+                display: none;
+            }
+        }
+
         >li {
             display: inline-flex;
             align-items: center;
@@ -30,7 +42,7 @@
             a {
                 @extend .overline;
                 display: block;
-                padding: $pad-md;
+                padding: $space-md;
                 color: $black-80;
                 cursor: pointer;
 
@@ -46,8 +58,8 @@
             &:not(:last-child)::after {
                 content: '';
                 display: inline-block;
-                width: $pad-sm;
-                height: $pad-sm;
+                width: $space-sm;
+                height: $space-sm;
                 border-style: solid;
                 border-width: $border-xs $border-xs 0 0;
                 border-color: $black-60;

src-ts/lib/button/Button.tsx

@@ -73,6 +73,7 @@ const Button: FC<ButtonProps> = (props: ButtonProps) => {
         return (
             <button
                 className={classes}
+                disabled={!!props.disable}
                 name={props.name}
                 onClick={clickHandler}
                 tabIndex={props.tabIndex}
@@ -89,6 +90,7 @@ const Button: FC<ButtonProps> = (props: ButtonProps) => {
     return (
         <ButtonElement
             className={classes}
+            disabled={!!props.disable}
             name={props.name}
             onClick={clickHandler}
             tabIndex={props.tabIndex}

src-ts/lib/contact-support-form/ContactSupportForm.module.scss

@@ -3,6 +3,6 @@
 .contact-support-intro {
 
     p {
-        margin-bottom: $pad-lg;
+        margin-bottom: $space-lg;
     }
 }

src-ts/lib/content-layout/ContentLayout.module.scss

@@ -2,7 +2,7 @@
 
 .content {
     padding-top: 0;
-    padding-bottom: $pad-lg;
+    padding-bottom: $space-lg;
 
     flex: 99 1 auto;
     display: flex;
@@ -26,8 +26,8 @@
                 display: flex;
                 align-items: center;
                 border-bottom: $border solid $black-5;
-                margin-top: $pad-sm;
-                padding: $pad-xxl 0;
+                margin-top: $space-sm;
+                padding: $space-xxl 0;
 
                 h1 {
                     flex: 1;

src-ts/lib/content-layout/ContentLayout.tsx

@@ -10,6 +10,8 @@ export interface ContentLayoutProps {
     buttonConfig?: ButtonProps
     children?: ReactNode
     contentClass?: string
+    innerClass?: string
+    outerClass?: string
     title?: string
     titleClass?: string
 }
@@ -18,9 +20,9 @@ const ContentLayout: FC<ContentLayoutProps> = (props: ContentLayoutProps) => {
     return (
         <div className={classNames(styles.content, props.contentClass)}>
 
-            <div className={styles['content-outer']}>
+            <div className={classNames(styles['content-outer'], props.outerClass)}>
 
-                <div className={styles['content-inner']}>
+                <div className={classNames(styles['content-inner'], props.innerClass)}>
 
                     {!!props.title && (
                         <div className={classNames(styles['page-header'], props.titleClass)}>