tyler.durden
/
dashy
mirror of https://github.com/Lissy93/dashy.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

�� Updates docs

This commit is contained in:
Alicia Sykes 2021-04-20 17:26:36 +01:00
parent 3d342bb43d
commit a06b73ded6
1 changed files with 34 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
README.md
View File

@ -60,24 +60,27 @@ All fields are optional, unless otherwise stated.
**`pageInfo`**
- `title` - String: The page title and heading
- `description` - String: Short description visible under the heading
- `navLinks` - Array: Links to display in the nav bar, an array or objects containing a title and link:
- `title` - String: Text to display
- `path` - String: URL or relative link
**`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
- `cssThemes` - String[]: An array of custom theme names which can be used in the theme switcher dropdown - _See **theming** below_
- `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
**`sections`** - Section[]: (required) An array of sections - *See **`section`** below*
**`sections`** - Section[]: (required) An array of sections - _See **`section`** below_
**`section`**
- `name` - String: (required) The title of that section
- `items` - Item[]: (required) An array of items - *See **`item`** below*
- `items` - Item[]: (required) An array of items - _See **`item`** below_
- `displayData`: An object with the following fields (all optional)
- `collapsed` - Boolean: If true, the section will be collapsed (defaults to `false`)
- `collapsed` - Boolean: If true, the section will be collapsed initially (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 (e.g. `#fff`)
- `color` - String: A custom accent 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;`
- `itemSize` - String: Specify the size for items within this group, either `small`, `medium` or `large`
@ -87,7 +90,8 @@ All fields are optional, unless otherwise stated.
- `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 (e.g. `#fff`)
- `color` - String: A custom color the the item, as a hex code or HTML color (e.g. `#fff`)
- `backgroundColor` - String: A custom fill color for the the item's background, also as a hex code
**`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`
@ -96,6 +100,30 @@ All fields are optional, unless otherwise stated.
- 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`.
### Theming
By default, there are 15 themes built-in, but you can add you're own themes with CSS. The easiest way to write a theme is by setting CSS variables, but you can also directly override elements by their selector. As an example, see the [built-in CSS themes](https://github.com/Lissy93/dashy/blob/master/src/styles/color-themes.scss).
For example, specify a theme
```css
html[data-theme='tiger'] {
--primary: #f58233;
--item-group-background: #0b1021;
}
```
In order for the theme to show up in the theme switcher, it needs to be added to the config file, under `appConfig.cssThemes`, either as a string, or an array of strings for multiple themes. For example:
```yaml
appConfig:
cssThemes: ['tiger', 'another-theme']
```
You can also load an external stylesheet. Pass either a URL to a .css file, or an array or URLs to `appConfig.externalStyleSheet`. The stylesheet will then be pre-loaded, and can then be enabled from the UI using the theme switcher.
```yaml
appConfig:
externalStyleSheet: 'https://example.com/my-stylesheet.css'
```
---
## License 📜