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

initial commit of the custom search widget
This commit is contained in:
Alicia Sykes 2023-06-04 22:36:11 +01:00 committed by GitHub
commit 2324755e0e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 127 additions and 1 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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',