Gridsome – Using file system markdown files

We’ll continue the journey using Gridsome and finally complete the first phase of the exercise. We’re going to wire up Gridsome to use our Markdown files we generate making use of the Netlify CMS.

Gridsome makes it easy for developers to build modern websites, apps & PWAs that are fast! Making use of Vue.JS and all the other additional features we added previously we can build a very powerful static website!

In post, we will develop a couple of custom Vue components to display our static content. Our simplistic design will look something similar to the following mock ups.

Our index page will contain a paginated list of recently added added blog posts.

Geek.I.Am Custom Index page design

A user will be able to click on the item and be redirected to the content page for the item. The content page will contain an addtional author component to provide an overview of the author of the post

Geek.I.Am Custom content page

This is some pretty basic features and functionality which can be found in most blogs and content management systems. We’re going to try keep it simple but at the same time try to at least provide some advanced features andfunctionality.

Install the Filesystem Source component

In order to enable Gridsome to retrieve the data files we have been able to generate and edit by making use of Netlify CMS, as discussed in Gridsome – More adventures with the static website generator, we need to install an additional plugin the @gridsome/source-filesystem which enables transformation of files into content that can be fetched with GraphQL in your components.

To install the plugin we will make use of the standard Node Package manager (npm)

Shell

Once the installation has completed we just need to configure Gridsome to make use of the plugin. so as we have done in our previous posts we ned to update the gridsome.config.js

JS

Build a Custom Pagination Component

The first control we’ll develop is a basic control to enable us to effectively load up all our posts we have published making use of the Netlify CMS that we set up in Gridsome – More adventures with the static website generator .

The HTML element of component will look as follows, a majority of the code mostly consists of the styling information using classes from the Tailwind CSS.

HTML

The JavsScript element of our component will look as below. You’ll notice we tried to keep our View template logic as clean and simple as possible and try not to put too much logic into the HTML to avoid it becoming bloated and difficult to maintain,

In the JavaScript we will create two properties which we will be able to use to pass into data into our Component, we’ll name this base and info . We will use the base property as a variable to pass in a specific Base Path to where we will store our files, this will become handy in the future but for now we won’t necessarily need it.

We will create a computed property of basePath to return either base path we pass or an empty string if it is null.

We will also create two methods : previousPage and nextPage which basically make use of ternary operators to create a navigation process based on the number of pages.

A ternary operator basically operates, operating on three values. It is written with a question mark and a colon.

JS

The value on the left of the question mark “picks” which of the other two values will come out. When it is true, it chooses the middle value, and when it is false, it chooses the value on the right.

This is discussed in more detail in Eloquent JavaScript

JS

Eloquent JavaScript, 3rd Edition

A Modern Introduction to Programming

Marijn Haverbeke

Reflects the current state of JavaScript

Buy Now Read Review

Building a PostItem Component

The Pagination component will work in tandem with the Pagination control. The PostItem control will display a summary of the post along with

HTML

By now you will have noticed we have made use of a glink HTML component The <g-link> component is available globally in all your Pages, Templates & Components. It’s a wrapper for router-link from Vue Router.

Linking in Gridsome uses IntersectionObserver to prefetch linked pages when link is in view. This makes browsing around in a Gridsome site very fast because the clicked page is already downloaded.

JS

In our JavaScript we are going to create a post property which will contain the post details which a JSON document.

We also add two additional methods

You’ll notice than within the JavaScript we are formatting the Dates to string by making use of a library called moment.js which enables developers to parse, validate, manipulate, and display dates and times in JavaScript.

Shell

The only other complicated thing we’re doing in this page is the title case function, which predominantly copes with the fact that we are going to recieve a hyphenated string with the title and converting it to title case.

Create Post Page

The next component we need to create is the Post Page, which deals with displaying the content of the post.

HTML

We are not even going to have that much JavaScript for this page, in fact at this stage there is almost nothing!

JS

However it is now we are going to use one of the cool features of making use of Gridsome. We are going to use GraphQL to query our static files to retrieve the content we need to display. To do this we need to make use of the page-query and embed our GraphQL query we want to use.

JSX

I won’t go too deep into GraphQL here because to be honest there are a load of great tutorial available on the web, but specifically in this case we are just retrieving the page content based on the file path in the query string.

We are still not going to have that much of an aesthetically pleasing looking website at this stage, but we will get all the necessary plumbing in place to enable us to concentrate on improving the design.

Page Component

Our last component we need to create is our Page, which will be our Index Page for our blog. This Page will act as the initial home page, and will display our list of available blog posts. We will be making use of our Pagination and PostItem components to deliver this functionality.

HTML

In our JavaScript we simply import the components we wish to use.

JS

The really interesting aspect of this whole page is that we will embed our GraphQL query to get all the data we want to display. We will be making use of the page-query to hold our GraphQL query. Working with GraphQL in Gridsome is easy and you don’t need to know much about GraphQL. With GraphQL you only query the data you need. This makes it easier and more tidy to work with data. 

The Gridsome documenation provides further information regarding Querying data .

Although you do not need to necessarily completely understand GraphQL to work with it in Gridsome, I did find Learning GraphQL: Declarative Data Fetching for Modern Web Apps to be an excellent resource to work through to explain the different aspects of GraphQL with well-thought-out examples to go along with the concepts.

JSX

Summary

At this stage of our Application we have completed the first phase of our end to end Content Management System (CMS) and Gridsome. We have developed basic components that assist us in retrieving and displaying data generated by our CMS system. We have also taken a look at some of the features available in Gridsome to assist us.

Tags: