[FEATURE] Implementing user suggestions

.github/CHANGELOG.md

@@ -1,18 +1,35 @@
 # Changelog
 
-## 2.0.5 - Bug Fixes and a few New Features
-
-### Partially revert 2.0.4, fixing several issues caused by `conf.yml` not being loaded at startup.
+## 🐛 2.0.6 Fixes user requested issues [PR #557](https://github.com/Lissy93/dashy/pull/557)
+- Allows middle click open new tab, Re: #492
+- Implements Max redirects for status checks, Re: #494
+- Adds Gitpod config for cloud-ready IDE, Re: #497
+- Adss new screenshots to showcase, Re: #505
+- Fixes excess space below footer, Re: #522
+- Allows iframe content to be viewed full-screen, Re: #524
+- Fixes Glances widgets with Authorization headers, Re: #546
+- Adds target attribute to nav links, Re: #552
+- Removes fixed max-width on wide-screens, Re: #554
+- Adds missing type attribute to external CSS, Re: #560
+- Updates path to Keycloak API, Re: #564
+- Fixes link to @walkxhub homelab icons, Re #568
+- Fixes local image path on sub-page, Re: #570
+- Adds typecheck on edit item tags, Re: #575
+- Fixes item size in config not honored, Re: #576
+
+## ✨ 2.0.5 - Bug Fixes and a few New Features
+
+#### Partially revert 2.0.4, fixing several issues caused by `conf.yml` not being loaded at startup.
 This change requires a rebuild of the application when several options under `appConfig` are changed.
 Fixes #544 #555
 
-### Several other changes since 2.0.4, including:
+#### Several other changes since 2.0.4, including:
 The `Add New Section` button on the UI editor now displays if no sections are present. #536
 When using SSL, the server can now redirect from HTTP to HTTPS. This is enabled by default when using SSL. #538
 Section context menus are now accessible on mobile, and will no longer clip off the screen. #541
 Italian translations have been added. #556
 
-## :sparkles: 2.0.4 - Dynamic Config Loading [PR #528](https://github.com/Lissy93/dashy/pull/528)
+## ✨ 2.0.4 - Dynamic Config Loading [PR #528](https://github.com/Lissy93/dashy/pull/528)
 - `conf.yml` is now loaded dynamically and the app now only needs a browser refresh on config change, not a full rebuild!
 
 ## 🐛 2.0.3 - Bug Fixes [PR #488](https://github.com/Lissy93/dashy/pull/488)

.github/LATEST_CHANGELOG.md

@@ -1,9 +1,16 @@
-### Partially revert 2.0.4, fixing several issues caused by `conf.yml` not being loaded at startup.
-This change requires a rebuild of the application when several options under `appConfig` are changed.
-Fixes #544 #555
-
-### Several other changes since 2.0.4, including:
-The `Add New Section` button on the UI editor now displays if no sections are present. #536
-When using SSL, the server can now redirect from HTTP to HTTPS. This is enabled by default when using SSL. #538
-Section context menus are now accessible on mobile, and will no longer clip off the screen. #541
-Italian translations have been added. #556
+## 🐛 Fixes user requested issues [PR #557](https://github.com/Lissy93/dashy/pull/557)
+- Allows middle click open new tab, Re: #492
+- Implements Max redirects for status checks, Re: #494
+- Adds Gitpod config for cloud-ready IDE, Re: #497
+- Adss new screenshots to showcase, Re: #505
+- Fixes excess space below footer, Re: #522
+- Allows iframe content to be viewed full-screen, Re: #524
+- Fixes Glances widgets with Authorization headers, Re: #546
+- Adds target attribute to nav links, Re: #552
+- Removes fixed max-width on wide-screens, Re: #554
+- Adds missing type attribute to external CSS, Re: #560
+- Updates path to Keycloak API, Re: #564
+- Fixes link to @walkxhub homelab icons, Re #568
+- Fixes local image path on sub-page, Re: #570
+- Adds typecheck on edit item tags, Re: #575
+- Fixes item size in config not honored, Re: #576

