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 #### `by @vosdev`
   7
   8 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.
   9
  10 The 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
  27 Since Homer is configured using YAML, it supports all of YAML's helpful fetaures, such as anchoring!
  28
  29 For example, you can define tags and tag styles for each "item" in a service.
  30 Using 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
  34 tags:
  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
  46 and 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
  57 Then 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
  69 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!
  70 Great 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
  75 Homer doesn't yet provide a way to edit your configuration from inside Homer itself, but that doesnt mean it cant be done!
  76
  77 You can setup and use [Code-Server](https://github.com/cdr/code-server) to edit your config.yml file from anywhere!
  78
  79 If you're running Homer in docker, you can setup a Code-Server container and pass your homer config directory into it.
  80 Simply 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 ```
  84 This will map your homer config directory (For example, /docker/appdata/homer/) into code-server's `/config/` directory, in a sub folder called `homer`
  85
  86 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!
  87
  88 For example:
  89 ```yml
  90 links:
  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 ```
  96 where 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
 100 docker 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 ```
 113
 114
 115 ## Get the news headlines in Homer
 116 #### `by @JamiePhonic`
 117
 118 Homer allows you to set a "message" that will appear at the top of the page, however, you can also supply a `url:`.
 119
 120 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.
 121
 122 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!
 123
 124 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!
 125
 126 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 dont work out of the box!