Upgrade to Gatsby v2

This commit is contained in:
alxshelepenok
2018-11-09 20:08:48 +03:00
parent e83dfc6dff
commit 8b92891329
204 changed files with 18708 additions and 3904 deletions

View File

@@ -1,30 +0,0 @@
import React from 'react';
import Post from '../Post';
class CategoryTemplateDetails extends React.Component {
render() {
const items = [];
const { category } = this.props.category;
const posts = this.props.posts;
posts.forEach((post) => {
items.push(<Post data={post} key={post.node.fields.slug} />);
});
return (
<div className="content">
<div className="content__inner">
<div className="page">
<h1 className="page__title">
{category}
</h1>
<div className="page__body">
{items}
</div>
</div>
</div>
</div>
);
}
}
export default CategoryTemplateDetails;

View File

@@ -1,38 +0,0 @@
import React, { Component } from 'react';
import ReactDisqusComments from 'react-disqus-comments';
class Disqus extends Component {
constructor(props) {
super(props);
this.state = { toasts: [] };
this.notifyAboutComment = this.notifyAboutComment.bind(this);
this.onSnackbarDismiss = this.onSnackbarDismiss.bind(this);
}
onSnackbarDismiss() {
const [, ...toasts] = this.state.toasts;
this.setState({ toasts });
}
notifyAboutComment() {
const toasts = this.state.toasts.slice();
toasts.push({ text: 'New comment available!!' });
this.setState({ toasts });
}
render() {
const { postNode, shortName, url: siteUrl } = this.props;
const post = postNode.frontmatter;
const url = siteUrl + postNode.fields.slug;
return (
<ReactDisqusComments
shortname={shortName}
identifier={post.title}
title={post.title}
url={url}
category_id={post.category_id}
onNewComment={this.notifyAboutComment}
/>
);
}
}
export default Disqus;

View File

@@ -0,0 +1,29 @@
import React from 'react';
import moment from 'moment';
import { Link } from 'gatsby';
import styles from './Feed.module.scss';
const Feed = ({ edges }) => (
<div className={styles['feed']}>
{edges.map((edge) => (
<div className={styles['feed__item']} key={edge.node.fields.slug}>
<div className={styles['feed__item-meta']}>
<time className={styles['feed__item-meta-time']} dateTime={moment(edge.node.frontmatter.date).format('MMMM D, YYYY')}>
{moment(edge.node.frontmatter.date).format('MMMM YYYY')}
</time>
<span className={styles['feed__item-meta-divider']} />
<span className={styles['feed__item-meta-category']}>
<Link to={edge.node.fields.categorySlug} className={styles['feed__item-meta-category-link']}>{edge.node.frontmatter.category}</Link>
</span>
</div>
<h2 className={styles['feed__item-title']}>
<Link className={styles['feed__item-title-link']} to={edge.node.fields.slug}>{edge.node.frontmatter.title}</Link>
</h2>
<p className={styles['feed__item-description']}>{edge.node.frontmatter.description}</p>
<Link className={styles['feed__item-readmore']} to={edge.node.fields.slug}>Read</Link>
</div>
))}
</div>
);
export default Feed;

View File

@@ -0,0 +1,81 @@
@import '../../assets/scss/variables';
@import '../../assets/scss/mixins';
.feed {
&__item {
@include margin-bottom(1.25);
&:last-child {
@include margin-bottom(.5);
}
&-title {
font-size: $typographic-base-font-size * 1.6875;
@include line-height(1.5);
@include margin-top(0);
@include margin-bottom(.5);
&-link {
color: $color-base;
&:hover,
&:focus {
color: $color-base;
border-bottom: 1px solid $color-base;
}
}
}
&-description {
font-size: $typographic-base-font-size;
@include line-height(1);
@include margin-bottom(.75);
}
&-meta {
&-time {
font-size: $typographic-small-font-size;
color: $color-base;
font-weight: 600;
text-transform: uppercase;
}
&-divider {
margin: 0 5px;
}
&-category {
&-link {
font-size: $typographic-small-font-size;
color: $color-secondary;
font-weight: 600;
text-transform: uppercase;
&:hover,
&:focus {
color: $color-primary;
}
}
}
}
&-readmore {
font-size: $typographic-base-font-size;
color: $color-primary;
&:hover,
&:focus {
color: $color-primary;
border-bottom: 1px solid $color-primary;
}
}
}
}

View File

@@ -0,0 +1,43 @@
import React from 'react';
import renderer from 'react-test-renderer';
import Feed from './Feed';
describe('Feed', () => {
const props = {
edges: [
{
node: {
fields: {
slug: '/test_0',
categorySlug: '/test_0'
},
frontmatter: {
date: '2016-09-01T23:46:37.121Z',
description: 'test_0',
category: 'test_0',
title: 'test_0'
}
}
},
{
node: {
fields: {
slug: '/test_1',
categorySlug: '/test_1'
},
frontmatter: {
date: '2016-09-01T23:46:37.121Z',
description: 'test_1',
category: 'test_1',
title: 'test_1'
}
}
}
]
};
it('renders correctly', () => {
const tree = renderer.create(<Feed {...props} />).toJSON();
expect(tree).toMatchSnapshot();
});
});

View File

@@ -0,0 +1,104 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Feed renders correctly 1`] = `
<div
className="feed"
>
<div
className="feed__item"
>
<div
className="feed__item-meta"
>
<time
className="feed__item-meta-time"
dateTime="September 2, 2016"
>
September 2016
</time>
<span
className="feed__item-meta-divider"
/>
<span
className="feed__item-meta-category"
>
<Link
className="feed__item-meta-category-link"
to="/test_0"
>
test_0
</Link>
</span>
</div>
<h2
className="feed__item-title"
>
<Link
className="feed__item-title-link"
to="/test_0"
>
test_0
</Link>
</h2>
<p
className="feed__item-description"
>
test_0
</p>
<Link
className="feed__item-readmore"
to="/test_0"
>
Read
</Link>
</div>
<div
className="feed__item"
>
<div
className="feed__item-meta"
>
<time
className="feed__item-meta-time"
dateTime="September 2, 2016"
>
September 2016
</time>
<span
className="feed__item-meta-divider"
/>
<span
className="feed__item-meta-category"
>
<Link
className="feed__item-meta-category-link"
to="/test_1"
>
test_1
</Link>
</span>
</div>
<h2
className="feed__item-title"
>
<Link
className="feed__item-title-link"
to="/test_1"
>
test_1
</Link>
</h2>
<p
className="feed__item-description"
>
test_1
</p>
<Link
className="feed__item-readmore"
to="/test_1"
>
Read
</Link>
</div>
</div>
`;

View File

@@ -0,0 +1 @@
export { default } from './Feed';

View File

@@ -0,0 +1,10 @@
import React from 'react';
import styles from './Icon.module.scss';
const Icon = ({ icon }) => (
<svg className={styles['icon']} viewBox={icon.viewBox}>
<path d={icon.path} />
</svg>
);
export default Icon;

View File

@@ -0,0 +1,19 @@
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
font-style: normal;
font-weight: normal;
speak: none;
margin-right: .2em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
margin-left: .2em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

View File

@@ -0,0 +1,17 @@
import React from 'react';
import renderer from 'react-test-renderer';
import Icon from './Icon';
describe('Icon', () => {
const props = {
icon: {
viewBox: '0 0 0 0',
path: '',
}
};
it('renders correctly', () => {
const tree = renderer.create(<Icon {...props} />).toJSON();
expect(tree).toMatchSnapshot();
});
});

View File

@@ -0,0 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Icon renders correctly 1`] = `
<svg
className="icon"
viewBox="0 0 0 0"
>
<path
d=""
/>
</svg>
`;

