gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add hero section and prepare header

Browse Source
This commit is contained in:
Kamran Ahmed
2019-09-04 15:27:00 +04:00
parent b351edfa20
commit 026830d836
14 changed files with 173 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/head/index.js Normal file
View File

@ -0,0 +1,17 @@
import NextHead from 'next/head';
const defaultDescription = 'Roadmaps, articles and resources for modern developers';
const defaultOgUrl = 'https://roadmap.sh';
const Head = (props) => (
<NextHead>
<meta charSet='UTF-8' />
<title>{ props.title || '' }</title>
<meta name='description' content={ props.description || defaultDescription } />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<meta property='og:url' content={ props.url || defaultOgUrl } />
<meta property='og:title' content={ props.title || '' } />
</NextHead>
);
export default Head;

23
components/header/index.js
View File

@ -1,14 +1,19 @@
import Link from 'next/link';
import './style.scss';
const Header = () => (
<div>
<Link href="/">
<a title="Homepage">Home</a>
</Link>
&nbsp; |&nbsp;
<Link href="/about">
<a title="About Page">About Page</a>
</Link>
<div className='page-header'>
<div className="d-flex">
<div className="flex-grow-1 brand">
<a href="#">roadmap.sh</a>
</div>
<div className="nav-links">
<a href="#">Roadmaps</a>
<a href="#">Articles</a>
<a href="#">Journeys</a>
<a href="#">FAQs</a>
<a href="#" className='signup'>Sign Up</a>
</div>
</div>
</div>
);

32
components/header/style.scss Normal file
View File

@ -0,0 +1,32 @@
.page-header {
padding-top: 25px;
font-size: 18px;
.brand a {
background: #101010;
color: white;
padding: 5px 10px;
text-decoration: none;
border-radius: 2px;
}
.nav-links {
a {
padding: 0 10px;
text-decoration: none;
font-size: 16px;
color: #101010;
}
.signup {
background: #101010;
color: #ffffff;
padding: 7px 10px;
margin-left: 15px;
&:hover {
background: #2d2d2d;
}
}
}
}

16
components/hero-section/index.js Normal file
View File

@ -0,0 +1,16 @@
import './style.scss';
const HeroSection = () => (
<div className='hero-section'>
<h1>Roadmaps for Developers</h1>
<p>Community driven, roadmaps, articles and resources for developers</p>
<div className="register-form d-flex">
<input type="text" />
<a href="#" className="btn btn-primary">Register</a>
</div>
</div>
);
export default HeroSection;

14
components/hero-section/style.scss Normal file
View File

@ -0,0 +1,14 @@
.hero-section {
text-align: center;
padding: 70px 20px;
h1 {
font-size: 35px;
font-weight: 700;
margin-bottom: 8px;
}
p {
color: #333;
}
}

3
next.config.js
View File

@ -1,3 +1,4 @@
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');
module.exports = withSass({});
module.exports = withCSS(withSass());

4
package.json
View File

@ -9,9 +9,13 @@
"start": "next start"
},
"dependencies": {
"@zeit/next-css": "latest",
"@zeit/next-sass": "^1.0.1",
"autoprefixer": "^9.6.1",
"bootstrap": "^4.3.1",
"next": "^9.0.4",
"node-sass": "^4.12.0",
"postcss-css-variables": "^0.13.0",
"react": "^16.9.0",
"react-dom": "^16.9.0"
}

