Potential Cloudron Theme/Dashboard

[thetomester13]

Hello all!

I've been developing/packaging what I think could be a new form of Cloudron apps, Themes (working title : ). The idea here is a simple Homepage that will display your installed Cloudron applications for easy access. You can see a working copy on my instance here! Be sure to hit space bar to toggle the menu.

Features include:

• Lightning fast loading - 97 Lighthouse Performance rating, all JS/CSS assets are local
• Toggle menu based on any key combination
• Background images from Unsplash or custom URL
• Quick link to Cloudron dashboard
• Use number keys to go directly to the first 9 apps listed when the menu is open
• Mobile friendly
• Caching of app images
• Security when it comes to your Cloudron API key and Unsplash ID

Note that this is NOT meant to replace the current Cloudron dashboard, but rather be a supplementary 'app browser'. When the menu is displayed in the Homepage App, there is a cog icon at the top right with the time stamp that will take you straight to your original Cloudron dashboard when you need full access to Backups, Logs, etc.

This app is based on the homepage-cloudron repo, which is based off of the homepage repo, both of which I am the author of. Happy to answer any questions! You can find the Cloudron packaged app here.

If this is interesting, I could work up some basic tests for this to eventually be included in the actual Cloudron App Store. Though it is important to note that for this to work properly, the setup requires creating a new Cloudron API key and updating the config.json file through the Terminal (not super user-friendly).

Thoughts/suggestions/notes welcome!

[girish]

I really like the idea of a custom dashboard! Do you use the Cloudron API to get the list of apps and show the apps dynamically?

Over the years, we have received some requests for a more customizable dashboard. Since you are starting afresh, maybe you can consider some of these:

