https://github.com/clement-joye/gatsby-source-websitecarbon

Gatsby source for Website Carbon badge api
https://github.com/clement-joye/gatsby-source-websitecarbon

Last synced: 15 days ago
JSON representation

Gatsby source for Website Carbon badge api

• Host: GitHub
• URL: https://github.com/clement-joye/gatsby-source-websitecarbon
• Owner: clement-joye
• License: mit
• Created: 2022-08-06T18:49:08.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-07-21T18:18:42.000Z (over 1 year ago)
• Last Synced: 2024-12-27T03:33:49.705Z (29 days ago)
• Language: JavaScript
• Size: 646 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# gatsby-source-websitecarbon

## Introduction

Gatsby source for Website Carbon api: https://www.websitecarbon.com/api/.

Fetch the data for the defined url from the api and lets you use it via StaticQuery.

_NB: This plugin goes hand in hand with : https://www.npmjs.com/package/react-websitecarbon-badge_

## Install

```bash

yarn add gatsby-source-websitecarbon

```

or

```bash

npm i gatsby-source-websitecarbon

```

## How to use

```js

// In your gatsby-config.js

plugins: [

  {

    resolve: "gatsby-source-websitecarbon",

    options: {

      url: "www.google.com",

      verbose: false,

      nocache: false,

    },

  },

];

// In your component

import React from "react";

import { StaticQuery, graphql } from "gatsby";

const query = graphql`

  query WebsiteCarbonQuery {

    websiteCarbonBadge {

      bytes

      cleanerThan

      green

      timestamp

      url

      originalUrl

      statistics {

        adjustedBytes

        energy

        co2 {

          grid {

            grams

            litres

          }

          renewable {

            grams

            litres

          }

        }

      }

    }

  }

`;

function MyComponent(props: any) {

  return (

     (

        // If using react-websitecarbon-badge

        

      )}

    />

  );

}

export default MyComponent;

```