This is an old revision of the document!
Simple Dashboard
Wouldn't be nice to have a single page from which you can access all your services? Remembering them all at this point might start to be overwhelming, isn't' it?
There are literally lots of options at your fingertip, looking for html dashboard or similar queries will find you tons of open-source products that you can explore and try out. HomePage is probably one of the most rich out there.
Since i wanted something really simple and easy, i rolled my own, called Simple Dashboard. Some advantages:
- It's 100% client-side
- Pure HTML+CSS with a drop of Javascript
- Easily extensible, based on a site.json file
- Only depends on jQuery and nothing else
- It's all into three files, including jQuery.
The only simpler approach would be a static HTML page with a link for each service.
Go back to the NGINX page and check the root path i told you to use: root /data/daemons/htdocs;. This is the folder which is used by the reverse-proxy when you open 10.0.0.1 (or the remote address) in your browser. This is the place where you need to put your dashboard.
The single HTML page
This is the simplest possible solution, a static HTML page. Drop the following file into /data/daemons/htdocs and call it index.html:
- index.html
<html> <body> <p><a href="/prowlarr">Access indexers and manual searches</a></p> <p><a href="/radarr">Organize movies</a></p> <p><a href="/sonarr">Organize TV shows</a></p> <p><a href="/lidarr">Organize music</a></p> <p><a href="/readarr-books">Organize books (Readarr)</a></p> <p><a href="/readarr-audiobooks">Organize audiobooks (Readarr)</a></p> <p><a href="/bazarr">Organize subtitles</a></p> <p><a href="/transmission">Transmission client</a></p> <p><a href="/nzbget">NzbGet client</a></p> <p><a href="/jellyfin">Media Server</a></p> </body> </html>
You can't go any simpler than this. It's also ugly.
The simple Dashboard
This is a very small client-side Javascript app that will fetch a list of links from a json file and generate on-the-fly a nice page for your browser. You need:
- One index.html page with little HTML and some Javascript
- One CSS file
- One site.json file containing the list of links
- Optionally, a subfolder called images with icons for the links
You can grab the repository here Simple Dashboard and directly clone it in your NGINX root folder:
cd /data/htdocs git clone https://github.com/gardiol/dashboard.git .
Then create the site.json file:
- site.json
{ "title" : "Home Server", "header" : { "img" : "", "text" : "Home Services" }, "content" : [ [ { "img" : "images/jellyfin.png", "text" : "Film, Serie TV, etc", "link" : "/jellyfin/", "style" : "box", "new_page" : true },{ "img" : "images/ombi.png", "text" : "Richieste", "link" : "/ombi/", "style" : "box", "new_page" : true }], [{ "img" : "images/nzbget.png", "text" : "NzbGet", "link" : "/nzbget/", "style" : "small", "new_page" : true },{ "img" : "images/torrent.png", "text" : "Deluge", "link" : "/deluge/", "style" : "small", "new_page" : true },{ "img" : "images/torrent.png", "text" : "Transmission", "link" : "/deluge/", "style" : "small", "new_page" : true },{ "img" : "images/prowlarr.png", "text" : "Indexers", "link" : "/prowlarr/", "style" : "small", "new_page" : true },{ "img" : "images/bazarr.png", "text" : "Subtitles", "link" : "/bazarr/", "style" : "small", "new_page" : true }], [{ "img" : "images/radarr.png", "text" : "Films", "link" : "/radarr/", "style" : "small", "new_page" : true },{ "img" : "images/lidarr.png", "text" : "Musica", "link" : "/lidarr/", "style" : "small", "new_page" : true },{ "img" : "images/sonarr.png", "text" : "Tv Shows", "link" : "/sonarr/", "style" : "small", "new_page" : true },{ "img" : "images/readarr.png", "text" : "Libri", "link" : "/readarr-books/", "style" : "small", "new_page" : true },{ "img" : "images/audiobooks.png", "text" : "Audiolibri", "link" : "/readarr-audiobooks/", "style" : "small", "new_page" : true } ] ] }
This dashboard you can easily configure by modifying the CSS.