View File

@@ -0,0 +1 @@
export { default } from './Icon';

View File

@@ -0,0 +1,15 @@
import React from 'react';
import Helmet from 'react-helmet';
import styles from './Layout.module.scss';
const Layout = ({ children, title, description }) => (
<div className={styles.layout}>
<Helmet>
<title>{title}</title>
<meta name="description" content={description} />
</Helmet>
{children}
</div>
);
export default Layout;

View File

@@ -0,0 +1,6 @@
@import '../../assets/scss/variables';
@import '../../assets/scss/mixins';
.layout {
lost-center: $layout-width;
}

View File

@@ -0,0 +1,16 @@
import React from 'react';
import renderer from 'react-test-renderer';
import Layout from './Layout';
describe('Layout', () => {
const props = {
children: 'test',
description: 'test',
title: 'test'
};
it('renders correctly', () => {
const tree = renderer.create(<Layout {...props} />).toJSON();
expect(tree).toMatchSnapshot();
});
});

View File

@@ -0,0 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Layout renders correctly 1`] = `
<div
className="layout"
>
test
</div>
`;

View File

@@ -0,0 +1 @@
export { default } from './Layout';

View File

@@ -1,60 +0,0 @@
import React from 'react';
import './style.scss';
import '../../assets/fonts/fontello-771c82e0/css/fontello.css';
class Links extends React.Component {
render() {
const author = this.props.data;
const links = {
telegram: author.telegram,
twitter: author.twitter,
github: author.github,
vk: author.vk,
rss: author.rss,
email: author.email
};
return (
<div className="links">
<ul className="links__list">
<li className="links__list-item">
<a href={`https://www.twitter.com/${links.twitter}`} target="_blank" >
<i className="icon-twitter" />
</a>
</li>
<li className="links__list-item">
<a href={`https://www.github.com/${links.github}`} target="_blank" >
<i className="icon-github" />
</a>
</li>
<li className="links__list-item">
<a href={`https://www.vk.com/${links.vk}`} target="_blank" >
<i className="icon-vkontakte" />
</a>
</li>
</ul>
<ul className="links__list">
<li className="links__list-item">
<a href={`mailto:${links.email}`}>
<i className="icon-mail" />
</a>
</li>
<li className="links__list-item">
<a href={`telegram:${links.telegram}`}>
<i className="icon-paper-plane" />
</a>
</li>
</ul>
<ul className="links__list">
<li className="links__list-item">
<a href={links.rss}>
<i className="icon-rss" />
</a>
</li>
</ul>
</div>
);
}
}
export default Links;

View File

@@ -1,35 +0,0 @@
@import "../../assets/scss/variables";
@import "../../assets/scss/mixins";
.links {
@include margin-bottom(1);
&__list {
display: flex;
list-style: none;
padding: 0;
margin: 10px -3px;
&-item {
padding: 0;
margin: 0 3px;
height: 24px;
width: 24px;
line-height: 24px;
border-radius: 3px;
text-align: center;
background: $color-gray-bg;
& a {
border: 0;
& i {
font-size: 14px;
color: lighten($color-base, 20%);
}
&:hover,
&:focus {
& i {
color: $color-base;
}
}
}
}
}
}

View File

@@ -1,34 +0,0 @@
import React from 'react';
import Link from 'gatsby-link';
import './style.scss';
class Menu extends React.Component {
render() {
const menu = this.props.data;
const menuBlock = (
<ul className="menu__list">
{menu.map(item => (
<li className="menu__list-item" key={item.path}>
<Link
exact
to={item.path}
className="menu__list-item-link"
activeClassName="menu__list-item-link menu__list-item-link--active"
>
{item.label}
</Link>
</li>
))}
</ul>
);
return (
<nav className="menu">
{menuBlock}
</nav>
);
}
}
export default Menu;

View File

@@ -1,30 +0,0 @@
@import "../../assets/scss/variables";
@import "../../assets/scss/mixins";
.menu {
@include margin-bottom(1);
&__list {
list-style: none;
padding: 0;
margin: 0;
&-item {
padding: 0;
margin: 10px 0;
&-link {
font-size: $typographic-base-font-size;
color: $typographic-base-font-color;
font-weight: 400;
border: 0;
&:hover,
&:focus {
color: $color-primary;
border-bottom: 1px solid $color-primary;
}
&--active {
color: $color-base;
border-bottom: 1px solid $color-base;
}
}
}
}
}

View File

@@ -0,0 +1,15 @@
import React from 'react';
import styles from './Page.module.scss';
const Page = ({ title, children }) => (
<div className={styles['page']}>
<div className={styles['page__inner']}>
{ title && <h1 className={styles['page__title']}>{title}</h1>}
<div className={styles['page__body']}>
{children}
</div>
</div>
</div>
);
export default Page;

View File

@@ -0,0 +1,49 @@
@import '../../assets/scss/variables';
@import '../../assets/scss/mixins';
.page {
@include margin-bottom(2);
&__inner {
padding: 25px 20px;
}
&__title {
font-size: $typographic-base-font-size * 2.5;
font-weight: 600;
@include line-height(2);
@include margin-top(0);
@include margin-bottom(1.45);
}
&__body {
font-size: $typographic-base-font-size;
@include line-height(1);
@include margin(0, 0, 1);
}
}
@include breakpoint-sm {
.page {
lost-column: 7/12;
&__inner {
padding: 30px 20px;
}
}
}
@include breakpoint-md {
.page {
lost-column: 2/3;
&__inner {
padding: 40px 35px;
}
}
}

View File

@@ -0,0 +1,15 @@
import React from 'react';
import renderer from 'react-test-renderer';
import Page from './Page';
describe('Page', () => {
const props = {
children: 'test',
title: 'test',
};
it('renders correctly', () => {
const tree = renderer.create(<Page {...props} />).toJSON();
expect(tree).toMatchSnapshot();
});
});

