co2-shield
Version:
Calculate the environmental impact of a webpage and display it in your GitHub project as a Shields.io badge.
112 lines (73 loc) • 4.63 kB
Markdown
[](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 `<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](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"></script>
</body>
</html>
```
## Contributing
Contributions are welcome. Please feel free to [submit an issue](https://github.com/overbrowsing/co2-shield/issues) or a [pull request](https://github.com/overbrowsing/co2-shield/pulls).
## License
CO₂ Shield is released under the [MIT](/LICENSE) license. Feel free to use and modify it as needed.