diff --git a/client/src/assets/icons/IntroInformation.js b/client/src/assets/icons/IntroInformation.js
new file mode 100644
index 0000000000..a78bbe7817
--- /dev/null
+++ b/client/src/assets/icons/IntroInformation.js
@@ -0,0 +1,49 @@
+import React, { Fragment } from 'react';
+
+const propTypes = {};
+
+function IntroInformation(props) {
+ return (
+
+ IntroInformation
+
+
+ );
+}
+
+IntroInformation.displayName = 'IntroInformation';
+IntroInformation.propTypes = propTypes;
+
+export default IntroInformation;
diff --git a/client/src/components/Map/components/Block.js b/client/src/components/Map/components/Block.js
index fdea2b1933..c9cad4d709 100644
--- a/client/src/components/Map/components/Block.js
+++ b/client/src/components/Map/components/Block.js
@@ -10,10 +10,10 @@ import { makeExpandedBlockSelector, toggleBlock } from '../redux';
import { completedChallengesSelector } from '../../../redux';
import Caret from '../../../assets/icons/Caret';
import { blockNameify } from '../../../../utils/blockNameify';
-/* eslint-disable max-len */
import GreenPass from '../../../assets/icons/GreenPass';
import GreenNotCompleted from '../../../assets/icons/GreenNotCompleted';
-/* eslint-enable max-len */
+import IntroInformation from '../../../assets/icons/IntroInformation';
+
const mapStateToProps = (state, ownProps) => {
const expandedSelector = makeExpandedBlockSelector(ownProps.blockDashedName);
@@ -95,7 +95,11 @@ export class Block extends Component {
key={'map-challenge' + challenge.fields.slug}
>
- {i !== 0 && this.renderCheckMark(challenge.isCompleted)}
+ {i === 0 ? (
+
+ ) : (
+ this.renderCheckMark(challenge.isCompleted)
+ )}
+ >
+
+
{
const key = kebabCase(name);
const type = name in types ? types[name] : 'text';
+ const placeholder =
+ name in placeholders ? placeholders[name] : '';
return (
@@ -51,7 +53,7 @@ function FormFields(props) {
id={key}
name={name}
onChange={onChange}
- placeholder={placeholder ? name : ''}
+ placeholder={placeholder}
required={required.includes(name)}
rows={4}
type={type}
diff --git a/client/src/templates/Challenges/components/Tool-Panel.js b/client/src/templates/Challenges/components/Tool-Panel.js
index 54392eaa6f..b926a75a00 100644
--- a/client/src/templates/Challenges/components/Tool-Panel.js
+++ b/client/src/templates/Challenges/components/Tool-Panel.js
@@ -98,47 +98,3 @@ export default connect(
mapStateToProps,
mapDispatchToProps
)(ToolPanel);
-
-/*
-
-
-
-
- {guideUrl && (
-
- )}
-
-
-*/
diff --git a/client/src/templates/Challenges/project/Side-Panel.js b/client/src/templates/Challenges/project/Side-Panel.js
deleted file mode 100644
index fe5e9f6909..0000000000
--- a/client/src/templates/Challenges/project/Side-Panel.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ChallengeTitle from '../components/Challenge-Title';
-import Spacer from '../../../components/helpers/Spacer';
-
-const propTypes = {
- description: PropTypes.string,
- introPath: PropTypes.string,
- isCompleted: PropTypes.bool,
- isSignedIn: PropTypes.bool,
- nextChallengePath: PropTypes.string,
- prevChallengePath: PropTypes.string,
- showPrevNextBtns: PropTypes.bool,
- title: PropTypes.string
-};
-
-export default function SidePanel({
- title,
- description,
- introPath,
- isCompleted,
- nextChallengePath,
- prevChallengePath,
- showPrevNextBtns
-}) {
- return (
-
- );
-}
-
-SidePanel.displayName = 'ProjectSidePanel';
-SidePanel.propTypes = propTypes;
diff --git a/client/src/templates/Challenges/project/project.css b/client/src/templates/Challenges/project/project.css
deleted file mode 100644
index a5622c03b4..0000000000
--- a/client/src/templates/Challenges/project/project.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.project-show-wrapper {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- max-width: 960px;
- margin: 0 auto;
- padding: 0 15px;
-}
diff --git a/client/src/templates/Challenges/project/ProjectForm.js b/client/src/templates/Challenges/projects/ProjectForm.js
similarity index 78%
rename from client/src/templates/Challenges/project/ProjectForm.js
rename to client/src/templates/Challenges/projects/ProjectForm.js
index aea0a1fa16..c9ae916845 100644
--- a/client/src/templates/Challenges/project/ProjectForm.js
+++ b/client/src/templates/Challenges/projects/ProjectForm.js
@@ -49,7 +49,18 @@ export class ProjectForm extends Component {
buttonText={`${buttonCopy}`}
formFields={isFrontEnd ? frontEndFields : backEndFields}
id={isFrontEnd ? 'front-end-form' : 'back-end-form'}
- options={options}
+ options={{
+ ...options,
+ placeholders: {
+ solution:
+ 'Link to solution, ex: ' +
+ (isFrontEnd
+ ? 'https://codepen.io/camperbot/full/oNvPqqo'
+ : 'https://camperbot.glitch.me'),
+ githubLink:
+ 'Link to GitHub repo, ex: https://github.com/camperbot/hello'
+ }
+ }}
submit={this.handleSubmit}
/>
);
diff --git a/client/src/templates/Challenges/project/Tool-Panel.js b/client/src/templates/Challenges/projects/Tool-Panel.js
similarity index 100%
rename from client/src/templates/Challenges/project/Tool-Panel.js
rename to client/src/templates/Challenges/projects/Tool-Panel.js
diff --git a/client/src/templates/Challenges/backend/Show.js b/client/src/templates/Challenges/projects/backend/Show.js
similarity index 84%
rename from client/src/templates/Challenges/backend/Show.js
rename to client/src/templates/Challenges/projects/backend/Show.js
index 237605d9ca..41c291ce45 100644
--- a/client/src/templates/Challenges/backend/Show.js
+++ b/client/src/templates/Challenges/projects/backend/Show.js
@@ -4,6 +4,7 @@ import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
import { createSelector } from 'reselect';
import { connect } from 'react-redux';
import { graphql } from 'gatsby';
+import Helmet from 'react-helmet';
import {
executeChallenge,
@@ -16,26 +17,26 @@ import {
updateChallengeMeta,
updateProjectFormValues,
backendNS
-} from '../redux';
-import { getGuideUrl } from '../utils';
+} from '../../redux';
+import { getGuideUrl } from '../../utils';
-import LearnLayout from '../../../components/layouts/Learn';
-import ChallengeTitle from '../components/Challenge-Title';
-import ChallengeDescription from '../components/Challenge-Description';
-import TestSuite from '../components/Test-Suite';
-import Output from '../components/Output';
-import CompletionModal from '../components/CompletionModal';
-import HelpModal from '../components/HelpModal';
-import ProjectToolPanel from '../project/Tool-Panel';
-import ProjectForm from '../project/ProjectForm';
-import { Form } from '../../../components/formHelpers';
-import Spacer from '../../../components/helpers/Spacer';
-import { ChallengeNode } from '../../../redux/propTypes';
-import { isSignedInSelector } from '../../../redux';
+import LearnLayout from '../../../../components/layouts/Learn';
+import ChallengeTitle from '../../components/Challenge-Title';
+import ChallengeDescription from '../../components/Challenge-Description';
+import TestSuite from '../../components/Test-Suite';
+import Output from '../../components/Output';
+import CompletionModal from '../../components/CompletionModal';
+import HelpModal from '../../components/HelpModal';
+import ProjectToolPanel from '../Tool-Panel';
+import ProjectForm from '../ProjectForm';
+import { Form } from '../../../../components/formHelpers';
+import Spacer from '../../../../components/helpers/Spacer';
+import { ChallengeNode } from '../../../../redux/propTypes';
+import { isSignedInSelector } from '../../../../redux';
-import { backend } from '../../../../utils/challengeTypes';
+import { backend } from '../../../../../utils/challengeTypes';
-import '../components/test-frame.css';
+import '../../components/test-frame.css';
const propTypes = {
challengeMounted: PropTypes.func.isRequired,
@@ -86,6 +87,9 @@ const options = {
required: ['solution'],
types: {
solution: 'url'
+ },
+ placeholders: {
+ solution: 'Link to solution, ex: https://codepen.io/camperbot/full/oNvPqqo'
}
};
@@ -181,6 +185,7 @@ export class BackEnd extends Component {
return (
+
@@ -228,7 +233,6 @@ export class BackEnd extends Component {
output={output}
/>
-
diff --git a/client/src/templates/Challenges/project/Show.js b/client/src/templates/Challenges/projects/frontend/Show.js
similarity index 61%
rename from client/src/templates/Challenges/project/Show.js
rename to client/src/templates/Challenges/projects/frontend/Show.js
index ce2c476177..0ff95c4d42 100644
--- a/client/src/templates/Challenges/project/Show.js
+++ b/client/src/templates/Challenges/projects/frontend/Show.js
@@ -1,29 +1,29 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
+import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { graphql } from 'gatsby';
import Helmet from 'react-helmet';
-import { ChallengeNode } from '../../../redux/propTypes';
+import { ChallengeNode } from '../../../../redux/propTypes';
import {
challengeMounted,
updateChallengeMeta,
openModal,
updateProjectFormValues
-} from '../redux';
-import { frontEndProject } from '../../../../utils/challengeTypes';
-import { getGuideUrl } from '../utils';
+} from '../../redux';
+import { frontEndProject } from '../../../../../utils/challengeTypes';
+import { getGuideUrl } from '../../utils';
-import LearnLayout from '../../../components/layouts/Learn';
-import Spacer from '../../../components/helpers/Spacer';
-import ProjectForm from './ProjectForm';
-import SidePanel from './Side-Panel';
-import ToolPanel from './Tool-Panel';
-import CompletionModal from '../components/CompletionModal';
-import HelpModal from '../components/HelpModal';
-
-import './project.css';
+import LearnLayout from '../../../../components/layouts/Learn';
+import ChallengeTitle from '../../components/Challenge-Title';
+import ChallengeDescription from '../../components/Challenge-Description';
+import Spacer from '../../../../components/helpers/Spacer';
+import ProjectForm from '../ProjectForm';
+import ProjectToolPanel from '../Tool-Panel';
+import CompletionModal from '../../components/CompletionModal';
+import HelpModal from '../../components/HelpModal';
const mapStateToProps = () => ({});
const mapDispatchToProps = dispatch =>
@@ -96,8 +96,7 @@ export class Project extends Component {
fields: { blockName },
forumTopicId,
title,
- description,
- guideUrl
+ description
}
},
openCompletionModal,
@@ -111,28 +110,35 @@ export class Project extends Component {
const blockNameTitle = `${blockName} - ${title}`;
return (
-
-
-
-
+
+
+
+
+
+
+ {blockNameTitle}
+
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/client/src/templates/Challenges/project/ns.json b/client/src/templates/Challenges/projects/ns.json
similarity index 100%
rename from client/src/templates/Challenges/project/ns.json
rename to client/src/templates/Challenges/projects/ns.json
diff --git a/client/src/templates/Challenges/project/tool-panel.css b/client/src/templates/Challenges/projects/tool-panel.css
similarity index 100%
rename from client/src/templates/Challenges/project/tool-panel.css
rename to client/src/templates/Challenges/projects/tool-panel.css
diff --git a/client/src/templates/Introduction/Intro.js b/client/src/templates/Introduction/Intro.js
index 8d8e5f2224..6aa0b121e1 100644
--- a/client/src/templates/Introduction/Intro.js
+++ b/client/src/templates/Introduction/Intro.js
@@ -57,7 +57,7 @@ function IntroductionPage({ data: { markdownRemark, allChallengeNode } }) {
Go to the first lesson
-
+
View the curriculum
diff --git a/client/utils/challengeTypes.js b/client/utils/challengeTypes.js
index 7090c111fc..4ffcf472fa 100644
--- a/client/utils/challengeTypes.js
+++ b/client/utils/challengeTypes.js
@@ -39,7 +39,7 @@ exports.viewTypes = {
[html]: 'classic',
[js]: 'classic',
[bonfire]: 'classic',
- [frontEndProject]: 'project',
+ [frontEndProject]: 'frontend',
[backEndProject]: 'backend',
[modern]: 'modern',
[step]: 'step',
diff --git a/client/utils/gatsby/challengePageCreator.js b/client/utils/gatsby/challengePageCreator.js
index 91a981ec95..5d04a090f4 100644
--- a/client/utils/gatsby/challengePageCreator.js
+++ b/client/utils/gatsby/challengePageCreator.js
@@ -5,15 +5,15 @@ const { viewTypes } = require('../challengeTypes');
const backend = path.resolve(
__dirname,
- '../../src/templates/Challenges/backend/Show.js'
+ '../../src/templates/Challenges/projects/backend/Show.js'
);
const classic = path.resolve(
__dirname,
'../../src/templates/Challenges/classic/Show.js'
);
-const project = path.resolve(
+const frontend = path.resolve(
__dirname,
- '../../src/templates/Challenges/project/Show.js'
+ '../../src/templates/Challenges/projects/frontend/Show.js'
);
const intro = path.resolve(
__dirname,
@@ -28,7 +28,7 @@ const views = {
backend,
classic,
modern: classic,
- project
+ frontend
// quiz: Quiz
};