@grantcodes/footprint-astro/dist/app.js

An Astro integration to show your websites CO2 output in the dev toolbar

import{defineToolbarApp as l}from"astro/toolbar";import{Footprint as p}from"@grantcodes/footprint";var d=`
    :host {
        display: block;
        overflow: auto;
    }

    h2 {
        margin-block-start: 0;
    }

    details {
        margin-block-end: .2em;
    }
    details[open] {
        border-block-end: 1px solid rgba(200, 200, 200, .1);
    }

    summary {
        display: flex;
        font-weight: bold;
        flex-direction: row;
        flex-wrap: wrap;
        cursor: pointer;
        padding-block-end: .2em;
        border-block-end: 1px solid rgba(200, 200, 200, .1);
    }

    summary::before {
        content: '\u25BC';
        margin-inline-end: .5em;
        transform: rotate(-90deg);
        transition: transform .2s;
    }
    details[open] summary::before {
        transform: rotate(0deg);
    }

    summary .amount {
        margin-inline-start: auto;
    }

    table {
        padding-block: .5em;
        width: 100%;
    }

    th {
        text-align: left;
    }

    td {
        padding: 2px;
    }

    .amount {
        text-align: right;
        font-family: monospace;
    }
    th.amount {
        font-family: inherit;
    }

    .warning {
        color: #f00;
    }
`;var s=class extends HTMLElement{_footprint;constructor(){super(),this.attachShadow({mode:"open"})}set footprint(t){this._footprint=t}get footprint(){return this._footprint}get categories(){let t=this.footprint,o=t.getByCategory("html"),e=t.getByCategory("css"),r=t.getByCategory("js"),n=t.getByCategory("media"),c=t.getByCategory("other");return[{name:"HTML",description:"The base html document",resources:o},{name:"CSS",description:"First and 3rd party CSS loaded on th`is page",resources:e},{name:"JavaScript",description:"First and 3rd party JavaScript loaded on this page",resources:r},{name:"Images",description:"Images loaded on this page",resources:n},{name:"Other",description:"Everything else, and anything this tool failed to recognize",resources:c}]}async connectedCallback(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=this.render())}renderResource(t){return`
        <tr class="${t.co2>1?"warning":""}">
            <td>${t.name.replace(window.location.origin,"")}</td>
            <td class="amount">${t.sizeString} ${t.isEstimated?"(estimate)":""}</td>
            <td class="amount">${t.co2.toFixed(3)}g</td>
        </tr>
    `}renderCategory(t){return`
        <details>
                <summary>
                    <span class="category">
                        ${t.name}
                    </span>
                    <span class="amount">
                        ${t.resources.totalCo2.toFixed(3)}g
                    </span>
                </summary>
            <table>
                <thead>
                    <tr>
                        <th>Resource</th>
                        <th class="amount">Size</th>
                        <th class="amount">CO2</th>
                    </tr>
                </thead>
                <tbody>
                    ${t.resources.map(o=>this.renderResource(o)).join("")}
                </tbody>
            </table>
        </details>
    `}render(){let e=this.footprint.resources.totalCo2,r=this.categories.filter(n=>n.resources.totalCo2>0).map(n=>this.renderCategory(n)).join("");return`
        <style>${d}</style>
        <h2>Page total CO2 ${e.toFixed(3)}g</h2>
        ${r}
    `}};var a=new p(performance);a.ignored=[/\/node_modules\/astro/,/\/node_modules\/vite/,/\/node_modules\/.vite/,/\/@vite\/client/,/\/@id\/astro/,/\/@grantcodes\/footprint-astro/];window.customElements.define("footprint-astro",s);var F=l({init(i,t){let o=()=>{let e=document.createElement("astro-dev-toolbar-window"),r=document.createElement("footprint-astro");r.footprint=a,e.appendChild(r),i.append(e),a.resources.totalCo2>1&&t.toggleNotification({state:!0,level:"warning"})};document.readyState==="loading"?window.addEventListener("DOMContentLoaded",()=>setTimeout(o,3e3)):setTimeout(o,3e3)}});export{F as default};