Styling the post info
In this lesson we'll highlight the author and date info in our
<Post> component so that they stand out from the rest of the post content.Import
styled into post.js and create and use a <PostInfo> component.1
// File: /packages/my-first-theme/src/components/post.js
2
3
import React from "react"
4
import { connect, styled } from "frontity"
5
import dayjs from "dayjs"
6
7
const Post = ({ state }) => {
8
const data = state.source.get(state.router.link)
9
const post = state.source[data.type][data.id]
10
const author = state.source.author[post.author]
11
12
const formattedDate = dayjs(post.date).format("DD MMMM YYYY")
13
14
return (
15
<div>
16
<h2>{post.title.rendered}</h2>
17
<PostInfo>
18
<p>
19
<strong>Posted: </strong>
20
{formattedDate}
21
</p>
22
<p>
23
<strong>Author: </strong>
24
{author.name}
25
</p>
26
</PostInfo>
27
<div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
28
</div>
29
)
30
}
31
32
export default connect(Post)
33
34
const PostInfo = styled.div`
35
background-image: linear-gradient(to right, #f4f4f4, #fff);
36
margin-bottom: 1em;
37
padding: 0.5em;
38
border-left: 4px solid lightseagreen;
39
font-size: 0.8em;
40
41
& > p {
42
margin: 0;
43
}
44
`
Copied!
Visit one of the posts now and the date and author info are pleasingly highlighted.
For reference, this is what your site should be looking like now:
Frontity in the browser - listing
Frontity in the browser - post
Last modified 1yr ago
Copy link