Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Further changes
  • Loading branch information
LekoArts committed Mar 28, 2018
1 parent 43fa4fe commit 211fc37
Show file tree
Hide file tree
Showing 5 changed files with 16 additions and 6 deletions.
8 changes: 5 additions & 3 deletions src/components/Article.js
@@ -1,14 +1,15 @@
import React from 'react';
import styled from 'styled-components';
import Link from 'gatsby-link';
import kebabCase from 'lodash/kebabCase';

import Subline from './Subline';

const Post = styled.article`
display: flex;
flex-direction: column;
margin-top: 3.5rem;
margin-bottom: 4.5rem;
margin-bottom: 3.5rem;
`;

const Title = styled.h2`
Expand All @@ -32,7 +33,7 @@ const Excerpt = styled.p`
margin-bottom: 1rem;
`;

const Article = ({ title, date, excerpt, slug, timeToRead }) => {
const Article = ({ title, date, excerpt, slug, timeToRead, category }) => {
const firstChar = title.charAt(0);

return (
Expand All @@ -42,7 +43,8 @@ const Article = ({ title, date, excerpt, slug, timeToRead }) => {
<Link to={slug}>{title}</Link>
</Title>
<Subline>
{date} &mdash; {timeToRead} Min Read
{date} &mdash; {timeToRead} Min Read &mdash; In{' '}
<Link to={`/categories/${kebabCase(category)}`}>{category}</Link>
</Subline>
<Excerpt>{excerpt}</Excerpt>
</Post>
Expand Down
2 changes: 1 addition & 1 deletion src/components/SectionTitle.js
Expand Up @@ -9,7 +9,7 @@ const Title = styled.div`
color: ${props => props.theme.dark};
position: relative;
padding-bottom: 1rem;
margin-bottom: 5rem;
margin-bottom: 4rem;
&:after {
content: '';
height: 1px;
Expand Down
5 changes: 4 additions & 1 deletion src/components/Subline.js
Expand Up @@ -4,8 +4,11 @@ import styled from 'styled-components';
const Line = styled.div`
font-size: ${props => props.theme.fontSmall};
color: ${props => props.theme.light};
${props => props.sectionTitle && 'margin-top: -3rem'};
${props => props.sectionTitle && 'margin-bottom: 4rem'};
${props => props.sectionTitle && 'text-align: center'};
`;

const Subline = props => <Line>{props.children}</Line>;
const Subline = props => <Line sectionTitle={props.sectionTitle}>{props.children}</Line>;

export default Subline;
2 changes: 2 additions & 0 deletions src/pages/index.js
Expand Up @@ -58,6 +58,7 @@ const IndexPage = props => {
excerpt={post.node.excerpt}
timeToRead={post.node.timeToRead}
slug={post.node.fields.slug}
category={post.node.frontmatter.category}
key={post.node.fields.slug}
/>
))}
Expand All @@ -80,6 +81,7 @@ export const IndexQuery = graphql`
frontmatter {
title
date(formatString: "DD.MM.YYYY")
category
}
excerpt(pruneLength: 200)
timeToRead
Expand Down
5 changes: 4 additions & 1 deletion src/templates/post.js
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import Helmet from 'react-helmet';
import Link from 'gatsby-link';
import styled from 'styled-components';
import kebabCase from 'lodash/kebabCase';
import Wrapper from '../components/Wrapper';
import Header from '../components/Header';
import Subline from '../components/Subline';
Expand Down Expand Up @@ -44,7 +45,8 @@ const Post = props => {
<Content>
<Title>{post.title}</Title>
<Subline>
{post.date} &mdash; {postNode.timeToRead} Min Read
{post.date} &mdash; {postNode.timeToRead} Min Read &mdash; In{' '}
<Link to={`/categories/${kebabCase(post.category)}`}>{post.category}</Link>
</Subline>
<PostContent dangerouslySetInnerHTML={{ __html: postNode.html }} />
</Content>
Expand All @@ -62,6 +64,7 @@ export const postQuery = graphql`
frontmatter {
title
date(formatString: "DD.MM.YYYY")
category
}
timeToRead
}
Expand Down

0 comments on commit 211fc37

Please sign in to comment.