.gitpod.yml

@@ -0,0 +1,29 @@
+# Config for running Dashy in GitPod's cloud dev environment
+# Docs: https://www.gitpod.io/docs/references/gitpod-yml
+
+# Commands to start on workspace startup
+tasks:
+  - init: yarn install
+    command: yarn dev
+# Ports to expose on workspace startup
+ports:
+  - port: 8080 # Default dev server
+    visibility: private
+    onOpen: open-preview
+  - port: 4000 # Default prod server
+    visibility: public
+    onOpen: open-preview
+prebuilds:
+  # Adds 'Open in GitPod' to PRs
+  addBadge: true
+  addComment: false
+vscode:
+  # Adds Vue.js and formatting extensions
+  extensions:
+    - octref.vetur
+    - dbaeumer.vscode-eslint
+    - streetsidesoftware.code-spell-checker
+    - PKief.material-icon-theme
+    - wix.vscode-import-cost
+    - oderwat.indent-rainbow
+    - eamodio.gitlens

docs/configuring.md

@@ -77,6 +77,7 @@ The following file provides a reference of all supported configuration options.
 --- | --- | --- | ---
 **`title`** | `string` |  Required | The text to display on the link button
 **`path`** | `string` | Required | The URL to navigate to when clicked. Can be relative (e.g. `/about`) or absolute (e.g. `https://example.com` or `http://192.168.1.1`)
