🔀 Merge pull request #175 from Lissy93/FEATURE/improved-search

[FEATURE] Improved Search

Author: Lissy93

.github/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## ⚡️ 1.6.6 - Improved Search & Shortcuts [PR #175](https://github.com/Lissy93/dashy/pull/175)
+- Refactors the search algorithm to improve performance and code reusability
+- Updates search to ignore case, special characters and minor-typos
+- Adds the option for user to specify tags, which can be used for searching
+
 ## ✨ 1.6.5 - Adds support for Secure Authentication using Keycloak [PR #174](https://github.com/Lissy93/dashy/pull/174)
 - Major restructure of auth config
 - Implements keycloak support, adds docs and updates schema
@@ -23,6 +28,7 @@
 
 ## 💄 1.6.1 - Adds new Theme [PR #166](https://github.com/Lissy93/dashy/issues/166)
 - Adds Dashy theme, for use in the dev dashboard
+
 ## ✨ 1.5.9 - New Minimal/ Startpage View [PR #155](https://github.com/Lissy93/dashy/issues/155)
 - Adds a new view, called minimal view, designed to be like a light-weight startpage
 - Implemented all the required features (filtering, opening methods, icons, etc) into minimal view

.github/ISSUE_TEMPLATE/add-your-dashboard-to-the-showcase----.md

@@ -1,7 +1,9 @@
 name: Bug Report 🐛
 description: Report something that's not working the way it's (probably) intended to
 title: '[BUG] <title>'
-labels: '\U0001F41B Bug'
+labels: ['🐛 Bug']
+assignees:
+  - lissy93
 body:
   - type: dropdown
     id: environment
@@ -34,6 +36,7 @@ body:
     attributes:
       label: Additional info
       description: Logs? Screenshots? Yes, please.
+      placeholder: If the issue happens during build-time, include terminal logs. For run-time errors, include browser logs which you can view in the Dev Tools (F12), under the Console tab. Take care to blank out any personal info.
     validations:
       required: false
   - type: checkboxes
@@ -42,7 +45,7 @@ body:
       label: Please tick the boxes
       description: Before submitting, please ensure that
       options:
-        - label: You are using the latest, or recent version of Dashy
+        - label: You are using a [supported](https://github.com/Lissy93/dashy/blob/master/.github/SECURITY.md#supported-versions) version of Dashy (check the first two digits of the version number)
           required: true
         - label: You've checked that this [issue hasn't already been raised](https://github.com/Lissy93/dashy/issues?q=is%3Aissue)
           required: true

.github/ISSUE_TEMPLATE/bug.yml

@@ -0,0 +1,62 @@
+name: Bug Report 🐛
+description: Suggest an idea for future development of Dashy
+title: '[FEATURE_REQUEST] <title>'
+labels: ['\U0001F984 Feature Request']
+
+body:
+
+  # Field 1 - Is it bug-related
+  - type: textarea
+    id: issue
+    attributes:
+      label: Is your feature request related to a problem? If so, please describe.
+      description:
+      placeholder: A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+    validations:
+      required: false
+
+  # Field 2 - Describe feature
+  - type: textarea
+    id: solution
+    attributes:
+      label: Describe the solution you'd like
+      placeholder: An outline of how you would like this to be implemented, include as much details as possible 
+    validations:
+      required: true
+
+  # Field 3 - Priority
+  - type: dropdown
+    id: priority
+    attributes:
+      label: Priority
+      description: How urgent is the development of this feature
+      options:
+        - Low (Nice-to-have)
+        - Medium (Would be very useful)
+        - High (The app does not function without it)
+    validations:
+      required: true
+
+  # Field 3 - Can the user implement
+  - type: dropdown
+    id: canImplement
+    attributes:
+      label: Is this something you would be keen to implement
+      description: Are you raising this ticket in order to get an issue number for your PR?
+      options:
+        - 'No'
+        - 'Maybe'
+        - 'Yes!'
+    validations:
+      required: false
+
+  # Final text
+  - type: markdown
+    attributes:
+      value: |-
+        ## Thanks 🙏
+        Thank you for your feature suggestion, you should expect a reply within 48 hours :)
+        Please note that there is no guarantee that your idea will be implemented
+        If you haven't already done so, please Star the Dashy's repository on GitHub, to help other users discover it
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/feature-request.md

