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.
You don't need to download or initialise anything to use this application. Visit the live version here:
- 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.
- 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.
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)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 |
To use CO₂ Shield 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.
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</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>Contributions are welcome. Please feel free to submit an issue or a pull request.
CO₂ Shield is released under the MIT license. Feel free to use and modify it as needed.