2
pages/about.js → pages/about/index.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import Header from '../components/header';
import Header from '../../components/header/index';
export default function About() {
return (

7
pages/global.scss Normal file
View File

@ -0,0 +1,7 @@
body {
color: #000;
}
.container {
max-width: 1000px;
}

10
pages/home.js
View File

@ -1,10 +0,0 @@
import Header from '../components/header';
export const Home = (props) => (
<div>
<Header />
<p>Hello Next.js</p>
</div>
);
export default Home;

11
pages/home/index.js Normal file
View File

@ -0,0 +1,11 @@
import Header from '../../components/header/index';
import HeroSection from '../../components/hero-section';
export const Home = (props) => (
<div className='container'>
<Header />
<HeroSection />
</div>
);
export default Home;

7
pages/index.js
View File

@ -1,5 +1,8 @@
import React from 'react';
import Home from './home';
import 'bootstrap/dist/css/bootstrap.min.css';
import './global.scss';
import Home from './home/index';
const Index = () => (
<div>

1
postcss.config.js
View File

@ -1,5 +1,6 @@
module.exports = {
plugins: {
'postcss-css-variables': {},
'autoprefixer': {},
},
};

56
yarn.lock
View File

@ -953,7 +953,7 @@
resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
"@zeit/next-css@1.0.1":
"@zeit/next-css@1.0.1", "@zeit/next-css@latest":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@zeit/next-css/-/next-css-1.0.1.tgz#4f784e841e7ca1b21b3468a902e2c1fa95a3e75c"
integrity sha512-yfHPRy/ne/5SddVClsoy+fpU7e0Cs1gkWA67/wm2uIu+9rznF45yQLxHEt5dPGF3h6IiIh7ZtIgA8VV8YKq87A==
@ -1214,6 +1214,19 @@ autodll-webpack-plugin@0.4.2:
webpack-merge "^4.1.0"
webpack-sources "^1.0.1"
autoprefixer@^9.6.1:
version "9.6.1"
resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.6.1.tgz#51967a02d2d2300bb01866c1611ec8348d355a47"
integrity sha512-aVo5WxR3VyvyJxcJC3h4FKfwCQvQWb1tSI5VHNibddCVWrcD1NvlxEweg3TSgiPztMnWfjpy2FURKA2kvDE+Tw==
dependencies:
browserslist "^4.6.3"
caniuse-lite "^1.0.30000980"
chalk "^2.4.2"
normalize-range "^0.1.2"
num2fraction "^1.2.2"
postcss "^7.0.17"
postcss-value-parser "^4.0.0"
aws-sign2@~0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@ -1348,6 +1361,11 @@ bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
bootstrap@^4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.3.1.tgz#280ca8f610504d99d7b6b4bfc4b68cec601704ac"
integrity sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==
brace-expansion@^1.1.7:
version "1.1.11"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@ -1436,7 +1454,7 @@ browserify-zlib@^0.2.0:
dependencies:
pako "~1.0.5"
browserslist@^4.6.0, browserslist@^4.6.6:
browserslist@^4.6.0, browserslist@^4.6.3, browserslist@^4.6.6:
version "4.6.6"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.6.6.tgz#6e4bf467cde520bc9dbdf3747dafa03531cec453"
integrity sha512-D2Nk3W9JL9Fp/gIcWei8LrERCS+eXu9AM5cfXA8WEZ84lFks+ARnZ0q/R69m2SV3Wjma83QDDPxsNKXUwdIsyA==
@ -1552,7 +1570,7 @@ camelcase@^3.0.0:
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
integrity sha1-MvxLn82vhF/N9+c7uXysImHwqwo=
caniuse-lite@^1.0.30000984:
caniuse-lite@^1.0.30000980, caniuse-lite@^1.0.30000984:
version "1.0.30000989"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000989.tgz#b9193e293ccf7e4426c5245134b8f2a56c0ac4b9"
integrity sha512-vrMcvSuMz16YY6GSVZ0dWDTJP8jqk3iFQ/Aq5iqblPwxSVVZI+zxDyTX0VPqtQsDnfdrBDcsmhgTEOh5R8Lbpw==
@ -2155,7 +2173,7 @@ escape-html@~1.0.3:
resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.3, escape-string-regexp@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
@ -2236,7 +2254,7 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
assign-symbols "^1.0.0"
is-extendable "^1.0.1"
extend@~3.0.2:
extend@^3.0.1, extend@~3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
@ -3764,6 +3782,11 @@ normalize-path@^3.0.0:
resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
normalize-range@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
npm-bundled@^1.0.1:
version "1.0.6"
resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.6.tgz#e7ba9aadcef962bb61248f91721cd932b3fe6bdd"
@ -3787,6 +3810,11 @@ npm-packlist@^1.1.6:
gauge "~2.7.3"
set-blocking "~2.0.0"
num2fraction@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
number-is-nan@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
@ -4117,6 +4145,15 @@ posix-character-classes@^0.1.0:
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
postcss-css-variables@^0.13.0:
version "0.13.0"
resolved "https://registry.yarnpkg.com/postcss-css-variables/-/postcss-css-variables-0.13.0.tgz#42adcec7e963020801b106b6452d6a3e9c24bc87"
integrity sha512-gji53rkQx8UcNHpAPgn+kdRs3ZQuPk2Ebo+HDVMIaU4lo9xt7i46X7rvGJDSwR259V1RlPc6vMQdybgsgKtqKA==
dependencies:
escape-string-regexp "^1.0.3"
extend "^3.0.1"
postcss "^6.0.8"
postcss-load-config@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.0.tgz#c84d692b7bb7b41ddced94ee62e8ab31b417b003"
@ -4171,7 +4208,12 @@ postcss-value-parser@^3.3.0:
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
postcss@^6.0.1, postcss@^6.0.23:
postcss-value-parser@^4.0.0:
version "4.0.2"
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz#482282c09a42706d1fc9a069b73f44ec08391dc9"
integrity sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==
postcss@^6.0.1, postcss@^6.0.23, postcss@^6.0.8:
version "6.0.23"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
@ -4180,7 +4222,7 @@ postcss@^6.0.1, postcss@^6.0.23:
source-map "^0.6.1"
supports-color "^5.4.0"
postcss@^7.0.0:
postcss@^7.0.0, postcss@^7.0.17:
version "7.0.17"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f"
integrity sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==