https://github.com/overbrowsing/co2-shield
Assess the environmental impact of your project's web page and showcase it in your GitHub project as a Shields.io badge.
https://github.com/overbrowsing/co2-shield
shields-io sustainability
Last synced: 7 months ago
JSON representation
Assess the environmental impact of your project's web page and showcase it in your GitHub project as a Shields.io badge.
- Host: GitHub
- URL: https://github.com/overbrowsing/co2-shield
- Owner: overbrowsing
- License: mit
- Created: 2024-11-23T16:07:51.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-02-03T21:45:21.000Z (8 months ago)
- Last Synced: 2025-03-05T07:51:40.842Z (7 months ago)
- Topics: shields-io, sustainability
- Language: TypeScript
- Homepage: http://overbrowsing.com/projects/co2-shield
- Size: 49.8 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/co2-shield)
[](https://www.npmtrends.com/co2-shield)
[](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
# 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](https://shields.io") badge. It is powered by [Beacon](https://digitalbeacon.co), which utilises the [OneByte model](https://theshiftproject.org/en/lean-ict-2) 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**](https://overbrowsing.com/projects/co2-shield)
## Features
- **Badge Creation**: Generates a badge using the [Shields.io](https://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
1. **Input a URL**: Type or paste the webpage URL you want to analyse. Ensure it's a valid web address.
2. **Submit the Form**: Press 'Enter' or click 'Submit'. The generator fetches CO₂e data from [Beacon](https://digitalbeacon.co).
3. **View Results**: See the badge, the markdown snippet, and the detailed CO₂e emissions data.
4. **Copy Markdown**: Use the 'Copy' button to copy the markdown and paste it into your project.
5. **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](https://overbrowsing.com):
**Preview**
[](https://overbrowsing.com/projects/co2-shield)
**Markdown**
```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
### Option 1. Install via NPM
To use CO₂ Shield in your project, you can install it via NPM:
```bash
npm install co2-shield
```
After installation, import and use the library in your project:
```javascript
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 `` Tag)
If you prefer not to use a package manager, you can include the library directly in your HTML using a CDN like [UNPKG](https://unpkg.com):
```html
<!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">