@photogabble/eleventy-plugin-blogtimes

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

• node canvas
• bdf-canvas
• git-log-parser

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.