GatsbyJS Series — Layout with mocked data (Part 3)
In this part, we’ll lay out our blog with mocked data first. We’ll integrate with Backend/CMS headless later.
Homepage Mockup
- Navigation blog’s logo.
- Featured post.
- List most recent posts. Each post includes a hero image, title, description, author, published date.
- Footer.
Note: I’m an amateur photoshopper so maybe our final product could be different a little bit with the beginning mockup.
Navigation with blog’s logo
Let’s take a look at our structure project now:
Normally our blog will be contained inside a layout. That’s why we create a Layout.tsx
component here:
Thank for ThemeProvider
supported from styled-components
we can inject some pre-defined properties such as colors, rhythm, scale
to the whole application. So that we can use them easily when styling with styled-components
such as:
max-width: ${props => props.theme.rhythm(40)};
Next, we’ll take a look at Navigation.tsx
component:
Nothing special except this line
import logo from '../../static/mr-leo.png'
We will get an error from typescript that can’t understand .png
file. Solving this issue is quite easy by adding that type to declarations.d.ts
Another thing special in Navigation.tsx
file is:
import { Link } from 'gatsby'
For internal navigation, Gatsby includes a built-in <Link>
component. One of the powerful of Gatsby’s <Link>
is preloading feature. It means that resources are fetched by the time the user navigates to one component. I strongly recommend the official document here for more details.
We use one file named constants/index.ts
to contains all constants will be used in our app:
Here is the result after all:
Featured post
This one is just a dummy
React element with mocked data:
For the heroImage
we’re using normal img
html tag. We’ll optimize image loading & performance later thank for Gatsby plugin support gatsby-image
. Right now just keep it simple like that.
Adding to our home page component:
Result:
Recent Posts
Recent posts section lists all posts we’ll create and sorted by published date by default.
Now in the home page component we need to adapt the code a little bit to show recent posts section:
Here is the result:
Footer
The footer of our blog is a very simple component. Right now we just put some content link to our home page:
Summary
So far so good. Now we already have a looking good home page for our blog. If you already familiar with React so working with Gatsby is easy, right? Almost everything we have done so far in this part is dummy React components along with styled-components
css.
Next part is an interested one. We’ll work with backend/cms headless framework to manage and produce data for our blog. Besides, we’ll get acquainted with Graphql basic to query our data. See you there!