mirror of
https://github.com/mastermindzh/rickvanlieshout.com
synced 2025-08-07 09:58:01 +02:00
Upgrade to Gatsby v2
This commit is contained in:
@@ -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;
|
@@ -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;
|
29
src/components/Feed/Feed.js
Normal file
29
src/components/Feed/Feed.js
Normal 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;
|
81
src/components/Feed/Feed.module.scss
Normal file
81
src/components/Feed/Feed.module.scss
Normal 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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
43
src/components/Feed/Feed.test.js
Normal file
43
src/components/Feed/Feed.test.js
Normal 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();
|
||||
});
|
||||
});
|
104
src/components/Feed/__snapshots__/Feed.test.js.snap
Normal file
104
src/components/Feed/__snapshots__/Feed.test.js.snap
Normal 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>
|
||||
`;
|
1
src/components/Feed/index.js
Normal file
1
src/components/Feed/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './Feed';
|
10
src/components/Icon/Icon.js
Normal file
10
src/components/Icon/Icon.js
Normal 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;
|
19
src/components/Icon/Icon.module.scss
Normal file
19
src/components/Icon/Icon.module.scss
Normal 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;
|
||||
}
|
17
src/components/Icon/Icon.test.js
Normal file
17
src/components/Icon/Icon.test.js
Normal 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();
|
||||
});
|
||||
});
|
12
src/components/Icon/__snapshots__/Icon.test.js.snap
Normal file
12
src/components/Icon/__snapshots__/Icon.test.js.snap
Normal 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>
|
||||
`;
|
1
src/components/Icon/index.js
Normal file
1
src/components/Icon/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './Icon';
|
15
src/components/Layout/Layout.js
Normal file
15
src/components/Layout/Layout.js
Normal 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;
|
6
src/components/Layout/Layout.module.scss
Normal file
6
src/components/Layout/Layout.module.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
@import '../../assets/scss/variables';
|
||||
@import '../../assets/scss/mixins';
|
||||
|
||||
.layout {
|
||||
lost-center: $layout-width;
|
||||
}
|
16
src/components/Layout/Layout.test.js
Normal file
16
src/components/Layout/Layout.test.js
Normal 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();
|
||||
});
|
||||
});
|
9
src/components/Layout/__snapshots__/Layout.test.js.snap
Normal file
9
src/components/Layout/__snapshots__/Layout.test.js.snap
Normal file
@@ -0,0 +1,9 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Layout renders correctly 1`] = `
|
||||
<div
|
||||
className="layout"
|
||||
>
|
||||
test
|
||||
</div>
|
||||
`;
|
1
src/components/Layout/index.js
Normal file
1
src/components/Layout/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './Layout';
|
@@ -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;
|
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@@ -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;
|
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
15
src/components/Page/Page.js
Normal file
15
src/components/Page/Page.js
Normal 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;
|
49
src/components/Page/Page.module.scss
Normal file
49
src/components/Page/Page.module.scss
Normal 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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
15
src/components/Page/Page.test.js
Normal file
15
src/components/Page/Page.test.js
Normal 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();
|
||||
});
|
||||
});
|
22
src/components/Page/__snapshots__/Page.test.js.snap
Normal file
22
src/components/Page/__snapshots__/Page.test.js.snap
Normal 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>
|
||||
`;
|
1
src/components/Page/index.js
Normal file
1
src/components/Page/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './Page';
|
@@ -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;
|
@@ -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);
|
||||
}
|
||||
}
|
47
src/components/Post/Author/Author.js
Normal file
47
src/components/Post/Author/Author.js
Normal 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;
|
26
src/components/Post/Author/Author.module.scss
Normal file
26
src/components/Post/Author/Author.module.scss
Normal 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;
|
||||
}
|
||||
|
||||
}
|
26
src/components/Post/Author/Author.test.js
Normal file
26
src/components/Post/Author/Author.test.js
Normal 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();
|
||||
});
|
||||
});
|
24
src/components/Post/Author/__snapshots__/Author.test.js.snap
Normal file
24
src/components/Post/Author/__snapshots__/Author.test.js.snap
Normal 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>
|
||||
`;
|
1
src/components/Post/Author/index.js
Normal file
1
src/components/Post/Author/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './Author';
|
37
src/components/Post/Comments/Comments.js
Normal file
37
src/components/Post/Comments/Comments.js
Normal 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;
|
23
src/components/Post/Comments/Comments.test.js
Normal file
23
src/components/Post/Comments/Comments.test.js
Normal 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();
|
||||
});
|
||||
});
|
@@ -0,0 +1,9 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Comments renders correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
id="disqus_thread"
|
||||
/>
|
||||
</div>
|
||||
`;
|
1
src/components/Post/Comments/index.js
Normal file
1
src/components/Post/Comments/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './Comments';
|
11
src/components/Post/Content/Content.js
Normal file
11
src/components/Post/Content/Content.js
Normal 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;
|
104
src/components/Post/Content/Content.module.scss
Normal file
104
src/components/Post/Content/Content.module.scss
Normal 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)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
15
src/components/Post/Content/Content.test.js
Normal file
15
src/components/Post/Content/Content.test.js
Normal 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();
|
||||
});
|
||||
});
|
@@ -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>
|
||||
`;
|
1
src/components/Post/Content/index.js
Normal file
1
src/components/Post/Content/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './Content';
|
11
src/components/Post/Meta/Meta.js
Normal file
11
src/components/Post/Meta/Meta.js
Normal 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;
|
9
src/components/Post/Meta/Meta.module.scss
Normal file
9
src/components/Post/Meta/Meta.module.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
@import '../../../assets/scss/variables';
|
||||
@import '../../../assets/scss/mixins';
|
||||
|
||||
.meta {
|
||||
&__date {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
}
|
14
src/components/Post/Meta/Meta.test.js
Normal file
14
src/components/Post/Meta/Meta.test.js
Normal 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();
|
||||
});
|
||||
});
|
14
src/components/Post/Meta/__snapshots__/Meta.test.js.snap
Normal file
14
src/components/Post/Meta/__snapshots__/Meta.test.js.snap
Normal 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>
|
||||
`;
|
1
src/components/Post/Meta/index.js
Normal file
1
src/components/Post/Meta/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './Meta';
|
41
src/components/Post/Post.js
Normal file
41
src/components/Post/Post.js
Normal 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;
|
64
src/components/Post/Post.module.scss
Normal file
64
src/components/Post/Post.module.scss
Normal 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
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
30
src/components/Post/Post.test.js
Normal file
30
src/components/Post/Post.test.js
Normal 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();
|
||||
});
|
||||
});
|
19
src/components/Post/Tags/Tags.js
Normal file
19
src/components/Post/Tags/Tags.js
Normal 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;
|
38
src/components/Post/Tags/Tags.module.scss
Normal file
38
src/components/Post/Tags/Tags.module.scss
Normal 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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
21
src/components/Post/Tags/Tags.test.js
Normal file
21
src/components/Post/Tags/Tags.test.js
Normal 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();
|
||||
});
|
||||
});
|
32
src/components/Post/Tags/__snapshots__/Tags.test.js.snap
Normal file
32
src/components/Post/Tags/__snapshots__/Tags.test.js.snap
Normal 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>
|
||||
`;
|
1
src/components/Post/Tags/index.js
Normal file
1
src/components/Post/Tags/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './Tags';
|
87
src/components/Post/__snapshots__/Post.test.js.snap
Normal file
87
src/components/Post/__snapshots__/Post.test.js.snap
Normal 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>
|
||||
`;
|
1
src/components/Post/index.js
Normal file
1
src/components/Post/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './Post';
|
@@ -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;
|
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
@@ -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;
|
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
32
src/components/Sidebar/Author/Author.js
Normal file
32
src/components/Sidebar/Author/Author.js
Normal 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;
|
36
src/components/Sidebar/Author/Author.module.scss
Normal file
36
src/components/Sidebar/Author/Author.module.scss
Normal 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)
|
||||
}
|
||||
|
||||
}
|
17
src/components/Sidebar/Author/Author.test.js
Normal file
17
src/components/Sidebar/Author/Author.test.js
Normal 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();
|
||||
});
|
||||
});
|
@@ -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>
|
||||
`;
|
1
src/components/Sidebar/Author/index.js
Normal file
1
src/components/Sidebar/Author/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './Author';
|
25
src/components/Sidebar/Contacts/Contacts.js
Normal file
25
src/components/Sidebar/Contacts/Contacts.js
Normal 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;
|
47
src/components/Sidebar/Contacts/Contacts.module.scss
Normal file
47
src/components/Sidebar/Contacts/Contacts.module.scss
Normal 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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
21
src/components/Sidebar/Contacts/Contacts.test.js
Normal file
21
src/components/Sidebar/Contacts/Contacts.test.js
Normal 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();
|
||||
});
|
||||
});
|
@@ -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>
|
||||
`;
|
1
src/components/Sidebar/Contacts/index.js
Normal file
1
src/components/Sidebar/Contacts/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './Contacts';
|
10
src/components/Sidebar/Copyright/Copyright.js
Normal file
10
src/components/Sidebar/Copyright/Copyright.js
Normal 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;
|
7
src/components/Sidebar/Copyright/Copyright.module.scss
Normal file
7
src/components/Sidebar/Copyright/Copyright.module.scss
Normal 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;
|
||||
}
|
14
src/components/Sidebar/Copyright/Copyright.test.js
Normal file
14
src/components/Sidebar/Copyright/Copyright.test.js
Normal 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();
|
||||
});
|
||||
});
|
@@ -0,0 +1,9 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Copyright renders correctly 1`] = `
|
||||
<div
|
||||
className="copyright"
|
||||
>
|
||||
copyright
|
||||
</div>
|
||||
`;
|
1
src/components/Sidebar/Copyright/index.js
Normal file
1
src/components/Sidebar/Copyright/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './Copyright';
|
23
src/components/Sidebar/Menu/Menu.js
Normal file
23
src/components/Sidebar/Menu/Menu.js
Normal 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;
|
39
src/components/Sidebar/Menu/Menu.module.scss
Normal file
39
src/components/Sidebar/Menu/Menu.module.scss
Normal 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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
23
src/components/Sidebar/Menu/Menu.test.js
Normal file
23
src/components/Sidebar/Menu/Menu.test.js
Normal 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();
|
||||
});
|
||||
});
|
34
src/components/Sidebar/Menu/__snapshots__/Menu.test.js.snap
Normal file
34
src/components/Sidebar/Menu/__snapshots__/Menu.test.js.snap
Normal 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>
|
||||
`;
|
1
src/components/Sidebar/Menu/index.js
Normal file
1
src/components/Sidebar/Menu/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './Menu';
|
61
src/components/Sidebar/Sidebar.js
Normal file
61
src/components/Sidebar/Sidebar.js
Normal 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;
|
39
src/components/Sidebar/Sidebar.module.scss
Normal file
39
src/components/Sidebar/Sidebar.module.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
42
src/components/Sidebar/Sidebar.test.js
Normal file
42
src/components/Sidebar/Sidebar.test.js
Normal 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();
|
||||
});
|
||||
});
|
199
src/components/Sidebar/__snapshots__/Sidebar.test.js.snap
Normal file
199
src/components/Sidebar/__snapshots__/Sidebar.test.js.snap
Normal 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>
|
||||
`;
|
1
src/components/Sidebar/index.js
Normal file
1
src/components/Sidebar/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './Sidebar';
|
@@ -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
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
@@ -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 "{tagTitle}"
|
||||
</h1>
|
||||
<div className="page__body">
|
||||
{items}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TagTemplateDetails;
|
Reference in New Issue
Block a user