Skip to content

Commit 96d1eb2

Browse files
f0rr0f0rr0
committed
feat(blog): 2018 music in review
1 parent 9996792 commit 96d1eb2

File tree

4 files changed

+72
-30
lines changed

4 files changed

+72
-30
lines changed

‎.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
8.14.1

‎src/css/yuppies.css‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@charset "utf-8";
22

33
@custom-selector :--headings h1, h2, h3, h4, h5, h6;
4+
45
@custom-selector :--pseudo ::after, ::before;
56

67
/* -------------------------------------------------------------------------- */
@@ -257,8 +258,7 @@ img::selection {
257258
display: inline-block;
258259
padding: 0 0.5em;
259260
border-radius: 5px;
260-
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3),
261-
0 0.75px 0 rgba(53, 56, 73, 0.4);
261+
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0.75px 0 rgba(53, 56, 73, 0.4);
262262

263263
@media screen and (max-width: 600px) {
264264
font-size: 14px;
@@ -270,8 +270,7 @@ img::selection {
270270
padding: 1.266em;
271271
white-space: pre;
272272
overflow: auto;
273-
box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.3),
274-
0 1px 0 rgba(53, 56, 73, 0.4), 0 -1px 0 rgba(0, 0, 0, 0.3);
273+
box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(53, 56, 73, 0.4), 0 -1px 0 rgba(0, 0, 0, 0.3);
275274
}
276275

