Add preview of components to documentation website

[frankieroberto]

This lets you see what each component looks like, as well as the code to generate it, in a similar way to the GOV.UK Design System website and GOV.UK Component for Ruby on Rails website.

Screenshots

Before

After

[paulrobertlloyd]

This is God’s work @frankieroberto! Thanks for taking it on. Left a few initial comments, will wait until these and the other todo items are done before taking a closer look.

P.S. Guess we’re gunna need a homepage illustration, huh? 😊

[paulrobertlloyd]

Do we need a separate package.json for the docs? On the other projects we add dev dependencies and scripts for building/previewing the docs to the package.json in the root. Probably simpler.

[paulrobertlloyd]

Indeed, the current GitHub Actions workflow will look for a npm run build in that package to deploy the site to GitHub pages.

[frankieroberto]

I was assuming we’d have a separate package.json and update the build script. I think they need to be separate as a package can’t depend on itself?

[paulrobertlloyd]

As to resizing iframes, I think the GOV.UK docs use https://github.com/davidjbradshaw/iframe-resizer

[frankieroberto]

@paulrobertlloyd thanks for the first look. I've addressed most of the comments, but still need to figure out why the autocomplete isn't working (any ideas?) and how to get iframe-resizer working (can't immediately see how to add javascript to the govuk-eleventy-plugin).

[paulrobertlloyd]

Done with my fiddling, and got it working with one package.json and so similar set up to its sister project repos.

Feel free to squash and merge!