Blogtimes Eleventy Plugin
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.
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.
Here is a screenshot of what its output looks like:
Why?
I have been building websites and blogging since 1999, starting with hand coded html in notepad, I quickly picked up b2 and soon after WordPress. Around that time I was an avid subscriber to Matt's blog and so when they shared their port of Blogtimes for WordPress (I believe it was the second WordPress plugin,) I immediately gave it a go.
For a number of years, every so often I would remember that histogram but not where it came from. In 2019 I began researching and in 2022 I finally published what I had found in Blogtimes: A trip down memory lane. In January of 2023 Mike Little's post on Mastodon reminded me of this whole escapade and I decided to port the plugin to Eleventy.
18 years ago Matt ported it to WordPress from Sanjay Sheth's b2 version, I have continued that tradition by porting it to JavaScript for use with Eleventy. Long may it continue to be used and toyed with - code is poetry.
You can browse the WordPress versions source over at their trac service .
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
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.