phntxx / dashboard

:bar_chart: a nice and simple dashboard / landing page.

Dashboard

Dashboard is just that - a dashboard. It's inspired by SUI and has all the same features as SUI, such as simple customization through JSON-files and a handy search bar to search the internet more efficiently.

Features

So what makes this project different from (or even better than) SUI?

• "Display URL" functionality (The URL displayed for apps can differ from the actual URL)
• Categorization for apps
• Themes and search providers can be changed using JSON
• Imprint functionality

Installation

The recommended way of installation is using Docker. You could also build your own version from source, but do proceed at your own risk.

Docker

The Docker image is built on top of this image, as it's based on Nginx and also provides functionality to purge the Cloudflare cache every time the container restarts (though this functionality is entirely optional).

The Docker image is available on both DockerHub and the GitHub Container Repository (GHCR, see "packages").

1. Using the Docker CLI:

$ docker run -d \
  -e CLOUDFLARE_ZONE_ID=[OPTIONAL CLOUDFLARE V4 ZONE ID] \
  -e CLOUDFLARE_PURGE_TOKEN=[OPTIONAL CLOUDFLARE PURGE TOKEN] \
  -v $(pwd)/data:/app/data \
  -p 8080:8080 \
  --name=dashboard \
  phntxx/dashboard

2. Using Docker-Compose:

version: "3"

services:
  dashboard:
    image: phntxx/dashboard:latest
    restart: unless-stopped
    environment:
      - CLOUDFLARE_ZONE_ID=[OPTIONAL CLOUDFLARE V4 ZONE ID]
      - CLOUDFLARE_PURGE_TOKEN=[OPTIONAL CLOUDFLARE PURGE TOKEN]
    volumes:
      - [path to data directory]:/app/data
    ports:
      - 8080:8080

Compile from source

I really don't anticipate people to use this, so go forth at your own risk.

$ git clone https://github.com/phntxx/dashboard.git
$ cd dashboard/
$ yarn
$ yarn build
$ yarn serve:production

Manual install

