LogoTemplateFame
icon of gatsby-theme-novela

gatsby-theme-novela

Novela is a Gatsby theme designed for publishing beautiful articles and stories with ease, offering multiple homepage layouts and dark mode.

Introduction

Novela is a powerful and elegant Gatsby theme developed by Narative, designed to simplify the process of publishing beautiful articles and stories. It offers a robust foundation for content creators and developers seeking a high-performance, accessible, and customizable static publishing platform.Key features of Novela include:* Flexible Homepage Layouts: Choose between a dynamic variable-width grid or a clean, simple list style to showcase your articles.* Dynamic Light and Dark Mode: Users can effortlessly switch between light and dark themes across the entire site, enhancing readability and user experience.* Effortless Customization with Theme UI: Built with Theme UI, Novela provides a consistent and intuitive codebase, allowing for quick and easy customization of colors, fonts, and other design settings.* Interactive Highlight-to-Share: Engage your audience by enabling them to select text within an article and instantly copy it or share it directly to popular social platforms like Twitter and LinkedIn.* Automated Read Time and Progress Tracking: Each article automatically displays an estimated read time, complemented by an animated progress bar that visually tracks the reader's journey through the content.* Built with Accessibility in Mind: Novela ensures broad accessibility, supporting keyboard navigation, screen readers, and other assistive technologies, making your content available to everyone.Technically, Novela is installed as a Gatsby theme via yarn add @narative/gatsby-theme-novela. Configuration is managed through gatsby-config.js, where you define paths for contentPosts and contentAuthors, and set the basePath. Content is structured using Markdown (MDX) for posts, allowing for rich media and interactive components, and YAML for author profiles. Essential siteMetadata keys like title, name, siteUrl, description, hero.heading, and social links are crucial for SEO and site presentation. For advanced customization, developers can leverage Gatsby's Component Shadowing to override theme components or extend styles using gatsby-plugin-theme-ui. The project aims for future enhancements including broader data source support (Prismic, Sanity, Contentful, Netlify CMS), integrated search solutions like Algolia, and more diverse theme variations.

Newsletter

Join the Community

Subscribe to our newsletter for the latest news and updates