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

Mockup home page

1. Navigation blog’s logo.
2. Featured post.
3. List most recent posts. Each post includes a hero image, title, description, author, published date.
4. 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:

New components

Normally our blog will be contained inside a layout. That’s why we create a Layout.tsx component here:

Layout.tsx

Thank for ThemeProvidersupported 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:

Navigation.tsx

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

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:

constants/index.ts

Here is the result after all:

Styling Navigation

Featured post

This one is just a dummyReact element with mocked data:

FeaturedPost.tsx

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:

src/pages/index.tsx

Result:

Home page with featured post

Recent Posts

Recent posts section lists all posts we’ll create and sorted by published date by default.

ThumbnailPost.tsx

Now in the home page component we need to adapt the code a little bit to show recent posts section:

src/pages/index.tsx

Here is the result:

Home page with thumbnail posts

Footer

The footer of our blog is a very simple component. Right now we just put some content link to our home page:

Footer.tsx

Footer result

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!