3 Title, icons, links, colors, and services can be configured in the `config.yml`
4 file (located in `/assets` directory once built, or in the `public/assets`
5 directory in development mode), using [yaml](http://yaml.org/) format.
9 # Homepage configuration
10 # See https://fontawesome.com/v5/search for icons options
12 # Optional: Use external configuration file.
13 # Using this will ignore remaining config in this file
14 # externalConfig: https://example.com/server-luci/config.yaml
16 title: "App dashboard"
18 # Customize the browser tab text
19 # documentTitle: "Welcome"
20 logo: "assets/logo.png"
21 # Alternatively a Font Awesome icon can be provided
22 # icon: "fas fa-skull-crossbones"
24 # Set to false to hide the header
26 # Set to false to hide the footer
28 <p>Created with <span class="has-text-danger">❤️</span> with
29 <a href="https://bulma.io/">bulma</a>,
30 <a href="https://vuejs.org/">vuejs</a>, &
31 <a href="https://fontawesome.com/">font awesome</a>
32 // Fork me on <a href="https://github.com/bastienwirtz/homer">
33 <i class="fab fa-github-alt"></i></a></p>
35 # Use "auto" or number (must be a factor of 12: 1, 2, 3, 4, 6, 12)
37 # Whether you want to display a message when the apps are not accessible
38 # anymore (VPN disconnected for example)
39 connectivityCheck: true
41 # Optional: Set a different hotkey for search, defaults to "/"
45 # Optional: Proxy / hosting option
47 # Send cookies & authorization headers when fetching service specific data.
48 # Set to `true` if you use an authentication proxy. Can be overrided on
52 # Set the default layout and color scheme
54 layout: columns # Either 'columns', or 'list'
55 colorTheme: auto # One of 'auto', 'light', or 'dark'
57 # Optional theming: 'default' or one of the themes available in
58 # 'src/assets/themes'.
61 # Optional custom stylesheet
62 # Will load custom CSS files. Especially useful for custom icon sets.
64 # - "assets/custom.css"
66 # Here is the exhaustive list of customization parameters, however all values
67 # are optional and will fallback to default if not set. If you want to change
68 # only some of the colors, feel free to remove all unused keys.
71 highlight-primary: "#3367d6"
72 highlight-secondary: "#4285f4"
73 highlight-hover: "#5a95f5"
75 card-background: "#ffffff"
77 text-header: "#424242"
79 text-subtitle: "#424242"
80 card-shadow: rgba(0, 0, 0, 0.1)
83 background-image: "assets/your/light/bg.png"
85 highlight-primary: "#3367d6"
86 highlight-secondary: "#4285f4"
87 highlight-hover: "#5a95f5"
89 card-background: "#2b2b2b"
91 text-header: "#ffffff"
93 text-subtitle: "#f5f5f5"
94 card-shadow: rgba(0, 0, 0, 0.4)
97 background-image: "assets/your/dark/bg.png"
101 # Uses Bulma. See https://bulma.io/documentation/components/message/#colors
102 # for styling options.
104 title: "Optional message!"
105 icon: "fa fa-exclamation-triangle"
106 content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
108 # Can optionally fetch information from an endpoint to override value below.
109 # url: "https://<my-api-endpoint>"
110 # mapping: # Select the appropriate fields from the response object.
111 # title: 'id' # Use value from field 'id' as title
112 # content: 'value' # Use value from field 'value' as content
113 # refreshInterval: 10000 # Optional: time interval to refresh message
115 # Real example using chucknorris.io for showing Chuck Norris facts:
116 # url: https://api.chucknorris.io/jokes/random
120 # refreshInterval: 10000
123 # Specify [] for navbar (dark mode, layout, and search) without any links
127 icon: "fab fa-github"
128 url: "https://github.com/bastienwirtz/homer"
129 target: "_blank" # optional html tag target attribute
132 url: "https://github.com/bastienwirtz/homer"
133 # Urls starting with # will link to additional Homer pages. Passing "#page2"
134 # will load config from page2.yml as overrides on top of the default values
135 # set in this config.yml.
136 - name: "Second Page"
137 icon: "fas fa-file-alt"
141 # First level array represents a group. Use only an "items" key if not using
142 # groups (name, icon, & tagstyle are optional; section separation will not be
145 - name: "Application"
146 icon: "fas fa-code-branch"
147 # A path to an image can also be provided. Note that icon will take
148 # precedence if both icon and logo are set.
149 # logo: "path/to/logo"
151 - name: "Awesome app"
152 logo: "assets/tools/sample.png"
153 # Alternatively a fa icon can be provided:
154 # icon: "fab fa-jenkins"
155 subtitle: "Bookmark example"
157 url: "https://www.reddit.com/r/selfhosted/"
158 # Optional: HTML <a> tag target attribute
160 - name: "Another one"
161 logo: "assets/tools/sample2.png"
162 subtitle: "Another application"
165 tagstyle: "is-success"
167 - name: "Other group"
168 icon: "fas fa-heartbeat"
171 logo: "assets/tools/sample.png"
172 # Optional: If no subtitle is defined, PiHole statistics will be shown.
173 # subtitle: "Network-wide Ad Blocking"
175 url: "http://192.168.0.151/admin"
176 # Optional: Loads a specific component that provides extra features.
177 # MUST MATCH a file name (without file extension) available in
178 # `src/components/services`
180 # Optional: HTML <a> tag target attribute
182 # Optional: Custom CSS class for card, useful with custom stylesheet
184 # Optional: Set background color directly without custom stylesheet
188 View [Custom Services](custom_services.md) for details about all available
189 custom services (like PiHole) and how to configure them.
191 If you choose to fetch message information from an endpoint, the output format
192 should be as follows (or you can
193 [custom map fields as shown in tips and tricks](tips_and_tricks#mapping-fields)):
198 "title": "Lorem ipsum 42",
199 "content": "LA LA LA Lorem ipsum dolor sit amet, ....."
203 `null` value or missing keys will be ignored and value from the `config.yml`
204 will be used if available. Empty values (either in `config.yml` or the endpoint
205 data) will hide the element (ex: set `"title": ""` to hide the title bar).
209 Homer uses [Bulma CSS](https://bulma.io/), which provides a
210 [modifiers syntax](https://bulma.io/documentation/modifiers/syntax/). You'll
211 notice in the config there is a `tagstyle` option. It can be set to any of the
212 bulma modifiers. You'll probably want to use one of these 4 main colors:
215 - `is-success` (green)
216 - `is-warning` (yellow)
219 You can read the [bulma modifiers page](https://bulma.io/documentation/modifiers/syntax/)
220 for other options regarding size, style, or state.
224 In order to easily generate all required icon preset for the PWA to work, a tool
225 like [vue-pwa-asset-generator](https://www.npmjs.com/package/vue-pwa-asset-generator)
229 npx vue-pwa-asset-generator -a {your_512x512_source_png} -o {your_output_folder}