Creating Article component

• SCSS
• CSS
• nextjs
• UI
• eslint

Introduction

In the previous article (Setting up unit testing), we focused on setting up Jest and React Testing Library to handle unit tests in our application. I did that so early, almost at the beginning of the whole course, because I want to make sure we can write tests for everything we build. This way we won't create a backlog of tests to be added somewhere in the future when we finally have the testing environment up and running.

So, today we can finally start building the UI components which we will later use throughout our whole blog. We are going to look at CSS variables to provide consistent styling.

I am also creating a new branch to work on this feature. I called mine but you can name it the way you want.

Defining global styles

As mentioned above, we are going to use CSS variables to store some global parameters like fonts and colors which we are going to use anywhere. This is going to prevent us from having any inconsistencies in the page's visuals, but also it will enable us to easily manipulate these variables to change the look of our whole website from one, central place

To store the global styling we are going to update the file we have in our project in directory.

Let's analyze what we've got here. We start by importing some google fonts we are going to use. All the headings are going to be Roboto, text Ubuntu and code PT Mono. Of course, you can change them to anything you like.

Then we declare the variables. In CSS to declare global variables you have to put them inside selector. We are declaring a range of colors, different shades of gray and typography as well. Underneath the we assign some global styling to headers, paragraphs and so on.

Creating an article component

This is the core functionality of our page, to display the article written in Markdown on our page. To do so we are going to build component. This component will not be all stored in single file. It will be built from number of smaller component, each of which will do just one part of the job like formatting the creation date or title and description.

Article component bare bones

We are going to start by building an component. For now, it is not really going to do anything spectacular by itself, but we will make a structure of all the pieces we are going to need to make the final, working product.

All the components we are going to share in more than one page we are going to store in directory. Let's create folder inside and 4 files inside - , , and .

This of course underlines all the components we do not currently have, but we now know what we need. So. basically I decided to have 3 separate subcomponents which are together building the :

• Headline - displays title and description
• Date - display article's creation date
• Markdown - renders markdown content

All the styling files we are going to just create and leave empty for now. We will revisit them later, when we finish all the components and make the work. Then, when we import it on our articles page, we are going to run the development server and play with the styling. This way we will have a live preview of the results we are getting.

Component

Now we create directory in . Inside we add 4 new files: , , and `index.tsx. We create the

It is super simple and what it does is just rendering the title and description. Now we can also add some tests. To do so we update the .

Such a simple component doesn't need more than this one test which is just checking if what we pass to it is rendered.

Component

Same as before we need new folder and the same set of files as before. The component is as simple as taking the date and displaying it as a locale string.

We can also add a test to make sure it works as expected.

Component

This is the most complex one and it also needs some external dependencies. We are going to use package, together with some and plugins.

Let's start by installing dependencies.

Next, as before we add a new folder inside and we also create the same files as we did for any of the previous components.

This is how our main looks like:

This component takes as a prop just the markdown content it will be rendering. We are also using plugin which can handle rendering of some additional markdown extensions like tables, task lists and so on. More about this plugin you can find in the docs. We are also using the plugin to add IDs to each header element in the text. This might be useful to share with someone link to not only the whole article, but to a specific section within by referencing the header ID in the URL like so .

For this one I'm not going to write tests because I would have to mock the and the two other plugins, so it does not really make sense.

We also need to export all the components in to be able to import it later in .

Updating

Now when we have all the pieces we can import them and use in the component.

This looks good. Let's test it and see if it works as expected.

An example of a test that can check our Article can look like so:

Mocks

But if we run this test with , we will start to get errors with some export problems. Pretty cryptic and actually not really helpful message. But what is this all about? Well, as I mentioned before explaining the reason why I am not going to write tests for Markdown component? I mention it does not make sens e to mock all the libraries. Why would we have to do this? It's because these libraries are not working properly with our testing setup. So in case of the Markdown component we just didn't write a test, but this time we want to add mocks to be able to test any other component that renders Markdown.

To do so we have to create a folder (make sure you are using double underscores on bots sides). Inside we are going to add files that will be used as mocks for our libraries of choice. Every file has to have a name of the library so in our case we create three files: , and .

That's how I mocked them to make them work with the test we have.

The last two we just mock with a as they are just a plugins passed to the function we are mocking up anyway in . The simply renders its children, so we can test that the content we are passing is displayed.

We also need to include mocks in TypeScript config. To do so we have to edit our file by adding to the array.

Now when we run the tests again, they all pass.

Using Article component on articles page

Now we can finally use our new component on the page and start making it look good.

First we need to update the to use our component.

Make sure to also create file in the directory as we are importing it here and we will use it to style the page later. Now we can run open one of our articles and we can see it is still working. We can also see it does render markdown properly!

I think this is a proper time to save our progress

Styling Article

So now with the development server running. We can start to add some styles to the Article component. We are going to do all the changes in

Right now our page doesn't look impressive, but we are going to change it.

We just have to add some styling to and first.

The first one just makes sure that the element we used there is treated as a block element, so we can add for example margins to it. The second one allows code blocks to wrap their text if its longer then the screen width, preventing horizontal scrollbar.

Here we add some more specific styling to each of the subcomponents and to the Article itself. It's not much, but it already looks a lot better.

Summary

Next we have to style the page, and improve the layout in general. However, this is a perfect spot to finish this part. We can save our progress, create a PR an merge it.

In the next article where we are going to continue making our blog glow. I hope to see you all in Building layout and styling pages!