diff --git a/components/icon-row-block/index.js b/components/icon-row-block/index.js new file mode 100644 index 000000000..58e20940d --- /dev/null +++ b/components/icon-row-block/index.js @@ -0,0 +1,15 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + +import RowBlock from 'components/row-block'; +import { SubmitText, SubmitWrap } from './style'; + +const IconRowBlock = ({ url, icon, text, openExternal=false }) => ( + + + + { text } + + +); + +export default IconRowBlock; diff --git a/components/icon-row-block/style.js b/components/icon-row-block/style.js new file mode 100644 index 000000000..e8d84f272 --- /dev/null +++ b/components/icon-row-block/style.js @@ -0,0 +1,20 @@ +import styled from 'styled-components'; + +export const SubmitWrap = styled.div` + display: flex; + flex-direction: column; + height: 100%; + align-items: center; + justify-content: center; + + svg { + height: 25px; + color: dimgrey; + } +`; + +export const SubmitText = styled.p` + margin-bottom: 0; + color: dimgrey; + margin-top: 8px; +`; diff --git a/components/page-header/index.js b/components/page-header/index.js new file mode 100644 index 000000000..d119f2a39 --- /dev/null +++ b/components/page-header/index.js @@ -0,0 +1,11 @@ +import { HeaderWrap, Subtitle, Title } from './style'; + +const PageHeader = (props) => ( + + Developer Roadmaps + We continue to improve these roadmaps and add new ones, subscribe to get occasional updates + { props.children } + +); + +export default PageHeader; diff --git a/components/page-header/style.js b/components/page-header/style.js new file mode 100644 index 000000000..88b0eef11 --- /dev/null +++ b/components/page-header/style.js @@ -0,0 +1,16 @@ +import styled from 'styled-components'; + +export const HeaderWrap = styled.div` + text-align: center; + padding: 45px 30px; +`; + +export const Title = styled.h1` + font-size: 48px; + font-weight: 700; +`; + +export const Subtitle = styled.p` + font-size: 16px; + color: #444; +`; diff --git a/components/roadmap-summary/index.js b/components/roadmap-summary/index.js index c547beda1..4b1deaaed 100644 --- a/components/roadmap-summary/index.js +++ b/components/roadmap-summary/index.js @@ -32,7 +32,7 @@ const RoadmapSummary = ({ roadmap }) => ( )) } - +
diff --git a/components/row-block/index.js b/components/row-block/index.js new file mode 100644 index 000000000..accec0500 --- /dev/null +++ b/components/row-block/index.js @@ -0,0 +1,28 @@ +import { Badge, BlockItem, ItemSubtitle, ItemTitle, ItemWrap } from './style'; + +const RowBlock = ({ + title, + subtitle, + url, + badge, + openExternal = false, + disabled = false, + children = null +}) => ( + + + { !children && ( + <> + + { title } + { badge && { badge }} + + { subtitle } + + ) } + { children } + + +); + +export default RowBlock; diff --git a/components/row-block/style.js b/components/row-block/style.js new file mode 100644 index 000000000..df37940d2 --- /dev/null +++ b/components/row-block/style.js @@ -0,0 +1,62 @@ +import styled from 'styled-components'; + +export const ItemWrap = styled.div` + padding: 0 10px 20px; +`; + +export const BlockItem = styled.a` + height: 114px; + box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px; + transition: box-shadow 0.2s ease 0s; + align-items: stretch; + flex: 1; + display: flex; + flex-direction: column; + min-width: 1px; + max-width: 100%; + background: white; + padding: 20px; + border-radius: 10px; + justify-content: center; + text-decoration:none; + opacity: ${ props => props.disabled ? 0.5 : 1 }; + + &:hover { + text-decoration:none; + box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px; + z-index: 1; + } +`; + +export const ItemTitle = styled.h3` + font-weight: 600; + font-size: 18px; + line-height: 24px; + color: #101010; + display: flex; + align-items: center; + justify-content: flex-start; +`; + +export const Badge = styled.span` + font-size: 10px; + font-weight: 600; + background: #696969; + color: white; + padding: 0 8px; + border-radius: 4px; + text-transform: uppercase; + display: flex; + align-items: center; + justify-content: center; + margin-left: 10px; + height: 18px; +`; + +export const ItemSubtitle = styled.p` + font-size: 14px; + color: rgb(102, 102, 102); + white-space: normal; + line-height: 1.5; + margin: 0; +`; diff --git a/contributing/guide.md b/contributing/guide.md new file mode 100644 index 000000000..937690173 --- /dev/null +++ b/contributing/guide.md @@ -0,0 +1,2 @@ +## Submitting a Guide + diff --git a/contributing/roadmap.md b/contributing/roadmap.md new file mode 100644 index 000000000..e69de29bb diff --git a/data/roadmaps.json b/data/roadmaps.json index 5a6324fc8..434cbdaea 100644 --- a/data/roadmaps.json +++ b/data/roadmaps.json @@ -39,14 +39,15 @@ ] }, { - "title": "React Developer Roadmap", - "description": "Step by step guide for DevOps or any other Operations Role", - "featuredDescription": "Step by step guide to become an SRE or for any operations role in 2019", + "title": "Full Stack Developer", + "description": "Step by step guide to becoming a modern full stack developer in 2019", "url": "/signup", - "versions": [ - "latest", - "2018", - "2017" - ] + "upcoming": true + }, + { + "title": "QA Engineer", + "description": "Steps to follow in order to become a modern QA Engineer in 2019", + "url": "/signup", + "upcoming": true } ] diff --git a/data/site.json b/data/site.json index ae9082baf..4501ffc49 100644 --- a/data/site.json +++ b/data/site.json @@ -5,10 +5,14 @@ "description": "Roadmaps, articles and resources to help you choose your path, learn and improve.", "twitter": "kamranahmedse", "facebook": "kamranahmedse", - "url": "https://roadmap.sh", "logo": "/static/brand.png", - "repoUrl": "https://github.com/kamranahmedse/roadmap-next", - "dataUrl": "/tree/master/data", + "url": { + "web": "https://roadmap.sh", + "repo": "https://github.com/kamranahmedse/roadmap-next", + "repoData": "https://github.com/kamranahmedse/roadmap-next/tree/master/data", + "addGuide": "https://github.com/kamranahmedse/roadmap-next/tree/master/contributing/guide.md", + "addRoadmap": "https://github.com/kamranahmedse/roadmap-next/tree/master/contributing/roadmap.md" + }, "keywords": [ "roadmap", "developer roadmaps", diff --git a/lib/guide.js b/lib/guide.js index df1920dfd..8a24c3107 100644 --- a/lib/guide.js +++ b/lib/guide.js @@ -21,5 +21,5 @@ export const getRequestedGuide = req => { }; export const getContributionUrl = (guide) => { - return `${siteConfig.repoUrl}${siteConfig.dataUrl}${guide.url}.md` + return `${siteConfig.url.repoData}${guide.url}.md` }; diff --git a/pages/roadmaps.js b/pages/roadmaps.js index c7ff024a6..896fadcc7 100644 --- a/pages/roadmaps.js +++ b/pages/roadmaps.js @@ -1,11 +1,43 @@ +import { faPlus } from '@fortawesome/free-solid-svg-icons'; + import DefaultLayout from 'layouts/default/index'; import SiteNav from 'components/site-nav'; +import PageFooter from 'components/page-footer'; +import PageHeader from 'components/page-header'; +import roadmaps from "data/roadmaps"; +import RowBlock from 'components/row-block'; +import IconRowBlock from 'components/icon-row-block'; +import siteConfig from "data/site"; const RoadmapsList = () => (
+
+
+
+
+ { roadmaps.map(roadmap => ( + + )) } + + +
+
+
+ ); diff --git a/__tests__/path-map.spec.js b/test/path-map.spec.js similarity index 100% rename from __tests__/path-map.spec.js rename to test/path-map.spec.js