@@ -0,0 +1,58 @@
+name: Add your Dashboard to the Showcase 🌟
+description: Share a screenshot of your dashboard to the Readme showcase!
+title: '[SHOWCASE] <title>'
+labels: ['💯 Showcase']
+
+body:
+# 1 - Title
+- type: input
+  id: title
+  attributes:
+    label: Title
+    description: Pick a title for your addition
+    placeholder: My Awesome Dashboard
+  validations:
+    required: false
+# 2 - Link to Screenshot
+- type: textarea
+  id: screenshot
+  attributes:
+    label: Screenshot
+    description: Either upload your screenshot here, or include a link to a png/jpg on a CDN / image hosting service
+  validations:
+    required: true
+# 3 - Credit user
+- type: dropdown
+  id: attribution
+  attributes:
+    label: Would you like your name/ username included?
+    description: This will be displayed above the screenshot to your dashboard in the showcase page
+    options:
+      - Yes
+      - No
+  validations:
+    required: true
+# 4 - Social links
+- type: input
+  id: links
+  attributes:
+    label: Link to your Website/ Profile/ Twitter (optional)
+    description: You can optionally have your name link to your profile or website. If you'd like this, include the URL to your site below
+  validations:
+    required: false
+# 5 - Description
+- type: textarea
+  id: description
+  attributes:
+    label: Description (Optional)
+    description: You can optionally also include a short description. If there's anything else you'd like to include, then put it here
+  validations:
+    required: false
+# 6 - All done
+- type: markdown
+  attributes:
+    value: |-
+      ## That's It!
+      Thanks for sharing your dashboard :) You will receive an update to this ticket once it's added to the showcase
+  validations:
+    required: false

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -56,22 +56,25 @@
 
 ## Features 🌈
 
-- Instant search by name, domain and tags - just start typing
-- Full customizable keyboard shortcuts for navigation, filtering and launching apps
-- Multiple built-in color themes, with UI color editor and support for custom CSS
-- Customizable layout, sizes, text, component visibility, behavior and colors etc
-- Many options for icons, including Font-Awesome support, auto-fetching favicon, images and emojis
-- Option to show service status for each of your apps / links, for basic availability and uptime monitoring
-- Choose how to launch apps, either in your browser, a pop-up modal or workspace view
-- Option for full-screen background image, custom nav-bar links, html footer, title, and more
-- Optional encrypted cloud backup and restore feature available
-- Optional authentication with multi-user support and configurable privileges for protecting your dashboard
-- Small bundle size, fully responsive UI and PWA makes the app easy to use on any device
-- Easy to setup with Docker, or on bare metal, or with 1-Click cloud deployment
-- Multi-language support, with more languages being added regularly
-- Easy single-file YAML-based configuration, or configure app directly through the UI
-- Strong focus on privacy
-- Plus lots more...
+- 🔎 Instant search by name, domain and tags - just start typing + customizable keyboard shortcuts
+- 🎨 Multiple built-in color themes, with UI color editor and support for custom CSS
+- 🧸 Many options for icons, including Font-Awesome support, auto-fetching favicon, images and emojis
+- 🚦 Service status feature for each of your apps / links, for basic availability and uptime monitoring
+- 💂 Optional authentication with multi-user support, configurable privileges and SSO support
+- ☁ Optional encrypted cloud backup and restore feature available
+- 💼 A workspace view, for easily switching between multiple apps at once
+- 🛩️ A minimal view, for use as a fast-loading browser startpage
+- 🖱️ Choose how to launch apps, either new tab, same tab, a pop-up modal or in the workspace view
+- 🌎 Multi-language support, with more languages being added regularly
+- 📏 Customizable layout, sizes, text, component visibility, behavior and colors etc
+- 🖼️ Option for full-screen background image, custom nav-bar links, html footer, title, and more
+- 🚀 Easy to setup with Docker, or on bare metal, or with 1-Click cloud deployment
+- 🤏 Small bundle size, fully responsive UI and PWA makes the app easy to use on any device
+- ⚙️ Easy single-file YAML-based configuration, with option to configure app directly through the UI
+- ✨ Under active development with improvements and new features added regularly 
+- 🆓 100% free and open source
+- 🔐 Strong focus on privacy
+- 🌈 Plus lots more...
 
 ## Demo ⚡
 
@@ -328,6 +331,17 @@ Quickly finding and launching applications is the primary aim of Dashy. To that
 
 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.
 
+You can also add custom tags to a given item, to make finding them based on keywords easier. For example, in the following example, searching for 'Movies' will show 'Plex'
+
+```yaml
+  items:
+  - title: Plex
+    description: Media library
+    icon: favicon
+    url: https://plex.lab.local
+    tags: [ movies, videos, music ]
+```
+
 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 very useful for services you use frequently.
 
 Example:
