]>
Commit | Line | Data |
---|---|---|
1d3287dc | 1 | # Configuration |
1bc75494 | 2 | |
2662b170 | 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 development mode), using [yaml](http://yaml.org/) format. |
1bc75494 BW |
4 | |
5 | ```yaml | |
6 | --- | |
7 | # Homepage configuration | |
775d0a8e | 8 | # See https://fontawesome.com/v5/search for icons options |
1bc75494 | 9 | |
fd12de9e | 10 | # Optional: Use external configuration file. |
1bc75494 BW |
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" | |
a02961b7 | 16 | # documentTitle: "Welcome" # Customize the browser tab text |
ffe3404a | 17 | logo: "assets/logo.png" |
1bc75494 BW |
18 | # Alternatively a fa icon can be provided: |
19 | # icon: "fas fa-skull-crossbones" | |
20 | ||
21 | header: true # Set to false to hide the header | |
584f2b4b | 22 | # Optional: Different hotkey for search, defaults to "/" |
1c0bf713 RS |
23 | # hotkey: |
24 | # search: "Shift" | |
1bc75494 BW |
25 | 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. |
26 | ||
27 | columns: "3" # "auto" or number (must be a factor of 12: 1, 2, 3, 4, 6, 12) | |
95249e11 P |
28 | connectivityCheck: true # whether you want to display a message when the apps are not accessible anymore (VPN disconnected for example). |
29 | # You should set it to true when using an authentication proxy, it also reloads the page when a redirection is detected when checking connectivity. | |
1bc75494 | 30 | |
fea0f090 BW |
31 | # Optional: Proxy / hosting option |
32 | proxy: | |
66a434e7 | 33 | useCredentials: false # send cookies & authorization headers when fetching service specific data. Set to `true` if you use an authentication proxy. Can be overrided on service level. |
fea0f090 | 34 | |
5db2414d A |
35 | # Set the default layout and color scheme |
36 | defaults: | |
37 | layout: columns # Either 'columns', or 'list' | |
38 | colorTheme: auto # One of 'auto', 'light', or 'dark' | |
39 | ||
1bc75494 | 40 | # Optional theming |
86f4680a | 41 | theme: default # 'default' or one of the themes available in 'src/assets/themes'. |
1bc75494 | 42 | |
71cf63eb | 43 | # Optional custom stylesheet |
8e5ee54a GC |
44 | # Will load custom CSS files. Especially useful for custom icon sets. |
45 | # stylesheet: | |
46 | # - "assets/custom.css" | |
71cf63eb | 47 | |
86f4680a | 48 | # Here is the exhaustive list of customization parameters |
1bc75494 BW |
49 | # However all value are optional and will fallback to default if not set. |
50 | # if you want to change only some of the colors, feel free to remove all unused key. | |
51 | colors: | |
52 | light: | |
53 | highlight-primary: "#3367d6" | |
54 | highlight-secondary: "#4285f4" | |
55 | highlight-hover: "#5a95f5" | |
56 | background: "#f5f5f5" | |
57 | card-background: "#ffffff" | |
58 | text: "#363636" | |
59 | text-header: "#424242" | |
60 | text-title: "#303030" | |
61 | text-subtitle: "#424242" | |
62 | card-shadow: rgba(0, 0, 0, 0.1) | |
3faeac7e | 63 | link: "#3273dc" |
1bc75494 | 64 | link-hover: "#363636" |
154e6efe | 65 | background-image: "assets/your/light/bg.png" |
1bc75494 BW |
66 | dark: |
67 | highlight-primary: "#3367d6" | |
68 | highlight-secondary: "#4285f4" | |
69 | highlight-hover: "#5a95f5" | |
70 | background: "#131313" | |
71 | card-background: "#2b2b2b" | |
72 | text: "#eaeaea" | |
73 | text-header: "#ffffff" | |
74 | text-title: "#fafafa" | |
75 | text-subtitle: "#f5f5f5" | |
76 | card-shadow: rgba(0, 0, 0, 0.4) | |
3faeac7e | 77 | link: "#3273dc" |
1bc75494 | 78 | link-hover: "#ffdd57" |
154e6efe | 79 | background-image: "assets/your/dark/bg.png" |
1bc75494 BW |
80 | |
81 | # Optional message | |
82 | message: | |
83 | # url: "https://<my-api-endpoint>" # Can fetch information from an endpoint to override value below. | |
6d29bc27 | 84 | # mapping: # allows to map fields from the remote format to the one expected by Homer |
85 | # title: 'id' # use value from field 'id' as title | |
86 | # content: 'value' # value from field 'value' as content | |
9542de6e | 87 | # refreshInterval: 10000 # Optional: time interval to refresh message |
6d29bc27 | 88 | # |
89 | # Real example using chucknorris.io for showing Chuck Norris facts as messages: | |
90 | # url: https://api.chucknorris.io/jokes/random | |
91 | # mapping: | |
92 | # title: 'id' | |
93 | # content: 'value' | |
1ddf3941 | 94 | # refreshInterval: 10000 |
1bc75494 BW |
95 | style: "is-warning" |
96 | title: "Optional message!" | |
0e045b4c | 97 | icon: "fa fa-exclamation-triangle" |
1bc75494 BW |
98 | content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit." |
99 | ||
100 | # Optional navbar | |
101 | # links: [] # Allows for navbar (dark mode, layout, and search) without any links | |
102 | links: | |
103 | - name: "Link 1" | |
104 | icon: "fab fa-github" | |
105 | url: "https://github.com/bastienwirtz/homer" | |
106 | target: "_blank" # optional html tag target attribute | |
107 | - name: "link 2" | |
108 | icon: "fas fa-book" | |
109 | url: "https://github.com/bastienwirtz/homer" | |
e3bd2ecc | 110 | # this will link to a second homer page that will load config from page2.yml and keep default config values as in config.yml file |
111 | # see url field and assets/page.yml used in this example: | |
112 | - name: "Second Page" | |
113 | icon: "fas fa-file-alt" | |
c6267296 | 114 | url: "#page2" |
1bc75494 BW |
115 | |
116 | # Services | |
86f4680a | 117 | # First level array represents a group. |
1bc75494 BW |
118 | # Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed). |
119 | services: | |
120 | - name: "Application" | |
62ec6fa0 | 121 | icon: "fas fa-code-branch" |
8e093313 GC |
122 | # A path to an image can also be provided. Note that icon take precedence if both icon and logo are set. |
123 | # logo: "path/to/logo" | |
1bc75494 BW |
124 | items: |
125 | - name: "Awesome app" | |
126 | logo: "assets/tools/sample.png" | |
127 | # Alternatively a fa icon can be provided: | |
128 | # icon: "fab fa-jenkins" | |
129 | subtitle: "Bookmark example" | |
130 | tag: "app" | |
7f4130fd | 131 | keywords: "self hosted reddit" # optional keyword used for searching purpose |
1bc75494 BW |
132 | url: "https://www.reddit.com/r/selfhosted/" |
133 | target: "_blank" # optional html tag target attribute | |
134 | - name: "Another one" | |
135 | logo: "assets/tools/sample2.png" | |
136 | subtitle: "Another application" | |
137 | tag: "app" | |
138 | # Optional tagstyle | |
139 | tagstyle: "is-success" | |
140 | url: "#" | |
141 | - name: "Other group" | |
142 | icon: "fas fa-heartbeat" | |
143 | items: | |
9a14de00 | 144 | - name: "Pi-hole" |
1bc75494 | 145 | logo: "assets/tools/sample.png" |
c5eab80d | 146 | # subtitle: "Network-wide Ad Blocking" # optional, if no subtitle is defined, PiHole statistics will be shown |
1bc75494 | 147 | tag: "other" |
9a14de00 BW |
148 | url: "http://192.168.0.151/admin" |
149 | type: "PiHole" # optional, loads a specific component that provides extra features. MUST MATCH a file name (without file extension) available in `src/components/services` | |
e9afa4d7 TP |
150 | target: "_blank" # optional html a tag target attribute |
151 | # class: "green" # optional custom CSS class for card, useful with custom stylesheet | |
be308259 | 152 | # background: red # optional color for card to set color directly without custom stylesheet |
1bc75494 BW |
153 | ``` |
154 | ||
ce391840 | 155 | View **[Custom Services](customservices.md)** for details about all available custom services (like `PiHole`) and how to configure them. |
fd12de9e | 156 | |
9542de6e | 157 | If you choose to fetch message information from an endpoint, the output format should be as follows (or you can [custom map fields as shown in tips-and-tricks](./tips-and-tricks.md#mapping-fields)): |
1bc75494 BW |
158 | |
159 | ```json | |
160 | { | |
161 | "style": null, | |
162 | "title": "Lorem ipsum 42", | |
163 | "content": "LA LA LA Lorem ipsum dolor sit amet, ....." | |
164 | } | |
165 | ``` | |
166 | ||
167 | `null` value or missing keys will be ignored and value from the `config.yml` will be used if available. | |
168 | Empty values (either in `config.yml` or the endpoint data) will hide the element (ex: set `"title": ""` to hide the title bar). | |
169 | ||
1d3287dc | 170 | ## Style Options |
1bc75494 BW |
171 | |
172 | 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: | |
173 | ||
174 | - `is-info` (blue) | |
175 | - `is-success` (green) | |
176 | - `is-warning` (yellow) | |
177 | - `is-danger` (red) | |
178 | ||
179 | You can read the [bulma modifiers page](https://bulma.io/documentation/modifiers/syntax/) for other options regarding size, style, or state. | |
d1b9dea2 | 180 | |
f031ac44 BW |
181 | ## Theming & customization |
182 | ||
183 | See `colors` settings in the configuration example above. | |
184 | Favicon et application icon (pwa) are located in the `assets/icons` directory and can be replaced by any image you want (just keep the same name & size). | |
185 | The `/assets/manifest.json` can also be edited to change the app (pwa) name, description and other settings. | |
186 | ||
187 | ### Community theme | |
188 | ||
189 | - [Dracula theme](https://draculatheme.com/homer) by [@Tuetenk0pp](https://github.com/Tuetenk0pp) | |
190 | - [Homer Theme v2](https://github.com/walkxcode/homer-theme) by [walkxcode](https://github.com/walkxcode) | |
52a136e0 | 191 | - [Catppuccin theme](https://github.com/mrpbennett/catppucin-homer) by [@mrpbenett](https://github.com/mrpbennett) |
f031ac44 BW |
192 | |
193 | ||
1d3287dc | 194 | ## PWA Icons |
d1b9dea2 | 195 | |
ce391840 | 196 | See icons documentation [here](https://github.com/bastienwirtz/homer/blob/main/public/assets/icons/README.md). |