View File

@@ -0,0 +1,22 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Page renders correctly 1`] = `
<div
className="page"
>
<div
className="page__inner"
>
<h1
className="page__title"
>
test
</h1>
<div
className="page__body"
>
test
</div>
</div>
</div>
`;

View File

@@ -0,0 +1 @@
export { default } from './Page';

View File

@@ -1,25 +0,0 @@
import React from 'react';
import Sidebar from '../Sidebar';
import './style.scss';
class PageTemplateDetails extends React.Component {
render() {
const page = this.props.page;
return (
<div>
<Sidebar siteMetadata={this.props.siteMetadata} />
<div className="content">
<div className="content__inner">
<div className="page">
<h1 className="page__title">{page.frontmatter.title}</h1>
<div className="page__body" dangerouslySetInnerHTML={{ __html: page.html }} />
</div>
</div>
</div>
</div>
);
}
}
export default PageTemplateDetails;

View File

@@ -1,18 +0,0 @@
@import "../../assets/scss/variables";
@import "../../assets/scss/mixins";
.page {
@include margin-bottom(2);
&__title {
font-size: $typographic-base-font-size * 2.5;
font-weight: 500;
@include line-height(2);
@include margin-top(0);
@include margin-bottom(1.45);
}
&__body {
font-size: $typographic-base-font-size;
@include line-height(1);
@include margin(0, 0, 1);
}
}

View File

@@ -0,0 +1,47 @@
import React from 'react';
import { graphql, StaticQuery } from 'gatsby';
import { getContactHref } from '../../../utils';
import styles from './Author.module.scss';
export const PureAuthor = ({ data }) => {
const { author } = data.site.siteMetadata;
return (
<div className={styles['author']}>
<p className={styles['author__bio']}>
{author.bio}
<a
className={styles['author__bio-twitter']}
href={getContactHref('twitter', author.contacts.twitter)}
rel="noopener noreferrer"
target="_blank"
>
<strong>{author.name}</strong> on Twitter
</a>
</p>
</div>
);
};
export const Author = (props) => (
<StaticQuery
query={graphql`
query AuthorQuery {
site {
siteMetadata {
author {
name
bio
contacts {
twitter
}
}
}
}
}
`}
render={(data) => <PureAuthor {...props} data={data} />}
/>
);
export default Author;

View File

@@ -0,0 +1,26 @@
@import '../../../assets/scss/variables';
@import '../../../assets/scss/mixins';
.author {
border-top: 1px solid $color-gray-border;
max-width: $layout-post-width;
padding-top: 20px;
@include line-height(1);
@include margin-top(1);
@include margin-bottom(2);
&__bio {
&-twitter {
display: block;
text-decoration: underline;
}
}
}
@include breakpoint-sm {
.author {
margin-left: auto;
margin-right: auto;
}
}

View File

@@ -0,0 +1,26 @@
import React from 'react';
import renderer from 'react-test-renderer';
import { PureAuthor as Author } from './Author';
describe('Author', () => {
it('renders correctly', () => {
const props = {
data: {
site: {
siteMetadata: {
author: {
name: 'test',
bio: 'test',
contacts: {
twitter: 'test'
}
}
}
}
}
};
const tree = renderer.create(<Author {...props} />).toJSON();
expect(tree).toMatchSnapshot();
});
});

View File

@@ -0,0 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Author renders correctly 1`] = `
<div
className="author"
>
<p
className="author__bio"
>
test
<a
className="author__bio-twitter"
href="https://www.twitter.com/test"
rel="noopener noreferrer"
target="_blank"
>
<strong>
test
</strong>
on Twitter
</a>
</p>
</div>
`;

View File

@@ -0,0 +1 @@
export { default } from './Author';

View File

@@ -0,0 +1,37 @@
import React from 'react';
import { graphql, StaticQuery } from 'gatsby';
import ReactDisqusComments from 'react-disqus-comments';
export const PureComments = ({ data, postTitle, postSlug }) => {
const {
siteUrl,
disqusShortname
} = data.site.siteMetadata;
return (
<ReactDisqusComments
shortname={disqusShortname}
identifier={postTitle}
title={postTitle}
url={siteUrl + postSlug}
/>
);
};
export const Comments = (props) => (
<StaticQuery
query={graphql`
query CommentsQuery {
site {
siteMetadata {
disqusShortname
url
}
}
}
`}
render={(data) => <PureComments {...props} data={data}/>}
/>
);
export default Comments;

View File

@@ -0,0 +1,23 @@
import React from 'react';
import renderer from 'react-test-renderer';
import { PureComments as Comments } from './Comments';
describe('Comments', () => {
it('renders correctly', () => {
const props = {
data: {
site: {
siteMetadata: {
url: 'http://localhost',
disqusShortname: 'test'
}
}
},
postTitle: 'test',
postSlug: '/test'
};
const tree = renderer.create(<Comments {...props} />).toJSON();
expect(tree).toMatchSnapshot();
});
});

View File

@@ -0,0 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Comments renders correctly 1`] = `
<div>
<div
id="disqus_thread"
/>
</div>
`;

View File

@@ -0,0 +1 @@
export { default } from './Comments';

View File

@@ -0,0 +1,11 @@
import React from 'react';
import styles from './Content.module.scss';
const Content = ({ body, title }) => (
<div className={styles['content']}>
<h1 className={styles['content__title']}>{title}</h1>
<div className={styles['content__body']} dangerouslySetInnerHTML={{ __html: body }} />
</div>
);
export default Content;

View File

@@ -0,0 +1,104 @@
@import '../../../assets/scss/variables';
@import '../../../assets/scss/mixins';
.content {
max-width: $layout-post-single-width;
padding: 0 15px;
margin: 0 auto;
&__title {
font-size: $typographic-base-font-size * 2;
max-width: $layout-post-width;
margin-left: auto;
margin-right: auto;
font-weight: 600;
text-align: center;
@include line-height(1.65);
@include margin-top(1);
@include margin-bottom(0)
}
&__body {
& figure {
@include margin-bottom(1);
& blockquote {
font-style: italic;
text-align: center;
margin-top: 0;
@include padding(1, 0);
& p {
max-width: $layout-post-width;
font-size: $typographic-base-font-size * 1.6817;
margin-top: 0;
@include margin-bottom(1);
@include line-height(1.5)
}
}
}
& a {
text-decoration: underline
}
& .gatsby-highlight {
max-width: $layout-post-width;
margin-left: 15px;
margin-right: 15px;
@include margin-bottom(1)
}
& *:not(div) {
max-width: $layout-post-width;
margin-left: auto;
margin-right: auto
}
}
}
@include breakpoint-sm {
.content {
&__body {
& .gatsby-highlight {
margin-left: auto;
margin-right: auto
}
}
}
}
@include breakpoint-md {
.content {
padding: 0;
&__title {
font-size: $typographic-base-font-size * 3;
@include line-height(2.25);
@include margin-top(2.25);
@include margin-bottom(1.5)
}
&__body {
font-size: $typographic-base-font-size * 1.125;
@include line-height(1.125);
@include margin-bottom(1.125);
& p {
font-size: $typographic-base-font-size * 1.125;
@include line-height(1.125);
@include margin-bottom(1.125)
}
}
}
}

View File

@@ -0,0 +1,15 @@
import React from 'react';
import renderer from 'react-test-renderer';
import Content from './Content';
describe('Content', () => {
it('renders correctly', () => {
const props = {
title: 'test',
body: '<p>test</p>'
};
const tree = renderer.create(<Content {...props} />).toJSON();
expect(tree).toMatchSnapshot();
});
});

View File

@@ -0,0 +1,21 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Content renders correctly 1`] = `
<div
className="content"
>
<h1
className="content__title"
>
test
</h1>
<div
className="content__body"
dangerouslySetInnerHTML={
Object {
"__html": "<p>test</p>",
}
}
/>
</div>
`;

