feat: implement dynamic license badge component

[theonesean]

Closes #23.

This PR implements the first pass of a shields.io badge component that dynamically updates based on the selected license modules. It fully supports full/core license versions. Super-long badges will horizontally scroll.

It also adds a section to copy the Markdown code for the badge for README embeds. A copy button automagically copies the code to clipboard.

It also adds some utility functions: getLicenseString, isCoreLicense, isFullLicense, and copyToClipboard, that were useful in the implementation in this component, and may be useful elsewhere in the project. Test coverage was extended to include the new utility functions.

Getting there

• I built myself a gosh-darned web component! Wowzers!

Interesting bits

• I decided to extend the helper functions to return the string of the specific license configuration, rather than write that logic all in the component, for easier code reuse.

What's next

I did uncover a styling bug where, on desktop screen sizes, the license builder sidebar is cut off at shallow screen heights. I'll open an issue with more details!

[netlify[bot]]

✔️ Deploy Preview for hl3 ready!

🔨 Explore the source changes: 83887c7793fc254d930370e73465177688288b53

🔍 Inspect the deploy log: https://app.netlify.com/sites/hl3/deploys/6229010ce4f61e0008d773db

😎 Browse the preview: https://deploy-preview-43--hl3.netlify.app/build

[theonesean]

After checking the preview, looks like my styles aren't being applied there either.

[theonesean]

If the license-builder.helper.mjs grows much more maybe we'll need to split that and the test file into some other fitting organization. Or find some way to consolidate code while still being readable. ♻️

Yeah, I agree that if we are adding much more to the helper functions module, then we should split it. For now, though, four or five functions seems fine to me! All are documented and the file isn't overwhelming to look at/use IMO. But good to note for the future!

[theonesean]

Badge looks like this!

[CoralineAda]

💯 Looks so good! What do you think about using the OES color scheme for the badge? Happy to provide. :)

[theonesean]

@CoralineAda Love any ideas for new color schemes! I tried to match it to the badge design we talked about many months ago, but pls let me know other colors I can swap in. 😄

[CoralineAda]

I'm thinking OES purple (#5e2751) for the left side, OES gold (#bc8c3d) for the right?

[theonesean]

This coloring looks super pretty! And it sets us apart, slightly, from the sea of other badges. 😄

[theonesean]

@nilsnh I opened #44 to address that issue I saw in testing!

[nilsnh]

@nilsnh I opened #44 to address that issue I saw in testing!

Ah, excellent. :) Then feel free to merge this and then work can continue in that issue @theonesean .

[theonesean]

@CoralineAda @nilsnh Should I merge my own PR? Not sure of our project etiquette here :D

[CoralineAda]

@theonesean Yes you may, but since I'm here anyway... :)