Inject Infi-specific things during build pipeline

[jeroenheijmans]

We have #40 already to make some of our texts and content more broadly applicable. Still, in some places, "Infi" and our logo will remain visible in the https://way.infi.nl version.

We want the repository itself to be mostly free of "Infi" and our logo to simplify choices in #22 (licensing). Instead we can inject it during build, falling back to a proper default ("Our Org" or something like that), so that the "live" version is Infi-specific, but other people can clone this repository and fork things to their own liking.

[jeroenheijmans]

We talked about this some more offline. To clarify, the ultimate (stretch?) goal for this repository would be to allow users to freely fork it and publish from their own fork, with changes they see fit. To facilitate that we only want our own "name" and logo to be attached to our own published version. Getting our name and logo into the build system and out of the repository is a good first step towards this.

@danielfinfi and I brainstormed implementation ideas, he'll have a look at what's possible and come up with a proposal.

[danielfinfi]

I have a first approach live at this location https://warm-churros-5d9383.netlify.app/
Branch comparison: main...danielfinfi:the-infi-way:inject-infi-during-build

The idea behind is as follows:

1. Replace usage of our name and logo through environment variables or, if those are not present, use default values given in a Json from the repository. These environment variables can be set within Netlify under Site Settings > Environment Variables.
2. Images are supported via the data: scheme through a base64 encoded string.

TODOs / Unknowns:

1. Still have to figure out what to do with the first line of the footer, but I think it should be possible to follow the same approach.
2. I'm not sure however what kind of security issues we'd be opening by allowing data: as image source. Any idea?

Improvements:
A possible improvement, as suggested offline by @LucaScorpion, and which I also agree with, would be to perform the replacement through the same template system. We would need however to:

1. Add values from environment variables beginning with TIW (The Infi Way) to each content (in memory) as extra properties.
2. Have a way of first replacing the tags within the content with the values from the environment variables, before replacing the tags within the template with the updated content. For example, the [TIW_ORG_NAME] token that is present in the en and nl content files in the branch referenced above.

Any ideas and critique are welcome!

[jeroenheijmans]

I like this approach! Great effort.

Some replies and additions:

• AFAIK there are no security implications with data: URI's f they're from a trusted source (and not "user content" in a web app)
• To keep an alternative open (should we need it) we can also have way-mini-cdn.infi.nl deployed from a related repository, and host images from there, hotlinking them from that other subdomain (and have the CSP's allow images from that subdomain) - the local dev experience could then just link to a generic image in the main repo
• The first line of the footer could be done by the build.js file, but remember we can go for "simple" for quite some time, so having a template-footer.html file if there's no environment variable with its content could work?
• I found these lines of code / comments if you can please include those in your PR. I reckon just removing it is fine, or replacing it with some other easter egg that's org-neutral

In general though I'd say we continue on this route!