View File

@@ -0,0 +1 @@
export { default } from './Content';

View File

@@ -0,0 +1,11 @@
import React from 'react';
import moment from 'moment';
import styles from './Meta.module.scss';
const Meta = ({ date }) => (
<div className={styles['meta']}>
<p className={styles['meta__date']}>Published {moment(date).format('D MMM YYYY')}</p>
</div>
);
export default Meta;

View File

@@ -0,0 +1,9 @@
@import '../../../assets/scss/variables';
@import '../../../assets/scss/mixins';
.meta {
&__date {
font-style: italic;
}
}

View File

@@ -0,0 +1,14 @@
import React from 'react';
import renderer from 'react-test-renderer';
import Meta from './Meta';
describe('Meta', () => {
it('renders correctly', () => {
const props = {
date: '2016-09-01T23:46:37.121Z'
};
const tree = renderer.create(<Meta {...props} />).toJSON();
expect(tree).toMatchSnapshot();
});
});

View File

@@ -0,0 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Meta renders correctly 1`] = `
<div
className="meta"
>
<p
className="meta__date"
>
Published
2 Sep 2016
</p>
</div>
`;

View File

@@ -0,0 +1 @@
export { default } from './Meta';

View File

@@ -0,0 +1,41 @@
import React from 'react';
import { Link } from 'gatsby';
import Author from './Author';
import Comments from './Comments';
import Content from './Content';
import Meta from './Meta';
import Tags from './Tags';
import styles from './Post.module.scss';
const Post = ({ post }) => {
const {
tags,
title,
date
} = post.frontmatter;
const { html } = post;
const { tagSlugs } = post.fields;
return (
<div className={styles['post']}>
<Link className={styles['post__home-button']} to="/">All Articles</Link>
<div className={styles['post__content']}>
<Content body={html} title={title} />
</div>
<div className={styles['post__footer']}>
<Meta date={date} />
<Tags tags={tags} tagSlugs={tagSlugs} />
<Author />
</div>
<div className={styles['post__comments']}>
<Comments postSlug={post.fields.slug} postTitle={post.frontmatter.title} />
</div>
</div>
);
};
export default Post;

View File

@@ -0,0 +1,64 @@
@import '../../assets/scss/variables';
@import '../../assets/scss/mixins';
.post {
&__footer {
max-width: $layout-post-width;
margin: 0 auto;
padding: 0 15px;
}
&__comments {
max-width: $layout-post-width;
margin: 0 auto;
padding: 0 15px;
}
&__home-button {
display: block;
width: 90px;
height: 35px;
font-size: $typographic-base-font-size;
padding: 0 16px;
line-height: 35px;
text-align: center;
color: lighten($color-base, 20%);
background: $color-gray-bg;
font-weight: normal;
border-radius: 3px;
margin-left: auto;
margin-right: auto;
@include margin-top(1);
&:hover,
&:focus {
color: $color-base;
background: darken($color-gray-bg, 5%);
border: 0
}
}
}
@include breakpoint-md {
.post {
&__footer {
padding: 0;
}
&__comments {
padding: 0;
}
&__home-button {
max-width: auto;
position: fixed;
margin: 0;
top: 30px;
left: 30px
}
}
}

View File

@@ -0,0 +1,30 @@
import React from 'react';
import renderer from 'react-test-renderer';
import Post from './Post';
describe('Post', () => {
const props = {
post: {
html: '<p>test</p>',
fields: {
tagSlugs: [
'/test_0',
'/test_1'
]
},
frontmatter: {
date: '2016-09-01T23:46:37.121Z',
tags: [
'test_0',
'test_1'
],
title: 'test'
}
}
};
it('renders correctly', () => {
const tree = renderer.create(<Post {...props} />).toJSON();
expect(tree).toMatchSnapshot();
});
});

View File

@@ -0,0 +1,19 @@
import React from 'react';
import { Link } from 'gatsby';
import styles from './Tags.module.scss';
const Tags = ({ tags, tagSlugs }) => (
<div className={styles['tags']}>
<ul className={styles['tags__list']}>
{tagSlugs.map((slug, i) => (
<li className={styles['tags__list-item']} key={tags[i]}>
<Link to={slug} className={styles['tags__list-item-link']}>
{tags[i]}
</Link>
</li>
))}
</ul>
</div>
);
export default Tags;

View File

@@ -0,0 +1,38 @@
@import '../../../assets/scss/variables';
@import '../../../assets/scss/mixins';
.tags {
@include margin-bottom(.5);
&__list {
list-style: none;
margin: 0 -10px;
padding: 0;
&-item {
display: inline-block;
margin: 10px 5px;
&-link {
background: $color-gray-bg;
text-decoration: none;
border: 0;
border-radius: 3px;
color: lighten($color-base, 20%);
line-height: $typographic-base-line-height;
padding: 8px 16px;
&:hover,
&:focus {
color: $color-base;
background: darken($color-gray-bg, 5%);
border: 0;
}
}
}
}
}

View File

@@ -0,0 +1,21 @@
import React from 'react';
import renderer from 'react-test-renderer';
import Tags from './Tags';
describe('Tags', () => {
it('renders correctly', () => {
const props = {
tags: [
'test_0',
'test_1'
],
tagSlugs: [
'/test_0',
'/test_1'
]
};
const tree = renderer.create(<Tags {...props} />).toJSON();
expect(tree).toMatchSnapshot();
});
});

View File

@@ -0,0 +1,32 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Tags renders correctly 1`] = `
<div
className="tags"
>
<ul
className="tags__list"
>
<li
className="tags__list-item"
>
<Link
className="tags__list-item-link"
to="/test_0"
>
test_0
</Link>
</li>
<li
className="tags__list-item"
>
<Link
className="tags__list-item-link"
to="/test_1"
>
test_1
</Link>
</li>
</ul>
</div>
`;

