docs/development.md

   1 # Development
   2
   3 If you want to contribute to Homer, please read the [contributing guidelines](https://github.com/bastienwirtz/homer/blob/main/CONTRIBUTING.md) first.
   4
   5 ```sh
   6 pnpm install
   7 pnpm dev
   8 ```
   9
  10 ## Custom services
  11
  12 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.
  13 A dashboard can contain a lot of items, so performance is very important.
  14
  15 The [`Generic`](https://github.com/bastienwirtz/homer/blob/main/src/components/services/Generic.vue) service provides a typical card layout which
  16 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`.
  17 Each one is **optional**, and will display the usual information if omitted.
  18
  19 Each service must implement the `item` [property](https://vuejs.org/v2/guide/components-props.html) and bind it the Generic component if used.
  20
  21 ### Skeleton
  22 ```Vue
  23 <template>
  24   <Generic :item="item">
  25     <template #icon>
  26       <!-- left area containing the icon -->
  27     </template>
  28     <template #content>
  29       <!-- main area containing the title, subtitle, ... -->
  30     </template>
  31     <template #indicator>
  32       <!-- top right area, empty by default -->
  33     </template>
  34   </Generic>
  35 </template>
  36
  37 <script>
  38 import Generic from "./Generic.vue";
  39
  40 export default {
  41   name: "MyNewService",
  42   props: {
  43     item: Object,
  44   },
  45   components: {
  46     Generic,
  47   }
  48 };
  49 </script>
  50 ```
  51
  52
  53 ## Themes
  54
  55 Themes are meant to be simple customization (written in [scss](https://sass-lang.com/documentation/syntax)).
  56 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.
  57
  58 ```scss
  59 // `src/assets/themes/my-awesome-theme.scss`
  60 body #app.theme-my-awesome-theme. { ... }
  61 ```
  62
  63 ```scss
  64 // `src/assets/app.scss`
  65 // Themes import
  66 @import "./themes/sui.scss";
  67 ...
  68 @import "./themes/my-awesome-theme.scss";
  69 ```