co2-shield

v1.0.2

Published

3 days ago

A tool to generate CO2 badges for websites

Downloads

117

0High
0Medium
0Low

printer_scanner

headless.horse

CO2 badges web npm

CO₂ Shield Generator

Overview

The CO₂ Shield Generator lets you calculate the environmental impact of a webpage and display it in your GitHub project as a shields.io badge, powered by Beacon, which uses the OneByte model for calculating emissions created by The Shift Project.

Live Tool

You don't need to download or initialise anything to use this tool. Visit the live version here:

👉 CO₂ Shield Generator

Features

Badge Creation: Generates a badge using the Shields.io service.
Markdown Output: Provides a markdown snippet to embed the badge in project documentation.
Rating Details: Displays the CO₂ emissions per webpage view, along with a breakdown of ratings.

How to Use

Input a URL: Type or paste the webpage URL you want to analyse. Ensure it's a valid web address.
Submit the Form: Press 'Enter' or click 'Submit'. The generator fetches CO₂ data from Beacon.
View Results: See the badge, the markdown snippet, and the detailed CO₂ emissions data.
Copy Markdown: Use the 'Copy' button to copy the badge's markdown and embed it in your projects.
Reset: Use the 'Reset' button to analyse another webpage.

Example

Here's an example of a badge and markdown generated by the tool for our website's homepage overbrowsing.com:

Preview

Markdown

[![CO₂ Shield](https://img.shields.io/badge/CO₂-A+_0.041g-58C521)](https://https://overbrowsing.com/co2-shield/)

Rating System

The rating is based on the grams of CO₂e produced per webpage view for new visitors. Returning visitors have a lower footprint due to caching. The ratings are defined as follows:

| Rating | Color | CO₂e Emissions per View | | ------ | ---------------------------------------------------------- | ----------------------- | | A+ | | Less than 0.095g | | A | | Less than 0.185g | | B | | Less than 0.34g | | C | | Less than 0.49g | | D | | Less than 0.65g | | E | | Less than 0.85g | | F | | Above 0.85g |

Dependencies

Digital Beacon API for fetching CO₂ data.
Shields.io for badge generation.
Fetch API for HTTP requests.
Clipboard API for copying markdown text.

Installation

Install via NPM

To use CO2Shield in your project, you can install it via NPM:

npm install co2-shield

After installation, import and use the library in your project:

import CO2Shield from "co2-shield";

const co2Shield = new CO2Shield("app-container");
co2Shield.initialize();

Note: Ensure you are running your project with a bundler like Webpack, Vite, or Parcel that supports ES modules.

Install for Vanilla JS (Using a `<script>` Tag)

If you prefer not to use a package manager, you can include the library directly in your HTML using a CDN like UNPKG:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CO2 Shield</title>
  </head>
  <body>
    <div id="app-container"></div>

    <!-- Include CO2Shield via UNPKG -->
    <script src="https://unpkg.com/co2-shield/dist/co2-shield.bundle.js"></script>

    <script>
      window.onload = () => {
        const co2Shield = new CO2Shield("app-container");
        co2Shield.initialize();
      };
    </script>
  </body>
</html>

Contributing

Contributions are welcome. Please feel free to submit an issue or a pull request.

License

CO₂ Shield Generator is released under the MIT license. Feel free to use and modify it as needed.