aboutsummaryrefslogtreecommitdiffhomepage
path: root/docs/configuration.md
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2020-06-11 22:40:36 -0700
committerBastien Wirtz <bastien.wirtz@gmail.com>2020-06-11 22:48:22 -0700
commit1bc75494cae6efd5a0fdff3195db110451bad2ec (patch)
treed9d505377933d6d92276ef1b37a6477684b8ac7a /docs/configuration.md
parentcad54a560f77382d9584fd804f9cdd84c92012b7 (diff)
downloadhomer-1bc75494cae6efd5a0fdff3195db110451bad2ec.tar.gz
homer-1bc75494cae6efd5a0fdff3195db110451bad2ec.tar.zst
homer-1bc75494cae6efd5a0fdff3195db110451bad2ec.zip
Split documentation into separate files
Diffstat (limited to 'docs/configuration.md')
-rw-r--r--docs/configuration.md131
1 files changed, 131 insertions, 0 deletions
diff --git a/docs/configuration.md b/docs/configuration.md
new file mode 100644
index 0000000..a2469ed
--- /dev/null
+++ b/docs/configuration.md
@@ -0,0 +1,131 @@
1## Configuration
2
3Title, icons, links, colors, and services can be configured in the `config.yml` file (located in project root directory once built, or in the `public/` directory in developement mode), using [yaml](http://yaml.org/) format.
4
5```yaml
6---
7# Homepage configuration
8# See https://fontawesome.com/icons for icons options
9
10# Optional: Use external configuration file.
11# Using this will ignore remaining config in this file
12# externalConfig: https://example.com/server-luci/config.yaml
13
14title: "App dashboard"
15subtitle: "Homer"
16logo: "assets/homer.png"
17# Alternatively a fa icon can be provided:
18# icon: "fas fa-skull-crossbones"
19
20header: true # Set to false to hide the header
21footer: '<p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a> & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>' # set false if you want to hide it.
22
23columns: "3" # "auto" or number (must be a factor of 12: 1, 2, 3, 4, 6, 12)
24connectivityCheck: true # whether you want to display a message when the apps are not accessible anymore (VPN disconnected for example)
25
26# Optional theming
27theme: default # 'default' or one of the theme available in 'src/assets/themes'.
28
29# Here is the exaustive list of customization parameters
30# However all value are optional and will fallback to default if not set.
31# if you want to change only some of the colors, feel free to remove all unused key.
32colors:
33 light:
34 highlight-primary: "#3367d6"
35 highlight-secondary: "#4285f4"
36 highlight-hover: "#5a95f5"
37 background: "#f5f5f5"
38 card-background: "#ffffff"
39 text: "#363636"
40 text-header: "#424242"
41 text-title: "#303030"
42 text-subtitle: "#424242"
43 card-shadow: rgba(0, 0, 0, 0.1)
44 link-hover: "#363636"
45 dark:
46 highlight-primary: "#3367d6"
47 highlight-secondary: "#4285f4"
48 highlight-hover: "#5a95f5"
49 background: "#131313"
50 card-background: "#2b2b2b"
51 text: "#eaeaea"
52 text-header: "#ffffff"
53 text-title: "#fafafa"
54 text-subtitle: "#f5f5f5"
55 card-shadow: rgba(0, 0, 0, 0.4)
56 link-hover: "#ffdd57"
57
58# Optional message
59message:
60 # url: "https://<my-api-endpoint>" # Can fetch information from an endpoint to override value below.
61 style: "is-warning"
62 title: "Optional message!"
63 content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
64
65# Optional navbar
66# links: [] # Allows for navbar (dark mode, layout, and search) without any links
67links:
68 - name: "Link 1"
69 icon: "fab fa-github"
70 url: "https://github.com/bastienwirtz/homer"
71 target: "_blank" # optional html tag target attribute
72 - name: "link 2"
73 icon: "fas fa-book"
74 url: "https://github.com/bastienwirtz/homer"
75
76# Services
77# First level array represent a group.
78# Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed).
79services:
80 - name: "Application"
81 icon: "fa fa-code-fork"
82 items:
83 - name: "Awesome app"
84 logo: "assets/tools/sample.png"
85 # Alternatively a fa icon can be provided:
86 # icon: "fab fa-jenkins"
87 subtitle: "Bookmark example"
88 tag: "app"
89 url: "https://www.reddit.com/r/selfhosted/"
90 target: "_blank" # optional html tag target attribute
91 - name: "Another one"
92 logo: "assets/tools/sample2.png"
93 subtitle: "Another application"
94 tag: "app"
95 # Optional tagstyle
96 tagstyle: "is-success"
97 url: "#"
98 - name: "Other group"
99 icon: "fas fa-heartbeat"
100 items:
101 - name: "Another app"
102 logo: "assets/tools/sample.png"
103 subtitle: "Another example"
104 tag: "other"
105 url: "https://www.reddit.com/r/selfhosted/"
106 target: "_blank" # optionnal html a tag target attribute
107```
108
109If you choose to fetch message information from an endpoint, the output format should be:
110
111```json
112{
113 "style": null,
114 "title": "Lorem ipsum 42",
115 "content": "LA LA LA Lorem ipsum dolor sit amet, ....."
116}
117```
118
119`null` value or missing keys will be ignored and value from the `config.yml` will be used if available.
120Empty values (either in `config.yml` or the endpoint data) will hide the element (ex: set `"title": ""` to hide the title bar).
121
122### Style Options
123
124Homer uses [bulma CSS](https://bulma.io/), which provides a [modifiers syntax](https://bulma.io/documentation/modifiers/syntax/). You'll notice in the config there is a `tagstyle` option. It can be set to any of the bulma modifiers. You'll probably want to use one of these 4 main colors:
125
126- `is-info` (blue)
127- `is-success` (green)
128- `is-warning` (yellow)
129- `is-danger` (red)
130
131You can read the [bulma modifiers page](https://bulma.io/documentation/modifiers/syntax/) for other options regarding size, style, or state.