Awesome Standalones

I've noticed a slight uptick in people looking for a "source of truth" or central location for Web Components in the community. More specifically, components that can be dropped in with little friction and come with little baggage.

I'll be honest. The temptation to create my own directory was there. However, I think the best thing for the Web Components community is to utilise what we already have and build upon it with our collective efforts. So I reached out to Dave Rupert, who owns and manages awesome-standalones, to see if I could help maintain the project and streamline workflows.

Using GitHub to update GitHub

I've implemented a couple of things which should help with managing submissions and formatting the readme.md (effectively the index.html if this were a website):

Verbose issue templates for submitting and updating components
A GitHub Action to automatically rebuild the readme.md when changes are actually made

Issue templates are pretty cool. They're clearly a result of poorly written issues ending up in people's inboxes. Using a single YAML file you can turn the issue description textarea into a structured form to help guide people toward providing the details you need. You can check out the YAML file here, as well as the resulting form here. Oh, and this is what an issue looks like when someone fills out the form. Fair warning, though: it's fiddly, and you don't get a decent preview until you've committed changes. Have patience.

I'm pretty proud of my GitHub Action setup. Rather than continuing to edit the main readme.md file, I thought it would be better for maintenance and longevity to have a build process to construct it and store the source data in a more structured way. With this approach, we can change the format, add new data, or even generate new pages (or even a website!) with much less overhead.

You can check out the GitHub Workflow file here. Unsurprisingly, it uses Eleventy to build the readme file from a single data file and a single template file. Once the markdown file is generated, it's automatically committed to the repo thanks to a very easy-to-use GitHub Action by Stefan Zweifel:

I was really impressed by how easy it was to drop in; Stefan has done a great job of obscuring the complex stuff.

Awesome Standalones is open for business! Big thanks to Dave for allowing me to go wild on the repo. Looking forward to seeing new standalones come in and to help people find new Web Components in the community 🌈