Display the CO2e of Your GitHub Project as a Shields.io Badge

Published at

Dec 21, 2024

Main Article

https://github.com/overbrowsing/co2-shield

CO₂ Shield

Overview

The CO₂ Shield allows you to assess the environmental impact of your project's web page and showcase it in your GitHub project as a Shields.io badge. It is powered by Beacon, which utilises the OneByte model developed by The Shift Project to calculate emissions.

Live Application

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

→ Open Application

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₂e 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₂e data from Beacon.
View Results: See the badge, the markdown snippet, and the detailed CO₂e emissions data.
Copy Markdown: Use the 'Copy' button to copy the markdown and paste it into your project.
Reset: Use the 'Reset' button to analyse another webpage.

Example

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

Preview

Markdown

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

Rating System

These measurements are for new visitors. Returning visitors have a lower footprint due to caching.

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

Installation

Option 1. Install via NPM

To use CO₂ Shield 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();

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

Option 2. 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-GB">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>CO₂ Shield</title>
</head>

<body>
  <!-- 1. Create the App Container -->
  <div id="app-container"></div>

  <!-- 2. Add the Library via CDN -->
  <script src="https://unpkg.com/co2-shield/dist/index.js" type="module"></script>
</body>

</html>

Contributing

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

License

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

gittech. site