Barcadia V2 Release Notes

Barcadia was one of my first themes developing with GatsbyJS, with its first commit back in February 2020. A lot has changed since then (hello COVID), particularly in GatsbyJS, and it was time the theme received a major update.

Barcadia was built using GatsbyJS V2 and although it received an update to V3, it’s had very few code-base improvements during that time.  A number of (much appreciated) users have encountered issues, particularly with my original Contentful implementation.

Barcadia V2 attempts to rectify these issues with a component overhaul, inclusion of hooks, and simpler page generation. 

Styling Overhaul

A separate stylesheet, using Styled Components, is now included in styles/GlobalStyles.js which handles all global classes and variables. There is also a basic toolkit page included which identifies content styles available to use on the first build.

Component Changes

I identified a few components that were no longer required, which have now been removed from the bundle. 

There is improved component composition, reducing the need for ‘prop drilling’. In most cases, props are only passed to components that need it, reducing complexity and improving maintainability. 

This is not perfected at this time so there will be various updates in the coming months to try and optimise these.

Hooks

React Hooks were an option when I first started building the theme. However, I was very new to React at that time and did not have use cases for them.

Barcadia V2 takes advantage of hooks and they can be found in /hooks. These will make the process of grabbing data from GraphQL much easier, and simpler to maintain. The hooks handle posts, products, and site meta.

Collection Routes 

Previously, Barcadia was using the createPage API in gatsby-node.js to generate pages. To make the codebase that bit cleaner pages being generated via Contentful are built using Collection Routes (more here).

Improved Content Models

The biggest issue people had when using Barcadia was getting started with Contentful. There had been a number of issues related to build failures. This was often down to there being no ‘dummy’ content. If there was no data, the build would fail. I received some feedback from users about this and decided the content models needed a complete overhaul. 

Hopefully, this resolves issues people were having when looking to get up and running.

There are now 4 content models. Page, Post, Product and FAQs. 

At the risk of insulting people’s intelligence: 

Page handles general page content, as well as page feeds (selected via a radio button). Page has a template option that allows for a certain amount of flexibility in page creation. By selecting a template from the dropdown (in a new Page) you can select ‘Default’ or ‘Feed’. The ‘Feed’ template option allows you to create a list of items using the Posts or Products hook.

Post handles all of your post content. This is the most basic of all the content models. 

Product is for any items you wish to display as products (although you could change this term - it's totally up to you), and potentially sell. At the moment there is no basket system, which will likely be a V3 release. 

This Product model has spaces for pricing, galleries, FAQs, and SKUs. When a page is generated using the product hook, it uses the {contentfulProduct.sku}.js collection route.

FAQs have been an area of frustration, both for myself and users. The original FAQs module was difficult to edit and expand upon, using a JSON object to both edit and display the data. 

The new content model uses references. This means you add a new, or an existing, FAQ reference. This has the added bonus of using the FAQ question/answer in multiple places around the site. For example, a knowledge base.

Feedback

I’m also keen to gather feedback from those using the theme. It would be great to know what sites people have been making, as well as find out issues they may have come across. Barcadia is a long-term project so I hope to add further improvements at more regular intervals, as well as take note of feedback from people using it. Just add them to Barcadia Issues on GitHub.

Categorised under