Choose to view the demo for:

Grid Aware Website using Power Breakdown

This page uses power consumption data from Electricity Maps to determine if the clean power sources used on your the energy grid in your location are over certain value. Based on that, some of the design and content loaded by this page will change.

Colours

You're seeing the page in light mode, which means either your local electricity grid is using more than 50% renewable energy, or that no data was available for your region.

Fonts

You're also seeing a custom font (Depature Mono) used on this page.

Data

This page has been modified based on the below data:

How does it work?

This page uses the grid-aware-websites code library to get the current energy grid data from Electricity Maps. Based on the response, it will either return the regular site, or modify parts of the site to apply some low-impact web design practices (explained above).

All of this work takes part in a Cloudflare Workers, meaning there is no JavaScript execution on the client device for any of this to happen.

High-level diagram

A diagram showing the flow of data via a web request from the browser, through an edge function, to the host server, and back.
A high-level diagram showing the ideas behind the `grid-aware-websites` project.

Edge worker diagram

A diagram showing the operations inside an edge worker. First a fetch request is made to get a webpage from the host. Then, a request is made to the Electricity Maps API to fetch power breakdown data for the electricity grid of the user. With this data, a check is performed to determine if grid-aware design changes should be applied.
A more detailed diagram showing the process that takes place inside the edge worker to determine if grid-aware design should be applied.

Code snippet running on Cloudflare Workers

This is a simplified snippet from the Cloudflare Workers that works on this page.

        
// Import the things we need from the grid-aware-websites library
import { gridAwarePower } from '@greenweb/grid-aware-websites';
import { getLocation } from '@greenweb/gaw-plugin-cloudflare-workers';

export default {
    async fetch(request, env, ctx) {
        // First fetch the request
        const response = await fetch(request.url);
        // Then check if the request content type is HTML. If not, return the request as is.
        const contentType = response.headers.get('content-type');

        if (!contentType || !contentType.includes('text/html')) {
            return new Response(response.body, {
                ...response,
            });
        }

        // If the content type is HTML, we can then do the grid-aware checks, based on the user location.
        // Here we use the country, but you could also use lat-lon.
        let cfData = cloudflare.getLocation(request);
        let { country } = cfData;

        // If we can't get that information, return the response as it is.
        // We also add a header to the response to show that the country was not found. (optional)
        if (!country) {
            return new Response(response.body, {
                ...response,
                headers: {
                    ...response.headers,
                    'grid-aware': 'Error - Country not found',
                },
            });
        }

        // Fetch the grid data from Electricity Maps via the grid-aware-websites library
        const gridData = await gridAwarePower(country, 'AN_API_KEY_HERE');

        // If the grid data status is error, return the response as is.
        if (gridData.status === 'error') {
            return new Response(response.body, {
                ...response,
                headers: {
                    ...response.headers,
                    'grid-aware': 'Error - Unable to fetch grid data',
                },
            });
        }

        // If the gridAware value is set to true, we add a data-grid-aware attribute to the HTML tag of the page using the HTMLRewriter
        if (gridData.gridAware) {
            const rewriter = new HTMLRewriter()
                .on('html', {
                    element(element) {
                        element.setAttribute('data-grid-aware', 'true');
                    },
                })
                
                // ... Add more rewriter rules here. I have removed them for brevity.

            // Return the response with the rewriter applied
            // You can also return some of the grid-aware data in the headers of the response if you want.
            return new Response(rewriter.transform(response).body, {
                ...response,
                contentType: 'text/html',
                headers: {
                    ...response.headers,
                    'grid-aware': 'true',
                },
            });
        }


        // Otherwise, if the gridAware value is false, we return the response as is.
        // Again, we can add some headers to the response to show that the page is not grid-aware.
        return new Response(response.body, {
            ...response,
            contentType: 'text/html',
            headers: {
                ...response.headers,
                'grid-aware': 'false',
            },
        });
    },
};

Choose to view the demo for: