From e5ca5bc98bdaa28254d3eb4c8f1835d5b6d7a95b Mon Sep 17 00:00:00 2001 From: wpioneer Date: Mon, 21 Mar 2016 20:03:01 +0300 Subject: [PATCH] Update --- README.md | 22 + app.js | 18 +- components/BlogContent/index.jsx | 2 +- components/BlogContent/style.sss | 36 +- components/BlogNav/index.jsx | 43 +- components/BlogNav/style.sss | 24 +- components/BlogPage/index.jsx | 38 +- components/BlogPage/style.sss | 18 +- components/BlogPost/index.jsx | 71 ++-- components/BlogPost/style.sss | 146 +++---- components/BlogSocial/index.jsx | 60 +-- components/BlogSocial/style.sss | 42 +- components/ReadNext/index.jsx | 70 ++-- components/SidebarLeft/index.jsx | 96 ++--- components/SidebarLeft/style.sss | 78 ++-- gatsby.config.js | 64 +-- html.js | 69 ++-- pages/_template.jsx | 24 +- pages/index.jsx | 99 ++--- static/css/highlight.css | 154 +++---- static/css/reset.css | 180 +++------ static/css/typography.css | 671 ++++++++++++++----------------- wrappers/md.jsx | 38 +- 23 files changed, 941 insertions(+), 1122 deletions(-) diff --git a/README.md b/README.md index 0499a3d..3a87fc6 100644 --- a/README.md +++ b/README.md @@ -10,3 +10,25 @@ Install this starter (assuming Gatsby is installed) by running from your CLI: ![](http://i.imgur.com/422y5GV.png) +## License +The MIT license. + +Copyright (c) 2016 Alexandr Shelepenok [ashk.io](http://ashk.io) + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies +of the Software, and to permit persons to whom the Software is furnished to do +so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/app.js b/app.js index 07fd802..e431046 100644 --- a/app.js +++ b/app.js @@ -1,10 +1,10 @@ -exports.loadContext = function (callback) { - let context = require.context('./pages', true) - if (module.hot) { - module.hot.accept(context.id, () => { - context = require.context('./pages', true) - return callback(context) - }) - } - return callback(context) +exports.loadContext = function(callback) { + let context = require.context('./pages', true) + if (module.hot) { + module.hot.accept(context.id, () => { + context = require.context('./pages', true) + return callback(context) + }) + } + return callback(context) } diff --git a/components/BlogContent/index.jsx b/components/BlogContent/index.jsx index cdbcc9a..1fa4520 100644 --- a/components/BlogContent/index.jsx +++ b/components/BlogContent/index.jsx @@ -1 +1 @@ -import './style.sss'; \ No newline at end of file +import './style.sss' \ No newline at end of file diff --git a/components/BlogContent/style.sss b/components/BlogContent/style.sss index cfbf846..c7855fd 100644 --- a/components/BlogContent/style.sss +++ b/components/BlogContent/style.sss @@ -1,24 +1,24 @@ .wrapper - lost-center: 1070px + lost-center: 1070px .content - lost-column: 2/3 + lost-column: 2/3 .main-inner - padding: 40px 35px - + padding: 40px 35px + @media screen and (max-width: 1100px) - .content - lost-column: 2/4 - .main-inner - padding: 35px 20px - + .content + lost-column: 2/4 + .main-inner + padding: 35px 20px + @media screen and (max-width: 900px) - .content - lost-column: 7/12 - .main-inner - padding: 30px 20px - + .content + lost-column: 7/12 + .main-inner + padding: 30px 20px + @media screen and (max-width: 500px) - .content - lost-column: 4/4 - .main-inner - padding: 25px 20px \ No newline at end of file + .content + lost-column: 4/4 + .main-inner + padding: 25px 20px \ No newline at end of file diff --git a/components/BlogNav/index.jsx b/components/BlogNav/index.jsx index a0dd21f..cda52a2 100644 --- a/components/BlogNav/index.jsx +++ b/components/BlogNav/index.jsx @@ -5,28 +5,31 @@ import { link } from 'gatsby-helpers' import './style.sss' class BlogNav extends React.Component { - render() { - const { location } = this.props - return ( - - ); - } + render() { + const {location} = this.props + return ( + + ); + } } - BlogNav.propTypes = { - location: React.PropTypes.object, +BlogNav.propTypes = { + location: React.PropTypes.object, } export default BlogNav \ No newline at end of file diff --git a/components/BlogNav/style.sss b/components/BlogNav/style.sss index ff90287..0811567 100644 --- a/components/BlogNav/style.sss +++ b/components/BlogNav/style.sss @@ -1,23 +1,23 @@ .blog-nav - margin: 20px 0px 10px + margin: 20px 0px 10px .blog-nav ul - list-style: none - padding-left: 0 + list-style: none + padding-left: 0 .blog-nav ul li - margin: 10px 0 10px + margin: 10px 0 10px .blog-nav ul li a - font-size: 16px - line-heigh: 26px - margin-bottom: 26px - border-bottom: 0 - font-weight: 400 - color: #222 + font-size: 16px + line-heigh: 26px + margin-bottom: 26px + border-bottom: 0 + font-weight: 400 + color: #222 .blog-nav ul li a.current - border-bottom: 1px solid + border-bottom: 1px solid .blog-nav ul li a:hover - border-bottom: 1px solid \ No newline at end of file + border-bottom: 1px solid \ No newline at end of file diff --git a/components/BlogPage/index.jsx b/components/BlogPage/index.jsx index fb65800..f1a0d01 100644 --- a/components/BlogPage/index.jsx +++ b/components/BlogPage/index.jsx @@ -10,33 +10,33 @@ import { config } from 'config' import './style.sss'; class BlogPage extends React.Component { - render() { - const { route } = this.props - const post = route.page.data + render() { + const {route} = this.props + const post = route.page.data - return ( -
- -
-
-
-
-
-

{post.title}

-
+ return ( +
+ +
+
+
+
+
+

{ post.title }

+
+
+
-
-
- ); - } + ); + } } BlogPage.propTypes = { - post: React.PropTypes.object.isRequired, - pages: React.PropTypes.array, + post: React.PropTypes.object.isRequired, + pages: React.PropTypes.array, } export default BlogPage \ No newline at end of file diff --git a/components/BlogPage/style.sss b/components/BlogPage/style.sss index 22e03f6..f2872cc 100644 --- a/components/BlogPage/style.sss +++ b/components/BlogPage/style.sss @@ -1,16 +1,16 @@ .blog-page - margin-bottom: 40px + margin-bottom: 40px .blog-page h1 - font-size: responsive 20px 36px - margin-top: 0 + font-size: responsive 20px 36px + margin-top: 0 .blog-page p - font-size: responsive 14px 16px - line-height: 1.5 - margin-top: 10px + font-size: responsive 14px 16px + line-height: 1.5 + margin-top: 10px @media (max-width: 900px) - .blog-single .text, - .blog-single .footer - padding: 0 15px \ No newline at end of file + .blog-single .text, + .blog-single .footer + padding: 0 15px \ No newline at end of file diff --git a/components/BlogPost/index.jsx b/components/BlogPost/index.jsx index 5f5bba0..d8fed9d 100644 --- a/components/BlogPost/index.jsx +++ b/components/BlogPost/index.jsx @@ -12,48 +12,45 @@ import './style.sss' import '../../static/css/highlight.css' class BlogPost extends React.Component { - render() { - const { route } = this.props - const post = route.page.data - const home = ( -
- - All Articles - -
- ) - - return ( + render() { + const {route} = this.props + const post = route.page.data + const home = (
- {home} -
-
-

{post.title}

-
-
- Published {moment(post.datePublished).format('D MMM YYYY')} -
-
-
- -
-

- {config.siteDescr}

{config.authorName} on Twitter -

-
-
+ All Articles +
- ); - } + ) + + return ( +
+ { home } +
+
+

{ post.title }

+
+
+ Published { moment(post.datePublished).format('D MMM YYYY') } +
+
+
+ +
+

+ { config.siteDescr } + +

{ config.authorName } on Twitter +

+
+
+
+ ); + } } - BlogPost.propTypes = { - post: React.PropTypes.object.isRequired, - pages: React.PropTypes.array, + post: React.PropTypes.object.isRequired, + pages: React.PropTypes.array, } export default BlogPost \ No newline at end of file diff --git a/components/BlogPost/style.sss b/components/BlogPost/style.sss index f92064c..9fc6d51 100644 --- a/components/BlogPost/style.sss +++ b/components/BlogPost/style.sss @@ -1,108 +1,108 @@ .blog-post - margin-bottom: 30px + margin-bottom: 30px .blog-post:last-child - margin-bottom: 10px + margin-bottom: 10px .blog-post h2 - margin-top: 10px - line-height: 30px - margin-bottom: 20px + margin-top: 10px + line-height: 30px + margin-bottom: 20px .blog-post h2 a:hover - border-bottom: 1px solid + border-bottom: 1px solid .blog-post p - font-size: 16px - line-height: 26px - margin-bottom: 26px + font-size: 16px + line-height: 26px + margin-bottom: 26px .blog-post time - font-size: 14px - color: #222 - font-weight: 600 - text-transform: uppercase - letter-spacing: 0.04rem - font-family: "Roboto", Helvetica, Arial, sans-serif + font-size: 14px + color: #222 + font-weight: 600 + text-transform: uppercase + letter-spacing: 0.04rem + font-family: "Roboto", Helvetica, Arial, sans-serif .blog-post .blog-category - font-size: 14px - color: #f7a046 - font-weight: 600 - text-transform: uppercase - letter-spacing: 0.04rem - font-family: "Roboto", Helvetica, Arial, sans-serif + font-size: 14px + color: #f7a046 + font-weight: 600 + text-transform: uppercase + letter-spacing: 0.04rem + font-family: "Roboto", Helvetica, Arial, sans-serif .blog-post .readmore - font-size: 16px - color: #5d93ff - font-weight: 600 - font-family: 'Raleway', Helvetica, Arial, sans-serif + font-size: 16px + color: #5d93ff + font-weight: 600 + font-family: 'Raleway', Helvetica, Arial, sans-serif .blog-post .readmore:hover - border-bottom: 1px solid + border-bottom: 1px solid .blog-single h1 - text-align: center - margin-top: 30px + text-align: center + margin-top: 30px .blog-single .text - line-height: 31px - line-height: 1.722222222222222rem - margin-bottom: 31px - margin-bottom: 1.722222222222222rem + line-height: 31px + line-height: 1.722222222222222rem + margin-bottom: 31px + margin-bottom: 1.722222222222222rem .blog-single h1, .blog-single .date-published, .blog-single .text div :not(figure) - max-width: 35rem - margin-left: auto - margin-right: auto + max-width: 35rem + margin-left: auto + margin-right: auto .blog-single .text img - max-width: 100% - height: auto + max-width: 100% + height: auto .blog-single .footer - max-width: 35rem - margin-left: auto - margin-right: auto - line-height: 31px - line-height: 1.722222222222222rem - margin-bottom: 31px - margin-bottom: 1.722222222222222rem + max-width: 35rem + margin-left: auto + margin-right: auto + line-height: 31px + line-height: 1.722222222222222rem + margin-bottom: 31px + margin-bottom: 1.722222222222222rem .gohome - font-family: 'Raleway', Helvetica, Arial, sans-serif - font-size: 16px - text-align: center - color: #343e47 - font-weight: 600 - position: fixed - left: 20px - top: 20px - opacity: 0.5 - padding: 8px 18px - border: 2px solid #343e47 !important - border-radius: 3px + font-family: 'Raleway', Helvetica, Arial, sans-serif + font-size: 16px + text-align: center + color: #343e47 + font-weight: 600 + position: fixed + left: 20px + top: 20px + opacity: 0.5 + padding: 8px 18px + border: 2px solid #343e47 !important + border-radius: 3px .gohome:hover - color: #201e28 - opacity: 1 + color: #201e28 + opacity: 1 @media (max-width: 900px) - .blog-single h1 - margin-top: 15px - .blog-single .text, - .blog-single .footer - padding: 0 15px - line-height: 26px - line-height: 1.625rem - margin: 0px 0px 26px - margin: 0rem 0rem 1.625rem - .gohome - position: static - margin: 20px auto 0 - text-align: center - width: 85px - display: block \ No newline at end of file + .blog-single h1 + margin-top: 15px + .blog-single .text, + .blog-single .footer + padding: 0 15px + line-height: 26px + line-height: 1.625rem + margin: 0px 0px 26px + margin: 0rem 0rem 1.625rem + .gohome + position: static + margin: 20px auto 0 + text-align: center + width: 85px + display: block \ No newline at end of file diff --git a/components/BlogSocial/index.jsx b/components/BlogSocial/index.jsx index 80ef6fb..5292340 100644 --- a/components/BlogSocial/index.jsx +++ b/components/BlogSocial/index.jsx @@ -7,32 +7,44 @@ import './style.sss' import '../../static/fonts/fontawesome/style.css' class BlogSocial extends React.Component { - render() { + render() { - const twitter = config.blogTitle - const vk = config.vk - const rss = config.rss - const email = config.email - const github = config.github - const telegram = config.telegram + const twitter = config.blogTitle + const vk = config.vk + const rss = config.rss + const email = config.email + const github = config.github + const telegram = config.telegram - return ( -
-
    -
    • -
    • -
    • -
