Group examples and their assets in directories

[alex-ju]

This PR restructures src so that:

• avoids assets duplication when deployed
• minimises the size of the assets being downloaded (which also helps workbox-service-worker by @Nooshu to have a minimum size)
• each example sits with its own assets in a folder, so it's clear by which is being used
• common/shared assets are being used at the component/pattern level

Below is an example of the output for the Addresses pattern

Output

Before

.
├── address-wrapper.css
├── index.html
├── multiple
│   ├── address-wrapper.css
│   ├── index.html
│   └── passports-address-lookup-1_.gif
├── passports-address-lookup-1_.gif
└── textarea
    ├── address-wrapper.css
    ├── index.html
    └── passports-address-lookup-1_.gif

After

.
├── index.html
├── multiple
│   ├── address-wrapper.css
│   └── index.html
├── passports-address-lookup-1_.gif
└── textarea
    └── index.html

[govuk-design-system-ci]

You can preview this change here:

Built with commit f3d1674

https://deploy-preview-274--govuk-design-system-preview.netlify.com

[Nooshu]

Great change @alex-ju, this really helps with the repetitive code a across the codebase. I investigated and solved it in a slightly different way.

I changed the metalsmith.js file to:

.use(sass({
    includePaths: ['node_modules'], // an array of paths that sass can look in when attempt to resolve @import declarations
    outputDir: 'stylesheets/'
}))

and views/layouts/layout-example.njk to:

<link href="/stylesheets/{{ stylesheet }}" rel="stylesheet" media="all" />

Essentially all the CSS is being generated into the root stylesheets directory then it is referenced from there. But this may be a massive oversimplification and may have unknown consequences when it comes to the deployment. So I'm happy to take your lead on these changes.

[alex-ju]

@Nooshu that's a slick approach; the only downside is that it's only dealing with the CSS. We may be able to replicate the behaviour (grabbing files from different sources and place it into one folder when published) for JavaScript, but unfortunately it won't solve the generic assets problem (i.e. images, archives, etc).

Based on your solution (and an alternative for grouping the assets in its own directory for each example) we can group all the assets across components/patterns/styles in a single assets folder at the root level.

I'm waiting for others opinion on this one and if the one above seems like a better approach I'll raise a separate PR with it.

[alex-ju]

Would be good to have some feedback on this, otherwise I'll have to keep rebasing it for each example that gets merged.

[kr8n3r]

I like this approach and hopefully update imports in these scss files won't bloat the filesize