Merge branch 'bastienwirtz:main' into apikey

4 files changed, 21 insertions, 5 deletions

diff --git a/docs/configuration.md b/docs/configuration.md
index 50b5bd5..e2b5506 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -19,6 +19,9 @@ logo: "assets/logo.png"
 # icon: "fas fa-skull-crossbones"
 
 header: true # Set to false to hide the header
+# Optional: Different hotkey for search, defaults to "/"
+# hotkey:
+#   search: "Shift"
 footer: '<p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a> & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>' # set false if you want to hide it.
 
 columns: "3" # "auto" or number (must be a factor of 12: 1, 2, 3, 4, 6, 12)
diff --git a/docs/customservices.md b/docs/customservices.md
index f55b739..3b3320d 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -97,8 +97,9 @@ For Ping you need to set the type to Ping and provide a url.
 - name: "Awesome app"
   type: Ping
   logo: "assets/tools/sample.png"
-  subtitle: "Bookmark example" tag: "app" 
-  url: "https://www.reddit.com/r/selfhosted/" 
+  subtitle: "Bookmark example"
+  tag: "app"
+  url: "https://www.reddit.com/r/selfhosted/"
 ```
 
 ## Prometheus
diff --git a/src/App.vue b/src/App.vue
index c263c8a..5c62a7f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,6 +41,7 @@
 
         <SearchInput
           class="navbar-item is-inline-block-mobile"
+          :hotkey=searchHotkey()
           @input="filterServices"
           @search-focus="showMenu = true"
           @search-open="navigateToFirstService"
@@ -167,6 +168,11 @@ export default {
     window.onhashchange = this.buildDashboard;
   },
   methods: {
+    searchHotkey() {
+      if (this.config.hotkey && this.config.hotkey.search) {
+        return this.config.hotkey.search;
+      }
+    },
     buildDashboard: async function () {
       const defaults = jsyaml.load(defaultConfig);
       let config;
diff --git a/src/components/SearchInput.vue b/src/components/SearchInput.vue
index 40c5a1d..586ff71 100644
--- a/src/components/SearchInput.vue
+++ b/src/components/SearchInput.vue
@@ -15,10 +15,16 @@
 <script>
 export default {
   name: "SearchInput",
-  props: ["value"],
+  props: {
+    value: String,
+    hotkey: {
+      type: String,
+      default: "/"
+    }
+  },
   mounted() {
     this._keyListener = function (event) {
-      if (event.key === "/") {
+      if (event.key === this.hotkey) {
         event.preventDefault();
         this.focus();
       }
@@ -28,7 +34,7 @@ export default {
     };
     document.addEventListener("keydown", this._keyListener.bind(this));
 
-    // fill seach from get parameter.
+    // fill search from get parameter.
     const search = new URLSearchParams(window.location.search).get("search");
     if (search) {
       this.$refs.search.value = search;