-
    -
    • -
    • -
-
    -
    • -
-
- ); - } + return ( +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
    +
  • + +
    • +
  • + +
    • +
+
    +
  • + +
    • +
+
+ ); + } } export default BlogSocial \ No newline at end of file diff --git a/components/BlogSocial/style.sss b/components/BlogSocial/style.sss index f400645..dffe202 100644 --- a/components/BlogSocial/style.sss +++ b/components/BlogSocial/style.sss @@ -1,34 +1,34 @@ .blog-social - margin-top: 30px + margin-top: 30px .blog-social ul - list-style: none - padding: 0 - margin: 10px 0 - clear: fix-legacy + list-style: none + padding: 0 + margin: 10px 0 + clear: fix-legacy .blog-social ul > li - float: left - margin-right: 5px - text-align: center - line-height: 21px - height: 24px - width: 24px - border-radius: 3px - background: #f4edde + float: left + margin-right: 5px + text-align: center + line-height: 21px + height: 24px + width: 24px + border-radius: 3px + background: #f4edde .blog-social ul > li:hover - background: #f4efe8 + background: #f4efe8 .blog-social ul > li > a - border-bottom: 0 - line-height: 21px - cursor: pointer + border-bottom: 0 + line-height: 21px + cursor: pointer .blog-social ul > li > a > i - color: #333 - font-size: 14px - line-height: 21px + color: #333 + font-size: 14px + line-height: 21px .blog-social ul > li:hover a > i - color: #222 \ No newline at end of file + color: #222 \ No newline at end of file diff --git a/components/ReadNext/index.jsx b/components/ReadNext/index.jsx index 5bbd8a8..0c2b295 100644 --- a/components/ReadNext/index.jsx +++ b/components/ReadNext/index.jsx @@ -6,56 +6,38 @@ import find from 'lodash/find' import './style.sss' class ReadNext extends React.Component { - render() { - const { pages, post } = this.props - const { readNext } = post + render() { + const {pages, post} = this.props + const {readNext} = post - let nextPost - if (readNext) { - nextPost = find(pages, (page) => - includes(page.path, readNext) - ) - } - if (!nextPost) { - return React.createElement('noscript', null) - } else { - nextPost = find(pages, (page) => - includes(page.path, readNext.slice(1, -1)) - ) - const description = nextPost.data.description + let nextPost + if (readNext) { + nextPost = find(pages, (page) => includes(page.path, readNext) + ) + } + if (!nextPost) { + return React.createElement('noscript', null) + } else { + nextPost = find(pages, (page) => includes(page.path, readNext.slice(1, -1)) + ) + const description = nextPost.data.description - return ( -
-
- READ THIS NEXT: -
-

