Learn Eleventy Update

I have been putting this off for the longest. I can do that no longer. The working repository for Learn Eleventy is sorely out of date. I have been forever pushing updating it back for far too long. I would have done it last year, but I was out commission for a good chunk of the year.

Eleventy Config Change

The config file has been changes form .eleventy.js to eleventy.config.js; form CommonJS to ES Modules.

That then means const { DateTime } = require("luxon"); becomes import import { DateTime } from "luxon";

Why Is There No Part 8?

As I mentioned in the article for part 8, we were having a look at CloudCannon and I don’t think that is necessary for a Learn Eleventy series. If you are interested that branch is in the repo - it was made by CloudCannon when I linked the repo.

Why Doesn’t the Deployed Version Match What I Have?

Part 9 and 10 now deal with external data, those branches are present in the repo. However, I have chosen not to deploy those branches. The deployed version takes from the last point we had the most base version of Eleventy - that’s part 7 where we added Tailwind.

Change In How Layouts Are Used

When I created the series, we gradually migrated markdown files to nunjucks. The nice about that is the frontmatter we used in markdown work with nunjucks too. There is a bit cleaner way to achieve the same result in my opinion - specifically where we chained layouts…

The change occurs in two places:

Our base.njk file

<main class="max-w-4xl mx-auto min-h-screen py-8">
  {% block content %}
    {{ content | safe }} 
  {% endblock %}
</main>

In the blogLayout.njk file:

{% extends "./base.njk" %} 

{% block content %}

<div class="max-w-prose mx-auto">
  {{ content| safe }}
</div>

<div class="border-t border-gray-400 mt-8"></div>

<div>{% include "partials/_paginate.njk" %}</div>

<div class="border-t border-gray-400"></div>

<div class="mt-6">
  <a href="/blog" class="block text-center text-lg text-cyan-600 ">Blog Home</a>
</div>

{% endblock %}

I like this way probably because one of the first templating languages I ever used was Django’s jinja, and this way is indicative of that

These changes are also present in the deployed branch. Also, those of you that have has a look at my personal site in eleventy will have seen this pattern used extensively.

When you go over Part 9, you will see the number of things we have to do get the response data working

The Tailwind Section

A lot has changed with tailwind since I wrote the article. I have rewritten part 7 to reflect and updated those changes. Worth taking a look at if you intend on using Tailwind.

Additionally, I did test out the plugin made by dwkns. So that is also in the repo, just commented out.

Alternative Method To Use Shortcodes

In an effort to clean-up files, the page header shortcode an be used like below. This isn’t new, we did something similar when we did post pagination in part 10

{% set pageTitle = 'My Page Title' %}
{% set pageSubtitle = 'My Page Subtitle' %}

{% pageHeader pageTitle, pageSubtitle %}

Addition of Prettier

In the original repo, I intentionally left out anything that was close to eleventy. However, I can’t deal with code that isn’t formatted adequately. So I added pretteir, with my defaults.

And because prettier doesn’t support nunjucks by default, I went and installed prettier-plugin-jinja-template to facilitate that.

Update to Hashnode API

In part 9 when we went back to data, we fetched posts from Hashnode. We used an API that is no longer active. Specifically, Hashnode’s API now behind a paywall.

I have made the changes to use the DEV.to API instead. I have written several articles going over how you work with that API. Here are some of them:

While I have implemented it in the repo, I personally don’t do that anymore. My site is the source of truth and I cross post everywhere else. That means if you have also reached the same conclusion I have, you could skip both parts 9 and 10.

I wish you didn’t though. There’s some good lessons there 😉

When you check that branch you will also see that I added the typography plugin to format posts a bit nicer.

Wrapping Up

I have working on this update for some time now. Life has had a strong hold on me. What took the most time was updating the branches - oh what a journey that was…

I am happy however that is is up to date and anyone new who comes to it will be welcomed with current information. I have reflected that change in the first 2 post so the publish dates doesn’t dissuade anyone

Link to this series:

Thank you for reading, let’s connect!

Thank you for visiting this little corner of mine. My email and DMs are always open; if you want to chat or collaborate on something, shoot me a email

Where you can get hold of me: