Merge pull request #68 from Lissy93/DOCS_Adds-showcase

Creates showcase page

README.md

@@ -30,18 +30,27 @@
 - Small bundle size, fully responsive UI and PWA makes the app easy to use on any device
 - Plus lots more...
 
-**Live Demos**: [Demo 1](https://dashy-demo-1.as93.net) ┆ [Demo 2](https://dashy-demo-2.as93.net) ┆ [Demo 3](https://dashy-demo-3.as93.net)
+## Demo ⚡
 
-**Spin up your own demo**: [![One-Click Deploy with PWD](https://img.shields.io/badge/Play--with--Docker-Deploy-2496ed?style=flat-square&logo=docker)](https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/Lissy93/dashy/master/docker-compose.yml)
+> For more examples of Dashy in action, see: [**The Showcase**](./docs/showcase.md)
 
-**Screenshots**
+#### Live Demos
-![Screenshots](https://i.ibb.co/r5T3MwM/dashy-screenshots.png)
+[Demo 1](https://dashy-demo-1.as93.net) ┆ [Demo 2](https://dashy-demo-2.as93.net) ┆ [Demo 3](https://dashy-demo-3.as93.net)
 
-**Recording**
+#### Spin up your own Demo
+- 1-Click Deploy: [![One-Click Deploy with PWD](https://img.shields.io/badge/Play--with--Docker-Deploy-2496ed?style=flat-square&logo=docker)](https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/Lissy93/dashy/master/docker-compose.yml)
+- Or on your own machine: `docker run -p 8080:80 lissy93/dashy`
+
+#### Recording
 <p align="center">
   <img width="800" src="https://i.ibb.co/L8YbNNc/dashy-demo2.gif" alt="Demo">
 </p>
 
+#### User Showcase
+Are using Dashy? Want to share your dashboard here too - [Submit your Screenshots to the Showcase](./docs/showcase.md#submitting-your-dashboard)!
+
+![Screenshots](https://i.ibb.co/r5T3MwM/dashy-screenshots.png)
+
 **[⬆️ Back to Top](#dashy)**
 
 ---
@@ -131,7 +140,7 @@ You may find these [example config](https://gist.github.com/Lissy93/000f712a5ce9
 
 <p align="center">
   <a href="https://i.ibb.co/BVSHV1v/dashy-themes-slideshow.gif">
-    <img alt="Example Themes" src="/docs/assets/theme-slideshow.gif" width="400">
+    <img alt="Example Themes" src="https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/theme-slideshow.gif" width="400">
   </a>
 </p>
 
@@ -204,7 +213,7 @@ Dashy has an optional feature that can display a small icon next to each of your
 By default, this feature is off, but you can enable it globally by setting `appConfig.statusCheck: true`, or enable/ disable it for an individual item, with `item[n].statusCheck`. You can also specify an time interval in seconds under `appConfig.statusCheckInterval`, which will determine how often to recheck services, if this value is `0`, then status is only checked on initial page load, this is default behavior.
 
 <p align="center">
-  <img alt="Status Checks demo" src="/docs/assets/status-check-demo.gif" width="600">
+  <img alt="Status Checks demo" src="https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/status-check-demo.gif" width="600">
 </p>
 
 **[⬆️ Back to Top](#dashy)**
@@ -229,7 +238,19 @@ The modal and workspace views work by rendering the target application in an ifr
 
 Here's a quick demo of the workspace view:
 <p align="center">
-  <img alt="Workspace view demo" src="/docs/assets/workspace-demo.gif" width="600">
+  <img alt="Workspace view demo" src="https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/workspace-demo.gif" width="600">
+</p>
+
+**[⬆️ Back to Top](#dashy)**
+
+---
+
+## Config Editor ⚙️
+
+From the Settings Menu in Dashy, you can download, backup, edit and rest your config. An interactive editor makes editing the config file easy, it will tell you if you've got any errors. After making your changes, you can either apply them locally, or export into your main config file. After saving to the config file to the disk, the app will need to be rebuilt. This will happen automatically, but may take a few minutes. You can also manually trigger a rebuild from the Settings Menu. A full list of available config options can be found [here](./docs/configuring.md). It's recommend to make a backup of your configuration, as you can then restore it into a new instance of Dashy, without having to set it up again.
+
+<p align="center">
+  <img alt="Workspace view demo" src="https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/config-editor-demo.gif" width="600">
 </p>
 
 **[⬆️ Back to Top](#dashy)**
@@ -357,7 +378,8 @@ The 1-Click deploy demo uses [Play-with-Docker Labs](https://play-with-docker.co
 
 ### Alternatives 🙌
 
-There are a few self-hosted web apps, that serve a similar purpose to Dashy. If you're looking for a dashboard, and Dashy doesn't meet your needs, I highly recommend you check these projects out! Including, but not limited to: [HomeDash2](https://lamarios.github.io/Homedash2), [Homer](https://github.com/bastienwirtz/homer) (`Apache License 2.0`), [Organizr](https://organizr.app/) (`GPL-3.0 License`) and  [Heimdall](https://github.com/linuxserver/Heimdall) (`MIT License`)
+There are a few self-hosted web apps, that serve a similar purpose to Dashy. If you're looking for a dashboard, and Dashy doesn't meet your needs, I highly recommend you check these projects out! 
+[HomeDash2](https://lamarios.github.io/Homedash2), [Homer](https://github.com/bastienwirtz/homer) (`Apache License 2.0`), [Organizr](https://organizr.app/) (`GPL-3.0 License`) and  [Heimdall](https://github.com/linuxserver/Heimdall) (`MIT License`)
 
 **[⬆️ Back to Top](#dashy)**
 
@@ -387,8 +409,8 @@ OR OTHER DEALINGS IN THE SOFTWARE.
 **TDLR;** _You can do whatever you like with Dashy: use it in private or commercial settings,_
 _redistribute and modify it. But you must display this license and credit the author._
 _There is no warranty that this app will work as expected, and the author cannot be held_
-_liable for anything that goes wrong._ For more info, see
+_liable for anything that goes wrong._
-[TLDR Legal's MIT Explanation of the MIT License](https://tldrlegal.com/license/mit-license)
+For more info, see TLDR Legal's [Explanation of MIT](https://tldrlegal.com/license/mit-license)
 
 ![Octocat](https://github.githubassets.com/images/icons/emoji/octocat.png?v8)
 

docs/configuring.md

@@ -1,4 +1,4 @@
-## Configuring
+# Configuring
 
 All app configuration is specified in [`/public/conf.yml`](https://github.com/Lissy93/dashy/blob/master/public/conf.yml) which is in [YAML Format](https://yaml.org/) format.
 
@@ -11,17 +11,17 @@ There's a couple of things to remember, before getting started:
 - You can check that your config file fits the schema, by running `yarn validate-config`
 - Any which are only saved locally through the UI need to be exported into this file, in order for them to persist across devices
 
-#### Config Saving Methods
+### Config Saving Methods
 When updating the config through the JSON editor in the UI, you have two save options: **Local** or **Write to Disk**. Changes saved locally will only be applied to the current user through the browser, and to apply to other instances, you either need to use the cloud sync feature, or manually update the conf.yml file. On the other-hand, if you choose to write changes to disk, then your main `conf.yml` file will be updated, and changes will be applied to all users, and visible across all devices. 
 
-#### Preventing Changes being Written to Disk
+### Preventing Changes being Written to Disk
 To disallow any changes from being written to disk, then set `appConfig.allowConfigEdit: false`. If you are using users, and have setup `auth` within Dashy, then only users with `type: admin` will be able to write config changes to disk.
 
 It is recommended to make a backup of your config file.
 
 All fields are optional, unless otherwise stated.
 
-#### Top-Level Fields
+### Top-Level Fields
 
 **Field** | **Type** | **Required**| **Description**
 --- | --- | --- | ---
@@ -31,7 +31,7 @@ All fields are optional, unless otherwise stated.
 
 **[⬆️ Back to Top](#configuring)**
 
-#### `PageInfo`
+### `PageInfo`
 
 **Field** | **Type** | **Required**| **Description**
 --- | --- | --- | ---
@@ -42,7 +42,7 @@ All fields are optional, unless otherwise stated.
 
 **[⬆️ Back to Top](#configuring)**
 
-#### `pageInfo.navLinks` _(optional)_
+### `pageInfo.navLinks` _(optional)_
 
 **Field** | **Type** | **Required**| **Description**
 --- | --- | --- | ---
@@ -51,7 +51,7 @@ All fields are optional, unless otherwise stated.
 
 **[⬆️ Back to Top](#configuring)**
 
-#### `appConfig` _(optional)_
+### `appConfig` _(optional)_
 
 **Field** | **Type** | **Required**| **Description**
 --- | --- | --- | ---
@@ -75,7 +75,7 @@ All fields are optional, unless otherwise stated.
 
 **[⬆️ Back to Top](#configuring)**
 
-#### `appConfig.auth` _(optional)_
+### `appConfig.auth` _(optional)_
 
 **Field** | **Type** | **Required**| **Description**
 --- | --- | --- | ---
@@ -85,7 +85,7 @@ All fields are optional, unless otherwise stated.
 
 **[⬆️ Back to Top](#configuring)**
 
-#### `section`
+### `section`
 
 **Field** | **Type** | **Required**| **Description**
 --- | --- | --- | ---
@@ -96,7 +96,7 @@ All fields are optional, unless otherwise stated.
 
 **[⬆️ Back to Top](#configuring)**
 
-#### `section.item`
+### `section.item`
 
 **Field** | **Type** | **Required**| **Description**
 --- | --- | --- | ---
@@ -111,7 +111,7 @@ All fields are optional, unless otherwise stated.
 
 **[⬆️ Back to Top](#configuring)**
 
-#### `section.displayData` _(optional)_
+### `section.displayData` _(optional)_
 
 **Field** | **Type** | **Required**| **Description**
 --- | --- | --- | ---
@@ -127,7 +127,7 @@ All fields are optional, unless otherwise stated.
 
 **[⬆️ Back to Top](#configuring)**
 
-#### `section.icon` and `section.item.icon`
+### `section.icon` and `section.item.icon`
 
 **Field** | **Type** | **Required**| **Description**
 --- | --- | --- | ---
@@ -135,7 +135,7 @@ All fields are optional, unless otherwise stated.
 
 **[⬆️ Back to Top](#configuring)**
 
-#### Example
+### Example
 
 ```yaml
 ---

docs/showcase.md

@@ -0,0 +1,63 @@
+# Dashy Showcase
+
+> Do you use Dashy? Got a sweet dashboard? Submit it to the showcase! [See How](#submitting-your-dashboard)
+
+### Home Lab 2.0
+
+![screenshot-homelab](https://raw.githubusercontent.com/Lissy93/dashy/master/docs/showcase/1-home-lab-material.png)
+
+---
+
+### Networking Services
+
+![screenshot-networking-services](https://raw.githubusercontent.com/Lissy93/dashy/master/docs/showcase/2-networking-services-minimal-dark.png)
+
+---
+
+### CFT Toolbox
+
+![screenshot-cft-toolbox](https://raw.githubusercontent.com/Lissy93/dashy/master/docs/showcase/3-cft-toolbox.png)
+
+---
+
+### Bookmarks
+
+![screenshot-bookmarks](https://raw.githubusercontent.com/Lissy93/dashy/master/docs/showcase/4-bookmarks-colourful.png)
+
+---
+
+### Project Management
+
+![screenshot-project-managment](https://raw.githubusercontent.com/Lissy93/dashy/master/docs/showcase/5-project-managment.png)
+
+---
+
+## Submitting your Dashboard
+
+#### How to Submit
+- Open an Issue
+- Open a PR
+
+#### What to Include
+Please include the following information:
+- A single high-quality screenshot of your Dashboard
+- A short title (it doesn't have to be particularly imaginative)
+- An optional description, you could include details on anything interesting or unique about your dashboard, or say how you use it, and why it's awesome
+- Optionally leave your name or username, with a link to your GitHub, Twitter or Website
+
+#### Template
+
+If you're submitting a pull request, please use a format similar to this:
+
+```
+### [Dashboard Name] (required)
+
+> Submitted by [@username](https://github.com/user) (optional)
+
+![dashboard-screenshot](/docs/showcase/screenshot-name.jpg) (required)
+
+[An optional text description, or any interesting details] (optional)
+
+---
+
+```