]>
Commit | Line | Data |
---|---|---|
1bc75494 BW |
1 | ## Configuration |
2 | ||
b102c9b2 | 3 | Title, icons, links, colors, and services can be configured in the `config.yml` file (located in `/assets` directory once built, or in the `public/assets` directory in developement mode), using [yaml](http://yaml.org/) format. |
1bc75494 BW |
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 | ||
14 | title: "App dashboard" | |
15 | subtitle: "Homer" | |
16 | logo: "assets/homer.png" | |
17 | # Alternatively a fa icon can be provided: | |
18 | # icon: "fas fa-skull-crossbones" | |
19 | ||
20 | header: true # Set to false to hide the header | |
21 | footer: '<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 | ||
23 | columns: "3" # "auto" or number (must be a factor of 12: 1, 2, 3, 4, 6, 12) | |
24 | connectivityCheck: true # whether you want to display a message when the apps are not accessible anymore (VPN disconnected for example) | |
25 | ||
26 | # Optional theming | |
27 | theme: default # 'default' or one of the theme available in 'src/assets/themes'. | |
28 | ||
71cf63eb GC |
29 | # Optional custom stylesheet |
30 | # Will load a custom CSS file. Especially useful for custom icon sets. | |
31 | # stylesheet: "assets/custom.css" | |
32 | ||
1bc75494 BW |
33 | # Here is the exaustive list of customization parameters |
34 | # However all value are optional and will fallback to default if not set. | |
35 | # if you want to change only some of the colors, feel free to remove all unused key. | |
36 | colors: | |
37 | light: | |
38 | highlight-primary: "#3367d6" | |
39 | highlight-secondary: "#4285f4" | |
40 | highlight-hover: "#5a95f5" | |
41 | background: "#f5f5f5" | |
42 | card-background: "#ffffff" | |
43 | text: "#363636" | |
44 | text-header: "#424242" | |
45 | text-title: "#303030" | |
46 | text-subtitle: "#424242" | |
47 | card-shadow: rgba(0, 0, 0, 0.1) | |
48 | link-hover: "#363636" | |
154e6efe | 49 | background-image: "assets/your/light/bg.png" |
1bc75494 BW |
50 | dark: |
51 | highlight-primary: "#3367d6" | |
52 | highlight-secondary: "#4285f4" | |
53 | highlight-hover: "#5a95f5" | |
54 | background: "#131313" | |
55 | card-background: "#2b2b2b" | |
56 | text: "#eaeaea" | |
57 | text-header: "#ffffff" | |
58 | text-title: "#fafafa" | |
59 | text-subtitle: "#f5f5f5" | |
60 | card-shadow: rgba(0, 0, 0, 0.4) | |
61 | link-hover: "#ffdd57" | |
154e6efe | 62 | background-image: "assets/your/dark/bg.png" |
1bc75494 BW |
63 | |
64 | # Optional message | |
65 | message: | |
66 | # url: "https://<my-api-endpoint>" # Can fetch information from an endpoint to override value below. | |
67 | style: "is-warning" | |
68 | title: "Optional message!" | |
69 | content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit." | |
70 | ||
71 | # Optional navbar | |
72 | # links: [] # Allows for navbar (dark mode, layout, and search) without any links | |
73 | links: | |
74 | - name: "Link 1" | |
75 | icon: "fab fa-github" | |
76 | url: "https://github.com/bastienwirtz/homer" | |
77 | target: "_blank" # optional html tag target attribute | |
78 | - name: "link 2" | |
79 | icon: "fas fa-book" | |
80 | url: "https://github.com/bastienwirtz/homer" | |
81 | ||
82 | # Services | |
83 | # First level array represent a group. | |
84 | # Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed). | |
85 | services: | |
86 | - name: "Application" | |
87 | icon: "fa fa-code-fork" | |
88 | items: | |
89 | - name: "Awesome app" | |
90 | logo: "assets/tools/sample.png" | |
91 | # Alternatively a fa icon can be provided: | |
92 | # icon: "fab fa-jenkins" | |
93 | subtitle: "Bookmark example" | |
94 | tag: "app" | |
95 | url: "https://www.reddit.com/r/selfhosted/" | |
96 | target: "_blank" # optional html tag target attribute | |
97 | - name: "Another one" | |
98 | logo: "assets/tools/sample2.png" | |
99 | subtitle: "Another application" | |
100 | tag: "app" | |
101 | # Optional tagstyle | |
102 | tagstyle: "is-success" | |
103 | url: "#" | |
104 | - name: "Other group" | |
105 | icon: "fas fa-heartbeat" | |
106 | items: | |
107 | - name: "Another app" | |
108 | logo: "assets/tools/sample.png" | |
109 | subtitle: "Another example" | |
110 | tag: "other" | |
111 | url: "https://www.reddit.com/r/selfhosted/" | |
112 | target: "_blank" # optionnal html a tag target attribute | |
113 | ``` | |
114 | ||
115 | If you choose to fetch message information from an endpoint, the output format should be: | |
116 | ||
117 | ```json | |
118 | { | |
119 | "style": null, | |
120 | "title": "Lorem ipsum 42", | |
121 | "content": "LA LA LA Lorem ipsum dolor sit amet, ....." | |
122 | } | |
123 | ``` | |
124 | ||
125 | `null` value or missing keys will be ignored and value from the `config.yml` will be used if available. | |
126 | Empty values (either in `config.yml` or the endpoint data) will hide the element (ex: set `"title": ""` to hide the title bar). | |
127 | ||
128 | ### Style Options | |
129 | ||
130 | Homer 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: | |
131 | ||
132 | - `is-info` (blue) | |
133 | - `is-success` (green) | |
134 | - `is-warning` (yellow) | |
135 | - `is-danger` (red) | |
136 | ||
137 | You can read the [bulma modifiers page](https://bulma.io/documentation/modifiers/syntax/) for other options regarding size, style, or state. | |
d1b9dea2 BW |
138 | |
139 | ### PWA Icons | |
140 | ||
141 | In order to easily generate all required icon preset for the PWA to work, a tool like [vue-pwa-asset-generator](https://www.npmjs.com/package/vue-pwa-asset-generator) can be used: | |
142 | ||
143 | ```bash | |
144 | npx vue-pwa-asset-generator -a {your_512x512_source_png} -o {your_output_folder} | |
145 | ``` |