Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 8, 2022 05:22 pm GMT

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, were going to talk about Global data files. Specifically JSON data files. So, 110 seconds on the clock, Lets go!

11ty has a concept of the data cascade, and while we wont 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.

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

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

Then, well put a JSON object here with a few pieces of data. Were 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

Lets copy the siteSetting.json file and move it to a settings.js file.

From here, well reformat to use module.exports and export this object

Now, well add a simple copyright property using JavaScripts built in Date method. Well 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, well make a new data file: pokemon.js

In here, well make an API call to the PokeAPI which is a great simple API for learning purposes. In this case, well use Axios (make sure its 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.


Original Link: https://dev.to/brob/11ty-second-11ty-global-data-files-js-and-json-566o

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To