277276
& blockquote {
@@ -319,6 +318,7 @@ img::selection {
319318
& figure {
320319
text-align: center;
321320
padding: 1.82em 0 2.927em;
321+
322322
& img {
323323
display: block;
324324
max-width: 100%;
@@ -346,6 +346,7 @@ img::selection {
346346
height: 0;
347347
overflow: hidden;
348348
max-width: 100%;
349+
349350
& iframe {
350351
position: absolute;
351352
top: 0;

‎src/utils/blog-helpers.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,19 @@ import sortBy from 'lodash.sortby';
33
import { prefixLink } from 'gatsby-helpers'; // eslint-disable-line
44

55
export function isBlogPost({ path }) {
6-
return path.indexOf('/blog/') >= 0 && path !== '/blog/' && path !== prefixLink('/blog/');
6+
return (
7+
path.indexOf('/blog/') >= 0 &&
8+
path !== '/blog/' &&
9+
path !== prefixLink('/blog/')
10+
);
711
}
812

913
export function getBlogPosts(route) {
1014
const { pages } = route;
1115
const posts = pages.filter(page => isBlogPost(page) && !page.data.draft);
12-
return sortBy(posts, ({ data: { date } }) => moment(date, 'MM/DD/YYYY').valueOf()).reverse();
16+
return sortBy(posts, ({ data: { date } }) =>
17+
moment(date, 'MM/DD/YYYY').valueOf()
18+
).reverse();
1319
}
1420

1521
export function getPostsFromPaths(paths, posts) {
@@ -24,7 +30,8 @@ export function getNextPosts(currPath, posts, num = 3) {
2430
return null;
2531
} else if (total - (currIndex + 1) >= num) {
2632
return posts.slice(currIndex + 1, currIndex + 1 + num);
27-
} else {
28-
return posts.slice(currIndex + 1).concat(posts.slice(0, num - (total - (currIndex + 1))))
2933
}
34+
return posts
35+
.slice(currIndex + 1)
36+
.concat(posts.slice(0, num - (total - (currIndex + 1))));
3037
}

‎src/wrappers/md.js‎

Lines changed: 55 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,33 @@ import { config } from 'config'; // eslint-disable-line
55
import { TweetThis, FacebookShare } from '../components/Social';
66
import ReadNext from '../components/ReadNext';
77
import Bio from '../components/Bio';
8-
import { isBlogPost, getBlogPosts, getNextPosts, getPostsFromPaths } from '../utils/blog-helpers';
8+
import {
9+
isBlogPost,
10+
getBlogPosts,
11+
getNextPosts,
12+
getPostsFromPaths
13+
} from '../utils/blog-helpers';
914
import avatar from '../../images/avatar.jpg';
1015

1116
import '../css/tomorrow-night.css';
1217

1318
export default class MarkdownWrapper extends Component {
1419
render() {
1520
const { route } = this.props;
16-
const { page: { data: post } } = route;
17-
const path = post.path = route.path;
18-
const thumbnail = post.thumbnail ? `https://yuppi.es${path}${post.thumbnail}` : `https://yuppi.es/${avatar}`;
21+
const {
22+
page: { data: post }
23+
} = route;
24+
const path = (post.path = route.path);
25+
const thumbnail = post.thumbnail
26+
? `https://yuppi.es${path}${post.thumbnail}`
27+
: `https://yuppi.es/${avatar}`;
1928
const posts = getBlogPosts(route);
2029

2130
if (isBlogPost(post)) {
2231
const docTitle = `${post.title} - ${config.blogTitle}`;
23-
const nextPosts = post.readNext ? getPostsFromPaths(post.readNext, posts)
24-
: getNextPosts(path, posts);
32+
const nextPosts = post.readNext
33+
? getPostsFromPaths(post.readNext, posts)
34+
: getNextPosts(path, posts);
2535
return (
2636
<section className='content'>
2737
<Helmet
@@ -31,8 +41,14 @@ export default class MarkdownWrapper extends Component {
3141
{ property: 'og:type', content: 'article' },
3242
{ property: 'og:title', content: docTitle },
3343
{ property: 'og:image', content: thumbnail },
34-
{ property: 'article:author', content: 'https://facebook.com/f0rr0' },
35-
{ property: 'article:published_time', content: `${moment(post.date, 'MM/DD/YYYY').format()}` },
44+
{
45+
property: 'article:author',
46+
content: 'https://facebook.com/f0rr0'
47+
},
48+
{
49+
property: 'article:published_time',
50+
content: `${moment(post.date, 'MM/DD/YYYY').format()}`
51+
},
3652
{ name: 'twitter:description', content: post.description },
3753
{ name: 'twitter:title', content: docTitle }
3854
]}
@@ -41,15 +57,25 @@ export default class MarkdownWrapper extends Component {
4157
<header className='blog-header'>
4258
<h2>{post.title}</h2>
4359
<div>
44-
<time>{moment(post.date, 'MM/DD/YYYY').format('MMMM D, YYYY')}</time> &middot; {post.words} words &middot; {post.readTime}
60+
<time>
61+
{moment(post.date, 'MM/DD/YYYY').format('MMMM D, YYYY')}
62+
</time>{' '}
63+
&middot; {post.words} words &middot; {post.readTime}
4564
</div>
4665
</header>
47-
<div className='post-content' dangerouslySetInnerHTML={{ __html: post.body }} />
66+
<div
67+
className='post-content'
68+
dangerouslySetInnerHTML={{ __html: post.body }}
69+
/>
4870
</article>
4971
<aside className='post-footer'>
5072
<ul>
51-
<li><TweetThis {...post} /></li>
52-
<li><FacebookShare {...post} /></li>
73+
<li>
74+
<TweetThis {...post} />
75+
</li>
76+
<li>
77+
<FacebookShare {...post} />
78+
</li>
5379
</ul>
5480
<ReadNext posts={nextPosts} />
5581
<hr />
@@ -67,20 +93,27 @@ export default class MarkdownWrapper extends Component {
6793
{ name: 'description', content: config.description },
6894
{ property: 'og:type', content: 'article' },
6995
{ property: 'og:title', content: post.title },
70-
{ property: 'article:author', content: 'https://facebook.com/f0rr0' },
71-
{ property: 'article:published_time', content: `${moment(post.date, 'MM/DD/YYYY').format()}` },
96+
{
97+
property: 'article:author',
98+
content: 'https://facebook.com/f0rr0'
99+
},
100+
{
101+
property: 'article:published_time',
102+
content: `${moment(post.date, 'MM/DD/YYYY').format()}`
103+
},
72104
{ name: 'twitter:description', content: config.description },
73105
{ name: 'twitter:title', content: post.title }
74106
]}
75107
/>
76-
{
77-
post.title ?
78-
<header>
79-
<h2>{post.title}</h2>
80-
</header>
81-
: null
82-
}
83-
<div className='post-content' dangerouslySetInnerHTML={{ __html: post.body }} />
108+
{post.title ? (
109+
<header>
110+
<h2>{post.title}</h2>
111+
</header>
112+
) : null}
113+
<div
114+
className='post-content'
115+
dangerouslySetInnerHTML={{ __html: post.body }}
116+
/>
84117
</section>
85118
);
86119
}

0 commit comments

Comments
 (0)