/
post.js
131 lines (115 loc) · 3.47 KB
/
post.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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
import { styled, connect } from "frontity";
import React, { useEffect } from "react";
import FeaturedMedia from "./featured-media";
import {
EntryContent,
Post as ArticlePost,
PostHeader,
PostInner,
PostTitle,
SectionContainer
} from "./list/article";
import PostCategories from "./list/post-categories";
import PostMeta from "./list/post-meta";
import PostTags from "./list/post-tags";
const Post = ({ state, actions, libraries }) => {
// Get information about the current URL.
const data = state.source.get(state.router.link);
// Get the data of the post.
const post = state.source[data.type][data.id];
// Get the data of the author.
// const author = state.source.author[post.author];
// Get a human readable date.
// const date = new Date(post.date);
// Get the html2react component.
const Html2React = libraries.html2react.Component;
// Get all categories
const allCategories = state.source.category;
/**
* The item's categories is an array of each category id
* So, we'll look up the details of each category in allCategories
*/
const categories =
post.categories && post.categories.map(catId => allCategories[catId]);
// Get all tags
const allTags = state.source.tag;
/**
* The item's categories is an array of each tag id
* So, we'll look up the details of each tag in allTags
*/
const tags = post.tags && post.tags.map(tagId => allTags[tagId]);
/**
* Once the post has loaded in the DOM, prefetch both the
* home posts and the list component so if the user visits
* the home page, everything is ready and it loads instantly.
*/
useEffect(() => {
actions.source.fetch("/");
// Posts.preload();
}, []);
// Load the post, but only if the data is ready.
return data.isReady ? (
<PostArticle>
<Header>
<SectionContainer>
{/* If the post has categories, render the categories */}
{post.categories && <PostCategories categories={categories} />}
<PostTitle
as="h1"
className="heading-size-1"
dangerouslySetInnerHTML={{ __html: post.title.rendered }}
/>
{/* The post's metadata like author, publish date, and comments */}
<PostMeta item={post} />
</SectionContainer>
</Header>
{/*
* If the want to show featured media in the
* list of featured posts, we render the media.
*/}
{state.theme.featuredMedia.showOnPost && (
<FeaturedImage id={post.featured_media} isSinglePost={true} />
)}
{/* If the post has an excerpt (short summary text), we render it */}
{post.content && (
<PostInner size="thin">
<EntryContent>
<Html2React html={post.content.rendered} />
</EntryContent>
{/* If the post has tags, render it */}
{post.tags && <PostTags tags={tags} />}
</PostInner>
)}
</PostArticle>
) : null;
};
export default connect(Post);
const Header = styled(PostHeader)`
background-color: #fff;
margin: 0;
padding: 4rem 0;
@media (min-width: 700px) {
padding: 8rem 0;
}
`;
const PostArticle = styled(ArticlePost)`
padding-top: 0 !important;
`;
const FeaturedImage = styled(FeaturedMedia)`
margin-top: 0 !important;
position: relative;
> div {
position: relative;
width: 100vw !important;
}
&:before {
background: #fff;
content: "";
display: block;
position: absolute;
bottom: 50%;
left: 0;
right: 0;
top: 0;
}
`;