From 2ca4faad9cb336ac8904bbc775fdcc2a12731b90 Mon Sep 17 00:00:00 2001 From: Bastien Wirtz Date: Wed, 6 Oct 2021 22:55:09 +0200 Subject: [PATCH] Extendable base service for easier development. --- CONTRIBUTING.md | 11 ++--- docs/development.md | 45 +++++++++++++++++++ src/components/Service.vue | 5 +-- src/components/services/AdGuardHome.vue | 60 ++++++++++--------------- src/components/services/Generic.vue | 33 ++++++++------ src/components/services/Ping.vue | 49 +++++--------------- 6 files changed, 104 insertions(+), 99 deletions(-) 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 @@