$ git clone https://github.com/phntxx/dashboard.git
$ cd dashboard/
$ yarn
$ yarn build
$ cp -R build/* .

/etc/nginx/conf.d/dashboard.conf

server {
        server_name localhost;
        listen 8080;
        root /var/www/dashboard/html/;

        location / {
                index index.html index.htm;
        }
}

$ cd ..
$ mkdir /var/www/dashboard
$ mv dashboard/ html
$ mv html/ /var/www/dashboard
$ chown -R www-data:www-data
$ systemctl nginx reload

Configuration

There's a couple of things you can / need to configure to get Dashboard to look and behave just as you want it to.

If you don't require a specific component, just remove the file from your data-directory. Dashboard won't render the components whose files are not present. With no files present, only the greeter will be shown.

If you're running into problems with configuring your files and you can't seem to get them to work, feel free to open an issue, I'd be happy to help! 😄

Apps

To show the apps you want to show, change apps.json to resemble the following:

{
  "categories": [
    {
      "name": "[Name of the category]",
      "items": [
        {
          "name": "[Name of the app]",
          "displayURL": "[URL you want to show]",
          "url": "[URL to redirect to]",
          "icon": "[Icon code]",
          "newTab": true
        },
        ...
      ]
    },
    ...
  ],
  "apps": [
    {
      "name": "[Name of the app]",
      "displayURL": "[URL you want to show]",
      "url": "[URL to redirect to]",
      "icon": "[Icon code]",
      "newTab": false
    },
    ...
  ]
}

Wherein either apps or categories can be omitted as needed. newTab is optional and defaults to false.

To find icons, simply go to the Material Design Icon Library and copy one of the codes for an icon there.

Bookmarks

To show bookmarks, bookmarks.json needs to resemble the following:

{
  "groups": [
    {
      "name": "[Group Name]",
      "items": [
        {
          "name": "[Bookmark Name]",
          "url": "[Bookmark URL]",
          "newTab": true
        },
        ...
      ]
    },
    ...
  ]
}

newTab is optional and defaults to false.

Themes

In order to customize theming, themes.json needs to resemble this:

{
  "themes": [
    {
      "label": "[Theme Name]",
      "value": "[Number of the theme]",
      "mainColor": "[Main Color as 6-character hex code]",
      "accentColor": "[Accent Color as 6-character hex code]",
      "backgroundColor": "[Background Color as 6-character hex code]"
    },
    ...
  ]
}

Search Providers

For search providers to work, make sure your search.json resembles the following:

{
  "providers": [
    {
      "name": "[Name of the website]",
      "url": "[Link that processes searches on that website]",
      "prefix": "[A custom prefix (e.g. '/test')]"
    },
    ...
  ]
}

You can also customize whether or not the search bar automatically focusses on render by adding the following to search.json, on the same level where properties like providers are located:

  "autoFocus": true,

Imprint

In order for the imprint-modal to show up, make sure your imprint.json resembles the following:

{
  "imprint": {
    "name": {
      "text": "[Name]",
      "link": "[Link to the name (to e.g. a portfolio)]"
    },
    "address": {
      "text": "[Address]",
      "link": "[Link for the address (to e.g. Google Maps)]"
    },
    "phone": {
      "text": "[Phone number]",
      "link": "[Link for the phone number]"
    },
    "email": {
      "text": "[Email address]",
      "link": "[Link for the email address (e.g. for 'mailto')]"
    },
    "url": {
      "text": "[URL]",
      "link": "[Link for the URL]"
    },
    "text": "[Text for the imprint]"
  }
}

❗ I haven't quite tested this. I'm not a lawyer and I'm not responsible if you're sued for using this incorrectly.

dashboard's Issues

Gitter done

Settings goes off the top of the screen on mobile

Using the provided theme and search options, opening settings by clicking on the (very small) cog centers the modal vertically on the first view height, which puts the top off the screen. You can scroll down to see the bottom, but there's no way to scroll up past the top of the page. The settings modal should start no higher than the top of the page.

Outside access via nginx reverse proxy

Hi there,

I was wondering: is it possible to reach the dashboard from the outside mydomain.org/dashboard via a reverse proxy?

This is what I have as nginx config but it results in an empty page. Local access works as expected though. Not sure what is missing.

`location /dashboard/ {
proxy_pass http://internalIP:8080/$request_uri;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_redirect off;

proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $http_connection;
proxy_buffering off;
}
`

Many thanks for a reply in advance.

T

Icons not showing

Hi,

I'm trying to use this but when I test with the icon code, the icon not showing. I need to download the resources?
If I need to download the icons, where should I put the files?

Thanks.

[Search] Default search provider

Is there any way to set the default search provider through configuration?

The use case would be that I want to have search, but I only want one search provider, say Qwant. However I don't want to have to use a search prefix, Just type in the search bar and hit enter?

Cardinal Numbers for Days are incorrect

Cardinal numbers for a couple days are wrong.
I've personally noticed these but possibly 11th might be incorrect too.

• 12nd
• 13rd

Option to be using MDI icons

I love the dashboard with it's minimalistic design. Only thing I struggle with is the selection of icons I can use.
Mostly I use Icons from https://materialdesignicons.com/.
Would be great if it would be possible to use those as well.

Could look like "icon": "mdi:home-assistant"

That would make at least me very happy

Showing blank screen on intial run

When I use the docker image, I just get a white screen and the browser console tells me that "items" must not be undefined in select.tsx.

My data folder is completely empty, so it should show only the greeter right?

Local Weather?

I know Flame, which has a similar look, supports local weather on the dashboard. Is that possible here?

themes.json greeter.json - Required, not documented, not in Docker image

This would be resolved by the completion of issue #15 as well, but as I was testing this out to see how it feels, it took me a little bit to discover that a greeter.json file and a themes.json file are required in the data directory, but I could find no documentation (i.e. nothing noted in the README) on this requirement, and no example of the greeter.json file as well. If I launch the generated site missing either of these files in the data directory, it just comes up blank for me.

I just wanted to make a note of this for you as I was passing through. I found my way and got it working, so there isn't really any required actions for this, but it might be beneficial to make a note on this in the Readme for others after me. Thanks for the project! If it suits my needs, you might find me back to contribute how I can!

Settings doesn't select the current themes

The select lists for light/dark themes don't default to the current themes.

[Theme/Greeter] Custom theme depending on time of day (Light/Dark theme)

There is already a mechanism for greetings that changes depending on the time of the day. Could that toggle a different theme as well? Classic theme in the morning/afternoon; dark theme in the evening and night.

Thanks for the useful dashboard.

Hi

You need to enable JavaScript to run this app.

When dashboard is set behind the reverse proxy I get the following message when I visit the page:

<body class="vsc-initialized"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body>

Should I change anything with the proxy config to make it work?

Timezone?

Is there a default way to set the timezone for this container? The day of week changes too early, but the date changes at the right time, which is weird.

Icon font requires external resources

Hey 👋

Currently the font used to display icons is fetched through gstatic.
This is normally fine, but if you're using NoScript religiously or if you're not connected to the internet, no icons will show up.
My suggestion is to also bundle the font when running yarn build.

Thanks!

Settings button appears only briefly when loading, then disappears

I was trying to create and use a theme, however I am unable to change it - I assume that the settings button is required for this. However, it only appears briefly while the page is loading and is unclickable, then disappears.

More info: Running in Docker on Debian, access in Chromium and Firefox, same behaviour with an empty or populated apps list

[Theme] Modify font and icon sizing

Hello!
I discovered your project this morning and instantly fell in love with it, this is exactly what I have been looking for for a while. I do have a couple of questions and a request.

1. Is it possible to set a favicon? This is mostly an aesthetic request, but it would be really nice.

2. Is it possible to make the font and icons a bit bigger? Is this controlled with a theme?

3. It would be really nice if the entire area for an entry could be clickable, rather than just the title. This would probably take the most effort to implement, but it would be really helpful from an ease-of-use perspective.

Thanks!
John

Readme for building docker doesn't work

Running
$ docker build -t dashboard:1.0
errors saying the command requires an argument

Incorrect configuration example for apps.json

The configuration example for apps.json shows "URL" instead of the updated "url". This isn't a major issue, but it confused me when I installed Dashboard.

By the way, I'm loving Dashboard so far. Great work!

Disable components

It'd be nice, if the following components could be disabled:

• search
• date
• greeting
• headers (APPLICATIONS, BOOKMARKS; just show the contents)

Doc update: port number

Is

$ docker run -d
-v $(pwd)/data:/app/data
-p 3000:3000
--name dashboard
phntxx/dashboard

still the correct port?

qahl

error Command "serve:production" not found.

➜ yarn serve:production
yarn run v1.22.10
error Command "serve:production" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

README.md manual installation update

Hey,
recently I went through installation of this dashboard. Love the style of it, everything works, but the readme has some mistakes that can be difficult for some to solve. I've installed it manually on a VM, without using docker. That might also have some mistakes, but since I don't know how to work with docker, that will be omitted in this Issue.
I'm running Arch Linux 5.18.6 on a VM, Proxmox hyperV v.6.2-4, 1 CPU core, 2GB RAM. Only additional installed packages are yarn, git, vim and nginx. Except that, it is a base Arch installation.

Step by step explanation

First, we clone and build the repo, which is fine, but we, for some unknown reason to me, move all built files to dashboard/ folder. That creates two problems:

1. A complete mess in the file structure
2. When we later on copy the folder to /var/www/, we are serving everything in that folder, since we do not configure nginx to not serve anything else. So we can access http://localhost/README.md or https://localhost/package.json, which is absolutely not secure.

I suggest we do NOT copy the built files to wherever we are serving them, but instead, just copy contents of the build/ data/ public/ folders. This can either be done manually, or we can create a simple small script that can do this for us.

Nginx config is very vaguely configured. Later in the commands, we chown the folder to user www-data, but that user, by default, does not exist (at least it did not on my Arch install. Nginx was installed with pacman). So we would need to create both user and group first:

groupadd www-data
usermod -a -G www-data www-data
chown -R www-data:www-data /var/www/dashboard

Then, we never set the nginx to run as that user. Meaning we still serve all the files as root. So we need to specify also

user www-data;
# ...

in the nginx config file. Funnily enough, the example file nginx.conf provided in the repo would not work, because the root of the app is set to /app, which we never create. I suggest to either completely delete that file from the repo, since there is no mention of it, or how should it be used, or to change it to what I've written down, and instead, reference it in the readme (add a step like "move the example nginx config file with cp nginx.conf /etc/nginx/nginx.conf. But that is probably not a good idea, since it will completely obliterate all other configs.)
Also, the location of Nginx config file is /etc/nginx/nginx.conf, at least in systemd.

Speaking of systemd, correct syntax for reloading a service under systemd is systemctl reload nginx.

Then there is that absolutely unnecessary step of moving ~/dashboard into ~/html. We can move the ~/dashboard folder directly into /var/www/dashboard/html. That is, if we want to move the whole folder. Refer to above, where I was mentioning that we should copy only certain files.

---

So my proposed Manual install section would look like:

Manual installation

Clone and build

git clone https://github.com/phntxx/dashboard.git
cd dashboard
yarn
yarn build

Move all the files

mkdir /var/www/dashboard/html
cp -r build/ data/ src/ /var/www/dashboard/html

Configure nginx

# only do the next two steps if your www-data user does not exist. Check `grep www-data /etc/passwd`
groupadd www-data
useradd -a -G www-data www-data
chown -R www-data:www-data /var/www/dashboard

Next, edit the /etc/nginx/nginx.conf file. It should look something like this:

user www-data;
worker_processes auto;

events {
    worker_connections 1024;
}

http {
    include mime.types;
    default_type application/octec-stream;
    sendfile on;
    keepalive_timeout 65;

    server {
        listen 80;
        server_name localhost; # edit as needed if using your own domain
        root /var/www/dashboard/html/;

        location / {
           index index.html index.htm;
        }
    }
}

As a last step, reload nginx:
systemctl reload nginx
Now you should be able to visit your dashboard at http://localhost

[App/Bookmarks/Greeter/System] Custom greeter, make apps and bookmarks open in new tabs, support for .yaml files, editor frontend

Hey phntxx, it's a nice little dashboard you have created here. I have a few suggestions for improvements that you might consider:

1. Make the welcome heading configurable. Being greeted with 'Good morning!' or 'Good night!' is nice, of course, but if this is made as part of a landing page at a company portal or so it would be nice to have the possibility to easily change this into something else. Same thing if you prefer another language than English. Of course, the ability to select different messages depending on the time and/or date is a nice feature to have.
2. Add an option in the *.json files for each link to open in current OR in a new browser tab. If the dashboard is embedded as iframe in another page you will find that many linked web pages will refuse to open as part of that iframe.
3. Add a yaml frontend for simpler editing of links.

Thanks for your good work!

Remove external dependancies

Why do you need 20 cookies set to google.com, and apis.google.com script?

You need to enable JavaScript to run this app.

It's a god-damn static website, it shouldn't be usable without js‽

Request: Provide docker-compose file in README

Could a default docker-compose file be provided?

Using the search bar results in a 404

Really liking the dashboard! Everything is great except I'm unable to get the search bar working with or without the prefixes. Upon searching, it will immediately result in 404 Not Found, nginx.

The URL also changes to /undefinedsearch

The search providers .json is the same as the one in the repo.

[System] Pre-populate docker volumes with config files

Using Docker image: phntxx/dashboard:latest, pulled today on an ubuntu server VM.

Hi! I just found this out and it's a pretty cool program, but I ran into some weird behavior that I suspect might be a bug, either with your docker configuration or something else.

For starters, I'm launching the docker container using the following, username swapped out:

version: "3"

services:
  dashboard:
    image: phntxx/dashboard:latest
    container_name: dashboard
    restart: unless-stopped
    volumes:
      - /home/<username>/docker_data/dashboard:/app/data
    ports:
      - 8080:8080

On first launch no files were populated, which was a little confusing but I just grabbed them from the repo and that worked out fine and it started to render.

Not sure if this is intentional; if it is, you should include some additional documentation in the docker readme or here on the github. Other containers I've used tend to pre-populate data if it doesn't exist.

However, after that, there's a second strangeness that's more of a significant issue.

In Chrome and Edge, the dashboard doesn't seem to be making links for any of the apps, just...lines. Viewing developer console shows that they look like : <a class="sc-kstrdz btjemE">pfSense</a> but aren't clickable or anything, leading to either example.com or a real one if filled out correctly.

I reviewed the documentation and I don't see anything I'm missing that would lead to Dashboard just not rendering the links.

Add Custom css Support

Hi, I've seen a lot of people suggesting various changes that they would like for your excellent dashboard and think that a lot of them could be easily accomplished by simply allowing users to add their own css to a file in the data folder (similar to how the various json files are already used).

Adding something along the lines of <link href="%PUBLIC_URL%/pathtodatafolder/userstyles.css" rel="stylesheet" /> to the index.html would allow users to easily customize the dashboard and solve issues such as these: #19 #37 #50 (with a few lines of !important css)

H

L

Can't use any port other than 8080

I'm attempting to remap the 8080 port which is apparently default, to no avail using the unraid community docker container that is available, however I can't get it to change, and I'm frankly unsure why it's forced. I've attempted using flags when creating the container to map 8080 to 8880 so that my cloudflare setup will pick it up, but it just overwrites any attempt, help/insight would be appreciated.

How to remove [About] > Imprint section ?

I don't have imprint.json file, yet it still shows this :

Addind dummy imprint.json file doesn't change anything.

If no bookmarks, hide title.

Hi!

Is it possible to hide the bookmarks title if there are no bookmarks?

Make API call with buttons

Is it possible to add buttons so when you click one, it'll make API calls with GET/POST/etc?

[App/Bookmark/Search] Open links in new tabs, make apps and bookmarks searchable

What do I have to change to open all (apps and bookmarks) links in new tabs? (I'm just started learning React)

Can you add a button to erase the previous search statement with one click?

Do you like the idea to update the lists when typing a search statement and only show applications and bookmarks which are equal to the search?

Light theme is always set for new visitor

1. I created a themes.json file:

   {
     "themes": [
       {
         "label": "Dark",
         "value": 0,
         "mainColor": "#ffffff",
         "accentColor": "#999999",
         "backgroundColor": "#000000"
       },
       {
         "label": "Lime",
         "value": 8,
         "mainColor": "#aabbc3",
         "accentColor": "#aeea00",
         "backgroundColor": "#263238"
       },
       {
         "label": "Tron",
         "value": 10,
         "mainColor": "#effbff",
         "accentColor": "#6ee2ff",
         "backgroundColor": "#242b33"
       }
     ]
   }
   

2. I open a new private tab

Result: The page is shown using Light theme, even if it is not in the themes.json file. It would be great if I can either control which theme is used as default from conf files or just use the first one on the list.

Change icon size?

Is there a way to change the size of the icons?

Can't run on Raspberry Pi 4B w/ Ubuntu Server 64-bit

Hey, running this as a Docker container on a Raspberry Pi 4B with Ubuntu Server x64 outputs standard_init_linux.go:228: exec user process caused: exec format error to the logs. This seems to be a common error message for architecture mismatch. RPi4B runs on aarch64/arm64/v8. There seems to be no build for this arch for the ratisbonacoding/nginx-cloudflare-cache image this builds on (according to DockerHub). The nginxinc/nginx-unprivileged image the cloudflare container is depending on has builds for armv8 (DockerHub).

Could there be a version which is just straight up depending on nginx-unpriviliged, skipping the cloudflare-cache container? Thanks!

Multi-tenant

Mostly just a feature request, if you'd consider it. Having multi-tenancy operate behind a simple auth mechanism. I don't want my dashboard to be visible to unprivileged users, and I have a situation where giving each user their own dashboard would be beneficial.