View File

@@ -0,0 +1 @@
export { default } from './Tags';

View File

@@ -0,0 +1,87 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Post renders correctly 1`] = `
<div
className="post"
>
<Link
className="post__home-button"
to="/"
>
All Articles
</Link>
<div
className="post__content"
>
<div
className="content"
>
<h1
className="content__title"
>
test
</h1>
<div
className="content__body"
dangerouslySetInnerHTML={
Object {
"__html": "<p>test</p>",
}
}
/>
</div>
</div>
<div
className="post__footer"
>
<div
className="meta"
>
<p
className="meta__date"
>
Published
2 Sep 2016
</p>
</div>
<div
className="tags"
>
<ul
className="tags__list"
>
<li
className="tags__list-item"
>
<Link
className="tags__list-item-link"
to="/test_0"
>
test_0
</Link>
</li>
<li
className="tags__list-item"
>
<Link
className="tags__list-item-link"
to="/test_1"
>
test_1
</Link>
</li>
</ul>
</div>
<StaticQuery
render={[Function]}
/>
</div>
<div
className="post__comments"
>
<StaticQuery
render={[Function]}
/>
</div>
</div>
`;

View File

@@ -0,0 +1 @@
export { default } from './Post';

View File

@@ -1,34 +0,0 @@
import React from 'react';
import Link from 'gatsby-link';
import moment from 'moment';
import './style.scss';
class Post extends React.Component {
render() {
const { title, date, category, description } = this.props.data.node.frontmatter;
const { slug, categorySlug } = this.props.data.node.fields;
return (
<div className="post">
<div className="post__meta">
<time className="post__meta-time" dateTime={moment(date).format('MMMM D, YYYY')}>
{moment(date).format('MMMM YYYY')}
</time>
<span className="post__meta-divider" />
<span className="post__meta-category" key={categorySlug}>
<Link to={categorySlug} className="post__meta-category-link">
{category}
</Link>
</span>
</div>
<h2 className="post__title">
<Link className="post__title-link" to={slug}>{title}</Link>
</h2>
<p className="post__description">{description}</p>
<Link className="post__readmore" to={slug}>Read</Link>
</div>
);
}
}
export default Post;

View File

@@ -1,60 +0,0 @@
@import "../../assets/scss/variables";
@import "../../assets/scss/mixins";
.post {
@include margin-bottom(1.25);
&:last-child {
@include margin-bottom(.5);
}
&__title {
font-size: $typographic-base-font-size * 1.6875;
@include line-height(1.5);
@include margin-top(0);
@include margin-bottom(.5);
&-link {
color: $color-base;
&:hover,
&:focus {
color: $color-base;
border-bottom: 1px solid $color-base;
}
}
}
&__description {
font-size: $typographic-base-font-size;
@include line-height(1);
@include margin-bottom(.75);
}
&__meta {
&-time {
font-size: $typographic-small-font-size;
color: $color-base;
font-weight: 500;
text-transform: uppercase;
}
&-divider {
margin: 0 5px;
}
&-category {
&-link {
font-size: $typographic-small-font-size;
color: $color-secondary;
font-weight: 500;
text-transform: uppercase;
&:hover,
&:focus {
color: $color-primary;
}
}
}
}
&__readmore {
font-size: $typographic-base-font-size;
color: $color-primary;
&:hover,
&:focus {
color: $color-primary;
border-bottom: 1px solid $color-primary;
}
}
}

View File

@@ -1,67 +0,0 @@
import React from 'react';
import Link from 'gatsby-link';
import moment from 'moment';
import Disqus from '../Disqus/Disqus';
import './style.scss';
class PostTemplateDetails extends React.Component {
render() {
const { subtitle, author, disqusShortname, url } = this.props.siteMetadata;
const post = this.props.post;
const tags = post.fields.tagSlugs;
const homeBlock = (
<div>
<Link className="post-single__home-button" to="/">All Articles</Link>
</div>
);
const tagsBlock = (
<div className="post-single__tags">
<ul className="post-single__tags-list">
{tags && tags.map((tag, i) => (
<li className="post-single__tags-list-item" key={tag}>
<Link to={tag} className="post-single__tags-list-item-link">
{post.frontmatter.tags[i]}
</Link>
</li>
))}
</ul>
</div>
);
const commentsBlock = (
<div>
<Disqus postNode={post} shortName={disqusShortname} url={url} />
</div>
);
return (
<div>
{homeBlock}
<div className="post-single">
<div className="post-single__inner">
<h1 className="post-single__title">{post.frontmatter.title}</h1>
<div className="post-single__body" dangerouslySetInnerHTML={{ __html: post.html }} />
<div className="post-single__date">
<em>Published {moment(post.frontmatter.date).format('D MMM YYYY')}</em>
</div>
</div>
<div className="post-single__footer">
{tagsBlock}
<hr />
<p className="post-single__footer-text">
{subtitle}
<a href={`https://twitter.com/${author.twitter}`} target="_blank" rel="noopener noreferrer">
<br /> <strong>{author.name}</strong> on Twitter
</a>
</p>
{disqusShortname && commentsBlock}
</div>
</div>
</div>
);
}
}
export default PostTemplateDetails;

View File

