aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorDick Wolff <dckwlff@gmail.com>2021-01-13 21:22:35 +0100
committerDick Wolff <dckwlff@gmail.com>2021-01-13 21:22:35 +0100
commitfd12de9ebd7a75ca2f31e8b28bd2c5ac10c46e21 (patch)
tree6353134af591995861cd2822e8a04cbee19ca45e
parentb79561bc9c59d79875a9931d235774333579a363 (diff)
downloadhomer-fd12de9ebd7a75ca2f31e8b28bd2c5ac10c46e21.tar.gz
homer-fd12de9ebd7a75ca2f31e8b28bd2c5ac10c46e21.tar.zst
homer-fd12de9ebd7a75ca2f31e8b28bd2c5ac10c46e21.zip
Improvements
-rw-r--r--docs/configuration.md4
-rw-r--r--docs/customservices.md35
-rw-r--r--src/components/services/OpenWeather.vue28
3 files changed, 63 insertions, 4 deletions
diff --git a/docs/configuration.md b/docs/configuration.md
index a43d7f1..6c6a444 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -7,7 +7,7 @@ Title, icons, links, colors, and services can be configured in the `config.yml`
7# Homepage configuration 7# Homepage configuration
8# See https://fontawesome.com/icons for icons options 8# See https://fontawesome.com/icons for icons options
9 9
10# Optional: Use external configuration file. 10# Optional: Use external configuration file.
11# Using this will ignore remaining config in this file 11# Using this will ignore remaining config in this file
12# externalConfig: https://example.com/server-luci/config.yaml 12# externalConfig: https://example.com/server-luci/config.yaml
13 13
@@ -118,6 +118,8 @@ services:
118 # background: red # optional color for card to set color directly without custom stylesheet 118 # background: red # optional color for card to set color directly without custom stylesheet
119``` 119```
120 120
121View the (Custom Services)[customservices.md] file for details about all available custom services (like PiHole).
122
121If you choose to fetch message information from an endpoint, the output format should be: 123If you choose to fetch message information from an endpoint, the output format should be:
122 124
123```json 125```json
diff --git a/docs/customservices.md b/docs/customservices.md
new file mode 100644
index 0000000..42bd87d
--- /dev/null
+++ b/docs/customservices.md
@@ -0,0 +1,35 @@
1# Tips & Tricks
2
3Here is an overview of all custom services that are avaiable within Homer.
4
5## PiHole
6
7Using the PiHole service you can display info about your local PiHole instance right on your Homer dashboard.
8
9The following configuration is available for the PiHole service.
10
11```
12 items:
13 - name: "Pi-hole"
14 logo: "assets/tools/sample.png"
15 # subtitle: "Network-wide Ad Blocking" # optional, if no subtitle is defined, PiHole statistics will be shown
16 url: "http://192.168.0.151/admin"
17 type: "PiHole"
18```
19
20## OpenWeatherMap
21
22Using the OpenWeatherMap service you can display weather information about a given location.
23
24The following configuration is available for the OpenWeatherMap service
25
26```
27items:
28 - name: "Weather"
29 url: "https://api.openweathermap.org/data/2.5/weather"
30 location: "Amsterdam" # your location.
31 apiKey: "<---insert-api-key-here--->" # insert your own API key here. Request one from https://openweathermap.org/api.
32 units: "metric" # units to display temperature. Can be one of: metric, imperial, kelvin. Defaults to kelvin.
33 background: "square" choose which type of background you want behind the image. Can be one of: square, cicle, none. Defaults to none.
34 type: "OpenWeather"
35```
diff --git a/src/components/services/OpenWeather.vue b/src/components/services/OpenWeather.vue
index a9310ee..b1e5c57 100644
--- a/src/components/services/OpenWeather.vue
+++ b/src/components/services/OpenWeather.vue
@@ -4,7 +4,7 @@
4 <a :href="item.url" :target="item.target" rel="noreferrer"> 4 <a :href="item.url" :target="item.target" rel="noreferrer">
5 <div class="card-content"> 5 <div class="card-content">
6 <div class="media"> 6 <div class="media">
7 <div v-if="image" class="media-left"> 7 <div v-if="image" class="media-left" :class="item.background">
8 <figure class="image is-48x48"> 8 <figure class="image is-48x48">
9 <img 9 <img
10 :src="`http://openweathermap.org/img/wn/` + image + `@2x.png`" 10 :src="`http://openweathermap.org/img/wn/` + image + `@2x.png`"
@@ -99,7 +99,29 @@ export default {
99</script> 99</script>
100 100
101<style scoped lang="scss"> 101<style scoped lang="scss">
102.media-left img { 102.media-left {
103 max-height: 100%; 103 &.circle,
104 &.square {
105 background-color: #e4e4e4;
106 }
107
108 &.circle {
109 border-radius: 90%;
110 }
111
112 img {
113 max-height: 100%;
114 }
115}
116
117// Add a circular border around the weather image when in dark mode.
118// Otherwise the image is not distinguishable.
119.is-dark {
120 .media-left {
121 &.circle,
122 &.square {
123 background-color: #909090;
124 }
125 }
104} 126}
105</style> 127</style>