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