Update lesson 9 to use EleventyFetch

[LanesGood]

Closes #31

[netlify]

✅ Deploy Preview for infallible-booth-009020 ready!

Name	Link
🔨 Latest commit	f215fee
🔍 Latest deploy log	https://app.netlify.com/sites/infallible-booth-009020/deploys/65d01352c1b4d000087ab019
😎 Deploy Preview	https://deploy-preview-41--infallible-booth-009020.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[uncenter]

This repository is no longer maintained but I've made a fork of it if you want to check it out. I believe I've already made this update over there as well.
https://learn-eleventy.pages.dev/

[QuiteClose]

TL;DR

Use @uncenter 's fork for an updated site: https://learn-eleventy.pages.dev/

Sticking with the old version? You must npm install @11ty/eleventy-fetch to install the plugin. Eleventy also recommends a specific pattern for e.g. studio.js where we want to catch an exception if the request fails. This worked for me:

import Fetch from "@11ty/eleventy-fetch";

export default async function () {
  try {
    let url = "https://11ty-from-scratch-content-feeds.piccalil.li/media.json";
    let json = await Fetch(url, {
      duration: "1d",
      type: "json"
    });
    return json.items; // eleventy-from-scratch requires the "items" list only 
  } catch (ex) {
    console.error(ex);
    return [];
  }
}

Also note that this uses the ESM rather than the CommonJS module syntax. The module syntax used in the book does not work for me, using the same syntax from the book would change the first three lines like so:

const Fetch = require("@11ty/eleventy-fetch");

module.exports = async function () {