Novela — A Gatsby theme by Narative

With minimal styling and maximum features — including multiple homepage layouts, built-in social sharing and dark mode — Novela makes it easy to start publishing beautiful articles and stories with Gatsby.

Novela is built by the team at Narative, and built for everyone that loves the web.

Skip to

• Getting Started
• Authors & Posts
• Site Metadata
• Customization
• Example repository

Why use Novela?

There are many Gatsby themes to choose from. Here’s why we think you won’t regret choosing Novela:

Multiple Homepage Layouts

Choose between a variable width grid or a simpler list style to display each story.

Toggleable Light and Dark Mode

Out of the box, Novela includes both light and dark designs that can be toggled by the user anywhere across the site.

Simple Customization with Theme UI

Consistent, easy-to-read code let you quickly customize every color and setting.

Highlight-to-Share

Users can select text within an article to copy or share to platforms like Twitter and LinkedIn.

Read Time and Progress

Read time is automatically generated for each article based on length, with an animated bar tracking the reader’s progress through each piece.

Accessibility in Mind

Navigable by cursor or keyboard, readable via screens and screen readers, Novela ensures everyone on the web can read what you write.

Installation

  # in your Gatsby project
  yarn add @narative/gatsby-theme-novela

Configuring Novela Theme Plugin

You can customize the path of the generated site or where you store your authors and posts. This can be done through the options key in the gatsby-theme-novela object.

Option	Default
contentAuthors	content/posts
contentPosts	content/authors
basePath	/

This is the default and recommended configuration

  my-gatsby-site
  └── content
    ├── authors
    └── posts

And then configuring your gatsby-config.js plugins to include the theme and content sources:

// gatsby-config.js
plugins: [
  {
    resolve: "gatsby-theme-novela",
    options: {
      contentPosts: "content/posts",
      contentAuthors: "content/authors",
      basePath: "/",
    },
  },
];

Adding Authors & Posts

Once you've setup the gatsby-theme-novela in your plugins you can start creating your first posts. In order to create a post you also need authors.

Author

Key	Required	Type
name	required	String
bio	required	String
avatar	required	Image
featured	optional	Boolean

- name: Dennis Brotzky
  bio: |
    Written by Dennis Brotzky who lives and works in Vancouver building useful things.
    You should follow him on Twitter.
  avatar: ./avatars/dennis-brotzky.jpg
  featured: true

- name: Thiago Costa
  bio: |
    Written by Thiago Costa who lives and works in Montreal building useful things.
    You should follow him on Twitter.
  avatar: ./avatars/thiago-costa.png

*At least one Author must have featured: true. This author will have their Name, Bio, and Avatar visible on the home pag

Post

Key	Required	Type	Description
title	required	String	Also used for slug
author	required	String Ref	Must match a defined Author
date	required	Date	YYYY-MM-DD format
hero	required	Image
excerpt	required	String	140 character limit

---
title: Why Narative loves Gatsby
author: Dennis Brotzky
date: 2019-04-27
hero: ./images/narative-gatsby-hero.jpg
excerpt: This is a love story about Narative and Gatsby
---
# And then under the heading YML you can insert any MDX you like
# like headings, links, code, images, etc
# This will show up in the body of your post
# ...

As you can see, Novela allows you to write posts in MDX. This gives you the ability to render Markdown, Code, JSX, images and more within your post body.

Recommended folder pattern for posts

  my-gatsby-site
  └── content
    └── posts
      └── 2020-01-01-my-first-post
        ├── index.mdx
        └── images

From here, you can begin populating index.mx

Configuring siteMetadata

In order to configure the theme to properly genreate the pages and meta tags you must certain keys in your siteMetadata. The ones that are special for this theme are hero.heading, hero.maxWidth, and social.

Key	Required	Type
title	required	string
name	required	string
siteUrl	required	string
description	required	string
hero.heading	required	string
hero.maxWidth	optional	number
social	optional	[{name, url}]

Example configuration

module.exports = {
  /**
   * siteMetadata Used throughout the theme to generate the right SEO links,
   * social links, and homepage hero
   **/
  siteMetadata: {
    title: `Novela by Narative`,
    name: `Narative`,
    siteUrl: `https://gatsby-theme-novela.netlify.com`,
    description: `This is my description that will be used in the meta tags and important for search results`,

    // important to set the main text that appears in the hero
    hero: {
      heading: `Perspectives on technology, design and business from the team at Narative.`,
      maxWidth: 652,
    },
    social: [
      {
        name: `twitter`,
        url: `https://twitter.com/narative`,
      },
      {
        name: `github`,
        url: `https://github.com/narative`,
      },
      {
        name: `instagram`,
        url: `https://www.instagram.com/narative.co/`,
      },
      {
        name: `dribbble`,
        url: `https://dribbble.com/narativestudio`,
      },
    ],
  },
  plugins: [
    /**
     * In order for the theme to know where you are storing your content
     * you must pass in where the posts and authors are located.
     * basePath will define where the theme is served from
     */
    {
      resolve: "gatsby-theme-novela",
      options: {
        contentPosts: "content/posts",
        contentAuthors: "content/authors",
        basePath: "/",
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Novela by Narative`,
        short_name: `Novela`,
        start_url: `/`,
        background_color: `#fff`,
        theme_color: `#fff`,
        display: `standalone`,
        icon: `src/assets/favicon.png`,
      },
    },
  ],
};

Customizing Novela

Styles

If you want to customize Novela it's possible thanks to how Gatsby themes work. To customize the styling you must create a folder, gatsby-plugin-theme-ui and apply your Theme UI overrides there.

  my-gatsby-site
  └── src
    └── gatsby-plugin-theme-ui
      └── index.js

To preserve the default styles make sure you import the theme from gatsby-theme-novela. Here you are able to override the styles for colors, fonts, prism, components, and more.

Components

Component Shadowing allows users to override a component in order to customize its rendering.

Gatsby Themes introduce a concept called Component Shadowing. This feature allows users to override a component in order to customize its rendering.

With other theming approaches it’s impossible to change aspects of a theme if a configuration option hasn’t been built in. Component Shadowing provides a powerful escape hatch to let users make quick, one-off changes that might not make sense to support in the theme itself.

Component Shadowing let’s you replace the theme’s original file, gatsby-theme-blog/src/components/bio.js, with your own to implement any changes you need.

To learn more about Component Shadowing we recommend reading Gatsby's blog post about it and the official documentation.

Future

This project is early in development and we are interested in creating an even more extensible experience, and increased out-of-box functionality, including:

• Data sources such as Prismic, Sanity, Contentful, Netlify CMS, and others
• Built in search with Algolia or similar
• Tags, categories, and more
• More theme variations
• More customization options