diff --git a/README.md b/README.md index c039060e..3feb4ca9 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,20 @@ > A static site linking to all running services for networking, management and monitoring +## Features 🌈 + +- Instant search and full keyboard shortcuts +- Multiple color themes, layout options and item sizes all configurable and saved directly through the browser +- Quickly check a website, by holding down the Alt key while clicking, to open it in a resizable pop-up modal +- Instant search- just start typing to filter items, tab to cycle through, enter or Alt + enter to open, and Esc to clear +- Additional info for each item visible on hover (including opening method icon, description as a tooltip and domain info) +- Small bundle size and a fully responsive UI makes the app easy to use on any device +- Many options for icons, including full Font-Awesome support and the ability to auto-fetch icon from URLs favicon +- Plus lots more... + --- -## Running the App +## Running the App 🏃‍♂️ ### Deploying 🚀 - Get Code: `git clone git@github.com:Lissy93/dashy.git` and `cd dashy` @@ -28,24 +39,27 @@ ## Configuring 🔧 -### Config Locations +### Config Locations 📍 -Configuration files are located in `./public/`. +Configuration files are located in [`./public/`](https://github.com/Lissy93/dashy/tree/master/public). - `./public/conf.yml` - This is the main site configuration file, and is required for the app to work - `./public/item-icons` - If you're using custom icons for your items, then store these here. You can use sub-folders to keep things organised - `./public/logo.png` - Optionally add a logo image for you're website, which will show in the top left Also within `./public` you'll find normal website assets, including `favicon.ico`, `manifest.json`, `robots.txt` and `web-icons/*`. There's no need to modify these, but you can do so if you wish. -### The conf.yml File +### The Conf File 📄 -This is where all site configuration is stored in [YAML Format](https://yaml.org/), and is located in `./public/conf.yml` +All app config is specified in [`/public/conf.yml`](https://github.com/Lissy93/dashy/blob/master/public/conf.yml) (in [YAML Format](https://yaml.org/)). +All fields are optional, unless otherwise stated. **`pageInfo`** - `title` - String: The page title and heading - `description` - String: Short description visible under the heading -**`appConfig`** +**`appConfig`** _(optional)_ +- `enableFontAwesome` - Boolean: Where `true` is enabled, if left blank font-awesome will be enabled only if required by 1 or more icons +- `fontAwesomeKey` - String: If you have a font-awesome key, then you can use it here and make use of premium icons. It is a 10-digit alpha-numeric string from you're FA kit URL (e.g. `13014ae648`) - `theme`- String: The default theme for first load - `cssThemes` - String[]: An array of theme names which can be used in the theme switcher dropdown - `externalStyleSheet` - String or String[] - Either a URL to an external stylesheet or an array or URLs, which can be applied as themes within the UI @@ -59,16 +73,22 @@ This is where all site configuration is stored in [YAML Format](https://yaml.org - `collapsed` - Boolean: If true, the section will be collapsed (defaults to `false`) - `rows` - Int: Number of rows the section should span vertically, e.g. 2 (defaults to `1`) - `cols` - Int: Number of columns the section should span horizontally, e.g. 2 (defaults to `1`) - - `color` - String: A custom background color for the section, as a hex code or HTML color - - `customStyles` - String: Custom CSS properties that should be applied to that section, separated by semicolon + - `color` - String: A custom background color for the section, as a hex code or HTML color (e.g. `#fff`) + - `customStyles` - String: Custom CSS properties that should be applied to that section, e.g. `border: 2px dashed #ff0000;` **`item`** - `title` - String: The text to display on the item - `description` - String: Additional info which is shown in the tooltip on hover -- `icon` - String: The icon for the tile, *see below for more info* -- `url` - String: The full path to be opened on click (e.g. https://example.com) +- `icon` - String: Icons can be either a local image, remote image, or a Font Awesome icon, *see below for more info* +- `url` - String: The full path to be opened on click (e.g. `https://example.com`) - `target` - String: The method in which the item will be opened, either `newtab`, `sametab` or `iframe` -- `color` - String: A custom background color the the item, as a hex code or HTML color +- `color` - String: A custom background color the the item, as a hex code or HTML color (e.g. `#fff`) + +**`icon`** Examples: +- To use use a remote image, just use it's full URL, e.g. `https://i.ibb.co/710B3Yc/space-invader-x256.png` +- To use a local image, save it in `./public/item-icons/` or `./public/my-category/item-icons` and specify the image as `image.png` or `my-category/image.png`. For best results, use either png or svg formats. +- To automatically fetch the icons from the website's URL, just set icon to `favicon` +- To use a Font-Awesome icon, specify the category (`fas`, `fab`, `far`, `fal` or`fad`), followed by a space then `fa-` and the icon name. For example: `fas fa-rocket`, `fab fa-monero`, `fal fa-duck` or `fad fa-glass-whiskey-rocks`. Note that light (`fal`) and duotone (`fad`) icons are only available with Font Awesome Pro, to use this, you need to set you're kit ID under `appConfig.fontAwesomeKey`. ---