Skip to content

Commit 0eeb97d

Browse files
eyalrotheyalroth
committed
Add homepage
1 parent 11664c5 commit 0eeb97d

File tree

12 files changed

+281
-88
lines changed

12 files changed

+281
-88
lines changed

‎src/assets/scss/_variables.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,6 @@ $typographic-leading: round(16 * ($typographic-root-font-size / 100) * $typograp
3030
$layout-width: 100%;
3131
$layout-breakpoint-sm: 685px;
3232
$layout-breakpoint-md: 960px;
33-
$layout-breakpoint-lg: 1100px;
33+
$layout-breakpoint-lg: 1100px;
34+
35+
$footer-padding: 2.5rem;

‎src/components/Footer/index.jsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react'
2+
import './style.scss'
3+
4+
class Footer extends React.Component {
5+
render() {
6+
return (
7+
<footer className="footer">
8+
{`Made with ❤️`}
9+
<br/>
10+
<div className="footer-links">
11+
<a href="https://www.gatsbyjs.org/" target="_blank" rel="noopener noreferrer">Gatsby</a>
12+
{` + `}
13+
<a href="https://github.com/" target="_blank" rel="noopener noreferrer">GitHub</a>
14+
{` + `}
15+
<a href="https://www.netlify.com/" target="_blank" rel="noopener noreferrer">Netlify</a>
16+
</div>
17+
</footer>
18+
)
19+
}
20+
}
21+
22+
export default Footer

‎src/components/Footer/style.scss

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@import "../../assets/scss/variables";
2+
@import "../../assets/scss/mixins";
3+
4+
.footer {
5+
background-color: #F8F8F8;
6+
border-top: 1px solid #E7E7E7;
7+
text-align: center;
8+
padding-top: 10px;
9+
padding-bottom: 30px;
10+
left: 0;
11+
bottom: 0;
12+
height: 30px;
13+
width: 100%;
14+
position: absolute;
15+
.footer-links {
16+
font-size: 0.8rem;
17+
}
18+
}

‎src/components/Home/index.jsx

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import React from 'react'
2+
import { Link, StaticQuery, graphql } from 'gatsby'
3+
import Helmet from 'react-helmet'
4+
import Links from '../Links'
5+
import ProfileImg from '../ProfileImg'
6+
import Footer from '../Footer'
7+
import './style.scss'
8+
9+
class Home extends React.Component {
10+
render() {
11+
return (
12+
<div className="page-container">
13+
<Helmet>
14+
<title>Eyal Roth</title>
15+
</Helmet>
16+
{this.renderContent()}
17+
<Footer />
18+
</div>
19+
)
20+
}
21+
22+
renderContent() {
23+
return (
24+
<StaticQuery
25+
query={graphql`
26+
query HomeQuery {
27+
site {
28+
siteMetadata {
29+
subtitle
30+
copyright
31+
author {
32+
name
33+
email
34+
github
35+
linkedin
36+
}
37+
}
38+
}
39+
}
40+
`}
41+
render={data => this.renderContentFromQuery(data)}
42+
/>)
43+
}
44+
45+
renderContentFromQuery(queryData) {
46+
const { author, subtitle, copyright } = queryData.site.siteMetadata
47+
48+
const siteLinks = [
49+
{
50+
label: "Blog",
51+
path: "/blog"
52+
},
53+
{
54+
label: "About",
55+
path: "/about"
56+
},
57+
]
58+
59+
return (
60+
<div className="home">
61+
<ProfileImg className="home__author-img" author={author.name}/>
62+
<h1 className="home__author-title">
63+
{author.name}
64+
</h1>
65+
<p className="home__author-subtitle">
66+
{subtitle}
67+
</p>
68+
<div className="home__author-icons">
69+
<Links data={author} />
70+
</div>
71+
<nav className="home__site-links">
72+
<ul className="home__site-links-list">
73+
{siteLinks.map(item => (
74+
<li className="home__site-links-item" key={item.path}>
75+
<Link
76+
to={item.path}
77+
className="home__site-links-item-link"
78+
>
79+
{item.label}
80+
</Link>
81+
</li>
82+
))}
83+
</ul>
84+
</nav>
85+
</div>
86+
)
87+
}
88+
}
89+
90+
export default Home

‎src/components/Home/style.scss

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
@import "../../assets/scss/variables";
2+
@import "../../assets/scss/mixins";
3+
4+
.home {
5+
padding-top: 20vh;
6+
text-align: center;
7+
width: 100%;
8+
position: relative;
9+
padding-bottom: $footer-padding;
10+
11+
&__author {
12+
&-img {
13+
height: 90px;
14+
width: 90px;
15+
display: block;
16+
margin-left: auto;
17+
margin-right: auto;
18+
@include margin-bottom(.5);
19+
}
20+
&-title {
21+
font-size: $typographic-base-font-size * 1.125;
22+
font-weight: 500;
23+
@include line-height(1.125);
24+
@include margin(0, 0, 0, 0);
25+
}
26+
&-subtitle {
27+
font-size: $typographic-base-font-size * 0.8;
28+
color: $color-gray;
29+
@include margin(0, 0, 0, 0);
30+
@include line-height(1.5);
31+
}
32+
&-icons {
33+
font-size: $typographic-base-font-size * 0.9;
34+
padding: 0 55px;
35+
}
36+
&-link {
37+
color: $color-base;
38+
&:hover,
39+
&:focus {
40+
color: $color-base;
41+
}
42+
}
43+
}
44+
45+
&__site-links {
46+
&-list {
47+
list-style: none;
48+
padding: 0;
49+
}
50+
&-item {
51+
&-link {
52+
font-size: $typographic-base-font-size * 0.9;
53+
color: $typographic-base-font-color;
54+
font-weight: 500;
55+
border: 0;
56+
&:hover,
57+
&:focus {
58+
color: $color-primary;
59+
border-bottom: 1px solid $color-primary;
60+
}
61+
}
62+
}
63+
}
64+
}
65+
66+
@include breakpoint-sm {
67+
.home {
68+
padding-top: 35vh;
69+
70+
&__author {
71+
&-img {
72+
height: 115px;
73+
width: 115px;
74+
}
75+
&-title {
76+
font-size: $typographic-base-font-size * 1.4;
77+
}
78+
&-subtitle {
79+
font-size: $typographic-base-font-size * 1;
80+
@include line-height(2);
81+
}
82+
&-icons {
83+
font-size: $typographic-base-font-size * 1;
84+
}
85+
}
86+
}
87+
}
88+
89+
@include breakpoint-md {
90+
.home {
91+
padding-top: 25vh;
92+
&__author {
93+
&-img {
94+
height: 145px;
95+
width: 145px;
96+
}
97+
}
98+
}
99+
}

‎src/components/Layout/index.jsx

+2-11
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react'
22
import Helmet from 'react-helmet'
33
import '../../assets/scss/init.scss'
44
import Sidebar from '../Sidebar'
5+
import Footer from '../Footer'
56
import './style.scss'
67

78
class Layout extends React.Component {
@@ -24,17 +25,7 @@ class Layout extends React.Component {
2425
<div className="content-wrap">
2526
{children}
2627
</div>
27-
<footer className="footer">
28-
{`Made with ❤️`}
29-
<br/>
30-
<div className="footer-links">
31-
<a href="https://www.gatsbyjs.org/" target="_blank" rel="noopener noreferrer">Gatsby</a>
32-
{` + `}
33-
<a href="https://github.com/" target="_blank" rel="noopener noreferrer">GitHub</a>
34-
{` + `}
35-
<a href="https://www.netlify.com/" target="_blank" rel="noopener noreferrer">Netlify</a>
36-
</div>
37-
</footer>
28+
<Footer />
3829
</div>
3930
)
4031
}

‎src/components/Layout/style.scss

+1-17
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,5 @@
88

99
.content-wrap {
1010
lost-center: $layout-width;
11-
padding-bottom: 2.5rem;
12-
}
13-
14-
.footer {
15-
background-color: #F8F8F8;
16-
border-top: 1px solid #E7E7E7;
17-
text-align: center;
18-
padding-top: 10px;
19-
padding-bottom: 30px;
20-
left: 0;
21-
bottom: 0;
22-
height: 30px;
23-
width: 100%;
24-
position: absolute;
25-
.footer-links {
26-
font-size: 0.8rem;
27-
}
11+
padding-bottom: $footer-padding;
2812
}

‎src/components/Menu/index.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const menu = [
88
path: "/"
99
},
1010
{
11-
label: "Articles",
11+
label: "Blog",
1212
path: "/blog"
1313
},
1414
{

‎src/components/Sidebar/index.jsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react'
2-
import get from 'lodash/get'
32
import { Link, StaticQuery, graphql } from "gatsby"
43
import Menu from '../Menu'
54
import Links from '../Links'

‎src/components/Sidebar/style.scss

+1-7
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,11 @@
2828
font-size: $typographic-base-font-size * 0.8;
2929
color: $color-gray;
3030
@include margin(0, 0, 0, 0);
31-
@include line-height(1);
31+
@include line-height(1.5);
3232
}
3333
&-icons {
3434
font-size: $typographic-base-font-size * 0.9;
3535
}
36-
&-about {
37-
font-size: $typographic-base-font-size * 0.7;
38-
font-weight: 300;
39-
@include margin(0, 0, 0, 0);
40-
@include line-height(1);
41-
}
4236
&-link {
4337
color: $color-base;
4438
&:hover,

‎src/pages/blog.jsx

+42-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,45 @@
11
import React from 'react'
2+
import { graphql } from 'gatsby'
3+
import PostList from '../components/PostList';
24

3-
export default function NotFound() {
4-
if (typeof window !== 'undefined') {
5-
window.location = '/';
5+
class Blog extends React.Component {
6+
render() {
7+
return (
8+
<PostList
9+
pageTitle="Blog"
10+
listTitle="Articles"
11+
{...this.props}
12+
/>
13+
)
14+
}
15+
}
16+
17+
export default Blog
18+
19+
export const pageQuery = graphql`
20+
query BlogQuery {
21+
allMarkdownRemark(
22+
limit: 1000
23+
filter: { frontmatter: { layout: { eq: "post" }, draft: { ne: true } } }
24+
sort: { order: DESC, fields: [frontmatter___date] }
25+
) {
26+
edges {
27+
node {
28+
fields {
29+
slug
30+
tagSlugs
31+
readingTime {
32+
text
33+
}
34+
}
35+
frontmatter {
36+
title
37+
date
38+
tags
39+
description
40+
}
41+
}
42+
}
643
}
7-
8-
return null;
9-
}
44+
}
45+
`

0 commit comments

Comments
 (0)