-
Notifications
You must be signed in to change notification settings - Fork 0
/
article.js
64 lines (59 loc) · 1.82 KB
/
article.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import Img from 'gatsby-image'
import React from 'react'
import get from 'lodash/get'
import Button from 'components/atoms/button'
import Adsense from 'components/molecules/post-ad'
import Container from 'components/atoms/container'
import Share from 'components/molecules/icon-share'
import PostInfo from 'components/molecules/post-info'
const Article = ({ frontmatter, html, site, options }) => {
const { isIndex, adsense } = options
const isMore = isIndex && !!html.match('<!--more-->')
const fluid = get(frontmatter.image, 'childImageSharp.fluid')
return (
<Container>
<PostInfo
path={frontmatter.path}
title={frontmatter.title}
date={frontmatter.date}
categories={[frontmatter.category]}
tags={frontmatter.tags}
/>
<div className="content">
<p>{frontmatter.description}</p>
{fluid ? <Img fluid={fluid} /> : ''}
</div>
<div
className="content"
dangerouslySetInnerHTML={{
__html: isMore ? getDescription(html) : html,
}}
/>
<div className="content">
{isMore ? <Button path={frontmatter.path} label="MORE" primary /> : ''}
</div>
<ShareSection
isIndex={isIndex}
url={`${site.url}${frontmatter.path}`}
title={frontmatter.title}
/>
<AdSection isIndex={isIndex} adsense={adsense} />
</Container>
)
}
export default Article
const AdSection = ({ isIndex, adsense }) => {
return !isIndex ? <Adsense clientId={adsense} slotId="" format="auto" /> : ''
}
const ShareSection = ({ isIndex, url, title }) => {
return !isIndex ? <Share url={url} title={title} /> : ''
}
const getDescription = body => {
if (body.match('<!--more-->')) {
body = body.split('<!--more-->')
if (typeof body[0] !== 'undefined') {
return body[0]
}
}
return body
}