aboutsummaryrefslogtreecommitdiffhomepage
path: root/docs/tips-and-tricks.md
diff options
context:
space:
mode:
authorGlenn Toms <Glenn@glenntoms.gg>2020-06-18 14:29:33 +0100
committerGlenn Toms <Glenn@glenntoms.gg>2020-06-18 14:29:33 +0100
commit5f71d1ea01c54a79fb8f459f8acbe92b0ea99c61 (patch)
tree77cff16387f0b78b2e6790b1a66bdf4bebedffb8 /docs/tips-and-tricks.md
parent481ab9a01bdbe44ca64e5b065f2b81e41bee3ea0 (diff)
parentaac817970ce37f5991ae94c5c58ea2e1695420e2 (diff)
downloadhomer-5f71d1ea01c54a79fb8f459f8acbe92b0ea99c61.tar.gz
homer-5f71d1ea01c54a79fb8f459f8acbe92b0ea99c61.tar.zst
homer-5f71d1ea01c54a79fb8f459f8acbe92b0ea99c61.zip
Merge branch 'master' of github.com:bastienwirtz/homer
Diffstat (limited to 'docs/tips-and-tricks.md')
-rw-r--r--docs/tips-and-tricks.md112
1 files changed, 112 insertions, 0 deletions
diff --git a/docs/tips-and-tricks.md b/docs/tips-and-tricks.md
new file mode 100644
index 0000000..63dbde7
--- /dev/null
+++ b/docs/tips-and-tricks.md
@@ -0,0 +1,112 @@
1# Tips & Tricks
2
3Here is a collection of neat tips and tricks that Homer users have come up with!
4
5## Use Homer as a custom "new tab" page
6#### `by @vosdev`
7
8This [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.
9
10The extension loads Homer in an iframe on your new tab page, meaning you have to add `target: '_top'` to each of your items.
11
12```yaml
13- name: "Reddit"
14 logo: "assets/daily/reddit.png"
15 url: "https://reddit.com"
16 target: '_top'
17
18- name: "YouTube"
19 logo: "assets/daily/youtube.png"
20 url: "https://youtube.com"
21 target: '_top'
22```
23
24## YAML Anchors
25#### `by @JamiePhonic`
26
27Since Homer is configured using YAML, it supports all of YAML's helpful fetaures, such as anchoring!
28
29For example, you can define tags and tag styles for each "item" in a service.
30Using Anchoring, you can define all your tags and their styles once like this: (for example)
31
32```yaml
33# Some pre-defined tag styles. reference these using <<: *{NAME} inside an item definition; For Example, <<: *Apps
34tags:
35 Favourite: &Favourite
36 - tag: "Favourite"
37 tagstyle: "is-medium is-primary"
38 CI: &CI
39 - tag: "CI"
40 tagstyle: "is-medium is-success"
41 Apps: &Apps
42 - tag: "App"
43 tagstyle: "is-medium is-info"
44```
45
46and then simply reference these pre-defined (anchored) tags in each item like so:
47
48```yaml
49- name: "VS Code"
50 logo: "/assets/vscode.png"
51 subtitle: "Develope Code Anywhere, On Anything!"
52 <<: *App # Regerence to the predefined "App" Tag
53 url: "https://vscode.example.com/"
54 target: "_blank" # optional html tag target attribute
55````
56
57Then when Homer reads your config, it will substitute your anchors automatically, the the above example is equal to:
58
59```yaml
60- name: "VS Code"
61 logo: "/assets/vscode.png"
62 subtitle: "Develope Code Anywhere, On Anything!"
63 tag: "App"
64 tagstyle: "is-medium is-info"
65 url: "https://vscode.example.com/"
66 target: "_blank" # optional html tag target attribute
67```
68
69The 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!
70Great if you have a lot of services or a lot of tags!
71
72## Remotely edit your config with Code Server
73#### `by @JamiePhonic`
74
75Homer doesn't yet provide a way to edit your configuration from inside Homer itself, but that doesnt mean it cant be done!
76
77You can setup and use [Code-Server](https://github.com/cdr/code-server) to edit your config.yml file from anywhere!
78
79If you're running Homer in docker, you can setup a Code-Server container and pass your homer config directory into it.
80Simply pass your homer config directory as and extra -v parameter to your code-server container:
81```
82-v '/your/local/homer/config-dir/':'/config/homer':'rw'
83```
84This will map your homer config directory (For example, /docker/appdata/homer/) into code-server's `/config/` directory, in a sub folder called `homer`
85
86As 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!
87
88For example:
89```yml
90links:
91 - name: Edit config
92 icon: fas fa-cog
93 url: https://vscode.example.net/?folder=/config/homer
94 target: "_blank" # optional html tag target attribute
95```
96where the path after `?folder=` is the path to the folder where you mounted your homer config INSIDE the Code-Server container.
97
98### Example Code-Server docker create command
99```sh
100docker create \
101 --name=code-server \
102 -e PUID=1000 \
103 -e PGID=1000 \
104 -e TZ=Europe/London \
105 -e PASSWORD={YOUR_PASSWORD} `#optional` \
106 -e SUDO_PASSWORD={YOUR SUDO_PASSWORD} `#optional` \
107 -p 8443:8443 \
108 -v /path/to/appdata/config:/config \
109 -v /your/local/homer/config-dir/:/config/homer \
110 --restart unless-stopped \
111 linuxserver/code-server
112```