Showcase: Custom image creation wizard. ✨ UX ✨

[xynydev]

Introduction

I originally made create-ublue-image as a way for people (me) to easily and properly set up a repo for building a custom image (based on startingpoint).
I always thought that a shell script using github-cli was kind of a hacky solution and for proper maintainability it should probably use the Github API.

After having heard some people hope for a "patch" or "block" based system for building custom images, I thought that an expandable website would be useful for UX abstractions such as those. After there was a minor breaking change in startingpoint effectively breaking create-ublue-image, I decided to go through with a rewrite based on the images-website I had already built.

Showcase

The uBlue image creator / wizard / name unknown is now feature-complete with create-ublue-image while including a handy picker for choosing an uBlue image.

To see it in action, visit the site, or watch the showcase video I made with a testing account below.

Please aknowledge that this is an alpha-grade product that has only been tested by me. Reporting any encountered bugs would be greatly appreciated, please include the error messages visible in the browser console including the responses of the XHR requests that might be failing.

image-creator-showcase-2.mp4

Expansion

Editing and reading files from a Github repository as an OAuth application turned out to be a pretty easy job. If there is any demand, it would certainly be possible, as recipe.yml gets more powerful, to create a frontend for editing it. This could also come with support in recipe.yml for including "package sets" from other yml files that could serve as those "patches" people would be adding into their custom images.

Consideration

Were this to become an "official uBlue thing" the following actions would need to be completed:

• Enable the Netlify Github OAuth app for the images-website-repo
  • This would make Netlify automatically deploy new versions of the site, whereas right now the only way to deploy the site is by building it locally and deploying it manually with the Netlify CLI.
• Relax OAuth App Access restrictions on the uBlue org.
  • When trying to create a repo by using the template instead of forking (the fallback method), we get the following error.

    Although you appear to have the correct authorization credentials, the ublue-os organization has enabled OAuth App access restrictions, meaning that data access to third-parties is limited. For more information on these restrictions, including how to enable this app, visit https://docs.github.com/articles/restricting-access-to-your-organization-s-data/

• Transfer the ownership of the "uBlue Image Creator" Github OAuth app to the ublue-os-organization
• Give the site a subdomain of ublue.it.
  • images.ublue.it would suit well, considering that the site is multipurpose. (It also includes pull stats)
    • If a subdomain is ever needed for mirroring or hosting a uBlue-specific image registry, registry.ublue.it would do fine when images.ublue.it was already used.
  • We'd (me and the domain owner) would have to coordinate a short session setting that up. Netlify (where the site is hosted for free) has clear docs on adding custom domains, and doing so should be entirely free.

The site would probably remain hosted on Netlify under my account, as the free plan is more generous for single users than teams, and I'm maintaining the site anyway.

[hh]

This is really cool! I wonder if there is a way to reduce the permissions set.
It wants access to all public+private org/repositories. Is there a way we can reduce the permissions granted?