Never Pummel Muskoxen

    @lekoarts/gatsby-theme-status-dashboard

    3.0.1 • Public • Published

    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. Website 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).

    Live Preview

    Read the Source Code.

    Also be sure to check out other Free & Open Source Gatsby Themes and my Personal Website.

    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 set up 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 * as 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.

    Shadowing

    Please read the guide Shadowing in Gatsby Themes to understand how to customize the theme! Generally speaking you will want to place your files into src/@lekoarts/gatsby-theme-status-dashboard/ to shadow/override files. The Theme UI config can be configured by shadowing its files in src/gatsby-plugin-theme-ui/.

    Changelog

    You can find the extensive changelog of changes on GitHub. You'll be able to see each patch, minor, and major changes and what pull requests contributed to them.

    Questions?

    If you have general questions or need help with Gatsby, please go to one of the support platforms mentioned in Gatsby's documentation. If you have a specific question about this theme, you can head to the GitHub Discussions of the repository.

    🌟 Supporting me

    Thanks for using this project! I'm always interested in seeing what people do with my projects, so don't hesitate to tag me on Twitter and share the project with me.

    Please star this project, share it on Social Media or consider supporting me on Patreon or GitHub Sponsor!

    Install

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

    DownloadsWeekly Downloads

    162

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    46.1 kB

    Total Files

    19

    Last publish

    Collaborators

    • lekoarts