Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SPIKE] [WIP] 11ty spike #2750

Draft
wants to merge 21 commits into
base: main
Choose a base branch
from
Draft

[SPIKE] [WIP] 11ty spike #2750

wants to merge 21 commits into from

Conversation

domoscargin
Copy link
Contributor

@domoscargin domoscargin commented Apr 24, 2023

What

This spike builds on earlier work to investigate the feasibility of replacing Metalsmith with Eleventy for building the Design System Website.

Why

We chose to build the site with Metalsmith back in 2017, before the static site generator ecosystem had matured (eleventy, for example, had its first commit in November 2017).

From 2018 to 2021, Metalsmith was barely maintained, and we had to do some slightly awkward workarounds as we build functionality (probably the most obvious example of this was naming all our markdown files .md.njk, so that we could process the Nunjucks first using metalsmith-in-place).

Metalsmith's maintenance has picked up recently, but there are a lot of intriguing alternatives that are well-maintained and have a healthy community.

Eleventy has built-in support for a lot of the stuff we want to do (eg: the aforementioned Nunjucks within Markdown processing, and built-in watching/serving). It's also fast, and should solve a current problem we have with needing to rebuild the entire site when we change files during development.

Findings

We stripped back the repo to a bare minimum, dropping dependencies in order to figure out how to migrate to eleventy. I've slowly added features back in, trying to do so in a more eleventy-appropriate fashion, until the code compiles. There's a pretty big diff file, though - none of the navs are rendering, for example, but eleventy has a very different way of generating navs.

Next steps would be to work toward there being no diff in the compiled output, which would involve a bit more work to "eleventy-ise" the repo. Also to serve and watch the site using eleventy's dev server. Once we reach parity with the current set up, we could explore leaning more into eleventy, or figure out an iterative way to switch with the least amount of change if we decided that we did want to switch.

We should also decide if we even need to leave Metalsmith - we've removed a lot of outdated plugins (and figured out how to change our .md.njk files to plain ol' .md), it's pretty well maintained right now, and there are plans for a built-in watch server which should speed up rebuilds.

This work could tie into ongoing content audit work.

lfdebrux and others added 21 commits January 9, 2023 16:00
We want to migrate everything to eleventy. Rather than trying to figure
out what isn't needed, it's easier to just figure out what is needed.
We want to see what eleventy can do for us without custom scripts.
Finds layouts and partials, but not from govuk-frontend.
It wasn't catching the `.eleventy.js` file.
Now `npx eleventy` is failing because some custom globals are not
available.
eleventy includes slugify by default, so let's try using that instead of
slugger. This might break some links though, we'll need to keep an eye
on it.
eleventy has an official syntax highlighter plugin, but until we can consistently check the compiled site, we'll stick with what we had before.
I figured out (by accident) that the `trim` error was occuring in
`getHTMLCode`, this commit makes it print the error that prevents it
from being able to get HTML from a file.
Just move all the template path info to the function itself for now. Can refactor more DRY-ly later!
eleventy now successfully compiles to `deploy/public`, with a bunch of quirks.

Next steps are to squash the diffs between what the current compiled website looks like, and what eleventy produces.

Following that, refactoring the whole lot and getting rid of unneeded code [might be beyond the scope of this spike]
@netlify
Copy link

netlify bot commented Apr 24, 2023

You can preview this change here:

Name Link
🔨 Latest commit 81e5202
🔍 Latest deploy log https://app.netlify.com/sites/govuk-design-system-preview/deploys/6446e1ca8d41310008d4b8a0
😎 Deploy Preview https://deploy-preview-2750--govuk-design-system-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@querkmachine
Copy link
Member

Regarding navigation: I've always found the first-party Eleventy Navigation plugin to be a bit naff. Configuring it is pretty verbose and is split across the frontmatter of several files, making updates often a bit awkward, and the way it describes parent–child page relationships is also pretty flaky, in my experience.

If we also end up finding it a bit awks, it might be worth trying to reproduce our existing navigation code in a global JavaScript data file instead.

@webketje
Copy link
Contributor

RE: metalsmith

there are plans for a built-in watch server which should speed up rebuilds.

Landed in 2.6.0: https://metalsmith.io/news/2023-05-30/metalsmith-2.6-released/
Rough working implementation with partial rebuild + browser-sync here: https://github.com/metalsmith/metalsmith.io/blob/master/metalsmith.js#L197.

Improvements for the in-place plugin's limitations are on the radar and will be tackled when bandwidth allows (tracked in
metalsmith/in-place#179 (comment), PR's welcome)

Thank you for sharing the pain points during metalsmith development, it's hard to get by valuable feedback!

@colinrotherham
Copy link
Contributor

colinrotherham commented Jun 21, 2023

Thanks @webketje, appreciate the reply

Rough working implementation with partial rebuild + browser-sync here: https://github.com/metalsmith/metalsmith.io/blob/master/metalsmith.js#L197.

Update: Moved comments to a PR to try it out but raised an issue to discuss there instead

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants