Navigate back to the homepage

Novela ❤️ Gatsby.js

Mario Bašić
August 27th, 2019 · 3 min read

I stumbled upon Novela by a total accident on Twitter. I had just created my account on Twitter (again) and started following @gatsbyjs when a tweet appeared showing Novela. Something about a contest with themes and stuff I knew nothing about at the time.

The design of Novela was beautiful and it worked really fast. The fact that it was a Gaysby.js theme got me very interested, because the only thing that I knew about Gatsby.js (in future reference just Gatsby) was that it was a static site generator and that it uses React.js which I like very much.

I first heard about Gatsby from listening to a podcast called which is hosted by @wesbos and @stolinski. I find this to be the most entertaining podcast about web development.

Novela - a Gatsby theme

Novela is a Gatsby theme built by the team at Narative, and built for everyone that loves the web™️. It includes multiple homepage layouts, built-in social sharing and a dark mode.

You can view the source code on GitHub narative/gatsby-theme-novela.

My contributions

You can view the source code for my blog on GitHub.

I’ve made a few changes to the theme and have sent PRs for them on GitHub. You can find the links here:

I’ve also discovered why component shadowing was not working for some files, but for others it was working.

There is also a discussion on Twitter about this PR and how @chrisbiscardi figured out why this was happening (More details).

Creating a logo which supports light and dark mode

For the logo I have used Inkscape.

When exporting the logo I used “Save as” (Optimized SVG) with these options:

Number of significat digits for coordinates5
Shorten color values
Convert CSS attributes to XML attributes
Collapse groups
Create groups for similar attributes
Keep editor data
Keep unreferenced definitions
Work around renderer bugs
SVG OutputValue
Remove the XML declaration
Remove metadata
Remove comments
Embed raster images
Enable viewboxing
Format output with line-breaks and indentation
Indentation charactersSpace
Depth of indentation1
Strip the “xml:space” attribute from the root SVG element
Remove unused IDs
Shorten IDs

I need a desktop and a mobile logo, so I repeated the steps above for both. To replace the theme logo with my own I had to use component shadowing.

I created the following directory structure and file:

2 @narative
3 gatsby-theme-novela
4 components
5 Logo
6 Logo.tsx

Inside the Logo.tsx file I pasted the contents from the theme Logo.tsx file.

Then I opened the newly created .svg files in a text editor and copied them inside Logo.tsx file in place of the theme desktop and mobile logos.

I modified my desktop SVG logo to match this:

3viewBox="0 0 192 23"

I modified my mobile SVG logo to match this:

3viewBox="0 0 18 23"

I had to adjust the viewBox to match my logo and since the logo seemed small I also adjusted the height attribute and replaced all stroke-width with strokeWidth, and clip-path with clipPath. Finally, I removed all other unnecessary attributes.

The next part required me to experiment a bit. I needed to place fill={fill} on appropriate tags in my SVG files depending on which part I wanted to have its color changed by toggling the light and dark mode on the theme.

Mailchimp and GDPR regulations

Since my business is located in the EU I have to comply with GDPR regulations. Because of that I require each newsletter subscriber to opt-in (give persmission) to be contacted about new content on this website via Email. I’ve managed to solve this by providing a message saying that if they enter their email and click on subscribe that they give their permission to be contacted via Email about new content on this website.

Behind the scenes this is how I made it to work with Mailchimp.

I have created a file at /src/@narative/gatsby-theme-novela/components/Subscription/Subscription.tsx and copied the content from the theme repository. Then inside I have changed the following code:



1addToMailchimp(email, {
2 'gdpr[27301]': 'Y',
3 'gdpr[27305]': 'Y',
4 'gdpr[27309]': 'Y',
5}, null)

Fields 'gdpr[27301], gdpr[27305] and gdpr[27309] are field names which I have located on my embed form from Mailchimp on the GDPR fields. By setting their value to Y I am subscribing the user and checking that he has given his permission.

To obtain my mailchimp list id (audience id) I followed the instructions on the plugin repository.

Join my email list and get notified about new content

By entering your email and clicking on the Subscribe button, you give your permission to be contacted about new content on this website via Email.

More articles from Mario Bašić

Where was I for last two years?

Nearly two years have passed since I have closed down my blog on Laravelista.

August 26th, 2019 · 2 min read

Working on a new SaaS product

Refactoring current code base to make a SaaS application. Let me tell you what it is...

January 30th, 2020 · 2 min read
© 2020 Mario Bašić Privacy Notice
Link to $ to $ to $ to $