co2-shield
v1.0.4
Published
Calculate the environmental impact of a webpage and display it in your GitHub project as a Shields.io badge.
Downloads
118
Readme
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 Application
You don't need to download or initialise anything to use this application. Visit the live version here:
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
[](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
Install via NPM
To use CO2Shield in your project, you can install it via NPM:
npm install co2-shieldAfter 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.
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>CO₂ Shield Generator</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 Generator is released under the MIT license. Feel free to use and modify it as needed.