This is an old revision of the document!
Prev to: Ombi: discover new content
Dashboard
You got to the end, at last.
At this point all you need is to create a wrap-up page with links to all the services to be used as landing page for your reverse-proxy. You can think of a link dashboard for easy access.
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.
Since i wanted something really simple and easy, i wrote my own 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 192.168.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="/lazylibrarian">Organize books/audiobooks (LazyLibrarian)</a></p> <p><a href="/bazarr">Organize subtitles</a></p> <p><a href="/transmission">Transmission client</a></p> <p><a href="/deluge">Deluge web client</a></p> <p><a href="/nzbget">NzbGet client</a></p> <p><a href="/jellyfin">Media Server</a></p> <p><a href="/ombi">Discover new content</a></p> </body> </html>
You can't go any simpler than this.
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 repositoruy 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 },{ "img" : "images/lazylibrarian.png", "text" : "LazyLibrarian", "link" : "/lazylibrarian/", "style" : "small", "new_page" : true } ] ] }
This dashboard you can easily configure by modifying the CSS.
Prev to: Ombi: discover new content