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