Development stack planned?

[tomgrice]

Hi, only just noticed you updated the readme a few months ago - have any rough plans been thought of about what kind of dev stack you might want to use for this rewrite? Just curious as I'd love to continue to make contributions when I get time.

I was considering creating a GUI frontend for my Linux install script (freeso-linux repo).

The stack I had in mind was:

• Javascript (JSDoc for type safety) - or Typescript, but JSDoc seems to play nicer and easier to maintain when used with my choice of app framework...
• SvelteKit for the frontend framework.
• Node.js LTS (18.12.1 currently)
• unocss or Twind for styling (both are high performance, low footprint CSS frameworks fully compatible with Tailwind classes)
• Tauri - alternative to Electron, uses the system's native web rendering engine for a small filesize. Any weirdness due to different browser/rendering engine's handling of styles etc should be taken care with by the tailwind style reset.

You might be familiar with some of them and of course these are just suggestions and to kick off a bit of discussion :) The learning curve to use the stack I'm mentioning or something similar is actually quite easy, and SvelteKit (which is a breeze of an app framework to use) is now in Release Candidate stage with feature/structure freeze. Like I mentioned before, would be great to be able to help out - I'm guessing you plan on designing the new version to be flexible and cross-platform from the ground up, so I would most likely deprecate my linux script and PR linux install support directly into something like this based on the work I've done before.

Hope all is well! Thanks :)

[ItsSim]

Hey!

Svelte + Tauri is exactly the stack I've been looking at. Tried to get a project structure going months ago using Svelte, TypeScript, Vite with Tauri, but then SvelteKit was introduced, which I am not familiar with yet. I initially thought SvelteKit was only for SSR apps, which I now understand is not the case - it's becoming the default way to build both CSR and SSR web apps.

Basically, the next steps are:

1. Delve into SvelteKit and create a proper project structure. Also need to figure out the best way to add CI builds to speed up releases. Currently I'm releasing manually - which for Windows is bearable, but for macOS I'm renting a box hourly every time I publish.

2. Lock in the UI. The design has changed a few times and I'm still not convinced. The idea is to make the design similar to the current launcher's, which is pretty solid and works, but iterate on it to make it "fresh" and improve it in some aspects. A CSS framework is needed now, since, as you said, Tauri brings back browser vendor differences. I will check out the ones you mentioned!

   Really, the only things that would be major changes in the new UI are:

   • Dynamic widgets that integrate with the FreeSO API on the homepage.
   • Improved flows that are currently not so intuitive, such as the whole installation flow; downloads that can't be paused/stopped, etc...

   Design is looking like this (as I said, will likely change!).

3. Set up the repo and begin development.

So we'll see how this progresses. Long road ahead. Appreciate the interest!

[tomgrice]

Just as a little tinker and to I guess prove the concept, this is a Svelte app I knocked together very roughly in about 10 minutes to try and start to replicate your design.

It uses twind (https://twind.style) which is a lightweight compiler compatible with tailwind classes.

Of course it's just something quickly thrown together not refined at all, but tailwind as a UI/styling framework really is intuitive and very easy to use. Svelte also lends itself to the idea of using customizable/pluggable widgets, being a component-based framework. Styling doesn't have to be as verbose as in the code below, commonly used patterns can be defined as 'shortcuts' in twind config, so for example bg-red-200 m-4 p-6 rounded-t-xl box-shadow-lg text-slate-800 can be condensed to a single class such as 'red-infobox'.

Looks like a promising solution if you chose to use it. HTML code to go with the screenshot is below :)

<div class="w-full h-screen bg-white overflow-hidden flex">
    <aside class="w-52 left-0 top-0 h-screen">
        <div class="pt-4 mx-auto w-5/6"><img src="./fsologo.png"/></div>
        <span class="flex justify-center font-semibold text-sm text-gray-500">Open Beta</span>
    </aside>
    <main class=" w-fill flex-auto">
        <div class="bg-gradient-to-r from-sky-300 to-lime-300 via-cyan-300 rounded-bl-2xl w-full h-28 drop-shadow-2xl">
            <div class="mx-20 pt-5 pb-4">
                <h1 class="text-white text-xl font-normal">What's happening?</h1>
                <h2 class="text-white text-sm">Check out Sunrise Crater's latest news</h2>
            </div>

            <div class="flex mx-auto p-4 w-10/12 rounded-t-2xl bg-white h-screen">
                <h2 class="text-slate-600 text-sm font-semibold"><span class="text-lg">👋</span> New look, who this?</h2>
            </div>
        </div>
    </main>
</div>

[dark-steveneq]

I absolutely agree that SvelteKit should be part of the stack. I don't have any personal experience with Tauri but it seems like a very cool project. As for anything Tailwind, I guess it's useful? Also personal preference here but I think the launcher should go with TypeScript.