add chroma and lightsync diagrams and improve their titles

content/integrations/chroma.md

@@ -1,9 +1,12 @@
 ---
+searchTitle: "How to Use Razer Chroma on Non-Razer Devices"
 title: "Razer Chroma"
 authors:
   - Aytackydln
 ---
 
+![Diagram showing Aurora Chroma integration](img/chroma_diagram.png)
+
 You can use Chroma integration with [all supported devices]({{< relref "/devices/alldevices.md" >}})
 
 > Note that this is reverse engineered and may not work as the original.

content/integrations/lightsync.md

@@ -1,9 +1,12 @@
 ---
+searchTitle: "How to Use Lightsync integration on Non-Logitech Devices"
 title: "Logitech Lightsync"
 authors:
   - Aytackydln
 ---
 
+![Diagram showing Aurora & Lightsync integration](img/lightsync_diagram.png)
+
 You can use Lightsync integration with [all supported devices]({{< relref "/devices/alldevices.md" >}})
 
 > Note that this is reverse engineered and may not work as the original.

themes/aurora/layouts/partials/head.html

@@ -1,7 +1,12 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="description" content="How to use Aurora to control RGB keyboards, mice and others">
+
+{{ if .Params.searchTitle }}
+<title>{{ default $.Params.searchTitle }} • Aurora Docs</title>
+{{ else }}
 <title>{{ default $.Site.Title .Title }} •{{ if .Section }}{{ printf " %s •" .Section }}{{ end }} Aurora Docs</title>
+{{ end }}
 {{ $styles := resources.Get "scss/main.scss" | toCSS | minify | fingerprint }}
 <link rel="stylesheet" href="{{ $styles.Permalink }}">
 <link rel="icon" href="{{ "favicon.ico" | relURL }}">