From 2468a9785655a618ad08bcb52f6553b2914ae912 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Sat, 30 Nov 2019 14:27:37 +0400 Subject: [PATCH] Split roadmap summaries and detailed roadmap --- components/roadmap-body/index.js | 37 ++++++++++++----- components/roadmap-body/style.js | 63 ++++++++++++++++++++++++++++- components/roadmap-summary/index.js | 35 ++++++++++++++++ components/roadmap-summary/style.js | 20 +++++++++ components/share-page/style.js | 3 +- contributing/readme.md | 4 +- pages/[roadmap]/index.js | 8 ++-- 7 files changed, 152 insertions(+), 18 deletions(-) create mode 100644 components/roadmap-summary/index.js create mode 100644 components/roadmap-summary/style.js diff --git a/components/roadmap-body/index.js b/components/roadmap-body/index.js index 62103d9d9..19fa0ff94 100644 --- a/components/roadmap-body/index.js +++ b/components/roadmap-body/index.js @@ -1,5 +1,4 @@ -import { Summary, SummaryContainer, UpcomingContainer } from './style'; -import SharePage from 'components/share-page'; +import { Sidebar, Summary, SummaryContainer, UpcomingContainer } from './style'; import GuideBody from 'components/guide-body'; const RoadmapBody = ({ roadmap }) => { @@ -11,15 +10,35 @@ const RoadmapBody = ({ roadmap }) => { ); } + const RoadmapPages = Object.keys(roadmap.sidebar || {}).map(groupTitle => { + return ( +
+

{ groupTitle }

+ +
+ ); + }); + return ( - - { -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae blanditiis commodi, consequatur, dicta distinctio esse et id, ipsa labore libero nisi odit placeat possimus saepe sed vel vitae voluptate?

- -
- } + + + { RoadmapPages } + +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae blanditiis commodi, consequatur, dicta distinctio esse et id, ipsa labore libero nisi odit placeat possimus saepe sed vel vitae voluptate?

+
) diff --git a/components/roadmap-body/style.js b/components/roadmap-body/style.js index 3031dffb6..6d91a84f3 100644 --- a/components/roadmap-body/style.js +++ b/components/roadmap-body/style.js @@ -13,10 +13,69 @@ export const UpcomingContainer = styled.div` export const Summary = styled.div` text-align: center; - padding: 40px 0 50px; min-height: 400px; - + display: flex; + .container { position: relative; } `; + +export const Sidebar = styled.div` + border-left: 1px solid #efefef; + padding-bottom: 150px; + + ul { + list-style: none; + margin: 0; + padding: 0; + } + + .bullet { + display: inline-block; + margin-right: 7px; + width: 7px; + height: 7px; + min-width: 7px; + border-radius: 100%; + background: #efefef; + transform: translateX(-4px); + transition: background 0.5s ease; + } + + + .links-group { + padding: 30px 0 10px; + width: 260px; + + h3 { + font-size: 12px; + font-weight: 600; + text-transform: uppercase; + padding-left: 20px; + } + } + + .links-group li { + list-style: none; + margin: 7px 0; + + a { + font-size: 14px; + font-weight: normal; + color: #696969; + } + + .bullet { + display: inline-block; + margin-right: 12px; + width: 7px; + height: 7px; + min-width: 7px; + border-radius: 100%; + background: #efefef; + transform: translateX(-4px); + transition: background 0.5s ease; + } + } +`; diff --git a/components/roadmap-summary/index.js b/components/roadmap-summary/index.js new file mode 100644 index 000000000..874f35b3c --- /dev/null +++ b/components/roadmap-summary/index.js @@ -0,0 +1,35 @@ +import { Summary, SummaryContainer, UpcomingContainer } from './style'; +import GuideBody from 'components/guide-body'; +import RoadmapHeader from 'components/roadmap-header'; +import SharePage from 'components/share-page'; +import MdRenderer from 'components/md-renderer'; + +const RoadmapSummary = ({ roadmap }) => { + if (roadmap.upcoming) { + return ( + <> + + + + + + ); + } + + const filePath = roadmap.path.replace(/^\//, ''); + const RoadmapContent = require(`../../storage/${filePath}`).default; + + return ( + + + + + + + + + + ) +}; + +export default RoadmapSummary; diff --git a/components/roadmap-summary/style.js b/components/roadmap-summary/style.js new file mode 100644 index 000000000..ed43863fb --- /dev/null +++ b/components/roadmap-summary/style.js @@ -0,0 +1,20 @@ +import styled from 'styled-components'; + +export const SummaryContainer = styled.div``; + +export const UpcomingContainer = styled.div` + text-align: center; + padding: 40px 0 50px; + + .container { + position: relative; + } +`; + +export const Summary = styled.div` + margin-top: 35px; + min-height: 400px; + display: block; + position: relative; + text-align: left; +`; diff --git a/components/share-page/style.js b/components/share-page/style.js index 0d1700401..c4cf6dc94 100644 --- a/components/share-page/style.js +++ b/components/share-page/style.js @@ -15,8 +15,9 @@ export const ShareWrap = styled.div` flex-direction: column; position: absolute; padding: 0 0; - top: 6px; + top: 0; left: -40px; + min-height: 100%; `; export const ShareIcon = styled.a` diff --git a/contributing/readme.md b/contributing/readme.md index 9448727b2..c635e926a 100644 --- a/contributing/readme.md +++ b/contributing/readme.md @@ -24,9 +24,9 @@ Your opinion on value of any resource may not match the opinion of curator. ## Guidelines --

Adding everything available out there is not the goal!
+-

Adding everything available out there is not the goal!
The roadmaps represents the skillset most valuable today i.e. if you were to enter any of the listed fields today, what would you learn! There might be things that are of-course being used today but prioritize the things that are most in demand today e.g. agreed that lots of people are using angular.js today but you wouldn't want to learn that instead of React, Angular or Vue. Use your critical thinking to filter out non-essential stuff. Give honest arguments for why the resource should be included.

--

One item per Pull Request
+-

One item per Pull Request
There may be a discussion related to an item you want to add. Adding just a single item per pull request makes it much easier for everyone involved.

- Write meaningful commit messages - Look at the existing issues/pull requests before opening new ones diff --git a/pages/[roadmap]/index.js b/pages/[roadmap]/index.js index f7771e928..e043a92fa 100644 --- a/pages/[roadmap]/index.js +++ b/pages/[roadmap]/index.js @@ -2,23 +2,23 @@ import Error from 'next/error'; import DefaultLayout from 'layouts/default'; import SiteNav from 'components/site-nav'; import PageFooter from 'components/page-footer'; -import RoadmapBody from 'components/roadmap-body'; import { serverOnlyProps } from 'lib/server'; import { getRequestedRoadmap } from 'lib/roadmap'; import Helmet from 'components/helmet'; -import RoadmapHeader from 'components/roadmap-header'; +import RoadmapSummary from 'components/roadmap-summary'; +import RoadmapBody from '../../components/roadmap-body'; const Roadmap = ({ roadmap }) => { if (!roadmap) { return } + const showSummary = roadmap.upcoming || !roadmap.detailed; return ( - - + { showSummary ? : } );