- - {nextPost.data.title} - -

-

{description}

-
- ); + return ( +
+
READ THIS NEXT:
+

{ nextPost.data.title }

+

+ { description } +

+
+ ); + } } - } } ReadNext.propTypes = { - post: React.PropTypes.object.isRequired, - pages: React.PropTypes.array, + post: React.PropTypes.object.isRequired, + pages: React.PropTypes.array, } export default ReadNext \ No newline at end of file diff --git a/components/SidebarLeft/index.jsx b/components/SidebarLeft/index.jsx index 2cef3ae..b4e8359 100644 --- a/components/SidebarLeft/index.jsx +++ b/components/SidebarLeft/index.jsx @@ -7,72 +7,48 @@ import BlogSocial from '../BlogSocial' import './style.sss' class SidebarLeft extends React.Component { - render() { - const { location, children } = this.props - let header + render() { + const {location, children} = this.props + let header - header = ( -
- - - - -

- - {config.siteTitle} - -

- -

- {config.siteDescr} -

-
- ); - - return ( -
-
-
+ header = (
- {header} + + + +

{ config.siteTitle }

+

+ { config.siteDescr } +

-
-
- -
- -

- © All rights reserved. -

-
-
-
-
- ); - } + ); + + return ( +
+
+
+
+ { header } +
+
+
+ +
+ +

+ © All rights reserved. +

+
+
+
+
+ ); + } } SidebarLeft.propTypes = { - children: React.PropTypes.any, - location: React.PropTypes.object, + children: React.PropTypes.any, + location: React.PropTypes.object, } export default SidebarLeft \ No newline at end of file diff --git a/components/SidebarLeft/style.sss b/components/SidebarLeft/style.sss index 904aed9..7ae9253 100644 --- a/components/SidebarLeft/style.sss +++ b/components/SidebarLeft/style.sss @@ -1,59 +1,59 @@ .sidebar - lost-column: 1/3 + lost-column: 1/3 .sidebar .sidebar-inner - position: relative - padding: 40px + position: relative + padding: 40px .sidebar .sidebar-inner:after - background: #eee - background: linear-gradient(to bottom, #eee 0%, #eee 48%, #fff 100%) - position: absolute - content: '' - width: 1px - height: 540px - top: 30px - right: -10px - bottom: 0 + background: #eee + background: linear-gradient(to bottom, #eee 0%, #eee 48%, #fff 100%) + position: absolute + content: '' + width: 1px + height: 540px + top: 30px + right: -10px + bottom: 0 .sidebar .sidebar-inner img - display: inline-block - margin-bottom: 0 - border-radius: 50% - background-clip: padding-box + display: inline-block + margin-bottom: 0 + border-radius: 50% + background-clip: padding-box .sidebar .sidebar-inner h1, .sidebar .sidebar-inner h2 - font-size: responsive 16px 18px - line-height: 1 - margin: 20px 0 10px + font-size: responsive 16px 18px + line-height: 1 + margin: 20px 0 10px .sidebar .sidebar-inner p - font-size: 14px - color: #888 - line-height: 23px - margin-bottom: 23px + font-size: 14px + color: #888 + line-height: 23px + margin-bottom: 23px .sidebar .sidebar-inner p.copyright - color: #b6b6b6 - font-size: 12px + color: #b6b6b6 + font-size: 12px @media (max-width: 1100px) - .sidebar .sidebar-inner - padding: 35px 20px 0 - .sidebar - lost-column: 2/4 + .sidebar .sidebar-inner + padding: 35px 20px 0 + .sidebar + lost-column: 2/4 @media (max-width: 900px) - .sidebar - lost-column: 5/12 - .sidebar .sidebar-inner - padding: 30px 20px 0 + .sidebar + lost-column: 5/12 + .sidebar .sidebar-inner + padding: 30px 20px 0 @media (max-width: 500px) - .sidebar - lost-column: 4/4 - .sidebar .sidebar-inner - padding: 25px 20px 0 - .sidebar .sidebar-inner:after - display: none \ No newline at end of file + .sidebar + lost-column: 4/4 + .sidebar .sidebar-inner + padding: 25px 20px 0 + .sidebar .sidebar-inner:after + display: none \ No newline at end of file diff --git a/gatsby.config.js b/gatsby.config.js index 6293dd5..d008e87 100644 --- a/gatsby.config.js +++ b/gatsby.config.js @@ -10,43 +10,45 @@ module.exports = function(config, env) { var is_production = env === 'production'; config.merge({ - postcss: [ - lost(), - rucksack({ - autoprefixer: true - }) - ] + postcss: [ + lost(), + rucksack({ + autoprefixer: true + }) + ] }); config.removeLoader('css'); if (is_develop) { - config.loader('css', function(cfg) { - cfg.test = /\.css/; - cfg.loaders = ['style', 'css-loader', 'postcss-loader']; - return cfg - }) - config.loader('postcss', function(cfg) { - cfg.test = /\.sss/; - cfg.loaders = ['style', 'css-loader', 'postcss-loader?parser=sugarss']; - return cfg - }) + config.loader('css', function(cfg) { + cfg.test = /\.css/; + cfg.loaders = ['style', 'css-loader', 'postcss-loader']; + return cfg + }) + config.loader('postcss', function(cfg) { + cfg.test = /\.sss/; + cfg.loaders = ['style', 'css-loader', 'postcss-loader?parser=sugarss']; + return cfg + }) } else { - config.loader('css', function(cfg) { - cfg.test = /\.css/; - cfg.loader = ExtractTextPlugin.extract(['css-loader', 'postcss-loader']); - return cfg - }) - config.loader('postcss', function(cfg) { - cfg.test = /\.sss/; - cfg.loader = ExtractTextPlugin.extract(['css-loader', 'postcss-loader?parser=sugarss']); - return cfg - }) + config.loader('css', function(cfg) { + cfg.test = /\.css/; + cfg.loader = ExtractTextPlugin.extract(['css-loader', 'postcss-loader']); + return cfg + }) + config.loader('postcss', function(cfg) { + cfg.test = /\.sss/; + cfg.loader = ExtractTextPlugin.extract(['css-loader', 'postcss-loader?parser=sugarss']); + return cfg + }) } - - config.plugin('extract-css', - ExtractTextPlugin, - ["styles.css", { allChunks: true }]); - return config + config.plugin('extract-css', + ExtractTextPlugin, + ["styles.css", { + allChunks: true + }]); + + return config }; \ No newline at end of file diff --git a/html.js b/html.js index 64da470..784535b 100644 --- a/html.js +++ b/html.js @@ -3,41 +3,40 @@ import DocumentTitle from 'react-document-title' import { link } from 'gatsby-helpers' module.exports = React.createClass({ - propTypes () { - return { - title: React.PropTypes.string, - } - }, - render () { - let title = DocumentTitle.rewind() - if (this.props.title) { - title = this.props.title - } + propTypes() { + return { + title: React.PropTypes.string, + } + }, + render() { + let title = DocumentTitle.rewind() + if (this.props.title) { + title = this.props.title + } - let cssLink - if (process.env.NODE_ENV === 'production') { - cssLink = - } + let cssLink + if (process.env.NODE_ENV === 'production') { + cssLink = + } - return ( - - - - - - {title} - - - {cssLink} - - -
-