[FEATURE] Web Search Functionality

.github/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## ✨ 1.6.9 - Web Search Feature [PR #185](https://github.com/Lissy93/dashy/pull/185)
+- Adds ability to search the web directly from Dashy by pressing enter on the search bar
+- Adds configuration options, for setting default search engine, opening method and disabling
+- Adds text under search bar, implements into minimal view also
+
 ## ⚡️ 1.6.8 - Improved Loading Experience [PR #183](https://github.com/Lissy93/dashy/pull/183)
 - During app initialization, show the build progress and status message
 - While requests are being made, show loader at top of screen

.github/CODEOWNERS

@@ -4,12 +4,11 @@
 # Each line starts with file pattern, followed by one or more owners
 # Codeowners Docs: https://github.blog/2017-07-06-introducing-code-owners/
 
-# Repo Owner
+# Repo Owners
 *   @lissy93
 
 # Translations
-src/assets/locales/de.json    @niklashere
-src/assets/locales/nl.json    @evroon
+src/assets/locales/fr.json    @EVOTk
 
 # Bot PR Permissions
 docs/assets/CONTRIBUTORS.svg  @liss-bot

README.md

@@ -327,6 +327,8 @@ You can change the view from the UI, using the switch icon in the top-right corn
 
 ## Searching and Shortcuts 🔎
 
+> For full documentation on searching, see: [**Searching & Shortcuts**](./docs/searching.md)
+
 Quickly finding and launching applications is the primary aim of Dashy. To that end instant search and customizable keyboard shortcuts are built-in.
 
 To start filtering, just start typing. No need to select the search bar or use any special key. You can then use either the tab key or arrow keys to select and move between results, and hit enter to launch the currently selected application. You can also use `Alt + Enter` on a selected app to launch it in a popup modal, `Ctrl + Enter` to open in new tab, or right-click on it to see all opening methods.
