🔀 Merge pull request #1212 from alayham/custom-search

initial commit of the custom search widget

docs/widgets.md

@@ -37,6 +37,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Healthchecks Status](#healthchecks-status)
   - [Mvg Departure](#mvg-departure)
   - [Mvg Connection](#mvg-connection)
+  - [Custom search](#custom-search)
 - **[Self-Hosted Services Widgets](#self-hosted-services-widgets)**
   - [System Info](#system-info)
   - [Cron Monitoring](#cron-monitoring-health-checks)
@@ -1264,11 +1265,61 @@ In other words: Private, noncomercial, moderate use of the API is tolerated. The
 
 ---
 
+### Custom search
+
+Allows web search using multiple user-defined search engines and other websites.
+
+#### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`engines`** | `array` |  required | An array of search engine objects. Each search engine object should have two required properties: **title** and **url**. See the example below.
+**`placeholder`** | `string` |  optional | Placeholder text in the search box.
+
+#### Notes
+- The first search engine in the engines array will be treated as the default search engine, and used when the user presses `Enter` in the search box.
+- Popup blockers can interfere with opening a new search window.
+
+#### Example
+
+This widget allows searching multiple search engines from dashy.
+```yaml
+  - type: 'custom-search'
+    options:
+      placeholder: Search for something using the buttons below
+      engines:
+      - title: SearXNG
+        url: https://searx.lan/?q=
+      - title: Quant
+        url: https://www.qwant.com/?q=
+      - title: Bing Web
+        url: http://www.bing.com/search?q=
+      - title: Bing Images
+        url: http://www.bing.com/images/search?q=
+      - title: Bing Maps
+        url: http://www.bing.com/maps/search?q=
+      - title: Yandex
+        url: https://www.yandex.com/search/?text=
+      - title: Passmark
+        url: https://www.passmark.com/search/zoomsearch.php?zoom_query=
+      - title: IMDB
+        url: http://www.imdb.com/find?q=
+```
+#### Info
+
+- **CORS**: 🟢 Not needed
+- **Auth**: 🟢 Not Required
+- **Price**: 🟢 Free 
+- **Host**: user defined
+- **Privacy**: depends on the user defined search engines.
+
+---
+
 
 ## Self-Hosted Services Widgets
 
 ### System Info
-
+_See [MVG Datenschutz](https://www.mvg.de/datenschutz-mvg.html)_
 Displays info about the server which Dashy is hosted on. Includes user + host, operating system, uptime and basic memory & load data.
 
 <p align="center"><img width="400" src="https://i.ibb.co/rvDPBDF/system-info.png" /></p>

src/components/Widgets/CustomSearch.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="custom-search">
+    <input type="text" v-model="query"
+      @keyup.enter="search(defaultEngine)"
+      @keyup.stop @keydown.stop
+      :placeholder="placeholder">
+    <div class="buttons">
+      <button
+        v-for="(engine, key) in engines" :key="key"
+        v-on:click="search(engine)">
+        {{ engine.title }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+
+export default {
+  mixins: [WidgetMixin],
+  components: {},
+  data() {
+    return {
+      query: '',
+    };
+  },
+  computed: {
+    placeholder() {
+      return this.options.placeholder || '';
+    },
+    engines() {
+      return this.options.engines || [];
+    },
+    defaultEngine() {
+      return this.engines[0];
+    },
+  },
+  methods: {
+    search(engine) {
+      if (engine !== undefined && this.query !== '') {
+        window.open(engine.url + this.query, '_blank');
+      }
+    },
+  },
+};
+
+</script>
+
+<style scoped lang="scss">
+
+.custom-search {
+  font-size: 1.2rem;
+  input {
+    width: 80%;
+    margin: 1rem 10%;
+    padding: 0.5rem;
+    font-size: 1.2rem;
+  }
+  .buttons {
+    text-align:center;
+    button{
+      margin: 0.5rem;
+      padding: 0.5rem;
+      border: none;
+      color: var(--item-text-color);
+      background: var(--item-background);
+      font-size: 1.2rem;
+    }
+
+  }
+
+}
+</style>

src/components/Widgets/WidgetBase.vue

@@ -52,6 +52,7 @@ const COMPAT = {
   clock: 'Clock',
   'crypto-price-chart': 'CryptoPriceChart',
   'crypto-watch-list': 'CryptoWatchList',
+  'custom-search': 'CustomSearch',
   'cve-vulnerabilities': 'CveVulnerabilities',
   'domain-monitor': 'DomainMonitor',
   'code-stats': 'CodeStats',