@@ -1,166 +0,0 @@
@import "../../assets/scss/variables";
@import "../../assets/scss/mixins";
.post-single {
&__inner {
max-width: $layout-post-single-max-width;
padding: 0 15px;
margin: 0 auto;
}
&__title {
font-size: $typographic-base-font-size * 2;
max-width: $layout-post-single-width;
margin-left: auto;
margin-right: auto;
font-weight: 600;
text-align: center;
@include line-height(1.65);
@include margin-top(1);
@include margin-bottom(0);
}
&__body {
& figure {
@include margin-bottom(1);
& blockquote {
font-style: italic;
text-align: center;
margin-top: 0;
@include padding(1, 0);
& p {
max-width: $layout-post-single-width;
font-size: $typographic-base-font-size * 1.6817;
margin-top: 0;
@include margin-bottom(1);
@include line-height(1.5);
}
}
}
& a {
text-decoration: underline;
}
& .gatsby-highlight {
max-width: $layout-post-single-width;
margin-left: 15px;
margin-right: 15px;
@include margin-bottom(1);
}
& :not(div) {
max-width: $layout-post-single-width;
margin-left: auto;
margin-right: auto;
}
}
&__footer {
max-width: $layout-post-single-width;
margin-left: 15px;
margin-right: 15px;
@include line-height(1);
@include margin-top(1);
@include margin-bottom(2);
&-text {
& a {
text-decoration: underline;
}
}
}
&__date {
max-width: $layout-post-single-width;
margin-left: auto;
margin-right: auto;
}
&__tags {
@include margin-bottom(.5);
&-list {
list-style: none;
margin: 0 -5px;
padding: 0;
&-item {
display: inline-block;
margin: 10px 5px;
&-link {
background: $color-gray-bg;
text-decoration: none;
border: 0;
border-radius: 3px;
color: lighten($color-base, 20%);
line-height: $typographic-base-line-height;
padding: 8px 16px;
&:hover,
&:focus {
color: $color-base;
background: darken($color-gray-bg, 5%);
border: 0;
}
}
}
}
}
&__home-button {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 90px;
font-size: $typographic-base-font-size;
padding: 0 16px;
height: 35px;
line-height: 35px;
text-align: center;
color: lighten($color-base, 20%);
background: $color-gray-bg;
font-weight: 400;
border-radius: 3px;
@include margin-top(1);
&:hover,
&:focus {
color: $color-base;
background: darken($color-gray-bg, 5%);
border: 0;
}
}
}
@include breakpoint-sm {
.post-single {
&__footer {
margin-left: auto;
margin-right: auto;
}
&__body {
& .gatsby-highlight {
margin-left: auto;
margin-right: auto;
}
}
}
}
@include breakpoint-md {
.post-single {
&__inner {
padding: 0;
}
&__title {
font-size: $typographic-base-font-size * 3;
@include line-height(2.25);
@include margin-top(2.25);
@include margin-bottom(1.5);
}
&__body {
font-size: $typographic-base-font-size * 1.125;
@include line-height(1.125);
@include margin-bottom(1.125);
& p {
font-size: $typographic-base-font-size * 1.125;
@include line-height(1.125);
@include margin-bottom(1.125);
}
}
&__home-button {
position: fixed;
max-width: auto;
margin: 0;
top: 30px;
left: 30px;
}
}
}

View File

@@ -0,0 +1,32 @@
import React from 'react';
import { Link } from 'gatsby';
import profilePic from '../../../pages/photo.jpg';
import styles from './Author.module.scss';
const Author = ({ author, isIndex }) => (
<div className={styles['author']}>
<Link to="/">
<img
src={profilePic}
className={styles['author__photo']}
width="75"
height="75"
alt={author.name}
/>
</Link>
{ isIndex ? (
<h1 className={styles['author__title']}>
<Link className={styles['author__title-link']} to="/">{author.name}</Link>
</h1>
) :
<h2 className={styles['author__title']}>
<Link className={styles['author__title-link']} to="/">{author.name}</Link>
</h2>
}
<p className={styles['author__subtitle']}>{author.bio}</p>
</div>
);
export default Author;

View File

@@ -0,0 +1,36 @@
@import '../../../assets/scss/variables';
@import '../../../assets/scss/mixins';
.author {
&__photo {
display: inline-block;
margin-bottom: 0;
border-radius: 50%;
background-clip: padding-box
}
&__title {
font-size: $typographic-base-font-size * 1.125;
font-weight: 600;
@include line-height(1.125);
@include margin(.5, 0, .5, 0);
&-link {
color: $color-base;
&:hover,
&:focus {
color: $color-base
}
}
}
&__subtitle {
color: $color-gray;
@include line-height(1);
@include margin-bottom(1)
}
}

View File

@@ -0,0 +1,17 @@
import React from 'react';
import renderer from 'react-test-renderer';
import Author from './Author';
describe('Author', () => {
const props = {
author: {
name: 'test',
bio: 'test'
}
};
it('renders correctly', () => {
const tree = renderer.create(<Author {...props} />).toJSON();
expect(tree).toMatchSnapshot();
});
});

View File

@@ -0,0 +1,34 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Author renders correctly 1`] = `
<div
className="author"
>
<Link
to="/"
>
<img
alt="test"
className="author__photo"
height="75"
src="file"
width="75"
/>
</Link>
<h2
className="author__title"
>
<Link
className="author__title-link"
to="/"
>
test
</Link>
</h2>
<p
className="author__subtitle"
>
test
</p>
</div>
`;

View File

@@ -0,0 +1 @@
export { default } from './Author';

View File

@@ -0,0 +1,25 @@
import React from 'react';
import { getContactHref, getIcon } from '../../../utils';
import Icon from '../../Icon';
import styles from './Contacts.module.scss';
const Contacts = ({ contacts }) => (
<div className={styles['contacts']}>
<ul className={styles['contacts__list']}>
{Object.keys(contacts).map((name) => (
<li className={styles['contacts__list-item']} key={name}>
<a
className={styles['contacts__list-item-link']}
href={getContactHref(name, contacts[name])}
rel="noopener noreferrer"
target="_blank"
>
<Icon icon={getIcon(name)} />
</a>
</li>
))}
</ul>
</div>
);
export default Contacts;

View File

@@ -0,0 +1,47 @@
@import '../../../assets/scss/variables';
@import '../../../assets/scss/mixins';
.contacts {
@include margin-bottom(1);
&__list {
display: flex;
flex-flow: row wrap;
flex-grow: 0;
flex-shrink: 0;
list-style: none;
padding: 0;
margin: 10px -3px;
width: 104px;
&-item {
padding: 0;
display: flex;
align-content: center;
align-items: center;
justify-content: center;
margin: 3px;
height: 28px;
width: 28px;
line-height: 28px;
border-radius: 50%;
text-align: center;
background: $color-gray-bg;
&-link {
border: 0;
display: flex;
color: lighten($color-base, 20%);
&:hover,
&:focus {
color: $color-base;
}
}
}
}
}

View File

@@ -0,0 +1,21 @@
import React from 'react';
import renderer from 'react-test-renderer';
import Contacts from './Contacts';
describe('Contacts', () => {
const props = {
contacts: {
email: '#',
twitter: '#',
vkontakte: '#',
github: '#',
rss: '#',
telegram: '#'
}
};
it('renders correctly', () => {
const tree = renderer.create(<Contacts {...props} />).toJSON();
expect(tree).toMatchSnapshot();
});
});

View File

@@ -0,0 +1,126 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Contacts renders correctly 1`] = `
<div
className="contacts"
>
<ul
className="contacts__list"
>
<li
className="contacts__list-item"
>
<a
className="contacts__list-item-link"
href="mailto:#"
rel="noopener noreferrer"
target="_blank"
>
<svg
className="icon"
viewBox="0 0 28 28"
>
<path
d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
/>
</svg>
</a>
</li>
<li
className="contacts__list-item"
>
<a
className="contacts__list-item-link"
href="https://www.twitter.com/#"
rel="noopener noreferrer"
target="_blank"
>
<svg
className="icon"
viewBox="0 0 26 28"
>
<path
d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
/>
</svg>
</a>
</li>
<li
className="contacts__list-item"
>
<a
className="contacts__list-item-link"
href="https://vk.com/#"
rel="noopener noreferrer"
target="_blank"
>
<svg
className="icon"
viewBox="0 0 31 28"
>
<path
d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
/>
</svg>
</a>
</li>
<li
className="contacts__list-item"
>
<a
className="contacts__list-item-link"
href="https://github.com/#"
rel="noopener noreferrer"
target="_blank"
>
<svg
className="icon"
viewBox="0 0 26 28"
>
<path
d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
/>
</svg>
</a>
</li>
<li
className="contacts__list-item"
>
<a
className="contacts__list-item-link"
href="#"
rel="noopener noreferrer"
target="_blank"
>
<svg
className="icon"
viewBox="0 0 22 28"
>
<path
d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
/>
</svg>
</a>
</li>
<li
className="contacts__list-item"
>
<a
className="contacts__list-item-link"
href="telegram:#"
rel="noopener noreferrer"
target="_blank"
>
<svg
className="icon"
viewBox="0 0 28 28"
>
<path
d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
/>
</svg>
</a>
</li>
</ul>
</div>
`;

