Based on the work done on Day 4 in order to implement the image optimizer page, I have a few more ideas for pages based on custom Vue components. The first is a custom color picker implemented for the PubStudio platform. It would be great to extract the code from the platform monorepo into a standalone package.

The goal for this site is to be the demo page for the color picker widget, which will be made available as an NPM package. Most of the work will be refactoring and setting up the boilerplate for a new repository, with testing and automated releases. Luckily, most of the tedious stuff can be copied over from the image optimization repo.

A great addition would be to implement events/callbacks for custom Vue components in the builder. This would allow the demo page to include features like copying the color to the clipboard, setting the page background to the selected color, etc.

Splitting the color picker from the PubStudio monorepo went smoothly. Since I wanted to take advantage of events from the custom component in order to set the demo page background to the picker color, the entire site was implemented as a custom component.

Setting the entire site to a custom Vue component is probably not useful outside quickly deploying demos like this, but it was was an interesting exercise. Unfortunately, for that reason it can’t easily embed in this blog without looking odd.