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.
7 # Homepage configuration
8 # See https://fontawesome.com/icons for icons options
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
14 title: "App dashboard"
16 # documentTitle: "Welcome" # Customize the browser tab text
17 logo: "assets/logo.png"
18 # Alternatively a fa icon can be provided:
19 # icon: "fas fa-skull-crossbones"
21 header: true # Set to false to hide the header
22 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.
24 columns: "3" # "auto" or number (must be a factor of 12: 1, 2, 3, 4, 6, 12)
25 connectivityCheck: true # whether you want to display a message when the apps are not accessible anymore (VPN disconnected for example)
28 theme: default # 'default' or one of the themes available in 'src/assets/themes'.
30 # Optional custom stylesheet
31 # Will load custom CSS files. Especially useful for custom icon sets.
33 # - "assets/custom.css"
35 # Here is the exhaustive list of customization parameters
36 # However all value are optional and will fallback to default if not set.
37 # if you want to change only some of the colors, feel free to remove all unused key.
40 highlight-primary: "#3367d6"
41 highlight-secondary: "#4285f4"
42 highlight-hover: "#5a95f5"
44 card-background: "#ffffff"
46 text-header: "#424242"
48 text-subtitle: "#424242"
49 card-shadow: rgba(0, 0, 0, 0.1)
51 background-image: "assets/your/light/bg.png"
53 highlight-primary: "#3367d6"
54 highlight-secondary: "#4285f4"
55 highlight-hover: "#5a95f5"
57 card-background: "#2b2b2b"
59 text-header: "#ffffff"
61 text-subtitle: "#f5f5f5"
62 card-shadow: rgba(0, 0, 0, 0.4)
64 background-image: "assets/your/dark/bg.png"
68 # url: "https://<my-api-endpoint>" # Can fetch information from an endpoint to override value below.
69 # mapping: # allows to map fields from the remote format to the one expected by Homer
70 # title: 'id' # use value from field 'id' as title
71 # content: 'value' # value from field 'value' as content
72 # refreshInterval: 10000 # Optional: time interval to refresh message
74 # Real example using chucknorris.io for showing Chuck Norris facts as messages:
75 # url: https://api.chucknorris.io/jokes/random
79 # refreshInterval: 10000
81 title: "Optional message!"
82 icon: "fa fa-exclamation-triangle"
83 content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
86 # links: [] # Allows for navbar (dark mode, layout, and search) without any links
90 url: "https://github.com/bastienwirtz/homer"
91 target: "_blank" # optional html tag target attribute
94 url: "https://github.com/bastienwirtz/homer"
97 # First level array represents a group.
98 # Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed).
100 - name: "Application"
101 icon: "fas fa-code-branch"
102 # A path to an image can also be provided. Note that icon take precedence if both icon and logo are set.
103 # logo: "path/to/logo"
105 - name: "Awesome app"
106 logo: "assets/tools/sample.png"
107 # Alternatively a fa icon can be provided:
108 # icon: "fab fa-jenkins"
109 subtitle: "Bookmark example"
111 url: "https://www.reddit.com/r/selfhosted/"
112 target: "_blank" # optional html tag target attribute
113 - name: "Another one"
114 logo: "assets/tools/sample2.png"
115 subtitle: "Another application"
118 tagstyle: "is-success"
120 - name: "Other group"
121 icon: "fas fa-heartbeat"
124 logo: "assets/tools/sample.png"
125 # subtitle: "Network-wide Ad Blocking" # optional, if no subtitle is defined, PiHole statistics will be shown
127 url: "http://192.168.0.151/admin"
128 type: "PiHole" # optional, loads a specific component that provides extra features. MUST MATCH a file name (without file extension) available in `src/components/services`
129 target: "_blank" # optional html a tag target attribute
130 # class: "green" # optional custom CSS class for card, useful with custom stylesheet
131 # background: red # optional color for card to set color directly without custom stylesheet
134 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)):
139 "title": "Lorem ipsum 42",
140 "content": "LA LA LA Lorem ipsum dolor sit amet, ....."
144 `null` value or missing keys will be ignored and value from the `config.yml` will be used if available.
145 Empty values (either in `config.yml` or the endpoint data) will hide the element (ex: set `"title": ""` to hide the title bar).
149 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:
152 - `is-success` (green)
153 - `is-warning` (yellow)
156 You can read the [bulma modifiers page](https://bulma.io/documentation/modifiers/syntax/) for other options regarding size, style, or state.
160 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:
163 npx vue-pwa-asset-generator -a {your_512x512_source_png} -o {your_output_folder}