View File

@@ -0,0 +1 @@
export { default } from './Contacts';

View File

@@ -0,0 +1,10 @@
import React from 'react';
import styles from './Copyright.module.scss';
const Copyright = ({ copyright }) => (
<div className={styles['copyright']}>
{copyright}
</div>
);
export default Copyright;

View File

@@ -0,0 +1,7 @@
@import '../../../assets/scss/variables';
@import '../../../assets/scss/mixins';
.copyright {
color: lighten($color-gray, 18%);
font-size: $typographic-small-font-size;
}

View File

@@ -0,0 +1,14 @@
import React from 'react';
import renderer from 'react-test-renderer';
import Copyright from './Copyright';
describe('Copyright', () => {
it('renders correctly', () => {
const props = {
copyright: 'copyright'
};
const tree = renderer.create(<Copyright {...props} />).toJSON();
expect(tree).toMatchSnapshot();
});
});

View File

@@ -0,0 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Copyright renders correctly 1`] = `
<div
className="copyright"
>
copyright
</div>
`;

View File

@@ -0,0 +1 @@
export { default } from './Copyright';

View File

@@ -0,0 +1,23 @@
import React from 'react';
import { Link } from 'gatsby';
import styles from './Menu.module.scss';
const Menu = ({ menu }) => (
<nav className={styles['menu']}>
<ul className={styles['menu__list']}>
{menu.map((item) => (
<li className={styles['menu__list-item']} key={item.path}>
<Link
to={item.path}
className={styles['menu__list-item-link']}
activeClassName={styles['menu__list-item-link--active']}
>
{item.label}
</Link>
</li>
))}
</ul>
</nav>
);
export default Menu;

View File

@@ -0,0 +1,39 @@
@import '../../../assets/scss/variables';
@import '../../../assets/scss/mixins';
.menu {
@include margin-bottom(1);
&__list {
list-style: none;
padding: 0;
margin: 0;
&-item {
padding: 0;
margin: 10px 0;
&-link {
font-size: $typographic-base-font-size;
color: $typographic-base-font-color;
font-weight: normal;
border: 0;
&:hover,
&:focus {
color: $color-primary;
border-bottom: 1px solid $color-primary;
}
&--active {
color: $color-base;
border-bottom: 1px solid $color-base;
}
}
}
}
}

View File

@@ -0,0 +1,23 @@
import React from 'react';
import renderer from 'react-test-renderer';
import Menu from './Menu';
describe('Menu', () => {
const props = {
menu: [
{
label: 'Item 0',
path: '/#0/'
},
{
label: 'Item 1',
path: '/#1/'
}
]
};
it('renders correctly', () => {
const tree = renderer.create(<Menu {...props} />).toJSON();
expect(tree).toMatchSnapshot();
});
});

View File

@@ -0,0 +1,34 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Menu renders correctly 1`] = `
<nav
className="menu"
>
<ul
className="menu__list"
>
<li
className="menu__list-item"
>
<Link
activeClassName="menu__list-item-link--active"
className="menu__list-item-link"
to="/#0/"
>
Item 0
</Link>
</li>
<li
className="menu__list-item"
>
<Link
activeClassName="menu__list-item-link--active"
className="menu__list-item-link"
to="/#1/"
>
Item 1
</Link>
</li>
</ul>
</nav>
`;

View File

@@ -0,0 +1 @@
export { default } from './Menu';

View File

@@ -0,0 +1,61 @@
import React from 'react';
import { graphql, StaticQuery } from 'gatsby';
import Author from './Author';
import Contacts from './Contacts';
import Copyright from './Copyright';
import Menu from './Menu';
import styles from './Sidebar.module.scss';
export const PureSidebar = ({ data, isIndex }) => {
const {
author,
copyright,
menu
} = data.site.siteMetadata;
return (
<div className={styles['sidebar']}>
<div className={styles['sidebar__inner']}>
<Author author={author} isIndex={isIndex} />
<Menu menu={menu} />
<Contacts contacts={author.contacts} />
<Copyright copyright={copyright} />
</div>
</div>
);
};
export const Sidebar = (props) => (
<StaticQuery
query={graphql`
query SidebarQuery {
site {
siteMetadata {
title
subtitle
copyright
menu {
label
path
}
author {
name
bio
contacts {
twitter
telegram
github
email
rss
vkontakte
}
}
}
}
}
`}
render={(data) => <PureSidebar {...props} data={data}/>}
/>
);
export default Sidebar;

View File

@@ -0,0 +1,39 @@
@import '../../assets/scss/variables';
@import '../../assets/scss/mixins';
.sidebar {
width: 100%;
&__inner {
position: relative;
padding: 25px 20px 0;
}
}
@include breakpoint-sm {
.sidebar {
lost-column: 5/12;
&__inner {
padding: 30px 20px 0;
&:after {
background: $color-gray-border;
background: linear-gradient(to bottom, $color-gray-border 0%, $color-gray-border 48%, $color-white 100%);
position: absolute;
content: '';
width: 1px;
height: 540px;
top: 30px;
right: -10px;
bottom: 0;
}
}
}
}
@include breakpoint-md {
.sidebar {
lost-column: 1/3;
&__inner {
padding: 40px;
}
}
}

View File

@@ -0,0 +1,42 @@
import React from 'react';
import renderer from 'react-test-renderer';
import { PureSidebar as Sidebar } from './Sidebar';
describe('Sidebar', () => {
it('renders correctly', () => {
const props = {
data: {
site: {
siteMetadata: {
author: {
name: 'name',
bio: 'bio',
contacts: {
email: '#',
twitter: '#',
vkontakte: '#',
github: '#',
rss: '#',
telegram: '#'
}
},
copyright: 'copyright',
menu: [
{
label: 'Item 0',
path: '/#0/'
},
{
label: 'Item 1',
path: '/#1/'
}
]
}
}
}
};
const tree = renderer.create(<Sidebar {...props} />).toJSON();
expect(tree).toMatchSnapshot();
});
});

