holm/homer
1
0
Fork 0
forked from extern/homer
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:bastienwirtz/homer

Browse Source
This commit is contained in:
Glenn Toms 2020-06-18 14:29:33 +01:00
commit 5f71d1ea01
4 changed files with 279 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
README.md
View File

@ -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: '<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.
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://<my-api-endpoint>" # 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-<name>` 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";
```

131
docs/configuration.md Normal file
View File

@ -0,0 +1,131 @@
## 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: '<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.
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://<my-api-endpoint>" # 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.

29
docs/developement.md Normal file
View File

@ -0,0 +1,29 @@
## Developement
```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-<name>` 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";
```

112
docs/tips-and-tricks.md Normal file
View File

@ -0,0 +1,112 @@
# Tips & Tricks
Here is a collection of neat tips and tricks that Homer users have come up with!
## Use Homer as a custom "new tab" page
#### `by @vosdev`
This [extension](https://addons.mozilla.org/firefox/addon/custom-new-tab-page) allows you to have your homer dashboard in your new tab page, while leaving focus on the address bar meaning you can still type right away if you want to search or go to a page that is not on your homer dash.
The extension loads Homer in an iframe on your new tab page, meaning you have to add `target: '_top'` to each of your items.
```yaml
- name: "Reddit"
logo: "assets/daily/reddit.png"
url: "https://reddit.com"
target: '_top'
- name: "YouTube"
logo: "assets/daily/youtube.png"
url: "https://youtube.com"
target: '_top'
```
## YAML Anchors
#### `by @JamiePhonic`
Since Homer is configured using YAML, it supports all of YAML's helpful fetaures, such as anchoring!
For example, you can define tags and tag styles for each "item" in a service.
Using Anchoring, you can define all your tags and their styles once like this: (for example)
```yaml
# Some pre-defined tag styles. reference these using <<: *{NAME} inside an item definition; For Example, <<: *Apps
tags:
Favourite: &Favourite
- tag: "Favourite"
tagstyle: "is-medium is-primary"
CI: &CI
- tag: "CI"
tagstyle: "is-medium is-success"
Apps: &Apps
- tag: "App"
tagstyle: "is-medium is-info"
```
and then simply reference these pre-defined (anchored) tags in each item like so:
```yaml
- name: "VS Code"
logo: "/assets/vscode.png"
subtitle: "Develope Code Anywhere, On Anything!"
<<: *App # Regerence to the predefined "App" Tag
url: "https://vscode.example.com/"
target: "_blank" # optional html tag target attribute
````
Then when Homer reads your config, it will substitute your anchors automatically, the the above example is equal to:
```yaml
- name: "VS Code"
logo: "/assets/vscode.png"
subtitle: "Develope Code Anywhere, On Anything!"
tag: "App"
tagstyle: "is-medium is-info"
url: "https://vscode.example.com/"
target: "_blank" # optional html tag target attribute
```
The end result is that if you want to update the name or style of any perticular tag, just update it once, in the tags section!
Great if you have a lot of services or a lot of tags!
## Remotely edit your config with Code Server
#### `by @JamiePhonic`
Homer doesn't yet provide a way to edit your configuration from inside Homer itself, but that doesnt mean it cant be done!
You can setup and use [Code-Server](https://github.com/cdr/code-server) to edit your config.yml file from anywhere!
If you're running Homer in docker, you can setup a Code-Server container and pass your homer config directory into it.
Simply pass your homer config directory as and extra -v parameter to your code-server container:
```
-v '/your/local/homer/config-dir/':'/config/homer':'rw'
```
This will map your homer config directory (For example, /docker/appdata/homer/) into code-server's `/config/` directory, in a sub folder called `homer`
As a bonus, Code-Server puts the "current folder" as a parameter in the URL bar, so you could add a `links:` entry in Homer that points to your code-server instance with the directory pre-filled for essentially 1 click editing!
For example:
```yml
links:
- name: Edit config
icon: fas fa-cog
url: https://vscode.example.net/?folder=/config/homer
target: "_blank" # optional html tag target attribute
```
where the path after `?folder=` is the path to the folder where you mounted your homer config INSIDE the Code-Server container.
### Example Code-Server docker create command
```sh
docker create \
--name=code-server \
-e PUID=1000 \
-e PGID=1000 \
-e TZ=Europe/London \
-e PASSWORD={YOUR_PASSWORD} `#optional` \
-e SUDO_PASSWORD={YOUR SUDO_PASSWORD} `#optional` \
-p 8443:8443 \
-v /path/to/appdata/config:/config \
-v /your/local/homer/config-dir/:/config/homer \
--restart unless-stopped \
linuxserver/code-server
```