Gatsby Theme Help Center screenshot

Gatsby Theme Help Center

Author Avatar Theme by Mlent
Updated: 30 May 2020
103 Stars

A Gatsby theme for your knowledge base or help center

Overview:

This Gatsby theme is designed for creating a knowledge base or help center for your product. It provides features like categories with images, titles, and descriptions, SEO and sharing metadata for rich previews and social markup, MDX for writing articles, customization options for logo, links, and colors, featured and related articles, and more.

Features:

  • Categories: Create categories with images, titles, and descriptions.
  • SEO and Sharing Metadata: Rich previews, social markup, and SEO metadata.
  • MDX: Write articles using MDX format.
  • Customization: Customize the logo, links, colors, and some terms.
  • Featured Articles: Display featured articles on the home page.
  • Related Articles: Display related articles at the bottom of other articles.

Installation:

To create a new Gatsby site with this theme, you can use the gatsby-starter-help-center repository. Alternatively, you can manually install the theme by following these steps:

  1. Install the theme by running the following command in your terminal:

    yarn add @mlent/gatsby-theme-help-center
    
  2. Edit your gatsby-config.js file to include the theme. Add the following code to the plugins array:

    module.exports = {
      plugins: [
        {
          resolve: "@mlent/gatsby-theme-help-center",
          options: {
            // Theme options
          },
        },
      ],
    };
    
  3. Customize the site metadata by editing the src/@mlent/gatsby-theme-help-center/components/CustomHead.tsx file. Add custom meta tags or other external scripts as needed.

  4. Create categories by creating a YML file at src/data/categories/data.yml and providing the categories in the desired format.

  5. Create articles by creating MDX files in src/data/pages and providing the frontmatter for each article.

  6. Customize the colors by editing or creating a file at src/@mlent/gatsby-theme-help-center/themes/colors.ts. The COLORS.primary value is used for the hero stripe and the colors of links. Ensure that the contrastText is set appropriately to ensure legibility.

Summary:

This Gatsby theme is specifically designed for creating a knowledge base or help center for a product. It offers features such as categories with images, titles, and descriptions, SEO and sharing metadata, MDX for writing articles, customization options for logo, links, and colors, as well as featured and related articles. The installation process involves adding the theme as a plugin in the gatsby-config.js file and customizing various aspects such as site metadata, categories, articles, and colors.