View File

@@ -0,0 +1,199 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Sidebar renders correctly 1`] = `
<div
className="sidebar"
>
<div
className="sidebar__inner"
>
<div
className="author"
>
<Link
to="/"
>
<img
alt="name"
className="author__photo"
height="75"
src="file"
width="75"
/>
</Link>
<h2
className="author__title"
>
<Link
className="author__title-link"
to="/"
>
name
</Link>
</h2>
<p
className="author__subtitle"
>
bio
</p>
</div>
<nav
className="menu"
>
<ul
className="menu__list"
>
<li
className="menu__list-item"
>
<Link
activeClassName="menu__list-item-link--active"
className="menu__list-item-link"
to="/#0/"
>
Item 0
</Link>
</li>
<li
className="menu__list-item"
>
<Link
activeClassName="menu__list-item-link--active"
className="menu__list-item-link"
to="/#1/"
>
Item 1
</Link>
</li>
</ul>
</nav>
<div
className="contacts"
>
<ul
className="contacts__list"
>
<li
className="contacts__list-item"
>
<a
className="contacts__list-item-link"
href="mailto:#"
rel="noopener noreferrer"
target="_blank"
>
<svg
className="icon"
viewBox="0 0 28 28"
>
<path
d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
/>
</svg>
</a>
</li>
<li
className="contacts__list-item"
>
<a
className="contacts__list-item-link"
href="https://www.twitter.com/#"
rel="noopener noreferrer"
target="_blank"
>
<svg
className="icon"
viewBox="0 0 26 28"
>
<path
d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
/>
</svg>
</a>
</li>
<li
className="contacts__list-item"
>
<a
className="contacts__list-item-link"
href="https://vk.com/#"
rel="noopener noreferrer"
target="_blank"
>
<svg
className="icon"
viewBox="0 0 31 28"
>
<path
d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
/>
</svg>
</a>
</li>
<li
className="contacts__list-item"
>
<a
className="contacts__list-item-link"
href="https://github.com/#"
rel="noopener noreferrer"
target="_blank"
>
<svg
className="icon"
viewBox="0 0 26 28"
>
<path
d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
/>
</svg>
</a>
</li>
<li
className="contacts__list-item"
>
<a
className="contacts__list-item-link"
href="#"
rel="noopener noreferrer"
target="_blank"
>
<svg
className="icon"
viewBox="0 0 22 28"
>
<path
d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
/>
</svg>
</a>
</li>
<li
className="contacts__list-item"
>
<a
className="contacts__list-item-link"
href="telegram:#"
rel="noopener noreferrer"
target="_blank"
>
<svg
className="icon"
viewBox="0 0 28 28"
>
<path
d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
/>
</svg>
</a>
</li>
</ul>
</div>
<div
className="copyright"
>
copyright
</div>
</div>
</div>
`;

View File

@@ -0,0 +1 @@
export { default } from './Sidebar';

View File

@@ -1,82 +0,0 @@
import React from 'react';
import get from 'lodash/get';
import Link from 'gatsby-link';
import Menu from '../Menu';
import Links from '../Links';
import profilePic from '../../pages/photo.jpg';
import './style.scss';
class Sidebar extends React.Component {
render() {
const { location } = this.props;
const { author, subtitle, copyright, menu } = this.props.siteMetadata;
const isHomePage = get(location, 'pathname', '/') === '/';
/* eslint-disable jsx-a11y/img-redundant-alt */
const authorBlock = (
<div>
<Link to="/">
<img
src={profilePic}
className="sidebar__author-photo"
width="75"
height="75"
alt={author.name}
/>
</Link>
{ isHomePage ? (
<h1 className="sidebar__author-title">
<Link className="sidebar__author-title-link" to="/">{author.name}</Link>
</h1>
) :
<h2 className="sidebar__author-title">
<Link className="sidebar__author-title-link" to="/">{author.name}</Link>
</h2>
}
<p className="sidebar__author-subtitle">{subtitle}</p>
</div>
);
/* eslint-enable jsx-a11y/img-redundant-alt */
return (
<div className="sidebar">
<div className="sidebar__inner">
<div className="sidebar__author">
{authorBlock}
</div>
<div>
<Menu data={menu} />
<Links data={author} />
<p className="sidebar__copyright">
{copyright}
</p>
</div>
</div>
</div>
);
}
}
export default Sidebar;
export const conponentQuery = graphql`
fragment sidebarFragment on siteMetadata_2{
title
subtitle
copyright
menu {
label
path
}
author {
name
email
telegram
twitter
github
rss
vk
}
}
`;

View File

@@ -1,69 +0,0 @@
@import "../../assets/scss/variables";
@import "../../assets/scss/mixins";
.sidebar {
width: 100%;
&__inner {
position: relative;
padding: 25px 20px 0;
}
&__author {
&-photo {
display: inline-block;
margin-bottom: 0;
border-radius: 50%;
background-clip: padding-box;
}
&-title {
font-size: $typographic-base-font-size * 1.125;
font-weight: 500;
@include line-height(1.125);
@include margin(.5, 0, .5, 0);
&-link {
color: $color-base;
&:hover,
&:focus {
color: $color-base;
}
}
}
&-subtitle {
color: $color-gray;
@include line-height(1);
@include margin-bottom(1);
}
}
&__copyright {
color: lighten($color-gray, 18%);
font-size: $typographic-small-font-size;
}
}
@include breakpoint-sm {
.sidebar {
lost-column: 5/12;
&__inner {
padding: 30px 20px 0;
&:after {
background: $color-gray-border;
background: linear-gradient(to bottom, $color-gray-border 0%, $color-gray-border 48%, $color-white 100%);
position: absolute;
content: "";
width: 1px;
height: 540px;
top: 30px;
right: -10px;
bottom: 0;
}
}
}
}
@include breakpoint-md {
.sidebar {
lost-column: 1/3;
&__inner {
padding: 40px;
}
}
}

View File

@@ -1,30 +0,0 @@
import React from 'react';
import Post from '../Post';
class TagTemplateDetails extends React.Component {
render() {
const items = [];
const tagTitle = this.props.tag;
const posts = this.props.posts;
posts.forEach((post) => {
items.push(<Post data={post} key={post.node.fields.slug} />);
});
return (
<div className="content">
<div className="content__inner">
<div className="page">
<h1 className="page__title">
All Posts tagged as &quot;{tagTitle}&quot;
</h1>
<div className="page__body">
{items}
</div>
</div>
</div>
</div>
);
}
}
export default TagTemplateDetails;