Chris Draycott-Wheatley

Show your Eleventy leaderboard rank on your site

Eleventy has its own leaderboard for sites built with it.

Submitted sites get tested with Lighthouse and axe and are ranked based on performance and accessibility.

You can submit your site to the 11ty-website repo. Once approved the leaderboard will include your site the next time it's generated.

Here's a way to grab the metrics and share your rank on your own 11ty site.

To get started we'll need to add a new dependency, @11ty/eleventy-cache-assets :

npm install @11ty/eleventy-cache-assets --save-dev

Next, create a new file in the data directory (defaults to _data) called rank.js.

Add the following code to the file, changing the SITE value to your website URL minus the protocol.

const CacheAsset = require("@11ty/eleventy-cache-assets");

const SITE = "chrisdwheatley.com";

module.exports = async () => {
try {
const json = await CacheAsset(
`https://eleventy-leaderboard-api.netlify.app/v1/leaderboard/${SITE}.json`,
{
duration: "1d",
type: "json",
}
);

return json;
} catch (error) {
console.warn(`Unable to generate rank data due to ${error}`);
}
};

Here we're fetching our site from a small API I've put together. The API scrapes the Eleventy leaderboard website and creates an endpoint for each listed site (built using Eleventy of course 😊).

Here's an example response:

{
"rank": 99,
"url": "chrisdwheatley.com/",
"lastUpdated": 1602705857660
}

We use the @11ty/eleventy-cache-assets module to fetch and cache the API response. This means each build doesn't need an API call, helping keep things nice and snappy.

The code caches data for a day, feel free to change this if you want.

You can access your site's rank data using the rank variable in your templates.

For example, when using Nunjucks {{ rank.rank }} will display your sites rank.