@@ -567,17 +581,18 @@ If you're new to web development, I've put together a short [list of resources](
 - 🛡️ [Authentication](/docs/authentication.md) - Guide to setting up authentication to protect your dashboard
 - 🧿 [Alternate Views](/docs/alternate-views.md) - Outline of available pages / views and item opening methods
 - 💾 [Backup & Restore](/docs/backup-restore.md) - Guide to Dashy's cloud sync feature
-- 🚦 [Status Indicators](/docs/status-indicators.md) - Using Dashy to monitor uptime and status of your apps
 - 🧸 [Icons](/docs/icons.md) - Outline of all available icon types for sections and items
 - 🌐 [Language Switching](/docs/multi-language-support.md) - How to change language, add a language, or update text
+- 🚦 [Status Indicators](/docs/status-indicators.md) - Using Dashy to monitor uptime and status of your apps
+- 🔍 [Searching  & Shortcuts](/docs/searching.md) - Finding and launching your apps, and using keyboard shortcuts
 - 🎨 [Theming](/docs/theming.md) - Complete guide to applying, writing and modifying themes and styles
 
 #### Misc
-- [🔐 Privacy & Security](/docs/privacy.md) - List of requests, potential issues, and security resources
-- [📄 License](/LICENSE) - Copy of the MIT License
-- [⚖️ Legal](/.github/LEGAL.md) - Licenses of direct dependencies
-- [📏 Code of Conduct](/.github/CODE_OF_CONDUCT.md) - Contributor Covenant Code of Conduct
-- [🌳 Changelog](/.github/CHANGELOG.md) - Details of recent changes, and historical versions
+- 🔐 [Privacy & Security](/docs/privacy.md) - List of requests, potential issues, and security resources
+- 📄 [License](/LICENSE) - Copy of the MIT License
+- ⚖️ [Legal](/.github/LEGAL.md) - Licenses of direct dependencies
+- 📏 [Code of Conduct](/.github/CODE_OF_CONDUCT.md) - Contributor Covenant Code of Conduct
+- 🌳 [Changelog](/.github/CHANGELOG.md) - Details of recent changes, and historical versions
 
 **[⬆️ Back to Top](#dashy)**
 

.github/ISSUE_TEMPLATE/showcase-addition.yml

@@ -150,11 +150,13 @@ For more info, see the **[Authentication Docs](/docs/authentication.md)**
 **`icon`** | `string` | _Optional_ | The icon for a given item. Can be a font-awesome icon, favicon, remote URL or local URL. See [`item.icon`](#sectionicon-and-sectionitemicon)
 **`target`** | `string` | _Optional_ | The opening method for when the item is clicked, either `newtab`, `sametab`, `modal` or `workspace`. Where `newtab` will open the link in a new tab, `sametab` will open it in the current tab, and `modal` will open a pop-up modal with the content displayed within that iframe. Note that for the iframe to load, you must have set the CORS headers to either allow `*` ot allow the domain that you are hosting Dashy on, for some websites and self-hosted services, this is already set.
 **`hotkey`** | `number` | _Optional_ | Give frequently opened applications a numeric hotkey, between `0 - 9`. You can then just press that key to launch that application.
+**`tags`** | `string[]` | _Optional_ | A list of tags, which can be used for improved search
 **`statusCheck`** | `boolean` | _Optional_ | When set to `true`, Dashy will ping the URL associated with the current service, and display its status as a dot next to the item. The value here will override `appConfig.statusCheck` so you can turn off or on checks for a given service. Defaults to `appConfig.statusCheck`, falls back to `false`
 **`statusCheckUrl`** | `string` | _Optional_ | If you've enabled `statusCheck`, and want to use a different URL to what is defined under the item, then specify it here
 **`statusCheckHeaders`** | `object` | _Optional_ | If you're endpoint requires any specific headers for the status checking, then define them here 
 **`color`** | `string` | _Optional_ | An optional color for the text and font-awesome icon to be displayed in. Note that this will override the current theme and so may not display well
 **`backgroundColor`** | `string` | _Optional_ | An optional background fill color for the that given item. Again, this will override the current theme and so might not display well against the background
+**`provider`** | `string` | _Optional_ | The name of the provider for a given service, useful for when including hosted apps. In some themes, this is visible under the item name
 
 **[⬆️ Back to Top](#configuring)**
 

README.md

@@ -21,6 +21,7 @@
 - [Icons](/docs/icons.md) - Outline of all available icon types for sections and items
 - [Language Switching](/docs/multi-language-support.md) - Details on how to switch language, or add a new locale
 - [Status Indicators](/docs/status-indicators.md) - Using Dashy to monitor uptime and status of your apps
+- [Searching  & Shortcuts](/docs/searching.md) - Finding and launching your apps, and using keyboard shortcuts
 - [Theming](/docs/theming.md) - Complete guide to applying, writing and modifying themes and styles
 
 ### Misc

docs/configuring.md

@@ -0,0 +1,53 @@
+# 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.