{"id":13520512,"url":"https://github.com/tinialabs/next-theme-novela","last_synced_at":"2025-09-06T22:30:34.377Z","repository":{"id":38362517,"uuid":"332529010","full_name":"tinialabs/next-theme-novela","owner":"tinialabs","description":"Novela — The beautiful blog theme from Narative adapted by Tinia Labs for Next.js with blazing fast performance","archived":false,"fork":false,"pushed_at":"2021-01-31T13:59:31.000Z","size":2700,"stargazers_count":11,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-07T10:46:07.093Z","etag":null,"topics":["blog-theme","next","nextjs","nextjs-example","nextjs-starter","nextjs-template","nextjs-typescript","novela-theme"],"latest_commit_sha":null,"homepage":"https://novela.tinia.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tinialabs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-24T18:50:06.000Z","updated_at":"2025-03-25T11:38:27.000Z","dependencies_parsed_at":"2022-08-25T04:51:13.743Z","dependency_job_id":null,"html_url":"https://github.com/tinialabs/next-theme-novela","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tinialabs/next-theme-novela","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinialabs%2Fnext-theme-novela","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinialabs%2Fnext-theme-novela/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinialabs%2Fnext-theme-novela/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinialabs%2Fnext-theme-novela/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tinialabs","download_url":"https://codeload.github.com/tinialabs/next-theme-novela/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinialabs%2Fnext-theme-novela/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273973314,"owners_count":25200573,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-06T02:00:13.247Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blog-theme","next","nextjs","nextjs-example","nextjs-starter","nextjs-template","nextjs-typescript","novela-theme"],"created_at":"2024-08-01T05:02:22.932Z","updated_at":"2025-09-06T22:30:33.953Z","avatar_url":"https://github.com/tinialabs.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ca href=\"https://novela.tinia.vercel.app/\" target=\"_blank\"\u003e\n\u003cimg src=\"https://github.com/tinialabs/next-theme-novela/blob/main/.github/static/nextjs-theme-novela-hero-emotion.jpg?raw=true\" alt=\"gatsby-novela-theme hero image\" /\u003e\n\u003c/a\u003e\n\n\u003cbr/\u003e\n\n# Novela — A blog theme for Next.js\n\nThe beautiful blog theme from Narative adapted by Tinia Labs for Next.js with blazing fast performance.\n\nWith 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 Next.js.\n\nNovela is built by the team at [Narative](https://www.narative.co), updated by [Tinia Labs](https://tinia.org) to work on Next.js, and built for everyone that loves the web.\n\nSpecial thanks to [@jpvalery](https://github.com/jpvalery) for helping maintain the original Gatsby version of Novela.\n\nSee [tinialabs/next-starter-novela](https://github.com/tinialabs/next-starter-novela) for a complete starter kit that uses this theme.\n\n\u003cdiv\u003e\n\u003ca href=\"https://novela.tinia.vercel.app/\" target=\"_blank\"\u003e\n\u003cimg src=\"https://github.com/tinialabs/next-theme-novela/blob/main/.github/static/nextjs-theme-novela-cta-demo.jpg?raw=true\" alt=\"gatsby-novela-theme live demo\" width=\"295px\" /\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\nFeatures specific to Next.js over others Next.js examples\n- **Favicon generator** Uses the `favicons` package to generate favicons and manifests on all required platforms\n- **Yaml config** Put all your site config in one place in a site.yml file in your content folder\n- **All content colocated** All content including images and markdown are colocated in the `content` folders\n- **No CMS required** Keep all your blog articles and images under version control in Github or similar\n- **Image optimization** Use Next.js runtime image optimization without needing to know the height and width of each image\n- **Image lazy loading and LQIP** Use blurred image placeholders (similar to Medium) without an extra server roundtrip;  lazy laod images when the images are ready to be shown in the viewport\n- **Fast performance** Much faster build times than Gatsby for the exact same blog content and layout;  \u003e95 lighthouse scores in every category currently\n- **Simpler project structure** Instead of multiple gatsby hooks, use Next.js intuitive /pages structure for a better developer experience\n\n## Lighthouse scores (January 2021, Next.js version running on Vercel)\n\n\u003cimg src=\"https://github.com/tinialabs/next-theme-novela/blob/main/.github/static/lighthouse-scores-january-2021.png?raw=true\" alt=\"Lighthouse 100-97-100-100\"  /\u003e\n\n## Dependencies\n\nSee [tinialabs/next-starter-novela](https://github.com/tinialabs/next-starter-novela) for a complete starter kit that uses this theme.\n\nSee [tinialabs/next-lib-content](https://github.com/tinialabs/next-lib-content) for logic that generates the blog articles from markdown and yaml files on disk. \n\nTwo Next.js plugins [tinialabs/next-favicon-loader](https://github.com/tinialabs/next-favicon-loader) and [tinialabs/next-meta-image-loader](https://github.com/tinialabs/next-meta-image-loader) were hand-written to provide some of the Gatsby functionality in the original Novela theme and can now be used in any Next.js site.\n\n### Table of Contents\n\n- [Why Novela?](#why-use-novela)\n\n- [Getting Started](#getting-started-with-next-starter-novela)\n\n  - With Next.js Starter Novela\n\n    - [Installation](#step-1-starter-installation)\n    - [Develop \u0026 Build](#step-2-develop--build)\n\n  - From scratch\n\n    - [Installation](#step-1-installation)\n    - [Folder structure](#step-2-folder-structure)\n    - [Using Novela Theme](#step-3-using-next-theme-novela)\n    - [Adding an Author](#step-4-adding-an-author)\n    - [Adding a Post](#step-5-adding-a-post)\n    - [Configuring Site Metadata](#step-6-configuring-sitemetadata)\n\n- [Data Sources](#data-sources)\n\n  - [Local](#local)\n  - [Contentful](#contentful)\n\n- [Customization](#customization)\n\n  - [Enabling Author Pages](#enabling-author-pages)\n  - [Changing styles](#changing-styles)\n  - [Component shadowing](#component-shadowing)\n  - [Using images](#using-images)\n  - [Adding your logo](#adding-your-logo)\n  - [Adding Mailchimp](#adding-mailchimp)\n\n- [Data Models](#data-models)\n\n  - [Theme Options](#theme-options)\n  - [Author](#author)\n  - [Post](#post)\n  - [Site Metadata](#site-metadata)\n\n- [Future](#the-future)\n\n  \u003cbr /\u003e\n\n# Getting Started with Next.js Starter Novela\n\nThis guide will take you through setting up Novela with Next.js Starter Novela.\n\n### Step 1: Starter installation\n\n##### With `create-next-app`:\n\n```sh\nnpx create-next-app -e https://github.com/tinialabs/next-starter-novela\n```\n\n##### With `git clone`:\n\n```sh\ngit clone git@github.com:tinialabs/next-starter-novela.git novela-site\n\ncd novela-site\n\nyarn\n```\n\n### Step 2: Develop \u0026 Build\n\nOnce installed or cloned locally and all packages are installed you can begin developing your site.\n\n```sh\n# Run localhost\nyarn dev\n\n# Build your Next.js site\nyarn build\n```\n\nTo learn more about adding Authors, Posts, and Site Metadata see:\n\n- [Adding an Author](#step-4-adding-an-author)\n- [Adding a Post](#step-5-adding-a-post)\n- [Configuring Site Metadata](#step-6-configuring-sitemetadata)\n\n# Getting Started from scratch\n\nThis guide will take you through adding Novela to a new project. You do not require any Next.js starters or similar, but you can add Novela to an existing Next.js project.\n\nYou can also view the completed [example repository](https://github.com/tinialabs/next-starter-novela).\n\n### Step 1: Installation\n\n```sh\n# Create an empty directory and go into it\nmkdir novela-site \u0026\u0026 cd novela-site\n\n# Add all required dependencies\nyarn add react react-dom next next-theme-novela\n```\n\n### Step 2: Folder structure\n\nOnce you've installed React, Next.js, and Novela you'll want to add your first Author and Post.\n\nThe recommended project structure for your content and site looks like this:\n\n```\n  novela-site\n    ├── .config\n    │ ├── .mdx-plugins.js\n    │ └── .next-sitemap.js\n    ├── content\n    │ ├── authors\n    │ │   ├── avatars\n    │ │   │    └── avatar.jpg\n    │ │   └── authors.yml\n    │ └── posts\n    │ │   └── 2020-01-01-my-first-novela-post\n    │ │       ├── images\n    │ │       │   └── novela-hero.jpg\n    │ │       └── index.mdx\n    │ ├── theme\n    │     ├── favicon.png\n    │     └── site.yml\n    ├── .meta\n    ├── node_modules\n    ├── next-config.js\n    ├── package.json\n    ├── pages\n    ├── public\n    └── tsconfg.json\n```\n\n### Step 3: Using `next-theme-novela`\n\nYou must add `next-theme-novela` and `next-lib-content` as package.json dependencies or .meta sub-projects.  We\nuse the latter in all examples\n\nWe also require `next-favicon-loader` and `next-image-meta-loader` as next.js plugins, and use `next-compose-plugins` to\nadd these to your next-config.js file.   These generate the favicons/site manifest, as well as provide the ability to\nimport images directly from the `content` tree  right next to the assocated markdown, instead of the Next.js default of \nhaving to put them in the `public` folder.\n\n```js\n// next-config.js\n\nconst { withPlugins } = require('next-compose-plugins');\n\nmodule.exports = withPlugins(\n  [\n    require('next-favicon-loader'),\n    require('next-image-meta-loader'),\n  ],\n  {\n    webpack: (config, { defaultLoaders }) =\u003e {\n      defaultLoaders.babel.options.plugins = [\n        require.resolve('@emotion/babel-plugin')\n      ]\n\n      return config\n    }\n  }\n)\n```\n\n---\n\nOnce you've setup the plugins in `next-config.js` and installed the theme proects you can start creating your first Posts. In order to create a Post you also need at least one Author.\n\n### Step 4: Adding an Author\n\nIn [step 2](#step-2-folder-structure) we created the folder structure of our project. We can now add an Author by populating `/content/authors/authors.yml`:\n\n```\n  novela-site\n  └── content\n    └── authors\n        ├── avatars\n        │    └── brotzky-avatar.jpg\n        └── authors.yml\n```\n\nIn `authors.yml` add an Author. There **must** be at least one `featured` Author.\n\n`/content/authors/authors.yml`:\n\n```yml\n- name: Dennis Brotzky\n  bio: |\n    Written by Dennis Brotzky who lives and works in Vancouver building useful things.\n    You should follow him on Twitter.\n  avatar: ./avatars/brotzky-avatar.jpg\n  featured: true\n  social:\n    - url: https://unsplash.com\n    - url: https://stackoverflow.com\n    - url: https://github.com\n```\n\n### Step 5: Adding a Post\n\nOnce you have at least one Author defined in `authors.yml` you can add your first Post.\n\nStart by creating a new folder in `content/posts`. You can name it anything you like but we recommend including the date at the front to organize your posts. Once you've created your folder you can add an `index.mdx` file and an `images` folder.\n\n`/content/posts/2020-01-01/index.mdx`\n\n```yml\n---\ntitle: Why Narative loves Next.js\nauthor: Dennis Brotzky\ndate: 2019-04-27\nhero: ./images/narative-gatsby-hero.jpg\nexcerpt: This is a love story about Narative and Next.js\n---\n# And then under the heading YML you can insert any MDX you like\n# like headings, links, code, images, etc\n# This will show up in the body of your post\n# ...\n```\n\n### Step 6: Configuring siteMetadata\n\nIn order to configure the theme to properly generate the pages and meta tags you must add specific data to `siteMetadata`.\n\nThe fields that are unique to Novela are `hero.heading`, `hero.maxWidth`, and `social`.\n\nAdd your Site Metadata to the `site.yml` file.\n\n```yaml\n// site.yml\n---\ntitle: Novela by Tinia Labs\nname: Tinia Labs \u0026 Narative\nsiteUrl: https://novela.tinia.vercel.app\ndescription: This is my description that will be used in the meta tags and\n  important for search results\nhero:\n  heading: Welcome to Novela, the simplest way to start publishing with Next.js.\n  maxWidth: 652\nsocial:\n  - name: twitter\n    url: https://twitter.com/narative\n  - name: github\n    url: https://github.com/narative\n  - name: instagram\n    url: https://instagram.com/narative.co\n  - name: linkedin\n    url: https://www.linkedin.com/company/narative/\n  - name: dribbble\n    url: https://dribbble.com/narativestudio\nblog:\n  copyrightYear: 2021\n  contentPosts: content/posts\n  contentAuthors: content/authors\n  basePath: /\n  authorsPage: true\n  pathPosts: 'a'\n  pathAuthors: 'authors'\n  pageLength: 6\n  sources:\n    local: true\n    contentful: false\nmanifest:\n  appName: Novela by Narative\n  appShortName: Novela\n  appDescription: Novela by Narative\n  start_url: /\n  background: \"#fff\"\n  theme_color: \"#fff\"   \n  display: standalone\n  alwaysEmitFull: false\ngoogleAnalytics:\n  trackingId: UA-118232427-3\n```\n\n### You can now run your site\n\nOnce all steps have been completed you can run your site. In the root of your project run `yarn dev`.\n\nIf you ran into problems you can reference the [example repository](https://github.com/tinialabs/next-starter-novela) or create an issue.\n\n\u003cbr /\u003e\n\n- [Data Sources](#data-sources)\n\n# Data Sources\n\nWith the flexibility of Next.js, Novela is able to pull different data sources to build your website. Right now we support your local file system. All data sources can be combined together or used separately.\n\n### Local\n\nLocal is the default data source for Novela. Write MDX and YAML in order to generate posts and authors. This is the fastest and simplest way to get started.\n\nTo learn how to use the local file system, read the [Installation](#installation) steps.\n\n### Contentful\n\nContentful and other cloud content management systems provide the flexibility of a headless CMS which allows you to write content without committing new files and working in a text editor. The setup process is simple if you are familiar with Contentful.\n\nYou will need to setup your Contentful space and import the Novela model.\n\nThen fork the `next-lib-content` and instead of reading the posts from the file system, read them from your CMS.\n\nThis is currently beyond the scope of this Next.js starter.\n\n# Customization\n\nOnce you've created the Logo component it should automatically appear in your site.\n\nThe technique we have used is called Meta Repositories and Yarn Workspaces and is easier than Gatsby component shadowing.  Just fork `next-theme-novela` and `next-lib-content`, update the `.meta` file, and run the install again. \n\n### Enabling Author pages\n\nBy default Author pages are  enabled. They can be disabled through the site option `authorsPage`. If you decided to enable Author pages please make sure you have all the required for each author you add.\n\n### Changing styles\n\nNovela allows you to change the default theme styling by updating the [theme-ui](https://theme-ui.com/) values. If you're familiar with Styled Components or Emotion it's the same as adapting the theme you pass to `ThemeProvider`.\n\n### Using images\n\nImages can be added to Posts and customized to fit your content. Define a regular Markdown image that will default to Small or write HTML to customize the sizes. All images can be clicked to zoom.\n\n```html\n![This is the alt text for small image](./images/small.jpg)\n\n\u003cdiv className=\"Image__Small\"\u003e\n  \u003cimg src=\"./images/small.jpg\" alt=\"This is the alt text small image\" /\u003e\n\u003c/div\u003e\n\n\u003cdiv className=\"Image__Medium\"\u003e\n  \u003cimg src=\"./images/medium.jpg\" alt=\"This is the alt text medium image\" /\u003e\n\u003c/div\u003e\n\n\u003cdiv className=\"Image__Large\"\u003e\n  \u003cimg src=\"./images/large.jpg\" alt=\"This is the alt text large image\" /\u003e\n\u003c/div\u003e\n```\n\n| Size   |   Class Name    |          Description           |\n| ------ | :-------------- | :---------------------------- |\n| small  | Image\\_\\_Small  |       Width of the text       |\n| medium | Image\\_\\_Medium | Larger than width of the text |\n| large  | Image\\_\\_Large  |       Full width image        |\n\n### Adding your logo\n\nYour logo must be in SVG (vector) format in order to add it to the theme. This is required because we will be making a React component containing your SVG Logo.\n\nStart by creating the component file at:\n\n```\n  novela-site\n  └── src\n    └── @narative\n      └── gatsby-theme-novela\n        └── components\n          └── Logo\n            └── index.js\n```\n\nIt is important you create the exact folder structure so Next.js knows to shadow this component. Once the file is created you can create your Logo component.\n\n```jsx\nimport React from 'react'\n\n/**\n * Paste in your SVG logo and return it from this component.\n * Make sure you have a height set for your logo.\n * It is recommended to keep the height within 25-35px.\n * Logo comes with a property value called `fill`. `fill` is useful \n * when you want to change your logo depending on the theme you are on. \n */\nexport default function Logo({ fill }) {\n  return (\n    \u003csvg viewBox=\"0 0 106 28\" height=\"30px\"\u003e\n      \u003cpath d=\"M62.9 12h2.8v10....\" /\u003e\n      \u003cpath fill={fill} d=\"M25 14h-...\" /\u003e\n      \u003cpath d=\"M14 0C6.3...\" fill=\"#639\" /\u003e\n    \u003c/svg\u003e\n  );\n}\n```\n\n\n# Data Models\n\n## Theme Options\n\nIt is recommended to use the Default options, but if your project requires something else you can configure them to your need.\n\n| Option                 |     Default     |                                                             Description                                                             |\n| ---------------------- | :------------- | :--------------------------------------------------------------------------------------------------------------------------------- |\n| contentPosts           |  content/posts  |                                          Define where you want to pull your Post data from                                          |\n| contentAuthors         | content/authors |                                         Define where you want to pull your Author data from                                         |\n| authorsPage            |      false      |                                                         Create Author pages                                                         |\n| authorsPath            |    /authors     |                                                   Where should Author pages live?                                                   |\n| rootPath               |        /        |                                                   Define the index of your site                                                     |\n| basePath               |        /        |                      Where should the site be served from? `/blog` will change all paths to start with `/blog`                      |\n| pageLength               |        6        |                      How many posts should be shown per page                      |\n| articlePermalinkFormat |      :slug      | Define the format of the article permalink. Possible values: `:slug`, `:year`, `:month`, `:day`. Example: `:year/:month/:day/:slug` |\n| mailchimp              |      false      |                                             Enable Mailchimp subscriptions on each Post                                             |\n| sources.local          |      true       |                                                Enable local file system data source                                                 |\n| sources.contentful     |      false      |                                                    Enable Contentful data source                                                    |\n\n[View Theme option example](https://github.com/tinialabs/next-starter-novela/blob/master/next-config.js#L36)\n\n\n## Author\n\n[View Author example](https://github.com/tinialabs/next-starter-novela/blob/master/content/authors/authors.yml)\n\n| Key      | Required |  Type   |                                                                 Description                                                                 |\n| -------- | :------: | :----- | :---------------------------------------------------------------------------------------------------------------------------------------- |\n| name     | required | String  |                                The Author's full name which is used should be used as a reference in Posts                                 |\n| bio      | required | String  |                                            The Author's bio which is displayed on the home page                                            |\n| avatar   | required |  Image  |                                                            The Author's avatar                                                             |\n| featured | optional | Boolean |                                              If `true` the Author will appear on the homepage                                              |\n| slug     | optional | String  |                          Override the autogenerated slug based on the Author's name. Do not include any slashes.                           |\n| social   | required |  Array  | A list of social accounts and urls. [View supported icon/name combinations](https://github.com/narative/gatsby-theme-novela/blob/master/%40narative/gatsby-theme-novela/src/components/SocialLinks/SocialLinks.tsx#L15) |\n\n```yml\n- name: Dennis Brotzky\n  bio: |\n    Written by You. This is where your author bio lives. Share your work, your\n    joys and of course, your Twitter handle.\n  avatar: ./avatars/dennis-brotzky.jpg\n  featured: true\n  social:\n    - url: https://github.com\n    - url: https://twitter.com\n\n- name: Thiago Costa\n  bio: |\n    Written by You. This is where your author bio lives. Share your work, your\n    joys and of course, your Twitter handle.\n  avatar: ./avatars/thiago-costa.png\n```\n\n## Post\n\n| Key          | Required |    Type    |                                          Description                                          |\n| ------------ | :------: | :-------- | :------------------------------------------------------------------------------------------- |\n| title        | required |   String   |                  Used as title and generates a default slug. Must be unique.                  |\n| slug         | optional |   String   |                Define a custom slug that will override the default title slug.                |\n| author       | required | String Ref | Must **match** a defined Author name. Co-author posts by adding comma seperated Author names. |\n| date         | required |    Date    |                                       YYYY-MM-DD format                                       |\n| hero         | required |   Image    |                               1200px minimum width recommended                                |\n| excerpt      | required |   String   |                                      140 character limit                                      |\n| subscription | optional |   String   |          If mailchimp is enabled disable the subscription box on an individual Post           |\n| secret       | optional |  Boolean   |           If secret the Post will not appear in paginated lists. Defaults to false.           |\n\n[View Post example](https://github.com/tinialabs/next-starter-novela/blob/master/content/posts/2019-04-31-understanding-the-gatsby-lifecycle/index.mdx)\n\n```yml\n# novela-site/content/posts/2020-01-01/index.mdx\n---\ntitle: Why Narative loves Next.js\nauthor: Dennis Brotzky, Thiago Costa, Brad Tiller\ndate: 2019-04-27\nhero: ./images/narative-gatsby-hero.jpg\nexcerpt: This is a love story about Narative and Next.js\n---\n# And then under the heading YML you can insert any MDX you like\n# like headings, links, code, images, etc\n# This will show up in the body of your post\n# ...\n```\n\n## Site Metadata\n\n| Key           | Required |    Type    |                                                                     Description                                                                     |\n| ------------- | :------: | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------- |\n| title         | required |   String   |                                                            Used for the \u003ctitle\u003e\u003c/title\u003e                                                             |\n| name          | required | String Ref |                                           Used in multiple locations including meta tags and site footer                                            |\n| siteUrl       | required |    Date    |                                                                  Used in meta tags                                                                  |\n| description   | required |   String   |                                                                  Used in meta tags                                                                  |\n| hero.heading  | required |   String   |                                                                  Used in the Hero                                                                   |\n| hero.maxWidth | optional |   number   |                                                          Used in the Hero. Defaults to 652                                                          |\n| social        | required |   Array    | [View supported icon/name combinations](https://github.com/narative/gatsby-theme-novela/blob/master/%40narative/gatsby-theme-novela/src/components/SocialLinks/SocialLinks.tsx#L15). `url` is required and the icon is chosen based on the url. If you also provide `name`, then the icon will be the same as the name you provided as long as the name equals one of the supported icons (See example bellow). Used in site footer and meta tags |\n\n## Why use Novela?\n\nThere are many Next.js themes to choose from. Here’s why we think you won’t regret choosing Novela:\n\n### Multiple Homepage Layouts\n\nChoose between a variable width grid or a simpler list style to display each story.\n\n### Toggleable Light and Dark Mode\n\nOut of the box, Novela includes both light and dark designs that can be toggled by the user anywhere across the site.\n\n\u003cimg src=\"https://raw.githubusercontent.com/tinialabs/next-theme-novela/master/.github/static/gatsby-theme-novela-light-dark.gif\" alt=\"gatsby-novela-theme light dark theme demonstration\" /\u003e\n\n### Simple Customization with [Theme UI](https://theme-ui.com/)\n\nConsistent, easy-to-read code lets you quickly customize every color and setting.\n\n### Show code effortlessly\n\nHigh quality embedded codeblocks that make authoring technical blog posts a breeze.\n\n### Highlight-to-Share\n\nUsers can select text within an article to copy or share to platforms like Twitter and LinkedIn.\n\n\u003cimg src=\"https://raw.githubusercontent.com/tinialabs/next-theme-novela/master/.github/static/gatsby-theme-novela-share.jpg\" alt=\"gatsby-novela-theme light dark theme demonstration\" /\u003e\n\n### Read Time and Progress\n\nRead time is automatically generated for each article based on length, with an animated bar tracking the reader’s progress through each piece.\n\n### Accessibility in Mind\n\nNavigable by cursor or keyboard, readable via screens and screen readers, Novela ensures everyone on the web can read what you write.\n\n\u003cimg src=\"https://raw.githubusercontent.com/tinialabs/next-theme-novela/master/.github/static/gatsby-theme-novela-accessibility.gif\" alt=\"gatsby-novela-theme accessibility demonstration\" /\u003e\n\n# The Future\n\nThis project is early in development and we are interested in creating an even more extensible experience, and increased out-of-box functionality, including:\n\n- Data sources such as Prismic, Sanity, Contentful, Netlify CMS, and others\n- Built in search with Algolia or similar\n- Tags, categories, and more\n- More theme variations\n- More customization options\n\n\u003cdiv\u003e\n\u003ca href=\"https://novela.tinia.vercel.app/\" target=\"_blank\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/tinialabs/next-theme-novela/master/.github/static/gatsby-theme-novela-cta-demo.jpg\" alt=\"gatsby-novela-theme live demo\" width=\"295px\" /\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinialabs%2Fnext-theme-novela","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftinialabs%2Fnext-theme-novela","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinialabs%2Fnext-theme-novela/lists"}