Custom Frontend

[unseen-ninja]

Based on the mention of loading time and page size in this issue Optimizations / Changes? I had a quick thought about building a simple and custom Frontend for this to further reduce the load.

From what I can gather the template that's currently in use actually ships a lot of bloated JS. I like the layout in general, but I think it could be improved by making the listings more readable (text on images can be tough) and also adding a "Download"-button directly to the listing as well.
Maybe a simple Card-like design could achieve this?

[Neikon]

a grid with this style would be nice

Maybe it is easy to do with microsoft resources, they call it "fabric core" https://developer.microsoft.com/en-us/fluentui#/get-started/web#fabric-core

[unseen-ninja]

That's similar to what I had in mind.
I threw together a little somthing: https://codier.io/creation/B13r4q3JO

This way the user would save one click to get to the desired result and it's easier to grasp the entirety of all themes with a quick glance.

[unseen-ninja]

The basic functionality is done. I think we could merge it once everyone agrees with the changes.

Once that's done we could take a closer look at the pug ordeal? If we could get rid of the JS loading in favour of serving static files we could imprive loading times even more. c:
From what I was able to gather during my limited research it should be possible to compile everything with gulp and GH actions, no?

[Neikon]

I have detected something that may or may not be a bug. I have detected a similar behaviour in the last change of the web, in the demo you could see a similar error(html error related to faviconloader) but then everything worked fine. Maybe it's an unimportant thing that only happens in the demo. I don't know.

in addition, could we make a dark version before implementing the new frontend? could we put a little button at the top right to switch from one version to another?

in other hand i find this https://github.com/marketplace/actions/execute-javascript-inline

and this one https://github.com/peaceiris/actions-gh-pages
right here https://github.com/peaceiris/actions-gh-pages#%EF%B8%8F-static-site-generators-with-nodejs it says something that seems to me that could be useful. (But I tell you that this escapes me completely and I hardly know what you are talking about. I understand the purpose but not the tools)
I don't know if these are the github actions we need.

[unseen-ninja]

Oh, I might have missed to deploy the images folder… error should be fixed now. c:

A darkmode is easily doable and a theme switcher isn't a big thing to implement as well. I can take a look at this tomorrow. The big issue comes into play when we want to serve the users chosen theme when they re-visit the site because that would require us to store cookies; and… let's be honest, the whole GDPR and cookie law stuff is hella annoying.

The links you've posted look promising. That should help a lot. ^—^

[Neikon]

and if we try to read the user's configuration like duckduckgo.com for example. if you have your browser set to dark, the website loads the dark version by default. that would no longer need cockies, right?

[unseen-ninja]

We could use prefers-color-scheme to check for the users preferences but FF will default to light when the user has set privacy.resistFingerprinting to true.

[Neikon]

this could be the dark version.

:root {
 --body-background: #1c1c1c;
 --body-background-lighter: #333333;
 --body-background-darker: #161616;
 --font-colour: #eeeeee;
}

and

.card {
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);

[unseen-ninja]

I've thrown together some CSS and JS to make the magic happen. Users can switch between the light and dark themes and it also respects the users prefered colour scheme when the site is first loaded. The demo is updated too. c:

It's almost 2:30 am over here… I feel like I've missed something important but I can't pinpoint what it might be.

[Neikon]

looks awesome

[alfaaarex]

What about an Electron App which can install themes automatically?

[unseen-ninja]

This is prob. worth it's own discussion thread.

In general this would require an installer that works on all major systems. This is a huge task! To ensure that this ages well it also most likely also needs quite some maintenance to ensure compatibility with OS updates etc. — I personally don't want to deal with stuff like that at all as the web can be complicated enough. :D

The theme data is publically available tho; so if someone is up for the task.. ¯\_(ツ)_/¯