Eleventy.js Blogtimes Plugin

Bringing Blogtimes to 11ty

git npm

Blogtimes is a plugin for the Eleventy static site generator, written in JavaScript. Given a directory with a valid git repository it will generate a histogram of commit times over 24 hours defaulting to within the past 30 days.

A black and white histogram showing 24 hours with vertical lines showing when edits where made. The lines have a transparency and so the darker lines show more edits during that time.

Look at all those late nights...

It's a direct port from PHP of the WordPress plugin Blogtimes, which was itself ported to WordPress by Matt Mullenweg from b2 in 2003.

You can read Writing Blogtimes for Eleventy.js to find out why this exists, suffice to say, it's a hommage to a simpler time.

Install

npm i @photogabble/eleventy-plugin-blogtimes

Configuration

type EleventyPluginBlogtimesOptions = {
width?: number, // Image Width, default: 480
height?: number, // Image Height, default: 80
title?: string, // Title output top left, default: 'Git Commits'
lastXDays?: number, // Time period in days, default: 30
hPadding?: number, // Padding top and bottom, default: 5
vPadding?: number, // Padding left and right, default: 5
showTicks?: boolean, // Show ticks, default: true
unitName?: string, // Units, displayed centered at bottom, default: 'hour of day'

outputFileExtension: string, // Image mimetype, default: 'png, must be either png or jpg
outputDir: string, // Image output directory, default: 'bt-images'
urlPath: string, // Image url path, default: 'bt-images'
hashLength?: number, // Image filename hash length, default: 10

generateHTML?: Function,
}

Usage

In your Eleventy config file (defaults to .eleventy.js):

module.exports = (eleventyConfig) => {
eleventyConfig.addPlugin(require('@photogabble/eleventy-plugin-blogtimes'),{});
};

You will now be able to use the blogtimes shortcode in your templates:

{% blogtimes %}

By default, blogtimes will process the git stats for the repository its run in. You can change that by passing an absolute path to the shortcode.

Libraries in use

Roadmap

I consider this project feature complete. However, I will be maintaining its dependencies, and ensuring it functions on all future versions of #11ty for as long as I continue using it as a static site generator.

License

This 11ty plugin is open-sourced software licensed under the MIT License. Also included in this repository
are classic X Window System bitmap fonts which are considered to
be public domain.

Page History

This page was first added to the repository on March 1, 2023 in commit e5f5b5bd and has since been amended 4 times. View the source on GitHub.

  1. refactor(#304): move files into src folder
  2. refactor: sub_title -> subTitle
  3. chore: add some auto colouring
  4. feat: add content for 11ty.js blogtimes plugin
  5. chore: add stub project pages