Now Page: Automatically Syncing My Now Pages

The’s first Community Code Jam has been running for the past week. I took the opportunity to take a look at how to automatically sync my now page to my now page.

I knew this was possible as Robb was already doing it and could point me in the right direction.

To automatically update my now page with the latest updates to my now page, I needed to do the following:

  • Create a new now page layout with in mind.
  • Save the output of the now page template as a .txt file.
  • Use the output of the .txt file to make an API call to to update the now page after the 11ty build process builds my website.

I created a new template layout file, now-omg-layout.njk that includes the same data as my website’s now.njk template layout, but in a format that can be rendered by

Then I created a new page, now-omg-page.njk that only contains YAML front matter that uses now-omg-layout.njk and outputs the contents as a simple text file now-omg.txt.

Finally, to make the magic happen, I defined a new function that makes the API call and updates my now page.

const fs = require('fs');
const dotenv = require('dotenv');

async function updateOMGLol() {
  const omglolkey = process.env.OMG_LOL_KEY;
  const data = fs.readFileSync('./dist/now-omg.txt', 'utf8');

  try {
    const fetch = await import('node-fetch');
    const response = await fetch.default("", {
      method: 'post',
      headers: {
        Authorization: `Bearer ${omglolkey}`,
        'Content-Type': 'application/json'
      body: JSON.stringify({
        content: data,
        listed: 1,

    if (response.ok) {
      console.log('✅ Updated');
    } else {
      console.error(`❌ API call failed with status code: ${response.status}`);
  } catch (error) {
    console.error('❌ API call failed:', error.message);

module.exports = {

Next, I needed to register a new event using eleventyConfig.on('eleventy.after', callback) in my .eleventy.js config file.

// module import events
const { updateOMGLol } = require('./config/events/index.js');

 // 	--------------------- Events ---------------------
  eleventyConfig.on('eleventy.after', async () => {
    await updateOMGLol();

Now whenever the 11ty build process is completed, the updateOMGLol function will be automatically called, making the API call with the data from the generated now-omg.txt file.

I don’t know if I’m going to be hammering the API whenever I’m working on the site locally and constantly building. If you know how I can cache the API request to reduce the number of calls I’m making, let me know!

View this page on GitHub.