diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index f29b7d8..de893b6 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -12,10 +12,6 @@ UX and usability. If you are looking for a full featured dashboard, there is ton
- Configuration is stored in a simple config file, avoiding the need for a backend/database while making possible to use versioning or [config template](https://docs.ansible.com/ansible/latest/user_guide/playbooks_templating.html).
- Only modern browsers are supported, feel free to use any JS features without any polyfill as soon as the latest version of the major browsers supports them.
-### Roadmap
-
-If you want to know more about the project direction or looking for something to work on, checkout the [roadmap](https://github.com/bastienwirtz/homer#Roadmap)!
-Feel free to open an issue if you have any question.
# Ground Rules
@@ -40,8 +36,9 @@ feel free to open an issue to present your idea.
### How to submit a contribution
The general process to submit a contribution is as follow:
-1. Create your own fork of the code
-2. Do the changes in your fork
-3. Make sure to fill the [pull request description](https://github.com/bastienwirtz/homer/blob/main/.github/PULL_REQUEST_TEMPLATE.md) properly.
+1. Take a look to the [development guideline](https://github.com/bastienwirtz/homer/blob/main/docs/development.md).
+2. Create your own fork of the code
+3. Do the changes in your fork
+4. Make sure to fill the [pull request description](https://github.com/bastienwirtz/homer/blob/main/.github/PULL_REQUEST_TEMPLATE.md) properly.
### Happy coding :metal:
diff --git a/docs/development.md b/docs/development.md
index 5e432f1..a22ae0b 100644
--- a/docs/development.md
+++ b/docs/development.md
@@ -1,5 +1,7 @@
# Development
+If you want to contribute to Homer, please read the [contributing guidelines](https://github.com/bastienwirtz/homer/blob/main/CONTRIBUTING.md) first.
+
```sh
# Using yarn (recommended)
yarn install
@@ -10,6 +12,49 @@ npm install
npm run serve
```
+## Custom services
+
+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.
+A dashboard can contain a lot of items, so performance is very important.
+
+The [`Generic`](https://github.com/bastienwirtz/homer/blob/main/src/components/services/Generic.vue) service provides a typical card layout which
+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`.
+Each one is **optional**, and will display the usual information if omitted.
+
+Each service must implement the `item` [property](https://vuejs.org/v2/guide/components-props.html) and bind it the Generic component if used.
+
+### Skeleton
+```Vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
## Themes
Themes are meant to be simple customization (written in [scss](https://sass-lang.com/documentation/syntax)).
diff --git a/src/components/Service.vue b/src/components/Service.vue
index 8686759..39a9ac4 100644
--- a/src/components/Service.vue
+++ b/src/components/Service.vue
@@ -7,16 +7,13 @@ import Generic from "./services/Generic.vue";
export default {
name: "Service",
- components: {
- Generic,
- },
props: {
item: Object,
},
computed: {
component() {
const type = this.item.type || "Generic";
- if (type == "Generic") {
+ if (type === "Generic") {
return Generic;
}
return () => import(`./services/${type}.vue`);
diff --git a/src/components/services/AdGuardHome.vue b/src/components/services/AdGuardHome.vue
index 61d4bed..16881fa 100644
--- a/src/components/services/AdGuardHome.vue
+++ b/src/components/services/AdGuardHome.vue
@@ -1,49 +1,35 @@
-