3 If you want to contribute to Homer, please read the [contributing guidelines](https://github.com/bastienwirtz/homer/blob/main/CONTRIBUTING.md) first.
6 # Using yarn (recommended)
17 Custom services are small VueJs component (see `src/components/services/`) that add little features to a classic, "static", dashboard item. It should be very simple.
18 A dashboard can contain a lot of items, so performance is very important.
20 The [`Generic`](https://github.com/bastienwirtz/homer/blob/main/src/components/services/Generic.vue) service provides a typical card layout which
21 you can extend to add specific features. Unless you want a completely different design, extended the generic service is the recommended way. It gives you 3 [slots](https://vuejs.org/v2/guide/components-slots.html#Named-Slots) to extend: `icon`, `content` and `indicator`.
22 Each one is **optional**, and will display the usual information if omitted.
24 Each service must implement the `item` [property](https://vuejs.org/v2/guide/components-props.html) and bind it the Generic component if used.
29 <Generic :item="item">
31 <!-- left area containing the icon -->
34 <!-- main area containing the title, subtitle, ... -->
37 <!-- top right area, empty by default -->
43 import Generic from "./Generic.vue";
60 Themes are meant to be simple customization (written in [scss](https://sass-lang.com/documentation/syntax)).
61 To add a new theme, just add a file in the theme directory, and put all style in the `body #app.theme-<name>` scope. Then import it in the main style file.
64 // `src/assets/themes/my-awesome-theme.scss`
65 body #app.theme-my-awesome-theme. { ... }
69 // `src/assets/app.scss`
71 @import "./themes/sui.scss";
73 @import "./themes/my-awesome-theme.scss";