Skip to content
Branch: master
Find file History

README.md

Gatsby Theme

@lekoarts/gatsby-theme-status-dashboard

@lekoarts/gatsby-theme-status-dashboard is released under the MIT license. Current npm package version. Downloads per month on npm. Total downloads on npm. PRs welcome! Follow @lekoarts_de

Show the live statuses of your Netlify and CircleCI builds on your website! Easily integrate the customizable components into your site and adapt them to your theme (utilizing Theme UI).

Demo Website (Source Code)

Also be sure to checkout other Free & Open Source Gatsby Themes

Features

  • Use the theme's components <Info /> and <Grid /> to display:
    • The number of Netlify sites and CircleCI projects you have
    • All public Netlify sites you have in a grid including statuses of CircleCI if configured in the repository
  • Theme UI-based theming
  • Uses the status badges meaning the statuses are live and don't need a re-build

Installation

npm install @lekoarts/gatsby-theme-status-dashboard

Install as a starter

This will generate a new site that pre-configures use of the theme. Perfect for a single-page usage (e.g. https://status.your-domain.tld).

gatsby new status-dashboard LekoArts/gatsby-status-dashboard

View the starter's code

Usage

Theme options

Key Default Value Description
netlifyOptions {} Pass options to gatsby-source-netlify (Read the plugin's documentation

Example usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@lekoarts/gatsby-theme-status-dashboard`,
      options: {
        // netlifyOptions defaults to `{}`
        netlifyOptions: {
          userAgent: `netlify/js-client`
        }
      }
    }
  ]
};

Environment variables

You must have two environment variables configured in your project as the theme relies on them: NETLIFY_ACCESS_KEY and CIRCLECI_KEY. Otherwise the theme can't access information from the source plugins.

You can read gatsby-source-netlify's documentation and gatsby-source-circleci's documentation to learn how to obtain your API keys.

Gatsby also has official documentation on environment variables.

Lastly you should have a look at the example site if you need further help.

Components

This theme doesn't setup an individual page but rather exposes two React components:

  • Info: Displays the number of Netlify websites and CircleCI projects (e.g. "18 Websites" and "7 CircleCI Projects")

  • Grid: Displays the sites in a card grid (using CSS Grid). The individual cards contain the name of the site, links to GitHub and CircleCI, and displays the Netlify deploy status & optionally the CircleCI status

Usage

Import the components into your file and use them like normal React components (see example):

import React from "react";

import { Grid, Info } from "@lekoarts/gatsby-theme-status-dashboard";

const Index = () => {
  return (
    <main>
      <Info />
      <Grid />
    </main>
  );
};

export default Index;

Formatters

The Netlify API doesn't update the paths to GitHub when you e.g. change your username (it'll keep the one from the time you created the Netlify project). As the theme will use the GitHub URLs from Netlify projects to check against CircleCI (to see if it can find CircleCI projects with the same GitHub URL), they need to be the same.

Hence this theme allows to shadow a formatters file. It'll be used to replace words in the URL, e.g. replace LeKoArts with LekoArts. You can find the file in src/utils.

You can’t perform that action at this time.