🔀 Merge pull request #331 from Lissy93/REFACTOR/updates-favicon-fetching-and-docs

[REFACTOR] Updates favicon fetching and docs
This commit is contained in:
Alicia Sykes 2021-11-13 17:24:58 +00:00 committed by GitHub
commit 1a58d85ccc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 83 additions and 204 deletions

245
README.md
View File

@ -88,8 +88,6 @@
## Demo ⚡
> For more examples of Dashy in action, see: [**The Showcase**](./docs/showcase.md)
**Live Instances**: [Demo 1](https://demo.dashy.to) (Live Demo) ┆ [Demo 2](https://live.dashy.to) (Dashy Links) ┆ [Demo 3](https://dev.dashy.to) (Dev Preview)
**Screenshots**: Checkout the [Showcase](./docs/showcase.md), to see example dashboards from the community
@ -166,13 +164,7 @@ Dashy supports 1-Click deployments on several popular cloud platforms. To spin u
> For full configuration documentation, see: [**Configuring**](./docs/configuring.md)
All of Dashy's configuration is specified in a single [YAML](https://yaml.org/) file, located at `./public/conf.yml`. You can find a complete list of available options in th [Configuring Docs](/docs/configuring.md). If you're using Docker, you'll probably want to pass this file in as a Docker volume (e.g. `-v /root/my-local-conf.yml:/app/public/conf.yml`).
The config can also be edited directly through the UI with changes written to your conf.yml file. After making any modifications the app needs to be rebuilt, which will happen automatically or can be trigger with `yarn build` or directly through the UI.
You can check that your config is valid and matches Dashy's [schema](https://github.com/Lissy93/dashy/blob/master/src/utils/ConfigSchema.json), by running: `yarn validate-config`.
Finally, you may find these [example config](https://gist.github.com/Lissy93/000f712a5ce98f212817d20bc16bab10) helpful for getting you started.
Dashy is configured through a YAML file, located at `./public/conf.yml`. You can find a complete list of available options in th [Configuring Docs](/docs/configuring.md). The config can also be edited and saved directly through the UI.
**[⬆️ Back to Top](#dashy)**
@ -182,14 +174,14 @@ Finally, you may find these [example config](https://gist.github.com/Lissy93/000
> For full theming documentation, see: [**Theming**](./docs/theming.md)
Dashy comes pre-bundled with several built-in themes, which you can preview, applied and edited through the UI. With the theme configurator, and support for custom CSS, everything is in place for you to easily develop your own unique looking dashboard.
<p align="center">
<a href="https://i.ibb.co/BVSHV1v/dashy-themes-slideshow.gif">
<img alt="Example Themes" src="https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/theme-slideshow.gif" width="400" />
</a>
</p>
Dashy comes with a number of built-in themes, but it's also easy to make your own. You can either use the color editor, or your own custom CSS. All colors, and most other CSS properties are specified using CSS variables, which are [documented here](./docs/theming.md#css-variables), thereby customizing the look and feel of Dashy. Learn more about adding your own theme in the [docs](https://github.com/Lissy93/dashy/blob/master/docs/theming.md#adding-your-own-theme).
<p align="center">
<a href="https://i.ibb.co/cLDXj1R/dashy-theme-configurator.gif">
<img alt="Example Themes" src="https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/theme-config-demo.gif" width="400" />
@ -204,21 +196,28 @@ Dashy comes with a number of built-in themes, but it's also easy to make your ow
> For full iconography documentation, see: [**Icons**](./docs/icons.md)
Both sections and items can have an icon associated with them, and defined under the `icon` attribute. There are many options for icons, including Font Awesome support, automatic fetching from favicon, emojis, programmatically generated icons and direct local or remote URLs.
Both sections and items can have an icon associated with them, defined under the `icon` attribute. With several different icon packs supported, you'll be able to find the perfect thumbnail for any app or service.
The following icon types are supported:
- **Favicon** - Automatically fetch an apps icon from it's favicon or logo image
- **Icon Packs** - Use any icon from [font-awesome], [simple-icons] or [material icons]
- **Emoji** - Any valid emoji can be used as an icon
- **Generative** - Unique, auto-generated images for easily identifying services
- **URL** - Pass the URL of any valid image in to have it fetched and rendered
- **Local** - Store custom images locally, and reference by filename
- **Homelab Icons** - Using [dashboard-icons] for logos of commonly self-hosted services
[font-awesome]: https://fontawesome.com/icons
[simple-icons]: https://simpleicons.org/
[material icons]: https://github.com/Templarian/MaterialDesign
[dashboard-icons]: https://github.com/WalkxCode/dashboard-icons
<p align="center">
<img width="400" src="https://i.ibb.co/GTVmZnc/dashy-example-icons.png" />
</p>
- **Favicon**: Set `icon: favicon` to fetch a services icon automatically from the URL of the corresponding application
- **Font-Awesome**: To use any font-awesome icon, specify the category, followed by the icon name, e.g. `fas fa-rocket` or `fab fa-monero`. You can also use Pro icons if you have a license key, just set it under `appConfig.fontAwesomeKey`
- **Home Lab Icons**: For common self-hosted services, you can use any icon from @WalkxCode's [dashboard-icons](https://github.com/WalkxCode/dashboard-icons) repo, by preceding it with `hl-`, e.g. `icon: hl-pihole`
- **Emoji**: Use an emoji as a tile icon, by putting the emoji's code as the icon attribute. Emojis can be specified either as emojis (`🚀`), unicode (`'U+1F680'`) or shortcode (`':rocket:'`)
- **Generative**: Setting `icon: generative`, will generate a unique logo for a given service, based on it's specified URL or IP
- **URL**: You can also pass in a URL to an icon asset, hosted either locally or using any CDN service. E.g. `icon: https://i.ibb.co/710B3Yc/space-invader-x256.png`
- **Local Image**: To use a local image, store it in `./public/item-icons/` (or create a volume in Docker: `-v /local/image/directory:/app/public/item-icons/`) , and reference it by name and extension - e.g. set `icon: image.png` to use `./public/item-icon/image.png`. You can also use sub-folders here
- **Simple Icons**: Use any brand/ logo icon from [simpleicons.org](https://simpleicons.org/) by setting the icon to `si-[icon-name]`
- **Material Design Icons**: You can also use any icon from [materialdesignicons.com](https://dev.materialdesignicons.com/icons) by setting the icon to `mdi-[icon-name]`
**[⬆️ Back to Top](#dashy)**
@ -228,11 +227,9 @@ Both sections and items can have an icon associated with them, and defined under
> For full monitoring documentation, see: [**Status Indicators**](./docs/status-indicators.md)
Dashy has an optional feature that can display a small icon next to each of your running services, indicating it's current status. This is useful if you are using Dashy as your homelab's start page, as it gives you an overview of the health of each of your running services. Hovering over the indicator will show additional information, including average response time and an error message for services which are down.
Dashy has an optional feature that can check if each app/ service is up and responding, then display a small status indicator icon. Hovering over it will show additional stats like response time and status code.
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`, between checks, if this value is `0`, then status is only checked on initial page load, which is the default behavior. Status checks use the `url` attribute, but to call a different endpoint instead, you can set `statusCheckUrl`. Custom headers can also be specified using `statusCheckHeaders`.
Status indicators can be globally enabled by setting `appConfig.statusCheck: true`, or enabled/ disabled on a per-item basis. Status is checked on page load, but you can enable continuous polling by specifying a time interval between checks, in seconds under `appConfig.statusCheckInterval`. You can also use a different endpoint for status checking, with `statusCheckUrl`, and if needed pass in custom headers under `statusCheckHeaders`.
<p align="center">
<img alt="Status Checks demo" src="https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/status-check-demo.gif" width="600" />
@ -246,9 +243,10 @@ You can also specify an time interval in seconds under `appConfig.statusCheckInt
> For full authentication documentation, see: [**Authentication**](./docs/authentication.md)
Dashy has full support for secure single-sign-on using [Keycloak](https://www.keycloak.org/) for secure, easy authentication, see [setup docs](/docs/authentication.md#keycloak) for a full usage guide
Dashy has full support for secure single-sign-on using [Keycloak](https://www.keycloak.org/) for secure, easy authentication, see [setup docs](/docs/authentication.md#keycloak) for a full usage guide.
There is also a basic auth feature, which doesn't require any additional setup. To enable this, just add an `auth` attribute under `appConfig`, containing an array of `users`, each with a username, SHA-256 hashed password and optional user type. Basic auth also has support for several access control features, including read-only guest access and granular controls.
There is also a simple login feature for basic access control, which doesn't require any additional setup. To enable this feature, just add an `auth` attribute under `appConfig`, containing an array of `users`, each with a username, SHA-256 hashed password and optional user type.
```yaml
appConfig:
@ -259,60 +257,19 @@ appConfig:
type: admin
```
**Guest Access**: By default, when authentication is configured no user can access your dashboard without first logging in. If you would like to allow for read-only access by unauthenticated users, then you can enable guest mode, by setting `appConfig.auth.enableGuestAccess: true`.
**Granular Controls**: With basic login, it is also possible to control which sections are visible to which users. Under the `displayData` property of a section, you can pass an array of usernames to one of the following attributes:
- `hideForUsers` - Section will be visible to all users, except for those specified in this list
- `showForUsers` - Section will be hidden from all users, except for those specified in this list
- `hideForGuests` - Section will be visible for all logged in users, but not for guests (if guest access is enabled)
<p align="center">
<img
title="Example login screen, using Vapourwave theme"
alt="Example login screen, using Vapourwave theme"
src="https://i.ibb.co/K52YL1g/dashy-login-form.png"
width="400"
/>
</p>
For setup instructions for other access control systems, please see the [Alternative Auth Methods](./docs/authentication.md#alternative-authentication-methods) docs.
Other access control systems are also supported, see the [Alternative Auth Methods](./docs/authentication.md#alternative-authentication-methods) docs.
**[⬆️ Back to Top](#dashy)**
---
## Opening Methods 🖱️
> For full documentation on views and opening methods, see: [**Alternate Views**](./docs/alternate-views.md)
One of the primary purposes of Dashy is to make launching commonly used apps and services as quick as possible. To aid in this, there are several different options on how items can be opened. You can configure your preference by setting the `target` property of any item, to one of the following values:
- `sametab` - The app will be launched in the current tab
- `newtab` - The app will be launched in a new tab
- `modal` - Launch app in a resizable/ movable popup modal on the current page
- `workspace` - Changes to Workspace view, and launches app
- `top` - Opens in the top-most browsing context, useful if your accessing Dashy through an iframe
You can also set the default opening method, which will be applied to all items that don't have a specified target, using `appConfig.defaultOpeningMethod`, to one of the above values.
Even if the target is not set (or is set to `sametab`), you can still launch any given app in an alternative method: Alt + Click will open the modal, and Ctrl + Click will open in a new tab. You can also right-click on any item to see all options (as seen in the screenshot below). This custom context menu can be disabled by setting `appConfig.disableContextMenu: true`.
In the workspace view, you can keep previously opened websites/ apps open in the background, by setting `appConfig.enableMultiTasking: true`. This comes at the cost of performance, but does mean that your session with each app is preserved, enabling you to quickly switch between your apps.
<p align="center">
<img width="500" src="https://i.ibb.co/vmZdSRt/dashy-context-menu-2.png" />
</p>
The modal and workspace views work by rendering the target application in an iframe. If you are getting a a `Refused to Connect` error, then you need to set the HTTP response header [`X-Frame-Options`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options) to `ALLOW [url-for-dashy]`. See [the docs](./docs/troubleshooting.md#refused-to-connect-in-modal-or-workspace-view) for instructions on how to do this.
---
## Alternate Views 👓
As well as the default homepage, there is also:
- A minimal view, useful for use as a browser start page
- A workspace view, useful for visiting many apps simultaneously
You can change the view from the UI, using the switch icon in the top-right corner, or select a default view in the config, under `appConfig.startingView` attribute (can be either `default`, `minimal` or `workspace`). Clicking the page title on any view will take you back to your default starting view.
You can change the view from the UI, using the switch icon in the top-right corner, or select a default view in the config, under `appConfig.startingView` attribute.
<p align="center">
<b>Example of Workspace View</b><br>
@ -328,51 +285,47 @@ You can change the view from the UI, using the switch icon in the top-right corn
---
## Opening Methods 🖱️
> For full documentation on views and opening methods, see: [**Alternate Views**](./docs/alternate-views.md)
There are several different ways apps can be launched. You can specify the default opening method for any given item under the `target` attribute, or set a site-wide default under `appConfig.defaultOpeningMethod`. Right-click on an item to item for all options. The following options are supported:
- `sametab` - The app will be launched in the current tab
- `newtab` - The app will be launched in a new tab (or use Ctrl + Click)
- `modal` - Launch app in a resizable/ movable popup modal on the current page (or use Alt + Click)
- `workspace` - Changes to Workspace view, and launches app
- `top` - Opens in the top-most browsing context, useful if your accessing Dashy through an iframe
---
## Searching and Shortcuts 🔎
> For full documentation on searching, see: [**Searching & Shortcuts**](./docs/searching.md)
Quickly finding and launching applications is the primary aim of Dashy. To that end instant search and customizable keyboard shortcuts are built-in.
To start filtering, just start typing. No need to select the search bar or use any special key. You can then use either the tab key or arrow keys to select and move between results, and hit enter to launch the currently selected application. You can also use `Alt + Enter` on a selected app to launch it in a popup modal, `Ctrl + Enter` to open in new tab, or right-click on it to see all opening methods.
To start filtering, just start typing. No need to select the search bar or use any special key. Then use either the tab key or arrow keys to select and move between results, and hit enter to launch the currently selected application.
For apps that you use regularly, you can set a custom keybinding. Use the `hotkey` parameter on a certain item to specify a numeric key, between `0 - 9`. You can then launch that app, by just pressing that key.
You can also add custom tags to a given item, to make finding them based on keywords easier. For example, in the following example, searching for 'Movies' will show 'Plex'
```yaml
items:
- title: Plex
description: Media library
hotkey: 8
icon: favicon
description: Media library
url: https://plex.lab.local
tags: [ movies, videos, music ]
```
For apps that you use regularly, you can set a custom keybinding. Use the `hotkey` parameter on a certain item to specify a numeric key, between `0 - 9`. You can then launch that app, by just pressing that key, which is very useful for services you use frequently.
Example:
```yaml
- title: Bookstack
icon: far fa-books
url: https://bookstack.local/
hotkey: 8
```
To search the web directly through Dashy, just press enter after typing your query. Options for web search are set under `appConfig.webSearch`. There is built in support for [10+ search engines](./docs/searching.md#setting-search-engine), or [use your own custom provider](./docs/searching.md#using-custom-search-engine) or self-hosted instance.
To disable web search all together, set: `webSearch: { disableWebSearch: true }`
To search the web directly through Dashy, just press enter after typing your query. Options for web search are set under `appConfig.webSearch`. There is built in support for [10+ search engines](./docs/searching.md#setting-search-engine), or [use your own custom provider](./docs/searching.md#using-custom-search-engine) or self-hosted instance. With the web search, you can also define your own bangs, to redirect results to any given app, website or search engine, when the query is preceded with a certain character sequence (usually beginning in `/`, `!` or `:`).
```yaml
webSearch:
searchEngine: duckduckgo
openingMethod: newtab
```
With the web search, you can also define your own bangs, to redirect results to any given app, website or search engine, when the query is preceded with a certain character sequence (usually beginning in `/`, `!` or `:`).
For example, with the below code, typing `:git dashy` will search GitHub for Dashy, or `/w docker` will open the Docker Wikipedia page.
```yaml
webSearch:
searchBangs:
/r: reddit
/w: wikipedia
@ -395,18 +348,17 @@ As well as passing in a YAML config file, you can also configure the app directl
To edit any section or item, right-click on it, and select "Edit", or enter the Edit Mode (using the Pen icon in the top-right), then click any part of the page to edit. Changes will be visible immediately, but will not be saved until you click "Save to Disk" or "Save Locally".
Under the config menu, you can export, view, backup, or reset app config, as well as edit the raw config file in a text editor, with built-in schema validation. It's recommended to keep a backup of your config.
<p align="center">
<img alt="Interactive Editor demo" src="https://user-images.githubusercontent.com/1862727/139543020-b0576d28-0830-476f-afc8-a815d4de6def.gif" width="600" />
</p>
Under the config menu, you can export, view, backup, or reset app config, as well as edit the raw config file in a text editor, with built-in schema validation.
<p align="center">
<img alt="Config Editor demo" src="https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/config-editor-demo.gif" width="600" />
</p>
A full list of available config options can be found [here](./docs/configuring.md). It's recommend to make and keep a backup of your configuration, to easily restore it into a new instance of Dashy.
**[⬆️ Back to Top](#dashy)**
---
@ -419,10 +371,6 @@ Dashy has an **optional** built-in feature for securely backing up your config t
All data is fully E2E encrypted before being sent to the backend (done in [`CloudBackup.js`](https://github.com/Lissy93/dashy/blob/master/src/utils/CloudBackup.js) using [crypto.js](https://github.com/brix/crypto-js)'s AES method). The data is then sent to a [Cloudflare worker](https://developers.cloudflare.com/workers/learning/how-workers-works), and stored in a [KV](https://developers.cloudflare.com/workers/learning/how-kv-works) data store.
<p align="center">
<img width="400" src="https://i.ibb.co/yBrVN4N/dashy-cloud-sync.png" />
</p>
**[⬆️ Back to Top](#dashy)**
---
@ -430,7 +378,7 @@ All data is fully E2E encrypted before being sent to the backend (done in [`Clou
## Language Switching 🌎
> For full internationalization documentation, see: [**Multi-Language Support**](./docs/multi-language-support.md)
Dashy supports multiple languages and locales. When available, you're language should be automatically detected and applied on load, based on your browser or systems settings. But you can also select a language through the UI (under Config --> Switch Language), or set `appConfig.language` to your language (specified as a 2-digit [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes)).
Dashy supports multiple languages and locales. When available, your language should be automatically detected and applied on load. But you can also select a language through the UI (under Config --> Switch Language), or set `appConfig.language` to your language (specified as a 2-digit [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes)).
#### Supported Languages
- 🇬🇧 **English**: `en` - _Default_
@ -450,36 +398,7 @@ Dashy supports multiple languages and locales. When available, you're language s
- 🇯🇵 **Japanese**: `ja` - Contributed by Anon
#### Add your Language
I would love for Dashy to be available to everyone, without language being a barrier to entry for non-native English speakers. If you have a few minutes to spare, you're help with translating it would be very much appreciated.
It's quite a quick task, all text is in [a single JSON file](https://github.com/Lissy93/dashy/tree/master/src/assets/locales), and you don't have to translate it all. For more info, see the [Adding a New Language Docs](./docs/multi-language-support.md#adding-a-new-language).
**[⬆️ Back to Top](#dashy)**
---
## Setting Dashboard Info 🌳
Page settings are defined under [`pageInfo`](https://github.com/Lissy93/dashy/blob/master/docs/configuring.md#pageinfo). Here you can set things like title, sub-title, navigation links, footer text, etc. For example:
```yaml
pageInfo:
title: Home Lab
description: Dashy
navLinks:
- title: Home
path: /
- title: Server Monitoring
path: https://server-start.local
- title: Start Page
path: https://start-page.local
footerText: 'My <b>Awesome</b> Dashboard. Built with <a href="https://dashy.to">Dashy</a>'
```
You can also edit this through the UI, by entering Edit mode, then clicking Edit Page Info.
<p align="center">
<img width="400" src="https://i.ibb.co/WyZ1Yzd/edit-page-info.png" alt="Edit Page Info Screenshot" />
</p>
I would love Dashy to be available to everyone, without language being a barrier to entry. If you've got a few minutes to spare, consider adding translations for your language. It's a quick task and all text is in [a single JSON file](https://github.com/Lissy93/dashy/tree/master/src/assets/locales). Since any missing text will fallback to English, you don't need to translate it all.
**[⬆️ Back to Top](#dashy)**
@ -500,26 +419,17 @@ Latest ✔ | Latest ✔ | 10+ ✔ | Latest ✔ | 6.1+ ✔ |
---
## Getting Help 🙋‍♀️
## Support 🙋‍♀️
> For general discussions, check out the **[Discussions Board](https://github.com/Lissy93/dashy/discussions)**
If you're having trouble getting Dashy up and running, or have a question about usage or configuration, feel free to ask. The best place to do this is via [the Discussions](https://github.com/Lissy93/dashy/discussions).
If you're having trouble getting things up and running, feel free to ask a question. The best way to do so is in the [discussion](https://github.com/Lissy93/dashy/discussions), or if you think you think the issue is on Dashy's side, you can [raise a ticket](https://github.com/Lissy93/dashy/issues/new/choose). It's best to check the [docs](./docs), [previous issues](https://github.com/Lissy93/dashy/issues?q=label%3A%22%F0%9F%A4%B7%E2%80%8D%E2%99%82%EF%B8%8F+Question%22+) and [troubleshooting guide](./docs/troubleshooting.md) first, as often the solution is already there.
If you've found something which isn't working as it should, please raise a bug by [opening a ticket](https://github.com/Lissy93/dashy/issues/new/choose).
It's best to check the [docs](./docs), [previous issues](https://github.com/Lissy93/dashy/issues?q=label%3A%22%F0%9F%A4%B7%E2%80%8D%E2%99%82%EF%B8%8F+Question%22+) and [troubleshooting guide](./docs/troubleshooting.md) first.
**[⬆️ Back to Top](#dashy)**
## Raising Issues 🐛
Found a bug, or something that isn't working as you'd expect? Please raise it as an issue so that it can be resolved. Feature requests are also welcome. Similarlty, feedback is very useful, as it helps me know what areas of Dashy need some improvement.
- [Raise a Bug 🐛](https://github.com/Lissy93/dashy/issues/new?assignees=lissy93&labels=%F0%9F%90%9B+Bug&template=bug.yml&title=%5BBUG%5D+%3Ctitle%3E)
- [Submit a Feature Request 🦄](https://github.com/Lissy93/dashy/issues/new?template=feature-request.yml)
- [Share Feedback 🌈](https://github.com/Lissy93/dashy/issues/new?assignees=&labels=%F0%9F%8C%88+Feedback&template=share-feedback.md&title=%5BFEEDBACK%5D)
**Issue Status** [![Resolution Time](http://isitmaintained.com/badge/resolution/lissy93/dashy.svg)](https://isitmaintained.com/project/lissy93/dashy) [![Open Issues](http://isitmaintained.com/badge/open/lissy93/dashy.svg)](https://github.com/Lissy93/dashy/issues) [![Closed Issues](https://badgen.net/github/closed-issues/lissy93/dashy)](https://github.com/Lissy93/dashy/issues?q=is%3Aissue+is%3Aclosed) [![GitHub Discussions](https://img.shields.io/github/discussions/lissy93/dashy)
](https://github.com/Lissy93/dashy/discussions)
**[⬆️ Back to Top](#dashy)**
---
## Supporting Dashy 💖
@ -532,7 +442,6 @@ Several areas that we need a bit of help with at the moment are:
- Donate a small amount, by [Sponsoring @Lissy93 on GitHub](https://github.com/sponsors/Lissy93) and receive some extra perks!
- Complete a [short survey](https://survey.typeform.com/to/gl0L68ou), to have your say about future features
- Share your dashboard in the [Showcase](https://github.com/Lissy93/dashy/blob/master/docs/showcase.md#dashy-showcase-), to provide inspiration for others
- Join the [discussion](https://github.com/Lissy93/dashy/discussions), help answer other users questions, suggest features, share tips and ask questions
- Spread the word, by sharing Dashy or a screenshot of your dashboard, to help new users discover it
- Submit a PR, to add a new feature, fix a bug, update the docs, add a theme or something else
- Star Dashy on GitHub/ DockerHub or leave an upvote / review on [these platforms](https://github.com/Lissy93/dashy/blob/master/docs/contributing.md#star-upvote-or-leave-a-review)
@ -555,7 +464,7 @@ Huge thanks to the sponsors helping to support Dashy's development!
<tr>
<td align="center">
<a href="https://github.com/mfnalex">
<img src="https://avatars.githubusercontent.com/u/1122571?u=5503223f5a5077197ddc229a938a5c3120a276ce&v=4" width="80;" alt="mfnalex"/>
<img src="https://avatars.githubusercontent.com/u/1122571?v=4" width="80;" alt="mfnalex"/>
<br />
<sub><b>Mfnalex</b></sub>
</a>
@ -566,13 +475,6 @@ Huge thanks to the sponsors helping to support Dashy's development!
<br />
<sub><b>Robert Ernst</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/DylanBeMe">
<img src="https://avatars.githubusercontent.com/u/41838333?v=4" width="80;" alt="DylanBeMe"/>
<br />
<sub><b>DylanH</b></sub>
</a>
</td></tr>
</table>
<!-- readme: sponsors -end -->
@ -580,18 +482,10 @@ Huge thanks to the sponsors helping to support Dashy's development!
#### Contributors
[![Auto-generated contributors](https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/CONTRIBUTORS.svg)](./docs/credits.md)
#### Packages
Dashy was made possible thanks to the following packages and components. For more details on each, see [Dependency Credits](./docs/credits.md#dependencies-). Full credit to their respective authors.
- **Utils**: [`crypto-js`](https://github.com/brix/crypto-js), [`axios`](https://github.com/axios/axios), [`ajv`](https://github.com/ajv-validator/ajv)
- **Components**: [`vue-select`](https://github.com/sagalbot/vue-select) by @sagalbot, [`vue-js-modal`](https://github.com/euvl/vue-js-modal) by @euvl, [`v-tooltip`](https://github.com/Akryum/v-tooltip) by @Akryum, [`vue-material-tabs`](https://github.com/jairoblatt/vue-material-tabs) by @jairoblatt, [`JsonEditor`](https://github.com/josdejong/jsoneditor) by @josdejong, [`vue-toasted`](https://github.com/shakee93/vue-toasted) by @shakee93
- **Core**: Vue.js, TypeScript, SCSS, Node.js, ESLint
- **Backup & sync**: This server uses [Cloudflare workers](https://workers.cloudflare.com/) plus [KV](https://developers.cloudflare.com/workers/runtime-apis/kv) and [web crypto](https://developers.cloudflare.com/workers/runtime-apis/web-crypto)
- **Services**: The 1-Click demo uses [Play-with-Docker Labs](https://play-with-docker.com/). Code is hosted on [GitHub](https://github.com), Docker image is hosted on [DockerHub](https://hub.docker.com/), and the demos are hosted on [Netlify](https://www.netlify.com/).
- **Actions**: [`action-autotag`](https://github.com/butlerlogic/action-autotag) by @butlerlogic, [`contributors-list`](https://github.com/bubkoo/contributors-list), [`github-pages-deploy-action`](https://github.com/JamesIves/github-pages-deploy-action), [`is-sponsor-label-action`](https://github.com/JasonEtco/is-sponsor-label-action), [`issues-translate-action`](https://github.com/tomsun28/issues-translate-action) by @tomsun28, [`pr-commenter-action`](https://github.com/exercism/pr-commenter-action) by @exercism, [`snyk node`](https://github.com/snyk/actions/node) by @snyk, and [`yarn-lock-changes`](https://github.com/Simek/yarn-lock-changes) by @Simek. See [all action credits](/docs/credits.md#actions)
**[⬆️ Back to Top](#dashy)**
---
## Developing 🧱
> For full development documentation, see: [**Developing**](./docs/developing.md)
@ -609,23 +503,6 @@ To set up the development environment:
Hot reload is enabled, so changes will be automatically detected, compiled and refreshed.
Like most Git repos, we are following the [Github Flow](https://guides.github.com/introduction/flow) standard.
1. Create a branch (or fork if you're not a collaborator)
2. Code some awesome stuff, then add and commit your changes
3. Create a Pull Request, complete the checklist and ensure the build succeeds
4. Follow up with any reviews on your code
5. Merge 🎉
Branch names are specified in the following format: `[TYPE]/[TICKET]_[TITLE]`. E.g. `FEATURE/420_Awesome-feature` or `FIX/690_login-server-error`.
Most commit messages use git [commit emojis](https://gist.github.com/parmentf/035de27d6ed1dce0b36a) - e.g. ✨ = New feature, 🐛 = Bug fix, 💄 = UI stuff, 🚧 = Work in progress, 🌐 = Language, 🔖 = New release, and so on. Take a look at [gitmoji.dev](https://gitmoji.dev/) for a list of what each emoji indicates
Before you submit your pull request, please ensure you've checked off all the boxes in the template. For your PR to be merged, it must:
- Must be backwards compatible
- Any new features should be documented
- The build, lint and tests (run by GH actions) should all pass (there are some exceptions)
- There must not be any merge conflicts
If you're new to web development, I've put together a short [list of resources](https://github.com/Lissy93/dashy/blob/master/docs/developing.md#resources-for-beginners), to help beginners get started
**Repo Status**:
@ -700,8 +577,7 @@ For a full breakdown of each change, you can view the [Changelog](https://github
The following features and tasks are planned for the near future.
- Widget support- cards showing live stats and interactive content from your self-hosted services
- ✅ UI editor and visual configurator
- Conversion to TypeScript
- Improved test coverage
- Replacement of Node backend with Go
**[⬆️ Back to Top](#dashy)**
@ -774,4 +650,3 @@ For more info, see TLDR Legal's [Explanation of MIT](https://tldrlegal.com/licen
<br><br>
<i>Thank you for Visiting</i>
</p>

View File

@ -26,19 +26,20 @@ Dashy can auto-fetch an icon for a given service, using it's favicon. Just set `
<img width="580" src="https://i.ibb.co/k6wyhnB/favicon-icons.png" />
</p>
If the service is hosted under a local IP, then Dashy will attempt to find the favicon from `http://[ip]/favicon.ico`. This has two issues, favicons are not always hosted at the same location for every service, and often the default favicon is sometimes low resolution. Therefore for remote services, by default an API is used to return a high-quality icon for almost any online service.
Since different websites host their favicons at different paths, for the best results Dashy can use an API to resolve a websites icon.
The default favicon API is [allesedv.com](https://favicon.allesedv.com/), but several other API's are supported. To change the API used, under `appConfig`, set `faviconApi` to one of the following values:
The default favicon API is [allesedv.com](https://favicon.allesedv.com/), but you can change this under `appConfig.faviconApi`. If you'd prefer not to use an API, just set this value to `local`. You can also use different APIs for individual items, by setting `icon: favicon-[api]`, e.g. `favicon-clearbit`.
The following favicon APIs are supported:
- `allesedv` - [allesedv.com](https://favicon.allesedv.com/) is a highly efficient IPv6-enabled service
- `faviconkit` - [faviconkit.com](https://faviconkit.com/) (Note: currently down, as of Nov 2021)
- `clearbit` - [Clearbit](https://clearbit.com/logo) returns high-quality logos from mainstream websites
- `clearbit` - [Clearbit](https://clearbit.com/logo) returns high-quality square logos from mainstream websites
- `faviconkit` - [faviconkit.com](https://faviconkit.com/) good quality icons and most sites supported (Note: down as of Nov '21)
- `besticon` - [BestIcon](https://github.com/mat/besticon) fetches websites icons from manifest
- `mcapi` - [MC-API](https://eu.mc-api.net/) fetches default website favicon, originally a Minecraft util
- `duckduckgo` - Returns decent quality website icons, from DuckDuckGo search
- `google` - Official Google favicon API service, good support for all sites, but poor quality
- `webmasterapi` - [WebMasterAPI](https://www.webmasterapi.com/get-favicons)
You can also force Dashy to always get favicons from the root of the domain, and not use an external service, by setting `appConfig.faviconApi` to `local`, although you may face the issue explained above.
To use a different favicon API for certain items, then set `icon: favicon-[api]`, e.g. `favicon-clearbit`
- `yandex` - Lower quality icons, but useful in some regions where other services are blocked
- `local` - Set to local to fetch the default icon at /favicon.ico instead of using an API
If for a given service none of the APIs work in your situation, and nor does local, then the best option is to find the path of the services logo or favicon, and set the icon to the URL of the raw image. For example, `icon: https://monitoring.local/faviconx128.png`- you can find this path using the browser dev tools.
@ -187,4 +188,3 @@ If you are using icons from an external source, these will be fetched on initial
You can improve load speeds, by downloading your required icons, and serving them locally. Scaling icons to the minimum required dimensions (e.g. 128x128 or 64x64) will also greatly improve application load times.
For icons from external sources, please see the Privacy Policies and Licenses for that provider.

View File

@ -30,7 +30,7 @@
"register-service-worker": "^1.6.2",
"remedial": "^1.0.8",
"rsup-progress": "^2.0.4",
"simple-icons": "^5.14.0",
"simple-icons": "^5.19.0",
"v-jsoneditor": "^1.4.2",
"v-tooltip": "^2.1.3",
"vue": "^2.6.10",
@ -39,7 +39,7 @@
"vue-json-tree-view": "^2.1.6",
"vue-material-tabs": "0.1.5",
"vue-router": "^3.0.3",
"vue-select": "^3.13.0",
"vue-select": "^3.15.0",
"vue-swatches": "^2.1.1",
"vue-toasted": "^1.1.28",
"vuex": "^3.6.2"

View File

@ -122,8 +122,9 @@ export default {
getSettingsVisibility() {
const screenWidth = document.body.clientWidth;
if (screenWidth && screenWidth < 600) return false;
return JSON.parse(localStorage[localStorageKeys.HIDE_SETTINGS]
|| (this.visibleComponents || defaultVisibleComponents).settings);
if ((this.visibleComponents || {}).settings === false) return false;
if (localStorage[localStorageKeys.HIDE_SETTINGS] === 'false') return false;
return defaultVisibleComponents.settings;
},
},
};

View File

@ -171,12 +171,15 @@ module.exports = {
backupEndpoint: 'https://dashy-sync-service.as93.net',
/* Available services for fetching favicon icon for user apps */
faviconApiEndpoints: {
mcapi: 'https://eu.mc-api.net/v3/server/favicon/$URL',
allesedv: 'https://f1.allesedv.com/128/$URL',
clearbit: 'https://logo.clearbit.com/$URL',
faviconkit: 'https://api.faviconkit.com/$URL/64',
duckduckgo: 'https://icons.duckduckgo.com/ip2/$URL.ico',
yandex: 'https://favicon.yandex.net/favicon/$URL',
google: 'https://www.google.com/s2/favicons?sz=128&domain_url=$URL',
allesedv: 'https://f1.allesedv.com/128/$URL',
besticon: 'https://besticon-demo.herokuapp.com/icon?url=$URL&size=80..120..200',
webmasterapi: 'https://api.webmasterapi.com/v1/favicon/yEwx0ZFs0CSPshHq/$URL',
mcapi: 'https://eu.mc-api.net/v3/server/favicon/$URL',
},
/* The URL to CDNs used for external icons. These are only loaded when required */
iconCdns: {

View File

@ -8698,7 +8698,7 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.5.tgz#9e3e8cc0c75a99472b44321033a7702e7738252f"
integrity sha512-KWcOiKeQj6ZyXx7zq4YxSMgHRlod4czeBQZrPb8OKcohcqAXShm7E20kEMle9WBt26hFcAf0qLOcp5zmY7kOqQ==
simple-icons@^5.14.0:
simple-icons@^5.19.0:
version "5.22.0"
resolved "https://registry.yarnpkg.com/simple-icons/-/simple-icons-5.22.0.tgz#c987aeea658828e858b774ab334264dabbe0344c"
integrity sha512-crEorhti73Sh88EZbw9mG/toCEoSQexf8HJCFFloz2V7bP7/lDpgcEmoWrW3SAh9tOQL8sWau4DSSRBVvRIRew==
@ -9851,7 +9851,7 @@ vue-router@^3.0.3:
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.3.tgz#041048053e336829d05dafacf6a8fb669a2e7999"
integrity sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg==
vue-select@^3.13.0:
vue-select@^3.15.0:
version "3.16.0"
resolved "https://registry.yarnpkg.com/vue-select/-/vue-select-3.16.0.tgz#db2ee2ddf80bd8876ce57738107b8a1a741862f4"
integrity sha512-F0x7HXTUc5eq7YSjR0uX77RGA+Yk2+I8aMW+NePyPqRX9OPSiDtKpezFIFhnhxqrOvMh4uVR0jHkXIDmzs6nYQ==