@@ -353,6 +355,16 @@ Example:
   hotkey: 8
 ```
 
+To search the web directly through Dashy, just press enter after typing your query. Options for web search are set under `appConfig.webSearch`. There is built in support for [10+ search engines](./docs/searching.md#setting-search-engine), or [use your own custom provider](./docs/searching.md#using-custom-search-engine) or self-hosted instance.
+To disable web search all together, set: `webSearch: { disableWebSearch: true }`
+
+```yaml
+appConfig:
+  webSearch:
+    searchEngine: duckduckgo
+    openingMethod: newtab
+```
+
 Hit `Esc` at anytime to close any open apps, clear the search field, or hide any modals.
 
 **[⬆️ Back to Top](#dashy)**

docs/configuring.md

@@ -60,6 +60,7 @@ To disallow any changes from being written to disk via the UI config editor, set
 **`startingView`** | `enum` | _Optional_ | Which page to load by default, and on the base page or domain root. You can still switch to different views from within the UI. Can be either `default`, `minimal` or `workspace`. Defaults to `default`
 **`statusCheck`** | `boolean` | _Optional_ | When set to `true`, Dashy will ping each of your services and display their status as a dot next to each item. This can be overridden by setting `statusCheck` under each item. Defaults to `false`
 **`statusCheckInterval`** | `boolean` | _Optional_ | The number of seconds between checks. If set to `0` then service will only be checked on initial page load, which is usually the desired functionality. If value is less than `10` you may experience a hit in performance. Defaults to `0`
+**`webSearch`** | `object` | _Optional_ | Configuration options for the web search feature, set your default search engine, opening method or disable web search. See [`webSearch`](#appconfigwebsearch-optional)
 **`backgroundImg`** | `string` | _Optional_ | Path to an optional full-screen app background image. This can be either remote (http) or local (/). Note that this will slow down initial load
 **`enableFontAwesome`** | `boolean` | _Optional_ | Where `true` is enabled, if left blank font-awesome will be enabled only if required by 1 or more icons
 **`fontAwesomeKey`** | `string` | _Optional_ | If you have a font-awesome key, then you can use it here and make use of premium icons. It is a 10-digit alpha-numeric string from you're FA kit URL  (e.g. `13014ae648`)
@@ -115,6 +116,17 @@ For more info, see the **[Authentication Docs](/docs/authentication.md)**
 
 **[⬆️ Back to Top](#configuring)**
 
+### `appConfig.webSearch` _(optional)_
+
+**Field** | **Type** | **Required**| **Description**
+--- | --- | --- | ---
+**`disableWebSearch`** | `string` | _Optional_ | Web search is enabled by default, but can be disabled by setting this property to `true`
+**`searchEngine`** | `string` | _Optional_ | Set the key name for your search engine. Can also use a custom engine by setting this property to `custom`. Currently supported: `duckduckgo`, `google`, `whoogle`, `qwant`, `startpage`, `searx-bar` and `searx-info`. Defaults to `duckduckgo`
+**`customSearchEngine`** | `string` | _Optional_ | You can also use a custom search engine, or your own self-hosted instance. This requires `searchEngine: custom` to be set. Then add the URL of your service, with GET query string included here
+**`openingMethod`** | `string` | _Optional_ | Set your preferred opening method for search results: `newtab`, `sametab`, `workspace`. Defaults to `newtab`
+
+
+**[⬆️ Back to Top](#configuring)**
 
 ### `appConfig.hideComponents` _(optional)_
 

docs/searching.md

@@ -1,53 +1,83 @@
-# Keyboard Shortcuts
-
-## Searching
-One of the primary purposes of Dashy is to allow you to quickly find and launch a given app. To make this as quick as possible, there is no need to touch the mouse, or press a certain key to begin searching - just start typing. Results will be filtered in real-time. No need to worry about case, special characters or small typos, these are taken care of, and your results should appear.
-
-## Navigating
-You can navigate through your items or search results using the keyboard. You can use <kbd>Tab</kbd> to cycle through results, and <kbd>Shift</kbd> + <kbd>Tab</kbd> to go backwards. Or use the arrow keys, <kbd>↑</kbd>, <kbd>→</kbd>, <kbd>↓</kbd> and <kbd>←</kbd>.
-
-## Launching Apps
-You can launch a elected app by hitting <kbd>Enter</kbd>. This will open the app using your default opening method, specified in `target` (either `newtab`, `sametab`, `modal` or `workspace`). You can also use <kbd>Alt</kbd> + <kbd>Enter</kbd> to open the app in a pop-up modal, or <kbd>Ctrl</kbd> + <kbd>Enter</kbd> to open it in a new tab. For all available opening methods, just right-click on an item, to bring up the context menu.
-
-## Tags
-By default, items are filtered by the `title` attribute, as well as the hostname (extracted from `url`), the `provider` and `description`. If you need to find results based on text which isn't included in these attributes, then you can add `tags` to a given item. 
-
-```yaml
-  items:
-  - title: Plex
-    description: Media library
-    icon: favicon
-    url: https://plex.lab.local
-    tags: [ movies, videos, music ]
-  - title: FreshRSS
-    description: RSS Reader
-    icon: favicon
-    url: https://freshrss.lab.local
-    tags: [ news, updates, blogs ]
-
-```
-
-In the above example, Plex will be visible when searching for 'movies', and FreshRSS with 'news'
-
-
-## Custom Hotkeys
-For apps that you use regularly, you can set a custom keybinding. Use the `hotkey` parameter on a certain item to specify a numeric key, between `0 - 9`. You can then launch that app, by just pressing that key, which is much quicker than searching for it, if it's an app you use frequently.
-
-```yaml
-- title: Bookstack
-  icon: far fa-books
-  url: https://bookstack.lab.local/
-  hotkey: 2
-- title: Git Tea
-  icon: fab fa-git
-  url: https://git.lab.local/
-  target: workspace
-  hotkey: 3
-```
-
-In the above example, pressing <kbd>2</kbd> will launch Bookstack. Or hitting <kbd>3</kbd> will open Git in the workspace view.
-
-
-## Clearing Search
-You can clear your search term at any time, by pressing <kbd>Esc</kbd>.
-This can also be used to close an open pop-up modal.
+# Keyboard Shortcuts
+
+## Searching
+One of the primary purposes of Dashy is to allow you to quickly find and launch a given app. To make this as quick as possible, there is no need to touch the mouse, or press a certain key to begin searching - just start typing. Results will be filtered in real-time. No need to worry about case, special characters or small typos, these are taken care of, and your results should appear.
+
+## Navigating
+You can navigate through your items or search results using the keyboard. You can use <kbd>Tab</kbd> to cycle through results, and <kbd>Shift</kbd> + <kbd>Tab</kbd> to go backwards. Or use the arrow keys, <kbd>↑</kbd>, <kbd>→</kbd>, <kbd>↓</kbd> and <kbd>←</kbd>.
+
+## Launching Apps
+You can launch a elected app by hitting <kbd>Enter</kbd>. This will open the app using your default opening method, specified in `target` (either `newtab`, `sametab`, `modal` or `workspace`). You can also use <kbd>Alt</kbd> + <kbd>Enter</kbd> to open the app in a pop-up modal, or <kbd>Ctrl</kbd> + <kbd>Enter</kbd> to open it in a new tab. For all available opening methods, just right-click on an item, to bring up the context menu.
+
+## Tags
+By default, items are filtered by the `title` attribute, as well as the hostname (extracted from `url`), the `provider` and `description`. If you need to find results based on text which isn't included in these attributes, then you can add `tags` to a given item. 
+
+```yaml
+  items:
+  - title: Plex
+    description: Media library
+    icon: favicon
+    url: https://plex.lab.local
+    tags: [ movies, videos, music ]
+  - title: FreshRSS
+    description: RSS Reader
+    icon: favicon
+    url: https://freshrss.lab.local
+    tags: [ news, updates, blogs ]
+
+```
+
+In the above example, Plex will be visible when searching for 'movies', and FreshRSS with 'news'
+
+
+## Custom Hotkeys
+For apps that you use regularly, you can set a custom keybinding. Use the `hotkey` parameter on a certain item to specify a numeric key, between `0 - 9`. You can then launch that app, by just pressing that key, which is much quicker than searching for it, if it's an app you use frequently.
+
+```yaml
+- title: Bookstack
+  icon: far fa-books
+  url: https://bookstack.lab.local/
+  hotkey: 2
+- title: Git Tea
+  icon: fab fa-git
+  url: https://git.lab.local/
+  target: workspace
+  hotkey: 3
+```
+
+In the above example, pressing <kbd>2</kbd> will launch Bookstack. Or hitting <kbd>3</kbd> will open Git in the workspace view.
+
+## Web Search
+It's possible to search the web directly from Dashy, which might be useful if you're using Dashy as your start page. This can be done by typing your query as normal, and then pressing <kbd>⏎</kbd>. Web search options are configured under `appConfig.webSearch`.
+
+#### Setting Search Engine
+Set your default search engine using the `webSearch.searchEngine` property. This defaults to DuckDuckGo. Search engine must be referenced by their key, the following providers are supported:
+- [`duckduckgo`](https://duckduckgo.com), [`google`](https://google.com), [`whoogle`](https://whoogle.sdf.org), [`qwant`](https://www.qwant.com), [`startpage`](https://www.startpage.com), [`searx-bar`](https://searx.bar), [`searx-info`](https://searx.info)
+- [`searx-tiekoetter`](https://searx.tiekoetter.com), [`searx-bissisoft`](https://searx.bissisoft.com), [`ecosia`](https://www.ecosia.org), [`metager`](https://metager.org/meta), [`swisscows`](https://swisscows.com), [`mojeek`](https://www.mojeek.com)
+- [`wikipedia`](https://en.wikipedia.org), [`wolframalpha`](https://www.wolframalpha.com), [`stackoverflow`](https://stackoverflow.com), [`github`](https://github.com), [`reddit`](https://www.reddit.com), [`youtube`](https://youtube.com), [`bbc`](https://www.bbc.co.uk)
+
+#### Using Custom Search Engine
+You can also use a custom search engine, that isn't included in the above list (like a self-hosted instance of [Whoogle](https://github.com/benbusby/whoogle-search) or [Searx](https://searx.github.io/searx/)). Set `searchEngine: custom`, and then specify the URL (plus query params) to you're search engine under `customSearchEngine`.
+
+For example: 
+```yaml
+appConfig:
+  webSearch:
+    searchEngine: custom
+    customSearchEngine: 'https://searx.local/search?q='
+```
+
+#### Setting Opening Method
+In a similar way to opening apps, you can specify where you would like search results to be opened. This is done under the `openingMethod` attribute, and can be set to either  `newtab`, `sametab` or `workspace`. By default results are opened in a new tab.
+
+#### Disabling Web Search
+Web search can be disabled, by setting `disableWebSearch`, for example:
+
+```yaml
+appConfig:
+  webSearch: { disableWebSearch: true }
+```
+
+## Clearing Search
+You can clear your search term at any time, resting the UI to it's initial state, by pressing <kbd>Esc</kbd>.
+This can also be used to close any open pop-up modals.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "1.6.8",
+  "version": "1.6.9",
   "license": "MIT",
   "main": "server",
   "scripts": {

src/assets/locales/en.json

@@ -6,7 +6,8 @@
   "search": {
     "search-label": "Search",
     "search-placeholder": "Start typing to filter",
-    "clear-search-tooltip": "Clear Search"
+    "clear-search-tooltip": "Clear Search",
+    "enter-to-search-web": "Press enter to search the web"
   },
   "login": {
     "title": "Dashy",

src/assets/locales/fr.json

@@ -6,7 +6,8 @@
   "search": {
     "search-label": "Recherche",
     "search-placeholder": "Commencez à taper pour filtrer",
-    "clear-search-tooltip": "Effacer la recherche"
+    "clear-search-tooltip": "Effacer la recherche",
+    "enter-to-search-web": "Appuyez sur entrée pour rechercher sur le Web"
   },
   "login": {
     "title": "Dashy",
@@ -60,6 +61,11 @@
     "css-note-l2": "Les modifications ne sont stockés que localement, il est donc recommandé de faire une copie de votre CSS.",
     "css-note-l3": "Pour supprimer tous les styles personnalisés, supprimez le contenu et appuyez sur Enregistrer."
   },
+  "alternate-views": {
+    "default": "Défaut",
+    "workspace": "Plein écran",
+    "minimal": "Minimale"
+  },
   "settings": {
     "theme-label": "Thème",
     "layout-label": "Disposition",
@@ -162,4 +168,4 @@
     "modal": "Ouvrir en mode fenêtré",
     "workspace": "Ouvrir en plein écran"
   }
-}
+}