Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle Sheets iconSwift icon
Published at
Updated at
Reading time
1min

I came across a nifty eleventy trick shared by Hugo Giraudel. They shared that it only takes a few lines of JavaScript to display the time when an eleventy site was generated. The implementation you find in this site's footer took me two minutes. ๐ŸŽ‰

One thing that amazes me about eleventy is its flexible data layer. There are multiple ways to feed the build process with data to display. The options range from static JSON files to promises-based JavaScript functions.

For this site, I use a config.js data file that holds a lot of configuration and now it includes a builtAt field.

// config.js
module.exports = {
  // bunch of other stuff
  // ...
  builtAt: new Date().toLocaleString(),
};

In my templates (I use Nunjucks), I can now access the config.js data to display when the site was built.

<p>
  This site was rebuilt at <strong>{{config.builtAt}}</strong>using the CEN stack
</p>

Thanks Hugo, for sharing this nifty trick!

Edit: Eleventy 1.0 comes with addGlobalData

Eleventy's first major release includes the addGlobalData method. And as Raymond Camden describes, it's a perfect util function to display the last build's timestamp.

eleventyConfig.addGlobalData('generated', () => {
  let now = new Date();
  return new Intl.DateTimeFormat(
    'en-US', { dateStyle: 'full', timeStyle: 'long' }
  ).format(now);
});
Was this snippet helpful?
Yes? Cool! You might want to check out Web Weekly for more snippets. The last edition went out 11 days ago.

Related Topics

Related Articles