X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=README.md;h=65ef9ab92fc21fe5fc1d088df9ecaf3249c9bdf4;hb=1bc75494cae6efd5a0fdff3195db110451bad2ec;hp=8818e322423ee847b5770617bf21c49a60cb380f;hpb=cad54a560f77382d9584fd804f9cdd84c92012b7;p=github%2Fbastienwirtz%2Fhomer.git diff --git a/README.md b/README.md index 8818e32..65ef9ab 100644 --- a/README.md +++ b/README.md @@ -14,9 +14,11 @@ ervices on hand, from a simple `yaml` configuration file. ## Table of Contents - [Features](#features) - [Getting started](#getting-started) -- [Configuration](#configuration) +- [Configuration](docs/configuration.md) +- [Tips & tricks](docs/tips-and-tricks.md) - [Roadmap](#roadmap) -- [Developement](#developement) +- [Developement](docs/developement.md) + ## Features - [yaml](http://yaml.org/) file configuration @@ -36,6 +38,8 @@ ervices on hand, from a simple `yaml` configuration file. Homer is a full static html/js dashboard, generated from the source in `/src` using webpack. It's meant to be served by an HTTP server, **it will not work if you open dist/index.html directly over file:// protocol**. +For more information about the `config.yml` file see [configuration](docs/configuration.md) the section. + ### Using docker ```sh @@ -76,171 +80,8 @@ npm run build Then your dashboard is ready to use in the `/dist` directory. -## Configuration - -Title, icons, links, colors, and services can be configured in the `config.yml` file (located in project root directory once built, or in the `public/` directory in developement mode), using [yaml](http://yaml.org/) format. - -```yaml ---- -# Homepage configuration -# See https://fontawesome.com/icons for icons options - -# Optional: Use external configuration file. -# Using this will ignore remaining config in this file -# externalConfig: https://example.com/server-luci/config.yaml - -title: "App dashboard" -subtitle: "Homer" -logo: "assets/homer.png" -# Alternatively a fa icon can be provided: -# icon: "fas fa-skull-crossbones" - -header: true # Set to false to hide the header -footer: '

Created with ❤️ with bulma, vuejs & font awesome // Fork me on

' # set false if you want to hide it. - -columns: "3" # "auto" or number (must be a factor of 12: 1, 2, 3, 4, 6, 12) -connectivityCheck: true # whether you want to display a message when the apps are not accessible anymore (VPN disconnected for example) - -# Optional theming -theme: default # 'default' or one of the theme available in 'src/assets/themes'. - -# Here is the exaustive list of customization parameters -# However all value are optional and will fallback to default if not set. -# if you want to change only some of the colors, feel free to remove all unused key. -colors: - light: - highlight-primary: "#3367d6" - highlight-secondary: "#4285f4" - highlight-hover: "#5a95f5" - background: "#f5f5f5" - card-background: "#ffffff" - text: "#363636" - text-header: "#424242" - text-title: "#303030" - text-subtitle: "#424242" - card-shadow: rgba(0, 0, 0, 0.1) - link-hover: "#363636" - dark: - highlight-primary: "#3367d6" - highlight-secondary: "#4285f4" - highlight-hover: "#5a95f5" - background: "#131313" - card-background: "#2b2b2b" - text: "#eaeaea" - text-header: "#ffffff" - text-title: "#fafafa" - text-subtitle: "#f5f5f5" - card-shadow: rgba(0, 0, 0, 0.4) - link-hover: "#ffdd57" - -# Optional message -message: - # url: "https://" # Can fetch information from an endpoint to override value below. - style: "is-warning" - title: "Optional message!" - content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit." - -# Optional navbar -# links: [] # Allows for navbar (dark mode, layout, and search) without any links -links: - - name: "Link 1" - icon: "fab fa-github" - url: "https://github.com/bastienwirtz/homer" - target: "_blank" # optional html tag target attribute - - name: "link 2" - icon: "fas fa-book" - url: "https://github.com/bastienwirtz/homer" - -# Services -# First level array represent a group. -# Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed). -services: - - name: "Application" - icon: "fa fa-code-fork" - items: - - name: "Awesome app" - logo: "assets/tools/sample.png" - # Alternatively a fa icon can be provided: - # icon: "fab fa-jenkins" - subtitle: "Bookmark example" - tag: "app" - url: "https://www.reddit.com/r/selfhosted/" - target: "_blank" # optional html tag target attribute - - name: "Another one" - logo: "assets/tools/sample2.png" - subtitle: "Another application" - tag: "app" - # Optional tagstyle - tagstyle: "is-success" - url: "#" - - name: "Other group" - icon: "fas fa-heartbeat" - items: - - name: "Another app" - logo: "assets/tools/sample.png" - subtitle: "Another example" - tag: "other" - url: "https://www.reddit.com/r/selfhosted/" - target: "_blank" # optionnal html a tag target attribute -``` - -If you choose to fetch message information from an endpoint, the output format should be: - -```json -{ - "style": null, - "title": "Lorem ipsum 42", - "content": "LA LA LA Lorem ipsum dolor sit amet, ....." -} -``` - -`null` value or missing keys will be ignored and value from the `config.yml` will be used if available. -Empty values (either in `config.yml` or the endpoint data) will hide the element (ex: set `"title": ""` to hide the title bar). - -### Style Options - -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: - -- `is-info` (blue) -- `is-success` (green) -- `is-warning` (yellow) -- `is-danger` (red) - -You can read the [bulma modifiers page](https://bulma.io/documentation/modifiers/syntax/) for other options regarding size, style, or state. - ## Roadmap -- [ ] Add more themes. +- [ ] Add new themes. - [ ] Add support for custom service card (add custom feature to some service / app link) - - -## Development - -```sh -# Using yarn (recommended) -yarn install -yarn serve - -# **OR** Using npm -npm install -npm run serve -``` - -### Themes - -Themes are meant to be simple customization (written in [scss](https://sass-lang.com/documentation/syntax)). -To addd a new theme, just add a file in the theme directory, and put all style in the `body #app.theme-` scope. Then import it in the main style file. - -```scss -// `src/assets/themes/my-awesome-theme.scss` -body #app.theme-my-awesome-theme. { ... } -``` - -```scss -// `src/assets/app.scss` -// Themes import -@import "./themes/sui.scss"; -... -@import "./themes/my-awesome-theme.scss"; -```