Next major versions of PWA Asset Generator

[onderceylan]

EDIT: Everything related to the roadmap discussion is being moved to a new project board, representing a public roadmap: https://github.com/orgs/elegantapp/projects/3/views/1

If you'd like to request a new feature for pwa-asset-generator, feel free to create a feature request here.

---

Dear friends,

Thanks for using PWA Asset Generator, and sharing feedback with issues and donations so far. You rock!

I have been thinking, tinkering and talking for a while about how I envision the next versions of the library. As it has recently crossed the 2k stars mark on GitHub and 50k weekly downloads mark on npm, I believe it's time to re-design the library and its future along with it to take it to the next level.

My vision is to make one of the most challenging and crucial steps of cross-platform app development - "making apps look and launch beautifully", an extremely simple, straightforward task. And, I'm on the mission to make that happen.

As a solo developer who builds and maintains this library for free next to a day job, there's only so much I can do while stealing time from myself and my family. So, I'm on the lookout for funding, and considering monetizing options. Anything that can help make this vision a reality, is on the table.

It will be greatly appreciated if you could upvote, react, and reply with your answers on the ideas below to help me make informed decisions on the roadmap. I don't collect user data, so your input and opinion matters A LOT!

Please go through the items from the roadmap below, and considering they're all planned, share what you think over this 2 minutes short survey. Does it excite you as it does to me?

[onderceylan]

Redesign the CLI interface

The more features you requested and I built on the library, the less friendlier it became for the terminal usage. We can no longer add arguments to the root command, so most likely there will be commands and sub-commands in the CLI with this change.

Think about pwa-asset-generator generate [options].

[onderceylan]

Ownership on the created output

Currently the library has an opinionated approach on building app assets, limiting the number of images it generates, and also limiting their dimensions.

By using pre-defined profiles, it will continue to provide meaningful defaults per platform.
By using custom profiles, you'll have flexibility and ownership on how you'd like to generate your assets.

Think about;

{
  "width": "512px",
  "height": "512px",
  "input": "logo.svg",
  "background": "linear-gradient(to right, #fa709a 0%, #fee140 100%)",
  "padding": "calc(50vh - 20%) calc(50vw - 40%)",
  "type": "image/png"
}

[onderceylan]

Batch image generation over a single command

Until now, we've been executing multiple commands to create a desired output from the library. Like icons with maskable option, without it, dark mode enabled, favicons with transparency, and so on and so forth.

By using multiple entries in the library's future configuration file, you'll have the possibility to combine pre-defined profiles and custom profiles, and generate all images at once using a single command.

[onderceylan]

Built-in templates

Built-in templates will help you apply easy image transformations, such as making your image round shaped for a custom profile. Think about shipping a round icon with purpose: any with a round template, and a square icon with purpose: maskable with a square template.

Effectively creating the output below:

[onderceylan]

Generate screenshots

By using built-in profiles and templates, we will be able to generate screenshots for our apps using PWA Asset Generator. Presenting screenshots of an app is a great help on providing a good installation experience on Android devices.

[onderceylan]

Generate Open Graph images

As the library will be capable of providing templates and custom profiles, it will also provide a possibility to generate images for The Open Graph protocol, and integrate related HTML tags.

[onderceylan]

Validate web app manifest file

The library currently has a loose interaction with the Web App Manifest file. In the future, it will keep one-to-one relationship with the entries in the manifest file. By doing so, it will also help you validate the correctness of the entries within your manifest.

[onderceylan]

Documentation site

As the library will advance in terms of use cases it provides solutions for, a simple README is not enough for documenting all the possibilities. With the new documentation site, there will be more code examples, recipes and tutorials available for all levels of its users.

[onderceylan]

Maintain the project under an org and integrate Open Collective

To make funding the project easier for future sponsors, and make contributing more accessible for future contributors, Open Collective will be integrated to the project.

The project will be also moved from my personal account to an organisation on GitHub.

[moishinetzer]

Any chance we could use a separate image for the background instead of a Gradient?

[onderceylan]

Hi @moishinetzer, that's already possible in the current version. You can either use CSS background URLs or your custom HTML inputs to accomplish that.

Examples;

# Option 1
pwa-asset-generator icon.svg ./assets -b "url(https://wallpapercrafter.com/sizes/2560x1440/10631-starry-sky-stars-space-dark-astronomy-4k.jpg) no-repeat center center fixed"

# Option 2
pwa-asset-generator icon-with-custom-bg.html ./assets

[moishinetzer]

Amazing thanks for the upkeep of this awesome project!

[onderceylan]

Everything related to the roadmap discussion is being moved to a new project board, representing a public roadmap: https://github.com/orgs/elegantapp/projects/3/views/1

If you'd like to request a new feature for pwa-asset-generator, feel free to create a feature request here.