• Dark theme
• Custom app icons (https://git.cloudron.io/cloudron/box/-/issues/350)
• i18n/localization
• Allow user registration - we can provide APIs for this, if there is interest.

I don't know the scope of your project, but thought I will put some ideas here. For the Cloudron dashboard, we want to keep it for "admin" tasks and not for the end users of Cloudron.

[girish]

Here's a screenshot of @thetomester13's work :

[thetomester13]

Thanks @girish!

Do you use the Cloudron API to get the list of apps and show the apps dynamically?

Yep! Check out the code for that here.

For the Cloudron dashboard, we want to keep it for "admin" tasks and not for the end users of Cloudron.

That was exactly my thinking. The idea for Homepage is that it's an easy-access dashboard to open one's apps, but leave any admin tasks to the current built-in dashboard.

Great suggestions!

• Dark theme

It kind of already is? I mean the images pulled from Unsplash are random (by design) so it might be hard to only do dark images? Did you have anything in mind?

• Custom app icons (https://git.cloudron.io/cloudron/box/-/issues/350)

The issue you linked to mentions not custom icons, but custom links (which is actually what the original Homepage app consists of). Adding more custom links is definitely doable. I'm wondering what's a good way to go about letting the user put the apps in a specific order...

• i18n/localization

Neat! Again, there isn't a whole lot of text here besides the Unsplash attribution. But happy to try and localize that if people want to contribute translations. The clock/timestamp at the top right is configurable through the config.json file, so users can make that 24hour, am/pm, whatever they want.

• Allow user registration - we can provide APIs for this, if there is interest.

I think this is where it becomes a bit outside the scope of Homepage, as it's meant to just be a simple window to access one's installed (or external?) applications. Open to hearing more about your thoughts though.

[jdaviescoates]

@thetomester13 this is awesome! I love it.

I've been meaning to ask for something like this for ages and meanwhile you've not only gone and suggested pretty much exactly what I've been thinking, but you've gone and coded most of it up too - amazing!

[thetomester13]

@jdaviescoates thanks! Feel free to give it a spin and let me know if you have any thoughts or suggestions!

[thetomester13]

@girish Had a thought for the base Cloudron image/API to help make such a dashboard (and potentially others) more accessible to everyday users. At the moment, for Homepage to run properly, it requires the user create a new API key and insert it into the config.json file through the Terminal. The only calls needed by the application are the GET for /api/v1/apps and /api/v1/apps/{$cloudron_app_id}/icon for getting the list of applications installed on this Cloudron instance and their respective icon files.

The thought is what if the Cloudron API white-listed some calls to its own internal IP/URL? Not sure if this is a thing, but pretty much, if a call is made to the endpoints above (and potentially other 'harmless', non-destructive endpoints), and the referring URL is on the instance's own domain (i.e. the call to my.cloudron.com/api/v1/apps is coming from homepage.cloudron.com) then it wouldn't necessarily need an API key.

If this were implemented, then Homepage and future dashboard apps wouldn't need any user intervention in order to display all the Cloudron instance's installed applications and icons.

Just a thought! Happy to hear what you think of such a solution.

[nebulon]

I very much like the idea for such a dashboard being installed as an app instead of trying to make the main/admin dashboard overly configurable or theme-able.

For app listing, we could add a new app addon type which gets a restricted access token to fetch app listings and meta information. However we have to see how that works with regards to the access controls. For future auditing reasons, it may be better to not add some whitelisting mechanism which circumvents token validation. I wonder if the mentioned APIs would be sufficient for a good dashboard?

[girish]

We can implement read-only tokens for a start.

[thetomester13]

@nebulon

I very much like the idea for such a dashboard being installed as an app instead of trying to make the main/admin dashboard overly configurable or theme-able.

Agreed! I like the idea of a new addon type that would give an app 'automatic access' (doesn't have to be configured by end user) to some API endpoints. I agree with @girish that read-only access would work, but even just the 2 endpoints I listed above would be a solid start. I could eventually see endpoints like 'Get Status' or streams from tasks or services being handy for such dashboards.

[BrentHueth]

@thetomester13 said in Potential Cloudron Theme/Dashboard:

homepage-cloudron

Hey there @thetomester13, is this something I can try out? I understand the rudiments of building and installing custom apps, but not sure if I need to fork your repo, of just cloning it will work. I requested access on gitlab.

[thetomester13]

@BrentHueth absolutely it's something you can try out! You can simply clone the repo and then do a cloudron build and cloudron install (there are some prerequisites to this, be sure to check the official Cloudron documentation). I gave you developer access to the repo in case you did want to contribute, just know that the git.cloudron repo is the Cloudron packaged app, you can find the actual application on Github here.

[BrentHueth]

@thetomester13 If I'm not your first thrilled user, well then I'm another

https://cln.sh/DboCtu

[murgero]

Is this project similar to Heimdall? It's what I am currently using as a dashboard (Currently Personal, but it is hosted on my Cloudron and displaying some custom links and apps)

[thetomester13]

@BrentHueth that makes me happy

@murgero yes, this is similar to Heimdall, it's based off of this Github project of which I'm the author. This particular app is purposefully packaged for Cloudron in that you give it an API key and it will auto-populate with all of your Cloudron apps, so no custom links at the moment.

[murgero]

@thetomester13 That's pretty cool!! I'll have to give this a shot then Thanks!

[thetomester13]

@murgero sure! Let me know if you have any notes/suggestions!

[girish]

@murgero Do you host heimdall on Cloudron? Is there a package?

[murgero]

@girish No package, it's a simple PHP script - just used the LAMP app. I'd be happy to package it though if there is enough demand for it. That said I do not want to take over this thread so if anyone wants it - start a new thread.

[will]

@murgero This would be dope to be rolled into cloudron if the owner & devs are open to that.

[girish]

We probably won't merge it into Cloudron itself but as a stand alone project which is packaged for Cloudron, we have no problems. Happy to publish it in our App Store as well (but it has to be a stand alone project like the rest of the apps we package).

[thetomester13]

@girish what do you think of implementing the 'read only' token permission for apps like this so they can automatically display a list of installed Cloudron apps without user intervention?

[marcusquinn]

@thetomester13 Very nice work!

Seems like an app to me, perhaps call it "Start Page", similar to: https://start.me

I'd like the links to open in a new window/tab, the ability to adjust icon size, number of columns, and additional non-cloudron links.

I like the Start Page feature in Vivaldi for inspiration: https://help.vivaldi.com/article/speed-dials/

Not a fan of frame scrollbars or hidden features, would prefer just to have it as a URL where they are always shown,, something like startpage.example.com that we can give to users to set as their browser home page with a search bar for a selection of search engines and cloudron itself.

[marcusquinn]

More inspiration:

• https://bonjourr.fr
• https://github.com/victorazevedo-me/Bonjourr

[robi]

@thetomester13
I don't think this is required, as users cannot install and manage apps, only admins can. That means that during the App install there can be a user selection for who it's for by an admin which injects their profile/API key into the app and installs it, becoming the default of what a non-admin user sees at their URL. Login only required per App.

Use of Rambox or WebCatalog can do something similar on the desktop, saving the need for crating entries for all the separate apps but just for their 'homepage' / startpage.

[thetomester13]

@marcusquinn thanks! I am trying to keep the project relatively simple so I don't want to get too deep into features. It is worth noting though that the original Homepage app does support opening links in new tabs. I could see a feature on the Cloudron app where it's an all-or-nothing boolean - all links will open in a new tab, or all links will open in the same tab. I also could see supporting non-Cloudron app links, and potentially number of columns. The way I see it, the icons should possibly adjust automatically based on the number of columns (again, this is a bit of the complexity I'm trying to avoid with a KISS app). The search bar I've also purposefully avoided this whole time, but I'm open to suggestions. It's also worth noting that you are free to create PR's into the Github repo if you want to contribute!

@robi that's an interesting point. Only admins are installing new applications indeed, but still, I'm not sure that all admins are capable or comfortable with going to an app's terminal, vim'ing (is that a verb??) the config file and adding in an API key. That being said, it's probably a good enough start for now, and could potentially revisit if/when @girish or @nebulon decide to add such a feature.

[robi]

Have you seen DashMachine?

Sounds like right up your alley!

[thetomester13]

@robi definitely looks like another good candidate for a Cloudron Theme app!

[rmdes]

@girish Damn, I just had a flash of a dashboard like this with centralized notifications widgets from different installed apps..imagine seeing emails, mastodon notifs, calendar events,task etc..all from one single space, in a self hosted cloudron

[thetomester13]

I just updated the Homepage Cloudron app such that you can feed it an array of custom_links that will render on the dashboard. You can also set ordinal's on both the custom links and Cloudron apps so you can reorder the links to your liking. Also, an open_links_in_new_tab option now exists if you prefer to have all the links open in a new tab instead of the current one.

I think this is in a mostly solid state and will try to come up with some tests for it for potential publishing in the Cloudron App Store.

As always, feedback welcome!

[marcusquinn]

@thetomester13 Can one just select a colour for the background? (always dark for me)

[jdaviescoates]

@marcusquinn said in Potential Cloudron Theme/Dashboard:

@thetomester13 Can one just select a colour for the background? (always dark for me)

I've not tried this (not any custom app) yet, but I think you can upload a background image of your choice, so it could be a dark one. Although you probably mean background colour of app links etc?

[thetomester13]

@jdaviescoates that's correct! (Totally forgot about that feature and had to check my documentation ) one can plug in a custom_url for a background image.

That being said, I like the idea of simply choosing a color for the background so will take a look at implementing something like that soon hopefully. @marcusquinn until then feel free to use the custom_url!

[thetomester13]

Just got some basic tests up and running for Homepage! You can find the repo here. It packages version 0.9.6 of homepage-cloudron. I hope to soon add a background color option to the config as well for the more minimalist crowd.

@girish what do you think the chances are of publishing this on the store?