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
Check you're on the right track by comparing your changes with the ones in this commit.

Styling the links

Add dynamic styling

Last modified 5mo ago

Copy link