+**`target`** | `string` |  _Optional_ | The opening method (external links only). Can be either `newtab`, `sametab`, `top` or `parent`. Defaults to `newtab`
 
 **[⬆️ Back to Top](#configuring)**
 
@@ -206,6 +207,7 @@ For more info, see the **[Authentication Docs](/docs/authentication.md)**
 **`statusCheckHeaders`** | `object` | _Optional_ | If you're endpoint requires any specific headers for the status checking, then define them here 
 **`statusCheckAllowInsecure`** | `boolean` | _Optional_ | By default, any request to insecure content will be blocked. Setting this option to `true` will disable the `rejectUnauthorized` option, enabling you to ping non-HTTPS services for the current item. Defaults to `false`
 **`statusCheckAcceptCodes`** | `string` | _Optional_ | If your service's response code is anything other than 2xx, then you can opt to specify an alternative success code. E.g. if you expect your server to return 403, but still want the status indicator to be green, set this value to `403`
+**`statusCheckMaxRedirects`** | `number` | _Optional_ | If your service redirects to another page, and you would like status checks to follow redirects, then specify the maximum number of redirects here. Defaults to `0` / will not follow redirects
 **`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
@@ -220,6 +222,7 @@ For more info, see the **[Authentication Docs](/docs/authentication.md)**
 **`options`** | `object` | _Optional_ | Some widgets accept either optional or required additional options. Again, see the [Widget Docs](/docs/widgets.md) for full list of options
 **`updateInterval`** | `number` | _Optional_ | You can keep a widget constantly updated by specifying an update interval, in seconds. See [Continuous Updates Docs](/docs/widgets.md#continuous-updates) for more info
 **`useProxy`** | `boolean` | _Optional_ | Some widgets make API requests to services that are not CORS-enabled. For these instances, you will need to route requests through a proxy, Dashy has a built in CORS-proxy, which you can use by setting this option to `true`. Defaults to `false`. See the [Proxying Requests Docs](/docs/widgets.md#proxying-requests) for more info
+**`timeout`** | `number` | _Optional_ | Request timeout in milliseconds, defaults to ½ a second (`500`)
 
 **[⬆️ Back to Top](#configuring)**
 

docs/showcase.md

@@ -16,6 +16,13 @@
 
 ---
 
+### Hugalafutro Dashy
+> By [@hugalafutro](https://github.com/hugalafutro) <sup>[#505](https://github.com/Lissy93/dashy/discussions/505)</sup>
+
+[![hugalafutro-dashy-screenshot](https://i.ibb.co/PDpLDKS/hugalafutro-dashy.gif)](https://i.ibb.co/PDpLDKS/hugalafutro-dashy.gif)
+
+---
+
 ### Networking Services
 > By [@Lissy93](https://github.com/lissy93)
 
@@ -126,6 +133,13 @@
 
 ---
 
+### Croco_Grievous
+> By [u/Croco_Grievous](https://www.reddit.com/user/Croco_Grievous/) <sup>via [reddit](https://www.reddit.com/r/selfhosted/comments/t4xk3z/everything_started_with_pihole_on_a_raspberry_pi/)</sup>
+
+![screenshot-croco-grievous-dashy](https://i.ibb.co/59XR8KL/dashy-Croco-Grievous.png)
+
+---
+
 ### Crypto Dash	
 > Example usage of widgets to monitor cryptocurrencies news, prices and data. Config is [available here](https://gist.github.com/Lissy93/000f712a5ce98f212817d20bc16bab10#file-example-8-dashy-crypto-widgets-conf-yml)	
 
@@ -134,6 +148,13 @@
 
 ---
 
+### Stefantigro
+> By [u/stefantigro](https://www.reddit.com/user/stefantigro/) <sup>via [reddit](https://www.reddit.com/r/selfhosted/comments/t5oril/been_selfhosting_close_to_half_a_year_now_all/)</sup>
+
+![screenshot-stefantigro-dashy](https://i.ibb.co/1Kb43Yy/dashy-stefantigro.png)
+
+---
+
 ### Yet Another Homelab
 
 ![screenshot-yet-another-homelab](https://raw.githubusercontent.com/Lissy93/dashy/master/docs/showcase/9-home-lab-oblivion.png)

docs/widgets.md

@@ -1289,6 +1289,7 @@ All Glance's based widgets require a `hostname`. All other parameters are option
 **`apiVersion`** | `string` |  _Optional_ | Specify an API version, defaults to V `3`. Note that support for older versions is limited
 **`limit`** | `number` |  _Optional_ | For widgets that show a time-series chart, optionally limit the number of data points returned. A higher number will show more historical results, but will take longer to load. A value between 300 - 800 is usually optimal
 
+Note that if auth is configured, requests must be proxied with `useProxy: true`
 ##### Info
 - **CORS**: 🟢 Enabled
 - **Auth**: 🟠 Optional
@@ -1726,6 +1727,12 @@ Vary: Origin
 
 ---
 
+### Setting Timeout
+
+Default timeout is ½ a second. This can be overridden with the `timeout` attribute on a widget, specified as an integer in milliseconds.
+
+---
+
 ### Widget Styling
 
 Like elsewhere in Dashy, all colours can be easily modified with CSS variables. 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "license": "MIT",
   "main": "server",
   "author": "Alicia Sykes <[email protected]> (https://aliciasykes.com)",

services/status-check.js

@@ -28,15 +28,23 @@ const makeErrorMessage2 = (data) => '❌ Service Error - '
   + `${data.status} - ${data.statusText}`;
 
 /* Kicks of a HTTP request, then formats and renders results */
-const makeRequest = (url, headers, insecure, acceptCodes, render) => {
+const makeRequest = (url, options, render) => {
+  console.log(options);
+  const {
+    headers, enableInsecure, acceptCodes, maxRedirects,
+  } = options;
   const validCodes = acceptCodes && acceptCodes !== 'null' ? acceptCodes : null;
   const startTime = new Date();
   const requestMaker = axios.create({
     httpsAgent: new https.Agent({
-      rejectUnauthorized: !insecure,
+      rejectUnauthorized: !enableInsecure,
     }),
   });
-  requestMaker.get(url, { headers })
+  requestMaker.request({
+    url,
+    headers,
+    maxRedirects,
+  })
     .then((response) => {
       const statusCode = response.status;
       const { statusText } = response;
@@ -100,9 +108,13 @@ module.exports = (paramStr, render) => {
     const params = new URLSearchParams(paramStr);
     const url = decodeURIComponent(params.get('url'));
     const acceptCodes = decodeURIComponent(params.get('acceptCodes'));
+    const maxRedirects = decodeURIComponent(params.get('maxRedirects')) || 0;
     const headers = decodeHeaders(params.get('headers'));
     const enableInsecure = !!params.get('enableInsecure');
     if (!url || url === 'undefined') immediateError(render);
-    makeRequest(url, headers, enableInsecure, acceptCodes, render);
+    const options = {
+      headers, enableInsecure, acceptCodes, maxRedirects,
+    };
+    makeRequest(url, options, render);
   }
 };

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="dashy">
+  <div id="dashy" :style="topLevelStyleModifications">
     <EditModeTopBanner v-if="isEditMode" />
     <LoadingScreen :isLoading="isLoading" v-if="shouldShowSplash" />
     <Header :pageInfo="pageInfo" />
@@ -72,6 +72,17 @@ export default {
     isEditMode() {
       return this.$store.state.editMode;
     },
+    topLevelStyleModifications() {
+      const vc = this.visibleComponents;
+      if (!vc.footer && !vc.pageTitle) {
+        return '--footer-height: 1rem;';
+      } else if (!vc.footer) {
+        return '--footer-height: 5rem;';
+      } else if (!vc.pageTitle) {
+        return '--footer-height: 4rem;';
+      }
+      return '';
+    },
   },
   methods: {
     /* Injects the users custom CSS as a style tag */

src/components/InteractiveEditor/EditItem.vue

@@ -231,8 +231,8 @@ export default {
       const newItem = item;
       newItem.id = this.itemId;
       if (newItem.hotkey) newItem.hotkey = parseInt(newItem.hotkey, 10);
-      const strToTags = (str) => {
-        const tagArr = str.split(',');
+      const strToTags = (tags) => {
+        const tagArr = (typeof tags === 'string') ? tags.split(',') : tags;
         return tagArr.map((tag) => tag.trim().toLowerCase().replace(/[^a-z0-9]+/, ''));
       };
       const strToBool = (str) => {

src/components/LinkItems/IframeModal.vue

@@ -3,7 +3,7 @@
     classes="dashy-modal">
     <div slot="top-right" @click="hide()">Close</div>
     <a @click="hide()" class="close-button" title="Close">x</a>
-    <iframe v-if="url" :src="url" @keydown.esc="close" class="frame"/>
+    <iframe v-if="url" :src="url" @keydown.esc="close" class="frame" allow="fullscreen" />
     <div v-else class="no-url">No URL Specified</div>
   </modal>
 </template>

src/components/LinkItems/Item.vue

@@ -3,7 +3,7 @@
     <a @click="itemOpened"
       @mouseup.right="openContextMenu"
       @contextmenu.prevent
-      :href="hyperLinkHref"
+      :href="url"
       :target="anchorTarget"
       :class="`item ${makeClassList}`"
       v-tooltip="getTooltipOptions()"
@@ -96,6 +96,7 @@ export default {
     statusCheckInterval: Number, // Num seconds beteween repeating checks
     statusCheckAllowInsecure: Boolean, // Status check ignore SSL certs
     statusCheckAcceptCodes: String, // Allow status checks to pass with a code other than 200
+    statusCheckMaxRedirects: Number, // Specify max number of redirects
     parentSectionTitle: String, // Title of parent section (for add new)
     isAddNew: Boolean, // Only set if 'fake' item used as Add New button
   },
@@ -138,13 +139,6 @@ export default {
         default: return undefined;
       }
     },
-    /* Get href for anchor, if not in edit mode, or opening in modal/ workspace */
-    hyperLinkHref() {
-      const nothing = '#';
-      if (this.isEditMode) return nothing;
-      const noAnchorNeeded = ['modal', 'workspace', 'clipboard'];
-      return noAnchorNeeded.includes(this.accumulatedTarget) ? nothing : this.url;
-    },
   },
   data() {
     return {
@@ -167,20 +161,28 @@ export default {
     itemOpened(e) {
       if (this.isEditMode) {
         // If in edit mode, open settings, and don't launch app
+        e.preventDefault();
         this.openItemSettings();
         return;
       }
-      if (e.altKey || this.accumulatedTarget === 'modal') {
+      // For certain opening methods, prevent default and manually navigate
+      if (e.ctrlKey) {
+        e.preventDefault();
+        window.open(this.url, '_blank');
+      } else if (e.altKey || this.accumulatedTarget === 'modal') {
         e.preventDefault();
         this.$emit('triggerModal', this.url);
       } else if (this.accumulatedTarget === 'workspace') {
+        e.preventDefault();
         router.push({ name: 'workspace', query: { url: this.url } });
       } else if (this.accumulatedTarget === 'clipboard') {
+        e.preventDefault();
         navigator.clipboard.writeText(this.url);
         this.$toasted.show(this.$t('context-menus.item.copied-toast'));
-      } else {
-        this.$emit('itemClicked');
       }
+      // Emit event to clear search field, etc
+      this.$emit('itemClicked');
+
       // Update the most/ last used ledger, for smart-sorting
       if (!this.appConfig.disableSmartSort) {
         this.incrementMostUsedCount(this.id);
@@ -237,7 +239,12 @@ export default {
     /* Pulls together all user options, returns URL + Get params for ping endpoint */
     makeApiUrl() {
       const {
-        url, statusCheckUrl, statusCheckHeaders, statusCheckAllowInsecure, statusCheckAcceptCodes,
+        url,
+        statusCheckUrl,
+        statusCheckHeaders,
+        statusCheckAllowInsecure,
+        statusCheckAcceptCodes,
+        statusCheckMaxRedirects,
       } = this;
       const encode = (str) => encodeURIComponent(str);
       this.statusResponse = undefined;
@@ -251,9 +258,10 @@ export default {
       // Deterimine if user disabled security
       const enableInsecure = statusCheckAllowInsecure ? '&enableInsecure=true' : '';
       const acceptCodes = statusCheckAcceptCodes ? `&acceptCodes=${statusCheckAcceptCodes}` : '';
+      const maxRedirects = statusCheckMaxRedirects ? `&maxRedirects=${statusCheckMaxRedirects}` : '';
       // Construct the full API endpoint's URL with GET params
       return `${baseUrl}${serviceEndpoints.statusCheck}/${urlToCheck}`
-        + `${headers}${enableInsecure}${acceptCodes}`;
+        + `${headers}${enableInsecure}${acceptCodes}${maxRedirects}`;
     },
     /* Checks if a given service is currently online */
     checkWebsiteStatus() {

src/components/LinkItems/ItemIcon.vue

@@ -45,11 +45,11 @@ export default {
       return this.$store.getters.appConfig;
     },
     /* Determines the type of icon */
-    iconType: function iconType() {
+    iconType() {
       return this.determineImageType(this.icon);
     },
     /* Gets the icon path, dependent on icon type */
-    iconPath: function iconPath() {
+    iconPath() {
       if (this.broken) return this.getFallbackIcon();
       return this.getIconPath(this.icon, this.url);
     },
@@ -176,7 +176,7 @@ export default {
     },
     /* Fetches the path of local images, from Docker container */
     getLocalImagePath(img) {
-      return `${iconCdns.localPath}/${img}`;
+      return `/${iconCdns.localPath}/${img}`;
     },
     /* Formats the URL for fetching the generative icons */
     getGenerativeIcon(url, cdn) {