docs/tips_and_tricks.md

   1 # Tips & Tricks
   2
   3 Here 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
   7 #### `by @vosdev`
   8
   9 These extensions for [Firefox](https://addons.mozilla.org/firefox/addon/custom-new-tab-page) and [Chrome & Friends](https://chrome.google.com/webstore/detail/new-tab-changer/occbjkhimchkolibngmcefpjlbknggfh) allow 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.
  10
  11 The Firefox extension loads Homer in an iframe on your new tab page, meaning you have to add `target: '_top'` to each of your items.
  12
  13 ```yaml
  14 - name: "Reddit"
  15   logo: "assets/daily/reddit.png"
  16   url: "https://reddit.com"
  17   target: '_top'
  18
  19 - name: "YouTube"
  20   logo: "assets/daily/youtube.png"
  21   url: "https://youtube.com"
  22   target: '_top'
  23 ```
  24
  25 ## YAML Anchors
  26
  27 #### `by @JamiePhonic`
  28
  29 Since Homer is configured using YAML, it supports all of YAML's helpful features, such as anchoring!
  30
  31 For example, you can define tags and tag styles for each "item" in a service.
  32 Using Anchoring, you can define all your tags and their styles once like this: (for example)
  33
  34 ```yaml
  35 # Some pre-defined tag styles. reference these using <<: *{NAME} inside an item definition; For Example, <<: *Apps
  36 tags:
  37   Favourite: &Favourite
  38     - tag: "Favourite"
  39       tagstyle: "is-medium is-primary"
  40   CI: &CI
  41     - tag: "CI"
  42       tagstyle: "is-medium is-success"
  43   Apps: &Apps
  44     - tag: "App"
  45       tagstyle: "is-medium is-info"
  46 ```
  47
  48 and then simply reference these pre-defined (anchored) tags in each item like so:
  49
  50 ```yaml
  51 - name: "VS Code"
  52   logo: "/assets/vscode.png"
  53   subtitle: "Develop Code Anywhere, On Anything!"
  54   <<: *Apps # Reference to the predefined "App" Tag
  55   url: "https://vscode.example.com/"
  56   target: "_blank" # optional html tag target attribute
  57 ````
  58
  59 Then when Homer reads your config, it will substitute your anchors automatically, the above example is equal to:
  60
  61 ```yaml
  62 - name: "VS Code"
  63   logo: "/assets/vscode.png"
  64   subtitle: "Develop Code Anywhere, On Anything!"
  65   tag: "App"
  66   tagstyle: "is-medium is-info"
  67   url: "https://vscode.example.com/"
  68   target: "_blank" # optional html tag target attribute
  69 ```
  70
  71 The end result is that if you want to update the name or style of any particular tag, just update it once, in the tags section!
  72 Great if you have a lot of services or a lot of tags!
  73
  74 ## Remotely edit your config with Code Server
  75
  76 #### `by @JamiePhonic`
  77
  78 Homer doesn't yet provide a way to edit your configuration from inside Homer itself, but that doesn't mean it can't be done!
  79
  80 You can setup and use [Code-Server](https://github.com/cdr/code-server) to edit your `config.yml` file from anywhere!
  81
  82 If you're running Homer in docker, you can setup a Code-Server container and pass your homer config directory into it.
  83 Simply pass your homer config directory as an extra -v parameter to your code-server container:
  84
  85 ```sh
  86 -v '/your/local/homer/config-dir/':'/config/homer':'rw'
  87 ```
  88
  89 This will map your homer config directory (For example, /docker/appdata/homer/) into code-server's `/config/` directory, in a sub folder called `homer`
  90
  91 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!
  92
  93 For example:
  94
  95 ```yml
  96 links:
  97   - name: Edit config
  98     icon: fas fa-cog
  99     url: https://vscode.example.net/?folder=/config/homer
 100     target: "_blank" # optional html tag target attribute
 101 ```
 102
 103 where the path after `?folder=` is the path to the folder where you mounted your homer config INSIDE the Code-Server container.
 104
 105 ### Example Code-Server docker create command
 106
 107 ```sh
 108 docker create \
 109   --name=code-server \
 110   -e PUID=1000 \
 111   -e PGID=1000 \
 112   -e TZ=Europe/London \
 113   -e PASSWORD={YOUR_PASSWORD} `#optional` \
 114   -e SUDO_PASSWORD={YOUR SUDO_PASSWORD} `#optional` \
 115   -p 8443:8443 \
 116   -v /path/to/appdata/config:/config \
 117   -v /your/local/homer/config-dir/:/config/homer \
 118   --restart unless-stopped \
 119   linuxserver/code-server
 120 ```
 121
 122 ## Get the news headlines in Homer
 123
 124 ### Mapping Fields
 125
 126 Most times, the url you're getting headlines from follows a different schema than the one expected by Homer.
 127
 128 For example, if you would like to show jokes from ChuckNorris.io, you'll find that the url <https://api.chucknorris.io/jokes/random> is giving you info like this:
 129
 130 ```json
 131 {
 132   "categories": [],
 133   "created_at": "2020-01-05 13:42:22.089095",
 134   "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
 135   "id": "MR2-BnMBR667xSpQBIleUg",
 136   "updated_at": "2020-01-05 13:42:22.089095",
 137   "url": "https://api.chucknorris.io/jokes/MR2-BnMBR667xSpQBIleUg",
 138   "value": "Chuck Norris can quitely sneak up on himself"
 139 }
 140 ```
 141
 142 but... you need that info to be transformed to something like this:
 143
 144 ```json
 145 {
 146   "title": "MR2-BnMBR667xSpQBIleUg",
 147   "content": "Chuck Norris can quitely sneak up on himself"
 148 }
 149 ```
 150
 151 Now, you can do that using the `mapping` field in your `message` configuration. This example would be something like this:
 152
 153 ```yml
 154 message:
 155   url: https://api.chucknorris.io/jokes/random
 156   mapping:
 157     title: 'id'
 158     content: 'value'
 159 ```
 160
 161 As you would see, using the ID as a title doesn't seem nice, that's why when a field is empty it would keep the default values, like this:
 162
 163 ```yml
 164 message:
 165   url: https://api.chucknorris.io/jokes/random
 166   mapping:
 167     content: 'value'
 168   title: "Chuck Norris Facts!"
 169 ```
 170
 171 and even an error message in case the `url` didn't respond or threw an error:
 172
 173 ```yml
 174 message:
 175   url: https://api.chucknorris.io/jokes/random
 176   mapping:
 177     content: 'value'
 178   title: "Chuck Norris Facts!"
 179   content: "Message could not be loaded"
 180 ```
 181
 182 #### `by @JamiePhonic`
 183
 184 Homer allows you to set a "message" that will appear at the top of the page, however, you can also supply a `url:`.
 185
 186 If the URL you specified returns a JSON object that defines a `title` and `content` item, homer will replace these values from your `config.yml` with the ones in the returned object.
 187
 188 So, using [Node-Red](https://nodered.org/docs/getting-started/) and a quick flow, you can process an RSS feed to replace the message with a news item!
 189
 190 To get started, simply import [this flow](https://flows.nodered.org/flow/4b6406c9a684c26ace0430dd1826e95d) into your Node-Red instance and change the RSS feed in the "Get News RSS Feed" node to one of your choosing!
 191
 192 So far, the flow has been tested with BBC News and Sky News, however it should be easy to modify the flow to work with other RSS feeds if they don't work out of the box!