✨ Feature: add user defined environment variables

.env

@@ -1,55 +1,59 @@
-# Store environmental variables here. All variables are optional.
-# Lines beginning in '#' are ignored.
-
-# Can be either development, production or test
-# NODE_ENV=production
-
-# The port to expose the running application on
-# PORT=4000
-
-# If you've proved SSL certs, then can set HTTPS port
-# SSL_PORT=4001
-
-# The host that Dashy is running on, domain or IP
-# HOST=localhost
-
-# The default base path for serving up static assets
-# BASE_URL=./
-
-# Optionally, specify the path of SSL private + public keys
-# SSL_PRIV_KEY_PATH=/etc/ssl/certs/dashy-priv.key
-# SSL_PUB_KEY_PATH=/etc/ssl/certs/dashy-pub.pem
-
-# If SSL enabled, choose whether or not to redirect http to https
-# Defaults to true
-# REDIRECT_HTTPS=true
-
-# The path to the user data directory
-# USER_DATA_DIR=user-data
-
-# Override where the path to the configuration file is, can be a remote URL
-# VUE_APP_CONFIG_PATH=/conf.yml
-
-# Usually the same as BASE_URL, but accessible in frontend
-# VUE_APP_DOMAIN=https://dashy.to
-
-# Override the page title for the frontend app
-# VUE_APP_TITLE=''
-
-# Set the default view to load on startup (can be `minimal`, `workspace` or `home`)
-# VUE_APP_STARTING_VIEW=home
-
-# Set the Vue app routing mode (can be 'hash', 'history' or 'abstract')
-# VUE_APP_ROUTING_MODE=history
-
-# Should enable SRI for build script and link resources
-# INTEGRITY=true
-
-# Computed automatically on build. Indicates if running in container
-# IS_DOCKER=true
-
-# Again, set automatically using package.json during build time
-# VUE_APP_VERSION=2.0.0
-
-# Directory for conf.yml backups
-# BACKUP_DIR=./user-data/
+# Store environmental variables here. All variables are optional.
+# Lines beginning in '#' are ignored.
+
+# Can be either development, production or test
+# NODE_ENV=production
+
+# The port to expose the running application on
+# PORT=4000
+
+# If you've proved SSL certs, then can set HTTPS port
+# SSL_PORT=4001
+
+# The host that Dashy is running on, domain or IP
+# HOST=localhost
+
+# The default base path for serving up static assets
+# BASE_URL=./
+
+# Optionally, specify the path of SSL private + public keys
+# SSL_PRIV_KEY_PATH=/etc/ssl/certs/dashy-priv.key
+# SSL_PUB_KEY_PATH=/etc/ssl/certs/dashy-pub.pem
+
+# If SSL enabled, choose whether or not to redirect http to https
+# Defaults to true
+# REDIRECT_HTTPS=true
+
+# The path to the user data directory
+# USER_DATA_DIR=user-data
+
+# Override where the path to the configuration file is, can be a remote URL
+# VUE_APP_CONFIG_PATH=/conf.yml
+
+# Usually the same as BASE_URL, but accessible in frontend
+# VUE_APP_DOMAIN=https://dashy.to
+
+# Override the page title for the frontend app
+# VUE_APP_TITLE=''
+
+# Set the default view to load on startup (can be `minimal`, `workspace` or `home`)
+# VUE_APP_STARTING_VIEW=home
+
+# Set the Vue app routing mode (can be 'hash', 'history' or 'abstract')
+# VUE_APP_ROUTING_MODE=history
+
+# Should enable SRI for build script and link resources
+# INTEGRITY=true
+
+# Computed automatically on build. Indicates if running in container
+# IS_DOCKER=true
+
+# Again, set automatically using package.json during build time
+# VUE_APP_VERSION=2.0.0
+
+# Directory for conf.yml backups
+# BACKUP_DIR=./user-data/
+
+# Setup any other user defined vars by prepending VUE_APP_ to the var name
+# VUE_APP_pihole_ip=http://your.pihole.ip
+# VUE_APP_pihole_key=your_pihole_secret_key

docs/widgets.md

@@ -1554,6 +1554,19 @@ Displays the number of queries blocked by [Pi-Hole](https://pi-hole.net/).
     apiKey: xxxxxxxxxxxxxxxxxxxxxxx
 ```
 
+> [!TIP]
+> In order to avoid leaking secret data, both `hostname` and `apiKey` can leverage environment variables. Simply pass the name of the variable, which MUST start with `VUE_APP_`.
+
+```yaml
+- type: pi-hole-stats
+  options:
+    hostname: VUE_APP_pihole_ip
+    apiKey: VUE_APP_pihole_key
+```
+
+> [!IMPORTANT]
+> You will need to restart the server (or the docker image) if adding/editing an env var for this to be refreshed.
+
 #### Info
 
 - **CORS**: 🟢 Enabled

src/components/Widgets/PiHoleStats.vue

@@ -36,13 +36,14 @@ export default {
   computed: {
     /* Let user select which comic to display: random, latest or a specific number */
     hostname() {
-      const usersChoice = this.options.hostname;
+      const usersChoice = this.parseAsEnvVar(this.options.hostname);
       if (!usersChoice) this.error('You must specify the hostname for your Pi-Hole server');
       return usersChoice || 'http://pi.hole';
     },
     apiKey() {
-      if (!this.options.apiKey) this.error('API Key is required, please see the docs');
-      return this.options.apiKey;
+      const usersChoice = this.parseAsEnvVar(this.options.apiKey);
+      if (!usersChoice) this.error('API Key is required, please see the docs');
+      return usersChoice;
     },
     endpoint() {
       return `${this.hostname}/admin/api.php?summary&auth=${this.apiKey}`;

src/mixins/WidgetMixin.js

@@ -131,6 +131,11 @@ const WidgetMixin = {
           });
       });
     },
+    /* Check if a value is an environment variable, return its value if so. */
+    parseAsEnvVar(str) {
+      if (str.includes('VUE_APP_')) return process.env[str];
+      return str;
+    },
   },
 };