Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| sailing:dashboards [2023/12/06 08:43] – [The simple Dashboard] sailor | sailing:dashboards [2024/02/27 12:39] (current) – removed willy | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | Prev to: [[sailing: | ||
| - | ---- | ||
| - | ====== 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 // | ||
| - | * Only depends on [[https:// | ||
| - | * 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 / | ||
| - | |||
| - | ===== The single HTML page ===== | ||
| - | |||
| - | This is the simplest possible solution, a static HTML page. Drop the following file into **/ | ||
| - | <file html index.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 // | ||
| - | * Optionally, a subfolder called //images// with icons for the links | ||
| - | |||
| - | You can grab the repositoruy here [[https:// | ||
| - | <code bash> | ||
| - | > cd / | ||
| - | > git clone https:// | ||
| - | </ | ||
| - | |||
| - | Then create the **site.json** file: | ||
| - | <file json site.json> | ||
| - | { | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | }, | ||
| - | " | ||
| - | [ [ { | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | },{ | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | }], | ||
| - | [{ | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | },{ | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | },{ | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | },{ | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | },{ | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | }], | ||
| - | |||
| - | [{ | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | },{ | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | },{ | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | },{ | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | },{ | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | },{ | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | } ] ] | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | This dashboard you can easily configure by modifying the CSS. | ||
| - | |||
| - | ---- | ||
| - | Prev to: [[sailing: | ||