Alt Text

Welcome to part-10 of the series. The first thing which we will do is to add the author details, which includes his twitter, github and dev account after every post.

We already had saved these fields in the frontmatter, so we need to first update the GraphQl query in post-template.js

post-template.jspost-template.js

Next, we will add these in the destructuring and also will include icons for twitter, github and dev.

We are then adding a new div with new styles to show all these three. We are also doing conditional rendering, as some user might not submit all of them.

post-template.jspost-template.js

Next, let’s add styles for them in postTemplate.module.css file

postTemplate.module.csspostTemplate.module.css

It will now show like below in browser.

AuthorAuthor

Next, we will start adding tags in our project. First, we will add a tags array containing all our tags to all mdx files.

First mdxFirst mdx

Second mdxSecond mdx

Third mdxThird mdx

Next, in our index.js file, we will first import a TagList component and in our GraphQL query will add tags.

For this to work, we need to restart gatsby develop

index.jsindex.js

After this in the right section add TagList component and pass the props tags, in which we send all posts.

index.jsindex.js

Then create the file TagList.js inside components folder. Here, we are looping through all tags and adding them to a tmpArr first. After that we are removing the duplicates by using Set.

After that just adding some CSS classes, to change them to Link.

TagList.jsTagList.js

Next, we will create a file taglist.module.css in the css folder and add these styles in it.

    .tagList {
        padding: 1rem 0.5rem;
    }

    .boxTag{
        width: auto;
        height: 600px;
        margin-bottom: 2rem;
        background: var(--mainWhite);
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
    }

    .link {
        border: 1px solid var(--mainBlack);
        padding: 4px 8px;
        color: var(--mainBlack);
        text-decoration: none;
        text-transform: capitalize;
        transition: all 0.3s ease-in-out;
        width:8rem;
        margin-bottom: 1rem;

    }
    .link:hover {
        background: var(--mainBlack);
        color: var(--mainWhite);
    }

    .boxTag h2 {
        font-size: 30px;
        text-transform: capitalize;
        margin-bottom: 10px;
    }

It will show all our tags in the home page, on the right sidebar.

TagsTags

This completes part-10 of the series.

You can find the code for the same in this github repo.

This post is also available on DEV.