11ty Second 11ty: Global Data files (JS and JSON)

In these two videos, we take 110 seconds each to discuss how to use 11ty's Global Data files to pull static data with JSON and dynamic (at build time) data with JavaScript.

11ty JSON Data Files

In this episode, we’re going to talk about Global data files. Specifically JSON data files. So, 110 seconds on the clock, Let’s go!

11ty has a concept of the data cascade, and while we won’t go into details on that in this video, we do need to mention that global data files are the lowest priority, so if you set something in a global data file and change it using the configuration API, the API will overwrite that data

To get started, we have a barebones 11ty site. All we have is an index file. In order to add global data, we need a directory for our files to live. The default is an _data directory.

We’ll create that and a json data file. The name of the file will be the key we’ll use to access the data in our templates. In this case, we'll name it siteSetting.json.

We’ll make a super simple site settings data file. Global information we may want in multiple templates later on.

Then, we’ll put a JSON object here with a few pieces of data. We’re using an object here, but any valid JSON will work including an array.

{
  “name”: “Data Example”,
  “description”: “A data example site for 11ty second 11ty”
}

Once this is saved in, we can access it from our index template (or any other template... it's global, right?).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>11ty Second 11ty: Data Example</h1>
    {{ siteSetting.name }}
    {{ siteSetting.description }}
</body>
</html>

Dynamic Content at Build time with 11ty JS Data Files

Now this works for static content, but what if we want to add some dynamic content per build… say a date for the copyright in our footer.

We can do that with a Javascript Data file

Let’s copy the siteSetting.json file and move it to a settings.js file.

From here, we’ll reformat to use module.exports and export this object

Now, we’ll add a simple copyright property using JavaScript’s built in Date method. We’ll generate the full date time and format it in our template.

module.exports = {
  "name": "settings",
  "description": "Settings for the bot",
  "date": new Date(),
}

Then, we add this to our index.html file

<body>
  <h1>11ty Second 11ty: Data Example</h1>
  {{ siteSetting.name }}
  {{ siteSetting.description }}
  
  {{ settings.date | date: "%Y" }}
  
  </body>

The date is fine, but what if you want to hit another API and get content? JS data files work well for simple cases of this, as well.

First, we’ll make a new data file: pokemon.js

In here, we’ll make an API call to the PokeAPI which is a great simple API for learning purposes. In this case, we’ll use Axios (make sure it’s installed), but node-fetch or the latest node built-in fetch would work as well.

We export a function this time and return an array of items we wish to access. In this case. The response has a data object with a results array

const axios = require('axios');

module.exports = async function () {
    // pokemon api call
    const response = await axios.get('https://pokeapi.co/api/v2/pokemon/?limit=151');
    const pokemon = response.data.results;

    return pokemon
}
<ol>
  {% for pokemon in pokemon %}
      <li>{{ pokemon.name }}</li>
  {% endfor %}
</ol>

These are just the basics of using data files. Anything you can do in JSON or javascript, you can do in these files, including arrays, nesting, making calls to external APIs, transforming data and more.