Merge pull request #1581 from CrazyWolf13/master

🧾 [docs](add) keycloak troubleshooting

.devcontainer/devcontainer.json

@@ -0,0 +1,36 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
+{
+	"name": "Dashy",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/javascript-node:1-18-bullseye",
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"Vue.volar",
+				"dbaeumer.vscode-eslint",
+				"ms-azuretools.vscode-docker",
+				"ms-edgedevtools.vscode-edge-devtools",
+				"firefox-devtools.vscode-firefox-debug",
+				"aaravb.chrome-extension-developer-tools"
+			]
+		}
+	},
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	"features": {
+		"ghcr.io/devcontainers/features/github-cli:1": {}
+	},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	"postCreateCommand": "yarn install --ignore-engines --immutable --no-cache --network-timeout 300000 --network-concurrency 1"
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

.env

@@ -1,40 +1,70 @@
-# 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
-
-# Usually the same as BASE_URL, but accessible in frontend
-# VUE_APP_DOMAIN=https://dashy.to
-
-# 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=./public/
+# 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
+
+# Enable HTTP basic auth to protect your *.yml config files
+# ENABLE_HTTP_AUTH=true
+
+# Enable basic HTTP auth to protect your *.yml config files
+# BASIC_AUTH_USERNAME
+# BASIC_AUTH_PASSWORD
+
+# If you'd like frontend to automatically authenticate when basic auth enabled, set credentials here too
+# VUE_APP_BASIC_AUTH_USERNAME
+# VUE_APP_BASIC_AUTH_PASSWORD
+
+# 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/config-backups
+
+# 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

.github/AUTHORS.txt

@@ -94,6 +94,7 @@ Brendan O&#39;Leary <boleary@gitlab.com> - 2 commits
 CHAIYEON CHO <stoutcho21@gmail.com> - 2 commits
 Dan Gilbert <ddg@daentech.co.uk> - 2 commits
 Denis Savosin <dsavosin@at-consulting.ru> - 2 commits
+Mihai <31653632+z3r0l1nk@users.noreply.github.com> - 2 commits
 Ruben Silva <rubensilva945@gmail.com> - 2 commits
 Tammes Burghard <kde@kuchenmampfer.de> - 2 commits
 Thomas Dissert <dissertthomas@gmail.com> - 2 commits
@@ -108,6 +109,7 @@ patrickheeney <patrickheeney@gmail.com> - 2 commits
 rokiden <cheto@bk.ru> - 2 commits
 root <root@dashy-dev.alayham.com> - 2 commits
 rtm516 <rtm516@users.noreply.github.com> - 2 commits
+z3r0l1nk <stroescu.mihai@gmail.com> - 2 commits
 zcq100 <m@zcq100.com> - 2 commits
 ᗪєνιη ᗷυнʟ <onedr0p@users.noreply.github.com> - 2 commits
 Alucarddelta <dreyer.brent@gmail.com> - 3 commits
@@ -132,17 +134,19 @@ Alicie <gh@d0h.co> - 5 commits
 Benjamin Montgomery <bmontgom@montynet.org> - 5 commits
 Chris Nielsen <nielsen.chris@gmail.com> - 5 commits
 UrekD <urek.denis@gmail.com> - 5 commits
-dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> - 5 commits
 Erik Vroon <erik.vroon22@gmail.com> - 6 commits
 Jammo2k5 <jammo2k5@hotmail.co.uk> - 6 commits
 Leonardo Covarrubias <leos@leocov.com> - 6 commits
 Magnus Sundström <kmvsundstrom@gmail.com> - 6 commits
+dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> - 6 commits
 kristian <kristianbrasel@gmail.com> - 6 commits
 liss-bot <liss-bot@users.noreply.github.com> - 6 commits
 Josua Blejeru <josua@blejeru.com> - 8 commits
-Tobias <96661824+CrazyWolf13@users.noreply.github.com> - 8 commits
 Tobias <tobias.meier109@gmail.com> - 8 commits
+Jimmeh <jimmeh@gmail.com> - 9 commits
 Kashif Sohail <kashif.ezone@gmail.com> - 9 commits
+Liss-Bot <liss-bot@d0h.co> - 11 commits
+Tobias <96661824+CrazyWolf13@users.noreply.github.com> - 12 commits
 Alejandro Pinar Ruiz <alejandropinarruiz@gmail.com> - 14 commits
 Alicia Sykes <&#x3D;> - 16 commits
 github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> - 16 commits
@@ -150,14 +154,14 @@ snyk-bot <snyk-bot@users.noreply.github.com> - 18 commits
 Matthias Bilger <matthias@bilger.info> - 19 commits
 aterox <church.kennetha@gmail.com> - 19 commits
 EVOTk <45015615+EVOTk@users.noreply.github.com> - 24 commits
+snyk-bot <snyk-bot@snyk.io> - 24 commits
 Marcell Fülöp <marekful@protonmail.com> - 27 commits
 Alicia Sykes <alicia@futr.ai> - 28 commits
 Lissy93 <gh@d0h.co> - 78 commits
-snyk-bot <snyk-bot@snyk.io> - 83 commits
-repo-visualizer <repo-visualizer@users.noreply.github.com> - 127 commits
-Lissy93 <Lissy93@users.noreply.github.com> - 219 commits
-Alicia Bot <87835202+liss-bot@users.noreply.github.com> - 231 commits
-liss-bot <liss-bot@d0h.co> - 232 commits
-Alicia Sykes <alicia@omg.lol> - 412 commits
-Alicia Sykes <gh@d0h.co> - 440 commits
-Alicia Sykes <sykes.alicia@gmail.com> - 1488 commits
+repo-visualizer <repo-visualizer@users.noreply.github.com> - 128 commits
+Lissy93 <Lissy93@users.noreply.github.com> - 222 commits
+Alicia Bot <87835202+liss-bot@users.noreply.github.com> - 240 commits
+liss-bot <liss-bot@d0h.co> - 244 commits
+Alicia Sykes <gh@d0h.co> - 439 commits
+Alicia Sykes <alicia@omg.lol> - 471 commits
+Alicia Sykes <sykes.alicia@gmail.com> - 1488 commits

.github/dependabot.yml

@@ -0,0 +1,12 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for more information:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+# https://containers.dev/guide/dependabot
+
+version: 2
+updates:
+ - package-ecosystem: "devcontainers"
+   directory: "/"
+   schedule:
+     interval: weekly

.github/workflows/auto-tag-pr.yml

@@ -34,6 +34,7 @@ jobs:
         bodyFile: ".github/LATEST_CHANGELOG.md"
   mark-issue-fixed:
     runs-on: ubuntu-latest
+    if: ${{ github.event_name == 'issues' }}
     steps:
     - uses: actions/checkout@v2
     - name: Label Fixed Issues

.github/workflows/broadcast-message.yml

@@ -1,14 +0,0 @@
-# Updates multiple issues with a certain tag, with a comment containing a given message
-name: 🎯 Broadcast Message across Issues
-on: 
-  workflow_dispatch:
-    inputs:
-      message: { required: false }
-      labels: { required: false }
-jobs:
-  broadcast:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: jenschelkopf/broadcast-action@master
-      with:
-        token: ${{ secrets.BOT_GITHUB_TOKEN || secrets.GITHUB_TOKEN }}

.github/workflows/build-docs-site.yml

@@ -0,0 +1,18 @@
+# Builds and published Dashy's documentation website
+name: 📝 Build Docs Site
+on:
+  workflow_dispatch:
+  push:
+    branches: [ WEBSITE/docs-site-source ]
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/WEBSITE/docs-site-source'
+    steps:
+      - uses: actions/checkout@master
+      - uses: redkubes/docusaurus-deploy-action@v1
+        with:
+          source-folder: ./
+          git-user: ${{ github.actor }}
+          git-password: ${{ secrets.GITHUB_TOKEN }}
+          deployment-branch: gh-pages

.github/workflows/dependency-updates-summary.yml

@@ -15,4 +15,3 @@ jobs:
           collapsibleThreshold: '25'
           failOnDowngrade: 'false'
           path: 'yarn.lock'
-          updateComment: 'true'

.github/workflows/docker-build-publish.yml

@@ -11,6 +11,15 @@ on:
       - 'src/**'
       - 'public/**'
       - 'services/**'
+      - '.github/workflows/docker-build-publish.yml'
+      - 'Dockerfile'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  packages: write
 
 env:
   DH_IMAGE: ${{ secrets.DOCKER_REPO }}
@@ -30,12 +39,6 @@ jobs:
       uses: tyankatsu0105/read-package-version-actions@v1
       id: package-version
 
-    # - name: ✨ Validate Dockerfile
-    #   uses: ghe-actions/dockerfile-validator@v1
-    #   with:
-    #     dockerfile: 'Dockerfile'
-    #     lint: 'hadolint'
-
     - name: 🗂️ Make Docker Meta
       id: meta
       uses: docker/metadata-action@v3
@@ -43,7 +46,6 @@ jobs:
         images: |
           ${{ env.DH_IMAGE }}
           ghcr.io/${{ env.GH_IMAGE }}
-#          ${{ secrets.ACR_SERVER }}/${{ secrets.ACR_USERNAME }}
         tags: |
           type=ref,event=tag,prefix=release-,suffix={{tag}}
           type=semver,pattern={{raw}},value=${{ steps.package-version.outputs.version }}
@@ -57,9 +59,22 @@ jobs:
 
     - name: 🔧 Set up QEMU
       uses: docker/setup-qemu-action@v1
+      with:
+        platforms: linux/amd64,linux/arm64,linux/arm/v7
 
     - name: 🔧 Set up Docker Buildx
       uses: docker/setup-buildx-action@v1
+      id: buildx
+      with:
+        driver-opts: image=moby/buildkit:v0.10.6
+
+    - name: 👀 Inspect builder
+      run: |
+        echo "Name:      ${{ steps.buildx.outputs.name }}"
+        echo "Endpoint:  ${{ steps.buildx.outputs.endpoint }}"
+        echo "Status:    ${{ steps.buildx.outputs.status }}"
+        echo "Flags:     ${{ steps.buildx.outputs.flags }}"
+        echo "Platforms: ${{ steps.buildx.outputs.platforms }}"
 
     - name: 🔑 Login to DockerHub
       uses: docker/login-action@v1 
@@ -74,13 +89,6 @@ jobs:
         username: ${{ github.repository_owner }}
         password: ${{ secrets.GITHUB_TOKEN }}
 
-#    - name: 🔑 Login to Azure Container Registry
-#      uses: docker/login-action@v1
-#      with:
-#        registry: ${{ secrets.ACR_SERVER }}
-#        username: ${{ secrets.ACR_USERNAME }}
-#        password: ${{ secrets.ACR_PASSWORD }}
-
     - name: 🚦 Check Registry Status
       uses: crazy-max/ghaction-docker-status@v1
 
@@ -93,13 +101,3 @@ jobs:
         tags: ${{ steps.meta.outputs.tags }}
         labels: ${{ steps.meta.outputs.labels }}
         push: true
-          
-#     - name: 💬 Set Docker Hub Description
-#       uses: peter-evans/dockerhub-description@v2
-#       with:
-#         repository: lissy93/dashy
-#         readme-filepath: ./docker/docker-readme.md
-#         short-description: Dashy - A self-hosted start page for your server
-#         username: ${{ secrets.DOCKER_USERNAME }}
-#         password: ${{ secrets.DOCKER_USER_PASS }}
-

.github/workflows/docker-publish.yml

@@ -1,63 +0,0 @@
-# Builds a Docker image from with latest tag when master branch is updated
-# The publishes it to GitHub container registry as a package
-name: 🏗️ Build + Publish Docker Image to GHCR
-on:
-  workflow_dispatch:
-  push: 
-    branches: ['master']
-    tags: [v*]
-env:
-  REGISTRY: ghcr.io
-  IMAGE_NAME: dashy
-jobs:
-  build-and-push-image:
-    runs-on: ubuntu-latest
-    if: "!contains(github.event.head_commit.message, '[ci-skip]')"
-    permissions:
-      contents: read
-      packages: write
-    steps:
-        # Fetch the code
-      - name: Checkout repository
-        uses: actions/checkout@v2
-
-      - name: Prepare
-        id: prep
-        run: echo ::set-output name=version::${GITHUB_REF##*/}
-
-      # Use QEMU for multi-architecture builds
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v1
-        with:
-          platforms: all
-
-#       # Use  Moby BuildKit
-#       - name: Set up Docker Buildx
-#         id: buildx
-#         uses: docker/setup-buildx-action@v1
-#         with:
-#           install: true
-#           version: latest
-#           driver-opts: image=moby/buildkit:master
-
-        # Login into GH container registry
-      - name: Log in to registry
-        run: echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u ${{ github.actor }} --password-stdin
-
-        # Build the image from default Dockerfile
-      - name: Build image
-        run: docker build . --file docker/Dockerfile-multi-arch --tag $IMAGE_NAME --label "runnumber=${GITHUB_RUN_ID}"
-
-        # Push build image
-      - name: Push image
-        run: |
-          IMAGE_ID=ghcr.io/${{ github.repository_owner }}/$IMAGE_NAME
-          IMAGE_ID=$(echo $IMAGE_ID | tr '[A-Z]' '[a-z]')
-          VERSION=$(echo "${{ github.ref }}" | sed -e 's,.*/\(.*\),\1,')
-          [[ "${{ github.ref }}" == "refs/tags/"* ]] && VERSION=$(echo $VERSION | sed -e 's/^v//')
-          [ "$VERSION" == "master" ] && VERSION=latest
-          echo IMAGE_ID=$IMAGE_ID
-          echo VERSION=$VERSION
-          docker tag $IMAGE_NAME $IMAGE_ID:$VERSION
-          docker push $IMAGE_ID:$VERSION
-   

.github/workflows/domain-expirey-check.yml

@@ -1,43 +0,0 @@
-name: 📕 Check Docs Domain Expiry
-on:
-  workflow_dispatch:
-  schedule:
-    - cron: '0 1 * * 0' # At 01:00 on Sunday.
-jobs:
-  check-domain:
-    runs-on: ubuntu-latest
-    name: Check domain
-    strategy:
-      matrix:
-        domain:
-          - https://dashy.to
-    steps:
-      - name: Check domain SSL and registry expire date
-        id: check-domain
-        uses: codex-team/action-check-domain@v1
-        with:
-          url: ${{ matrix.domain }}
-      - name: Raise issue if domain expiring soon
-        if: ${{ steps.check-domain.outputs.paid-till-days-left && steps.check-domain.outputs.paid-till-days-left < 30 }}
-        uses: rishabhgupta/git-action-issue@v2
-        with:
-          token: ${{ secrets.BOT_GITHUB_TOKEN || secrets.GITHUB_TOKEN }}
-          assignees: Lissy93
-          title: '[WEBSITE] Domain Expiring Soon'
-          body: >
-            **Priority Notice**
-            Domain, ${{ matrix.domain }} will expire in ${{ steps.check-domain.outputs.paid-till-days-left }} days.
-            @Lissy93 - Please take action immediately to prevent any downtime
-
-      - name: Raise issue if SSL Cert expiring soon
-        if: ${{ steps.check-domain.outputs.ssl-expire-days-left && steps.check-domain.outputs.ssl-expire-days-left < 14 }}
-        uses: rishabhgupta/git-action-issue@v2
-        with:
-          token: ${{ secrets.BOT_GITHUB_TOKEN || secrets.GITHUB_TOKEN }}
-          assignees: Lissy93
-          title: '[WEBSITE] SSL Cert Expiring Soon'
-          body: >
-            **Priority Notice**
-            The SSL Certificate for ${{ matrix.domain }} will expire in ${{ steps.check-domain.outputs.ssl-expire-days-left }} days, on ${{ steps.check-domain.outputs.ssl-expire-date }}.
-            @Lissy93 - Please take action immediately to prevent any downtime
-

.github/workflows/generate-credits.yml

@@ -66,18 +66,3 @@ jobs:
         committer_username: liss-bot
         committer_email: liss-bot@d0h.co
 
-  make-author-list:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout 🛎️
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-      - uses: wow-actions/update-authors@v1.1.4
-        with:
-          GITHUB_TOKEN: ${{ secrets.BOT_GITHUB_TOKEN || secrets.GITHUB_TOKEN }}
-          sort: commits
-          bots: true
-          path: .github/AUTHORS.txt
-          commit: ':blue_heart: Makes author list'
-          template: '{{name}} <{{email}}> - {{commits}} commits'

.github/workflows/new-issues-check.yml

@@ -1,22 +0,0 @@
-name: ⭐ Hello non-Stargazers
-on:
-  issues:
-    types: [opened, reopened]
-jobs:
-  check-user:
-    if: >
-      ${{
-      ! contains( github.event.issue.labels.*.name, '📌 Keep Open') &&
-      ! contains( github.event.issue.labels.*.name, '🌈 Feedback') &&
-      ! contains( github.event.issue.labels.*.name, '💯 Showcase') &&
-      github.event.comment.author_association != 'CONTRIBUTOR'
-      }}
-    runs-on: ubuntu-latest
-    name: Add comment to issues opened by non-stargazers
-    steps:
-      - name: comment
-        uses: qxip/please-star-light@v4
-        with:
-          token: ${{ secrets.BOT_GITHUB_TOKEN || secrets.GITHUB_TOKEN }}
-          autoclose: false
-          message: "If you're enjoying Dashy, consider dropping us a ⭐<br>_<sub>🤖 I'm a bot, and this message was automated</sub>_"

.github/workflows/release-commenter.yml

@@ -10,10 +10,8 @@ jobs:
       - uses: apexskier/github-release-commenter@v1
         with:
           GITHUB_TOKEN: ${{ secrets.BOT_GITHUB_TOKEN || secrets.GITHUB_TOKEN }}
-          label-template: 🛩️ Released {release_tag}, 🔨 Fixed
+          label-template: 🛩️ Released {release_tag}
           comment-template: |
-            **The fix for this issue has now been released in {release_name} ✨**
+            **This has now been released in {release_name} ✨**
 
             If you haven't done so already, please [update your instance](https://github.com/Lissy93/dashy/blob/master/docs/management.md#updating) to `{release_tag}` or later. See {release_link} for full info.
-
-            Feel free to reach out if you need any more support. If you are enjoying Dashy, consider [supporting the project](https://github.com/Lissy93/dashy/blob/master/docs/contributing.md#contributing).

.github/workflows/update-docs-site.yml

@@ -0,0 +1,58 @@
+name: 📝 Update Documentation
+
+# This will run whenever the /docs directory in master branch is updated,
+# or if the workflow is manually dispatched, plus a sync check on Sun at 03:30 UTC
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '30 3 * * 0'
+  push:
+    branches:
+      - master
+    paths:
+      - 'docs/**'
+
+
+# Jobs to be run:
+# 1. Checkout master branch
+# 2. Checkout website source code branch
+# 3. Install Python
+# 4. Copy /docs from master to website branch
+# 5. Run the script which processes documentation
+# 6. Commit and push updated docs to the website source code branch
+jobs:
+  update-docs:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout master branch 🛎️
+        uses: actions/checkout@v2
+        with:
+          path: 'master-docs'
+
+      - name: Checkout WEBSITE/docs-site-source branch 🛎️
+        uses: actions/checkout@v2
+        with:
+          ref: 'WEBSITE/docs-site-source'
+          path: 'website-docs'
+
+      - name: Install Python 🐍
+        uses: actions/setup-python@v2
+        with:
+          python-version: '3.x'
+
+      - name: Run script to update documentation 🪄
+        working-directory: website-docs
+        run: |
+          cp -r ../master-docs/docs ./
+          python ./do-markdown-magic.py
+        
+      - name: Commit changes 🚀
+        run: |
+          cd website-docs
+          git config --local user.email "liss-bot@d0h.co"
+          git config --local user.name "Liss-Bot"
+          git add docs
+          git commit -m "Update documentation" || echo "No changes to commit"
+          git push
+        env:
+          GITHUB_TOKEN: ${{ secrets.BOT_GITHUB_TOKEN || secrets.GITHUB_TOKEN }}

.gitignore

@@ -13,7 +13,6 @@ yarn-error.log*
 
 # Editor directories and files
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj

.vscode/launch.json

@@ -0,0 +1,65 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+      {
+        "type": "msedge",
+        "request": "launch",
+        "name": "dashy: edge",
+        "url": "http://localhost:8080",
+        "webRoot": "${workspaceFolder}",
+        "breakOnLoad": true,
+        "pathMapping": {
+          "/_karma_webpack_": "${workspaceFolder}"
+        },
+        "sourceMapPathOverrides": {
+          "webpack:/*": "${webRoot}/*",
+          "/./*": "${webRoot}/*",
+          "/src/*": "${webRoot}/*",
+          "/*": "*",
+          "/./~/*": "${webRoot}/node_modules/*"
+        },
+        "preLaunchTask": "dashy start"
+      },
+      {
+        "type": "chrome",
+        "request": "launch",
+        "name": "dashy: chrome",
+        "url": "http://localhost:8080",
+        "webRoot": "${workspaceFolder}",
+        "breakOnLoad": true,
+        "pathMapping": {
+          "/_karma_webpack_": "${workspaceFolder}"
+        },
+        "sourceMapPathOverrides": {
+          "webpack:/*": "${webRoot}/*",
+          "/./*": "${webRoot}/*",
+          "/src/*": "${webRoot}/*",
+          "/*": "*",
+          "/./~/*": "${webRoot}/node_modules/*"
+        },
+        "preLaunchTask": "dashy start"
+      },
+      {
+        "type": "firefox",
+        "request": "launch",
+        "name": "dashy: firefox",
+        "url": "http://localhost:8080",
+        "webRoot": "${workspaceFolder}",
+        "breakOnLoad": true,
+        "pathMapping": {
+          "/_karma_webpack_": "${workspaceFolder}"
+        },
+        "sourceMapPathOverrides": {
+          "webpack:/*": "${webRoot}/*",
+          "/./*": "${webRoot}/*",
+          "/src/*": "${webRoot}/*",
+          "/*": "*",
+          "/./~/*": "${webRoot}/node_modules/*"
+        },
+        "preLaunchTask": "dashy start"
+      }
+    ]
+}

.vscode/tasks.json

@@ -0,0 +1,21 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "dashy start",
+      "type": "npm",
+      "script": "dev",
+      "isBackground": true,
+      "problemMatcher": [
+        {
+          "base": "$tsc-watch",
+          "background": {
+            "activeOnStart": true,
+            "beginsPattern": "Starting development server",
+            "endsPattern": "Compiled successfully"
+          }
+        }
+      ],
+    }
+  ]
+}

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20.11.1-alpine AS BUILD_IMAGE
+FROM node:18.19.1-alpine AS BUILD_IMAGE
 
 # Set the platform to build image for
 ARG TARGETPLATFORM
@@ -16,19 +16,19 @@ WORKDIR /app
 
 # Install app dependencies
 COPY package.json yarn.lock ./
-RUN yarn install --ignore-engines --frozen-lockfile --network-timeout 1000000
+RUN yarn install --ignore-engines --immutable --no-cache --network-timeout 300000 --network-concurrency 1
 
 # Copy over all project files and folders to the working directory
 COPY . ./
 
 # Build initial app for production
-RUN NODE_OPTIONS=--openssl-legacy-provider yarn build --mode production
+RUN yarn build --mode production
 
 # Production stage
-FROM node:20.11.1-alpine
+FROM node:20.11.1-alpine3.19
 
 # Define some ENV Vars
-ENV PORT=80 \
+ENV PORT=8080 \
   DIRECTORY=/app \
   IS_DOCKER=true
 
@@ -40,8 +40,6 @@ RUN apk add --no-cache tzdata
 
 # Copy built application from build phase
 COPY --from=BUILD_IMAGE /app ./
-# Ensure only one version of conf.yml exists
-RUN rm dist/conf.yml
 
 # Finally, run start command to serve up the built application
 CMD [ "yarn", "build-and-start" ]

README.md

@@ -6,27 +6,20 @@
   <img width="120" src="https://i.ibb.co/yhbt6CY/dashy.png" />
   <br/>
   <b><a href="./docs/showcase.md">User Showcase</a></b> | <b><a href="https://demo.dashy.to">Live Demo</a></b> | <b><a href="./docs/quick-start.md">Getting Started</a></b> | <b><a href="https://dashy.to/docs">Documentation</a></b> | <b><a href="https://github.com/Lissy93/dashy">GitHub</a></b>
-  <br/><br/>
-  <a href="https://github.com/awesome-selfhosted/awesome-selfhosted#personal-dashboards">
-    <img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome Self-Hosted">
-  </a>
-  <a href="./LICENSE">
-    <img src="https://img.shields.io/badge/License-MIT-0aa8d2?logo=opensourceinitiative&logoColor=fff" alt="License MIT">
-  </a>
-  <a href="./.github/CHANGELOG.md">
-    <img src="https://img.shields.io/github/package-json/v/lissy93/dashy?logo=azurepipelines&amp;color=0aa8d2" alt="Current Version">
-  </a>
-  <a href="https://hub.docker.com/r/lissy93/dashy">
-    <img src="https://img.shields.io/docker/pulls/lissy93/dashy?logo=docker&color=0aa8d2&logoColor=fff" alt="Docker Pulls">
-  </a>
-  <a href="http://as93.link/dashy-build-status">
-   <img src="https://badgen.net/github/status/lissy93/dashy?icon=github" alt="GitHub Status">
-  </a>
-  <a href="https://snyk.io/test/github/lissy93/dashy">
-    <img src="https://snyk.io/test/github/lissy93/dashy/badge.svg" alt="Known Vulnerabilities">
-  </a>
 </p>
 
+<p align="center">
+<br>
+<sup>Dashy is kindly sponsored by <a href="https://umbrel.com?ref=dashy">Umbrel</a> - the personal home cloud and OS for self-hosting</sup><br>
+<a href="https://umbrel.com?ref=dashy">
+<img width="400" src="https://github.com/Lissy93/dashy/blob/WEBSITE/docs-site-source/static/umbrel-banner.jpg?raw=true" />
+</a>
+</p>
+
+> [!NOTE]
+> Version [3.0.0](https://github.com/Lissy93/dashy/releases/tag/3.0.0) has been released, and requires some changes to your setup, see [#1529](https://github.com/Lissy93/dashy/discussions/1529) for details.
+
+
 <details>
   <summary><b>Table of Contents</b></summary>
   <p>
@@ -95,7 +88,7 @@
 
 **Screenshots**: Checkout the [Showcase](./docs/showcase.md), to see example dashboards from the community
 
-**Spin up your own demo**: [![One-Click Deploy with PWD](https://img.shields.io/badge/Play--with--Docker-Deploy-2496ed?style=flat-square&logo=docker)](https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/Lissy93/dashy/master/docker-compose.yml) or [`docker run -p 8080:80 lissy93/dashy`](./docs/quick-start.md)
+**Spin up your own demo**: [![One-Click Deploy with PWD](https://img.shields.io/badge/Play--with--Docker-Deploy-2496ed?style=flat-square&logo=docker)](https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/Lissy93/dashy/master/docker-compose.yml) or [`docker run -p 8080:8080 lissy93/dashy`](./docs/quick-start.md)
 
 
 <p align="center">
@@ -116,15 +109,15 @@
 You will need [Docker](https://docs.docker.com/get-docker/) installed on your system
 
 ```
-docker run -p 8080:80 lissy93/dashy
+docker run -p 8080:8080 lissy93/dashy
 ```
 
 Or
 
 ```docker
 docker run -d \
-  -p 4000:80 \
-  -v /root/my-local-conf.yml:/app/public/conf.yml \
+  -p 4000:8080 \
+  -v /root/my-local-conf.yml:/app/user-data/conf.yml \
   --name my-dashboard \
   --restart=always \
   lissy93/dashy:latest
@@ -140,7 +133,7 @@ See also: [examples with Docker Compose](./docs/deployment.md#using-docker-compo
 You will need [git](https://git-scm.com/downloads), the latest or LTS version of [Node.js](https://nodejs.org/) and _(optionally)_ [Yarn](https://yarnpkg.com/) installed on your system.
 
 - Clone the Repo: `git clone https://github.com/Lissy93/dashy.git` and `cd dashy`
-- Configuration: Fill in your settings in `./public/conf.yml`
+- Configuration: Fill in your settings in `./user-data/conf.yml`
 - Install dependencies: `yarn`
 - Build: `yarn build`
 - Run: `yarn start`
@@ -169,7 +162,7 @@ Dashy supports **1-Click deployments** on several popular cloud platforms. To sp
 
 > For full configuration documentation, see: [**Configuring**](./docs/configuring.md)
 
-Dashy is configured through a YAML file, located at `./public/conf.yml`. In addition, you can find a complete list of available options in the [Configuring Docs](./docs/configuring.md). The config can also be edited and saved directly through the UI.
+Dashy is configured through a YAML file, located at `./user-data/conf.yml`. In addition, you can find a complete list of available options in the [Configuring Docs](./docs/configuring.md). The config can also be edited and saved directly through the UI.
 
 **[⬆️ Back to Top](#dashy)**
 
@@ -532,6 +525,13 @@ Huge thanks to the sponsors helping to support Dashy's development!
 <!-- readme: sponsors -start -->
 <table>
 <tr>
+    <td align="center">
+        <a href="https://github.com/undefined">
+            <img src="" width="80;" alt="undefined"/>
+            <br />
+            <sub><b>Undefined</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/koconder">
             <img src="https://avatars.githubusercontent.com/u/25068?u=582657b23622aaa3dfe68bd028a780f272f456fa&v=4" width="80;" alt="koconder"/>
@@ -540,41 +540,19 @@ Huge thanks to the sponsors helping to support Dashy's development!
         </a>
     </td>
     <td align="center">
-        <a href="https://github.com/peng1can">
-            <img src="https://avatars.githubusercontent.com/u/225854?v=4" width="80;" alt="peng1can"/>
+        <a href="https://github.com/Admonstrator">
+            <img src="https://avatars.githubusercontent.com/u/69824?u=1e226d7a36cdd661c3e4cd486fea140d045b7d57&v=4" width="80;" alt="Admonstrator"/>
             <br />
-            <sub><b>Peng1can</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/alydemah">
-            <img src="https://avatars.githubusercontent.com/u/652035?u=ac2c04e474da37bfeafcfa25076cc1800997aedb&v=4" width="80;" alt="alydemah"/>
-            <br />
-            <sub><b>Aly Mohamed</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/bgadrian">
-            <img src="https://avatars.githubusercontent.com/u/830001?v=4" width="80;" alt="bgadrian"/>
-            <br />
-            <sub><b>B.G.Adrian</b></sub>
+            <sub><b>Aaron Viehl</b></sub>
         </a>
     </td>
     <td align="center">
         <a href="https://github.com/tbjers">
-            <img src="https://avatars.githubusercontent.com/u/1117052?u=539d96d5e581b3139c75713ce35b89a36626404c&v=4" width="80;" alt="tbjers"/>
+            <img src="https://avatars.githubusercontent.com/u/1117052?v=4" width="80;" alt="tbjers"/>
             <br />
             <sub><b>Torgny Bjers</b></sub>
         </a>
     </td>
-    <td align="center">
-        <a href="https://github.com/emlazzarin">
-            <img src="https://avatars.githubusercontent.com/u/1141361?u=714e3487a3f2e0df721b01a0133945f075d3ff68&v=4" width="80;" alt="emlazzarin"/>
-            <br />
-            <sub><b>Eddy Lazzarin</b></sub>
-        </a>
-    </td></tr>
-<tr>
     <td align="center">
         <a href="https://github.com/AnandChowdhary">
             <img src="https://avatars.githubusercontent.com/u/2841780?u=747e554b3a7f12eb20b7910e1c87d817844f714f&v=4" width="80;" alt="AnandChowdhary"/>
@@ -588,7 +566,8 @@ Huge thanks to the sponsors helping to support Dashy's development!
             <br />
             <sub><b>Shrippen</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/bile0026">
             <img src="https://avatars.githubusercontent.com/u/5022496?u=aec96ad173c0ea9baaba93807efa8a848af6595c&v=4" width="80;" alt="bile0026"/>
@@ -605,26 +584,33 @@ Huge thanks to the sponsors helping to support Dashy's development!
     </td>
     <td align="center">
         <a href="https://github.com/digitalarche">
-            <img src="https://avatars.githubusercontent.com/u/6546135?u=d033c9c16e8367987aec3f9ff5922bc67dd1eedf&v=4" width="80;" alt="digitalarche"/>
+            <img src="https://avatars.githubusercontent.com/u/6546135?u=564756d7f44ab2206819eb3148f6d822673f5066&v=4" width="80;" alt="digitalarche"/>
             <br />
             <sub><b>Digital Archeology</b></sub>
         </a>
     </td>
     <td align="center">
         <a href="https://github.com/InDieTasten">
-            <img src="https://avatars.githubusercontent.com/u/7047377?v=4" width="80;" alt="InDieTasten"/>
+            <img src="https://avatars.githubusercontent.com/u/7047377?u=8d8f8017628b38bc46dcbf3620e194b01d3fb2d1&v=4" width="80;" alt="InDieTasten"/>
             <br />
             <sub><b>InDieTasten</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
+    <td align="center">
+        <a href="https://github.com/araguaci">
+            <img src="https://avatars.githubusercontent.com/u/7318668?v=4" width="80;" alt="araguaci"/>
+            <br />
+            <sub><b>Araguaci</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/bmcgonag">
             <img src="https://avatars.githubusercontent.com/u/7346620?u=2a0f9284f3e12ac1cc15288c254d1ec68a5081e8&v=4" width="80;" alt="bmcgonag"/>
             <br />
             <sub><b>Brian McGonagill</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/vlad-timofeev">
             <img src="https://avatars.githubusercontent.com/u/11474041?u=eee43705b54d2ec9f51fc4fcce5ad18dd17c87e4&v=4" width="80;" alt="vlad-timofeev"/>
@@ -640,10 +626,39 @@ Huge thanks to the sponsors helping to support Dashy's development!
         </a>
     </td>
     <td align="center">
-        <a href="https://github.com/undefined">
-            <img src="" width="80;" alt="undefined"/>
+        <a href="https://github.com/patvdv">
+            <img src="https://avatars.githubusercontent.com/u/12430107?u=e8911c2fb91af4d30432f76da8c40927b2830bd7&v=4" width="80;" alt="patvdv"/>
             <br />
-            <sub><b>Undefined</b></sub>
+            <sub><b>Patrick Van Der Veken</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/plgonzalezrx8">
+            <img src="https://avatars.githubusercontent.com/u/19900049?u=48a58d2da520a9d712184c6e6e99927ff3cbf179&v=4" width="80;" alt="plgonzalezrx8"/>
+            <br />
+            <sub><b>Pedro Gonzalez</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/mryesiller">
+            <img src="https://avatars.githubusercontent.com/u/24632172?u=0d20f2d615158f87cd60a3398d3efb026c32f291&v=4" width="80;" alt="mryesiller"/>
+            <br />
+            <sub><b>Göksel Yeşiller</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/allesauseinerhand">
+            <img src="https://avatars.githubusercontent.com/u/32039836?v=4" width="80;" alt="allesauseinerhand"/>
+            <br />
+            <sub><b>Allesauseinerhand</b></sub>
+        </a>
+    </td></tr>
+<tr>
+    <td align="center">
+        <a href="https://github.com/lamtrinhdev">
+            <img src="https://avatars.githubusercontent.com/u/49742151?u=c5eaca5aa6841a80605cf4f7d0e861a9e6339ef3&v=4" width="80;" alt="lamtrinhdev"/>
+            <br />
+            <sub><b>LamTrinh.Dev</b></sub>
         </a>
     </td>
     <td align="center">
@@ -653,27 +668,19 @@ Huge thanks to the sponsors helping to support Dashy's development!
             <sub><b>Bastii717</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/M2TD">
+            <img src="https://avatars.githubusercontent.com/u/85460457?v=4" width="80;" alt="M2TD"/>
+            <br />
+            <sub><b>M2TD</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/frankdez93">
             <img src="https://avatars.githubusercontent.com/u/87549420?v=4" width="80;" alt="frankdez93"/>
             <br />
             <sub><b>Frankdez93</b></sub>
         </a>
-    </td></tr>
-<tr>
-    <td align="center">
-        <a href="https://github.com/ratty222">
-            <img src="https://avatars.githubusercontent.com/u/92832598?u=137b65530cbd5f5af9c24cde51baa6cc77cc934b&v=4" width="80;" alt="ratty222"/>
-            <br />
-            <sub><b>Ratty222</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/hernanpopper">
-            <img src="https://avatars.githubusercontent.com/u/104868017?v=4" width="80;" alt="hernanpopper"/>
-            <br />
-            <sub><b>Hernanpopper</b></sub>
-        </a>
     </td>
     <td align="center">
         <a href="https://github.com/NixyJuppie">
@@ -688,13 +695,6 @@ Huge thanks to the sponsors helping to support Dashy's development!
             <br />
             <sub><b>Nrvo</b></sub>
         </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/mezza93">
-            <img src="https://avatars.githubusercontent.com/u/153599966?v=4" width="80;" alt="mezza93"/>
-            <br />
-            <sub><b>mezza93</b></sub>
-        </a>
     </td></tr>
 </table>
 <!-- readme: sponsors -end -->
@@ -843,16 +843,25 @@ For more info, see TLDR Legal's [Explanation of MIT](https://tldrlegal.com/licen
 
 ---
 
-
-<p align="center">
-  <br>
-  <a href="https://dashboard.trackgit.com/token/ks0bx7bb14lsvbwoc3ik">
-    <img src="https://us-central1-trackgit-analytics.cloudfunctions.net/token/ping/ks0bx7bb14lsvbwoc3ik?style=flat-square" />
-  </a>
-  <br><br>
-  <a href="https://github.com/Lissy93/dashy">
-    <img src="https://github.githubassets.com/images/icons/emoji/octocat.png" />
-  </a>
-  <br><br>
-  <i>Thank you for Visiting</i>
+<!-- License + Copyright -->
+<p  align="center">
+  <i>© <a href="https://aliciasykes.com">Alicia Sykes</a> 2024</i><br>
+  <i>Licensed under <a href="https://gist.github.com/Lissy93/143d2ee01ccc5c052a17">MIT</a></i><br>
+  <a href="https://github.com/lissy93"><img src="https://i.ibb.co/4KtpYxb/octocat-clean-mini.png" /></a><br>
+  <sup>Thanks for visiting :)</sup>
 </p>
+
+<!-- Dinosaurs are Awesome -->
+<!-- 
+                        . - ~ ~ ~ - .
+      ..     _      .-~               ~-.
+     //|     \ `..~                      `.
+    || |      }  }              /       \  \
+(\   \\ \~^..'                 |         }  \
+ \`.-~  o      /       }       |        /    \
+ (__          |       /        |       /      `.
+  `- - ~ ~ -._|      /_ - ~ ~ ^|      /- _      `.
+              |     /          |     /     ~-.     ~- _
+              |_____|          |_____|         ~ - . _ _~_-_
+-->
+

docker-compose.yml

@@ -12,21 +12,17 @@ services:
     # To build from source, replace 'image: lissy93/dashy' with 'build: .'
     # build: .
 
-    # Or, to use a Dockerfile for your archtecture, uncomment the following
-    # context: .
-    # dockerfile: ./docker/Dockerfile-arm32v7
-
     # You can also use an image with a different tag, or pull from a different registry, e.g:
-    # image: ghcr.io/lissy93/dashy or image: lissy93/dashy:arm64v8
+    # image: ghcr.io/lissy93/dashy or image: lissy93/dashy:3.0.0
 
     # Pass in your config file below, by specifying the path on your host machine
     # volumes:
-      # - /path/to/my-config.yml:/app/public/conf.yml
-      # - /path/to/item-icons:/app/public/item-icons
+      # - /path/to/my-config.yml:/app/user-data/conf.yml
+      # - /path/to/item-icons:/app/user-data/item-icons/
 
-    # Set port that web service will be served on. Keep container port as 80
+    # Set port that web service will be served on. Keep container port as 8080
     ports:
-      - 4000:80
+      - 4000:8080
 
     # Set any environmental variables
     environment:

docker/docker-readme.md

@@ -55,7 +55,7 @@
 
 **Screenshots**: Checkout the [Showcase](https://github.com/Lissy93/dashy/blob/master/docs/showcase.md), to see example dashboards from the community
 
-**Spin up your own demo**: [![One-Click Deploy with PWD](https://img.shields.io/badge/Play--with--Docker-Deploy-2496ed?style=flat-square&logo=docker)](https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/Lissy93/dashy/master/docker-compose.yml) or [`docker run -p 8080:80 lissy93/dashy`](./docs/quick-start.md)
+**Spin up your own demo**: [![One-Click Deploy with PWD](https://img.shields.io/badge/Play--with--Docker-Deploy-2496ed?style=flat-square&logo=docker)](https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/Lissy93/dashy/master/docker-compose.yml) or [`docker run -p 8080:8080 lissy93/dashy`](./docs/quick-start.md)
 
 
 <p align="center">
@@ -69,7 +69,7 @@
 
 ## Getting Started 🛫
 
-To deploy Dashy with Docker, just run `docker run -p 8080:80 lissy93/dashy`, then open `http://localhost:8080`
+To deploy Dashy with Docker, just run `docker run -p 8080:8080 lissy93/dashy`, then open `http://localhost:8080`
 
 For full list of options and a Docker compose file, see the [Deployment Docs](https://github.com/Lissy93/dashy/blob/master/docs/deployment.md).
 

docs/authentication.md

@@ -6,11 +6,15 @@
   - [Logging In and Out](#logging-in-and-out)
   - [Guest Access](#enabling-guest-access)
   - [Per-User Access](#granular-access)
+  - [Using Environment Variables for Passwords](#using-environment-variables-for-passwords)
+  - [Adding HTTP Auth to Configuration](#adding-http-auth-to-configuration)
   - [Security Considerations](#security)
+- [HTTP Auth](#http-auth)
 - [Keycloak Auth](#keycloak)
   - [Deploying Keycloak](#1-deploy-keycloak)
   - [Setting up Keycloak](#2-setup-keycloak-users)
   - [Configuring Dashy for Keycloak](#3-enable-keycloak-in-dashy-config-file)
+  - [Toubleshooting Keycloak](#troubleshooting-keycloak)
 - [Alternative Authentication Methods](#alternative-authentication-methods)
   - [VPN](#vpn)
   - [IP-Based Access](#ip-based-access)
@@ -20,7 +24,7 @@
 
 
 > [!IMPORTANT]
-> Dashy's built-in auth is not indented to protect a publicly hosted instance against unauthorized access. Instead you should use an auth provider compatible with your reverse proxy, or access Dashy via your VPN. 
+> Dashy's built-in auth is not indented to protect a publicly hosted instance against unauthorized access. Instead you should use an auth provider compatible with your reverse proxy, or access Dashy via your VPN, or implement your own SSO logic. 
 >
 > In cases where Dashy is only accessibly within your home network, and you just want to add a login page, then the built-in auth may be sufficient, but keep in mind that configuration can still be accessed.
 
@@ -28,6 +32,11 @@
 
 Dashy has a basic login page included, and frontend authentication. You can enable this by adding users to the `auth` section under `appConfig` in your `conf.yml`. If this section is not specified, then no authentication will be required to access the app, and the homepage will resolve to your dashboard.
 
+> [!NOTE]
+> Since the auth is initiated in the main app entry point (for security), a rebuild is required to apply changes to the auth configuration.
+> You can trigger a rebuild through the UI, under Config --> Rebuild, or by running `yarn build` in the root directory.
+
+
 ### Setting Up Authentication
 
 The `auth` property takes an array of users. Each user needs to include a username, hash and optional user type (`admin` or `normal`). The hash property is a [SHA-256 Hash](https://en.wikipedia.org/wiki/SHA-2) of your desired password.
@@ -110,6 +119,27 @@ You can also prevent any user from writing changes to disk, using `preventWriteT
 
 To disable all UI config features, including View Config, set `disableConfiguration`. Alternatively you can disable UI config features for all non admin users by setting `disableConfigurationForNonAdmin` to true.
 
+### Using Environment Variables for Passwords
+
+If you don't want to hash your password, you can instead leave out the `hash` attribute, and replace it with `password` which should have the value of an environmental variable name you wish to use.
+
+Note that env var must begin with `VUE_APP_`, and you must set this variable before building the app.
+
+For example:
+
+```yaml
+  auth:
+    users:
+    - user: bob
+      password: VUE_APP_BOB
+```
+
+Just be sure to set `VUE_APP_BOB='my super secret password'` before build-time.
+
+### Adding HTTP Auth to Configuration
+
+If you'd also like to prevent direct visit access to your configuration file, you can set the `ENABLE_HTTP_AUTH` environmental variable.
+
 ### Security
 
 With basic auth, all logic is happening on the client-side, which could mean a skilled user could manipulate the code to view parts of your configuration, including the hash. If the SHA-256 hash is of a common password, it may be possible to determine it, using a lookup table, in order to find the original password. Which can be used to manually generate the auth token, that can then be inserted into session storage, to become a valid logged in user. Therefore, you should always use a long, strong and unique password, and if you instance contains security-critical info and/ or is exposed directly to the internet, and alternative authentication method may be better. The purpose of the login page is merely to prevent immediate unauthorized access to your homepage.
@@ -118,6 +148,16 @@ With basic auth, all logic is happening on the client-side, which could mean a s
 
 ---
 
+## HTTP Auth
+
+If you'd like to protect all your config files from direct access, you can set the `BASIC_AUTH_USERNAME` and `BASIC_AUTH_PASSWORD` environmental variables. You'll then be prompted to enter these credentials when visiting Dashy.
+
+Then, if you'd like your frontend to automatically log you in, without prompting you for credentials, then also specify `VUE_APP_BASIC_AUTH_USERNAME` and `VUE_APP_BASIC_AUTH_PASSWORD`. This is useful for when you're hosting Dashy on a private server, and you want to prevent unauthorized access to your config files, while still allowing the frontend to access them. Note that a rebuild is required for these changes to take effect.
+
+**[⬆️ Back to Top](#authentication)**
+
+---
+
 ## Keycloak
 
 Dashy also supports using a [Keycloak](https://www.keycloak.org/) authentication server. The setup for this is a bit more involved, but it gives you greater security overall, useful for if your instance is exposed to the internet.
@@ -214,6 +254,67 @@ From within the Keycloak console, you can then configure things like time-outs,
 
 ---
 
+### Troubleshooting Keycloak
+
+If you encounter issues with your Keycloak setup, follow these steps to troubleshoot and resolve common problems.
+
+1. Client Authentication Issue
+Problem: Redirect loop, if client authentication is enabled.
+Solution: Switch off "client authentication" in "TC clients" -> "Advanced" settings.
+
+2. Double URL
+Problem: If you get redirected to "https://dashy.my.domain/#iss=https://keycloak.my.domain/realms/my-realm"
+Solution: Make sure to turn on "Exclude Issuer From Authentication Response" in "TC clients" -> "Advanced" -> "OpenID Connect Compatibility Modes"
+
+3. Problems with mutiple Dashy Pages
+Problem: Refreshing or logging out of dashy results in an "invalid_redirect_uri" error.
+Solution: In "TC clients" -> "Access settings" -> "Root URL" https://dashy.my.domain/, valid redirect URIs must be /*
+
+---
+
+## OIDC
+
+Dashy also supports using a general [OIDC compatible](https://openid.net/connect/) authentication server. In order to use it, the authentication section needs to be configured:
+
+```yaml
+appConfig:
+  auth:
+    enableOidc: true
+    oidc:
+      clientId: [registered client id]
+      endpoint: [OIDC endpoint]
+```
+
+Because Dashy is a SPA, a [public client](https://datatracker.ietf.org/doc/html/rfc6749#section-2.1) registration with PKCE is needed.
+
+An example for Authelia is shared below, but other OIDC systems can be used:
+
+```yaml
+identity_providers:
+  oidc:
+    clients:
+      - client_id: dashy
+        client_name: dashy
+        public: true
+        authorization_policy: 'one_factor'
+        require_pkce: true
+        pkce_challenge_method: 'S256'
+        redirect_uris:
+          - https://dashy.local # should point to your dashy endpoint
+        grant_types:
+          - authorization_code
+        scopes:
+          - 'openid'
+          - 'profile'
+          - 'roles'
+          - 'email'
+          - 'groups'
+```
+
+Groups and roles will be populated and available for controlling display similar to [Keycloak](#Keycloak) abvoe.
+
+---
+
 ## Alternative Authentication Methods
 
 If you are self-hosting Dashy, and require secure authentication to prevent unauthorized access, then you can either use Keycloak, or one of the following options:
@@ -263,7 +364,7 @@ In NGINX you can specify [control access](https://docs.nginx.com/nginx/admin-gui
 
 ```text
 server {
-	listen 80;
+	listen 8080;
 	server_name www.dashy.example.com;
 	location / {
 		root /path/to/dashy/;

docs/backup-restore.md

@@ -1,5 +1,7 @@
 # Cloud Backup and Restore
 
+Beyond the cloud backup/restore service, there are several other self-hosted options you can use to backup Dashy, and any other Docker container data. These are outlined in the Management docs, at: [Docker Backup Options](/docs/management.md#backing-up).
+
 Dashy has a built-in feature for securely backing up your config to a hosted cloud service, and then restoring it on another instance. This feature is totally optional, and if you do not enable it, then Dashy will not make any external network requests.
 
 This is useful not only for backing up your configuration off-site, but it also enables Dashy to be used without having write a YAML config file, and makes it possible to use a public hosted instance, without the need to self-host.

docs/configuring.md

@@ -1,6 +1,6 @@
 # Configuring
 
-All app configuration is specified in [`/public/conf.yml`](https://github.com/Lissy93/dashy/blob/master/public/conf.yml) which is in [YAML Format](https://yaml.org/) format. If you're using Docker, this file can be passed in as a volume. Changes can either be made directly to this file, or done [through the UI](#editing-config-through-the-ui). From the UI you can also export, backup, reset, validate and download your configuration file.
+All app configuration is specified in [`/user-data/conf.yml`](https://github.com/Lissy93/dashy/blob/master/user-data/conf.yml) which is in [YAML Format](https://yaml.org/) format. If you're using Docker, this file can be passed in as a volume. Changes can either be made directly to this file, or done [through the UI](#editing-config-through-the-ui). From the UI you can also export, backup, reset, validate and download your configuration file.
 
 ## There are three ways to edit the config
 
@@ -36,6 +36,7 @@ The following file provides a reference of all supported configuration options.
   - [`auth`](#appconfigauth-optional) - Built-in authentication setup
     - [`users`](#appconfigauthusers-optional) - List or users (for simple auth)
     - [`keycloak`](#appconfigauthkeycloak-optional) - Auth config for Keycloak
+    - [`headerAuth`](#appconfigauthheaderauth-optional) - Auth config for HeaderAuth
 - [**`sections`**](#section) - List of sections
   - [`displayData`](#sectiondisplaydata-optional) - Section display settings
     - [`show/hideForKeycloakUsers`](#sectiondisplaydatahideforkeycloakusers-sectiondisplaydatashowforkeycloakusers-itemdisplaydatahideforkeycloakusers-and-itemdisplaydatashowforkeycloakusers) - Set user controls
@@ -101,7 +102,7 @@ The following file provides a reference of all supported configuration options.
 **Field** | **Type** | **Required**| **Description**
 --- | --- | --- | ---
 **`language`** | `string` | _Optional_ | The 2 (or 4-digit) [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) for your language, e.g. `en` or `en-GB`. This must be a language that the app has already been [translated](https://github.com/Lissy93/dashy/tree/master/src/assets/locales) into. If your language is unavailable, Dashy will fallback to English. By default Dashy will attempt to auto-detect your language, although this may not work on some privacy browsers.
-**`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`
+~~**`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`. NOTE: This has been replaced by an environmental variable: `VUE_APP_STARTING_VIEW` in V3 onwards
 **`defaultOpeningMethod`** | `enum` | _Optional_ | The default opening method for items, if no `target` is specified for a given item. Can be either `newtab`, `sametab`, `modal`, `workspace`, `clipboard`, `top` or `parent`. Defaults to `newtab`
 **`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`** | `number` | _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`
@@ -142,11 +143,23 @@ The following file provides a reference of all supported configuration options.
 
 ## `appConfig.auth` _(optional)_
 
+> [!NOTE]
+> Since the auth is initiated in the main app entry point (for security), a rebuild is required to apply changes to the auth configuration.
+> You can trigger a rebuild through the UI, under Config --> Rebuild, or by running `yarn build` in the root directory.
+
+> [!WARNING]
+> Built-in auth should **not be used** for security-critical applications, or if your Dashy instance is publicly accessible.
+> For these, it is recommended to use an [alternate authentication method](/docs/authentication.md#alternative-authentication-methods).
+
 **Field** | **Type** | **Required**| **Description**
 --- | --- | --- | ---
 **`users`** | `array` | _Optional_ | An array of objects containing usernames and hashed passwords. If this is not provided, then authentication will be off by default, and you will not need any credentials to access the app. See [`appConfig.auth.users`](#appconfigauthusers-optional). <br>**Note** this method of authentication is handled on the client side, so for security critical situations, it is recommended to use an [alternate authentication method](/docs/authentication.md#alternative-authentication-methods).
 **`enableKeycloak`** | `boolean` | _Optional_ | If set to `true`, then authentication using Keycloak will be enabled. Note that you need to have an instance running, and have also configured `auth.keycloak`. Defaults to `false`
 **`keycloak`** | `object` | _Optional_ | Config options to point Dashy to your Keycloak server. Requires `enableKeycloak: true`. See  [`auth.keycloak`](#appconfigauthkeycloak-optional) for more info
+**`enableHeaderAuth`** | `boolean` | _Optional_ | If set to `true`, then authentication using HeaderAuth will be enabled. Note that you need to have your web server/reverse proxy running, and have also configured `auth.headerAuth`. Defaults to `false`
+**`headerAuth`** | `object` | _Optional_ | Config options to point Dashy to your headers for authentication. Requires `enableHeaderAuth: true`. See  [`auth.headerAuth`](#appconfigauthheaderauth-optional) for more info
+**`enableOidc`** | `boolean` | _Optional_ | If set to `true`, then authentication using OIDC will be enabled. Note that you need to have a configured OIDC server and configure it with `auth.oidc`. Defaults to `false`
+**`oidc`** | `object` | _Optional_ | Config options to point Dash to your OIDC configuration. Request `enableOidc: true`. See [`auth.oidc`](#appconfigauthoidc-optional) for more info
 **`enableGuestAccess`** | `boolean` | _Optional_ | When set to `true`, an unauthenticated user will be able to access the dashboard, with read-only access, without having to login. Requires `auth.users` to be configured. Defaults to `false`.
 
 For more info, see the **[Authentication Docs](/docs/authentication.md)**
@@ -174,6 +187,24 @@ For more info, see the **[Authentication Docs](/docs/authentication.md)**
 
 **[⬆️ Back to Top](#configuring)**
 
+## `appConfig.auth.headerAuth` _(optional)_
+
+**Field** | **Type** | **Required**| **Description**
+--- | --- | --- | ---
+**`userHeader`** | `string` | _Optional_ | The Header name which contains username (default: REMOTE_USER). Case insensitive
+**`proxyWhitelist`** | `array` | Required | An array of Upstream proxy servers to expect authencticated requests from
+
+**[⬆️ Back to Top](#configuring)**
+
+## `appConfig.auth.oidc` _(optional)_
+
+**Field** | **Type** | **Required**| **Description**
+--- | --- | --- | ---
+**`clientId`** | `string` | Required | The client id registered in the OIDC server
+**`endpoint`** | `string` | Required | The URL of the OIDC server that should be used.
+
+**[⬆️ Back to Top](#configuring)**
+
 ## `appConfig.webSearch` _(optional)_
 
 **Field** | **Type** | **Required**| **Description**

docs/contributing.md

@@ -130,7 +130,7 @@ If you like, you could also consider [subscribing to my mailing list](https://no
 
 For a full list of Dashy's contributors, see the [Credits Page](/docs/credits.md)
 
-[![Auto-generated contributors](https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/CONTRIBUTORS.svg)](/docs/credits.md)
+[![Auto-generated contributors](https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/CONTRIBUTORS.svg)](https://github.com/Lissy93/dashy/blob/master/docs/credits.md)
 
 ### Star-Gazers Over Time
 

docs/credits.md

@@ -4,6 +4,13 @@
 <!-- readme: sponsors -start -->
 <table>
 <tr>
+    <td align="center">
+        <a href="https://github.com/github">
+            <img src="https://avatars.githubusercontent.com/u/9919?v=4" width="80;" alt="github"/>
+            <br />
+            <sub><b>GitHub</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/koconder">
             <img src="https://avatars.githubusercontent.com/u/25068?u=582657b23622aaa3dfe68bd028a780f272f456fa&v=4" width="80;" alt="koconder"/>
@@ -12,41 +19,19 @@
         </a>
     </td>
     <td align="center">
-        <a href="https://github.com/peng1can">
-            <img src="https://avatars.githubusercontent.com/u/225854?v=4" width="80;" alt="peng1can"/>
+        <a href="https://github.com/Admonstrator">
+            <img src="https://avatars.githubusercontent.com/u/69824?u=1e226d7a36cdd661c3e4cd486fea140d045b7d57&v=4" width="80;" alt="Admonstrator"/>
             <br />
-            <sub><b>Null</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/alydemah">
-            <img src="https://avatars.githubusercontent.com/u/652035?u=ac2c04e474da37bfeafcfa25076cc1800997aedb&v=4" width="80;" alt="alydemah"/>
-            <br />
-            <sub><b>Aly Mohamed</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/bgadrian">
-            <img src="https://avatars.githubusercontent.com/u/830001?v=4" width="80;" alt="bgadrian"/>
-            <br />
-            <sub><b>B.G.Adrian</b></sub>
+            <sub><b>Aaron Viehl</b></sub>
         </a>
     </td>
     <td align="center">
         <a href="https://github.com/tbjers">
-            <img src="https://avatars.githubusercontent.com/u/1117052?u=539d96d5e581b3139c75713ce35b89a36626404c&v=4" width="80;" alt="tbjers"/>
+            <img src="https://avatars.githubusercontent.com/u/1117052?v=4" width="80;" alt="tbjers"/>
             <br />
             <sub><b>Torgny Bjers</b></sub>
         </a>
     </td>
-    <td align="center">
-        <a href="https://github.com/emlazzarin">
-            <img src="https://avatars.githubusercontent.com/u/1141361?u=714e3487a3f2e0df721b01a0133945f075d3ff68&v=4" width="80;" alt="emlazzarin"/>
-            <br />
-            <sub><b>Eddy Lazzarin</b></sub>
-        </a>
-    </td></tr>
-<tr>
     <td align="center">
         <a href="https://github.com/AnandChowdhary">
             <img src="https://avatars.githubusercontent.com/u/2841780?u=747e554b3a7f12eb20b7910e1c87d817844f714f&v=4" width="80;" alt="AnandChowdhary"/>
@@ -60,7 +45,8 @@
             <br />
             <sub><b>Null</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/bile0026">
             <img src="https://avatars.githubusercontent.com/u/5022496?u=aec96ad173c0ea9baaba93807efa8a848af6595c&v=4" width="80;" alt="bile0026"/>
@@ -77,26 +63,33 @@
     </td>
     <td align="center">
         <a href="https://github.com/digitalarche">
-            <img src="https://avatars.githubusercontent.com/u/6546135?u=d033c9c16e8367987aec3f9ff5922bc67dd1eedf&v=4" width="80;" alt="digitalarche"/>
+            <img src="https://avatars.githubusercontent.com/u/6546135?u=564756d7f44ab2206819eb3148f6d822673f5066&v=4" width="80;" alt="digitalarche"/>
             <br />
             <sub><b>Digital Archeology</b></sub>
         </a>
     </td>
     <td align="center">
         <a href="https://github.com/InDieTasten">
-            <img src="https://avatars.githubusercontent.com/u/7047377?v=4" width="80;" alt="InDieTasten"/>
+            <img src="https://avatars.githubusercontent.com/u/7047377?u=8d8f8017628b38bc46dcbf3620e194b01d3fb2d1&v=4" width="80;" alt="InDieTasten"/>
             <br />
             <sub><b>Null</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
+    <td align="center">
+        <a href="https://github.com/araguaci">
+            <img src="https://avatars.githubusercontent.com/u/7318668?v=4" width="80;" alt="araguaci"/>
+            <br />
+            <sub><b>Null</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/bmcgonag">
             <img src="https://avatars.githubusercontent.com/u/7346620?u=2a0f9284f3e12ac1cc15288c254d1ec68a5081e8&v=4" width="80;" alt="bmcgonag"/>
             <br />
             <sub><b>Brian McGonagill</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/vlad-timofeev">
             <img src="https://avatars.githubusercontent.com/u/11474041?u=eee43705b54d2ec9f51fc4fcce5ad18dd17c87e4&v=4" width="80;" alt="vlad-timofeev"/>
@@ -111,6 +104,35 @@
             <sub><b>HeliXZz</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/patvdv">
+            <img src="https://avatars.githubusercontent.com/u/12430107?u=e8911c2fb91af4d30432f76da8c40927b2830bd7&v=4" width="80;" alt="patvdv"/>
+            <br />
+            <sub><b>Patrick Van Der Veken</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/plgonzalezrx8">
+            <img src="https://avatars.githubusercontent.com/u/19900049?u=48a58d2da520a9d712184c6e6e99927ff3cbf179&v=4" width="80;" alt="plgonzalezrx8"/>
+            <br />
+            <sub><b>Pedro Gonzalez</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/mryesiller">
+            <img src="https://avatars.githubusercontent.com/u/24632172?u=0d20f2d615158f87cd60a3398d3efb026c32f291&v=4" width="80;" alt="mryesiller"/>
+            <br />
+            <sub><b>Göksel Yeşiller</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/allesauseinerhand">
+            <img src="https://avatars.githubusercontent.com/u/32039836?v=4" width="80;" alt="allesauseinerhand"/>
+            <br />
+            <sub><b>Null</b></sub>
+        </a>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/forwardemail">
             <img src="https://avatars.githubusercontent.com/u/32481436?v=4" width="80;" alt="forwardemail"/>
@@ -118,6 +140,13 @@
             <sub><b>Forward Email - Open-source & Privacy-focused Email Service (2023)</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/lamtrinhdev">
+            <img src="https://avatars.githubusercontent.com/u/49742151?u=c5eaca5aa6841a80605cf4f7d0e861a9e6339ef3&v=4" width="80;" alt="lamtrinhdev"/>
+            <br />
+            <sub><b>LamTrinh.Dev</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/Bastii717">
             <img src="https://avatars.githubusercontent.com/u/53431819?u=604977bed6ad6875ada890d0d3765a4cacc2fa14&v=4" width="80;" alt="Bastii717"/>
@@ -125,6 +154,20 @@
             <sub><b>Null</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/getumbrel">
+            <img src="https://avatars.githubusercontent.com/u/59408891?v=4" width="80;" alt="getumbrel"/>
+            <br />
+            <sub><b>Umbrel</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/M2TD">
+            <img src="https://avatars.githubusercontent.com/u/85460457?v=4" width="80;" alt="M2TD"/>
+            <br />
+            <sub><b>Null</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/frankdez93">
             <img src="https://avatars.githubusercontent.com/u/87549420?v=4" width="80;" alt="frankdez93"/>
@@ -134,17 +177,10 @@
     </td></tr>
 <tr>
     <td align="center">
-        <a href="https://github.com/ratty222">
-            <img src="https://avatars.githubusercontent.com/u/92832598?u=137b65530cbd5f5af9c24cde51baa6cc77cc934b&v=4" width="80;" alt="ratty222"/>
+        <a href="https://github.com/terminaltrove">
+            <img src="https://avatars.githubusercontent.com/u/121595180?v=4" width="80;" alt="terminaltrove"/>
             <br />
-            <sub><b>Ratty222</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/hernanpopper">
-            <img src="https://avatars.githubusercontent.com/u/104868017?v=4" width="80;" alt="hernanpopper"/>
-            <br />
-            <sub><b>Null</b></sub>
+            <sub><b>Terminal Trove</b></sub>
         </a>
     </td>
     <td align="center">
@@ -160,13 +196,6 @@
             <br />
             <sub><b>Null</b></sub>
         </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/mezza93">
-            <img src="https://avatars.githubusercontent.com/u/153599966?v=4" width="80;" alt="mezza93"/>
-            <br />
-            <sub><b>Null</b></sub>
-        </a>
     </td></tr>
 </table>
 <!-- readme: sponsors -end -->
@@ -218,6 +247,13 @@
         </a>
     </td></tr>
 <tr>
+    <td align="center">
+        <a href="https://github.com/CrazyWolf13">
+            <img src="https://avatars.githubusercontent.com/u/96661824?v=4" width="80;" alt="CrazyWolf13"/>
+            <br />
+            <sub><b>Tobias</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/m42e">
             <img src="https://avatars.githubusercontent.com/u/2410802?v=4" width="80;" alt="m42e"/>
@@ -233,10 +269,10 @@
         </a>
     </td>
     <td align="center">
-        <a href="https://github.com/CrazyWolf13">
-            <img src="https://avatars.githubusercontent.com/u/96661824?v=4" width="80;" alt="CrazyWolf13"/>
+        <a href="https://github.com/imjimmeh">
+            <img src="https://avatars.githubusercontent.com/u/2104997?v=4" width="80;" alt="imjimmeh"/>
             <br />
-            <sub><b>Tobias</b></sub>
+            <sub><b>Null</b></sub>
         </a>
     </td>
     <td align="center">
@@ -246,13 +282,6 @@
             <sub><b>Kashif Sohail</b></sub>
         </a>
     </td>
-    <td align="center">
-        <a href="https://github.com/josuablejeru">
-            <img src="https://avatars.githubusercontent.com/u/37913833?v=4" width="80;" alt="josuablejeru"/>
-            <br />
-            <sub><b>Josua Blejeru </b></sub>
-        </a>
-    </td>
     <td align="center">
         <a href="https://github.com/walkxcode">
             <img src="https://avatars.githubusercontent.com/u/71191962?v=4" width="80;" alt="walkxcode"/>
@@ -261,6 +290,13 @@
         </a>
     </td></tr>
 <tr>
+    <td align="center">
+        <a href="https://github.com/josuablejeru">
+            <img src="https://avatars.githubusercontent.com/u/37913833?v=4" width="80;" alt="josuablejeru"/>
+            <br />
+            <sub><b>Josua Blejeru </b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/evroon">
             <img src="https://avatars.githubusercontent.com/u/11857441?v=4" width="80;" alt="evroon"/>
@@ -295,15 +331,15 @@
             <br />
             <sub><b>Alberto</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/altearius">
             <img src="https://avatars.githubusercontent.com/u/270430?v=4" width="80;" alt="altearius"/>
             <br />
             <sub><b>Chris Nielsen</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/UrekD">
             <img src="https://avatars.githubusercontent.com/u/38784343?v=4" width="80;" alt="UrekD"/>
@@ -311,6 +347,20 @@
             <sub><b>UrekD</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/z3r0l1nk">
+            <img src="https://avatars.githubusercontent.com/u/31653632?v=4" width="80;" alt="z3r0l1nk"/>
+            <br />
+            <sub><b>Mihai</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/zcq100">
+            <img src="https://avatars.githubusercontent.com/u/425234?v=4" width="80;" alt="zcq100"/>
+            <br />
+            <sub><b>Null</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/wozboz">
             <img src="https://avatars.githubusercontent.com/u/51856582?v=4" width="80;" alt="wozboz"/>
@@ -324,6 +374,14 @@
             <br />
             <sub><b>Totto16</b></sub>
         </a>
+    </td></tr>
+<tr>
+    <td align="center">
+        <a href="https://github.com/toddejohnson">
+            <img src="https://avatars.githubusercontent.com/u/507545?v=4" width="80;" alt="toddejohnson"/>
+            <br />
+            <sub><b>Todd Johnson</b></sub>
+        </a>
     </td>
     <td align="center">
         <a href="https://github.com/remygrandin">
@@ -339,14 +397,6 @@
             <sub><b>Dimitri</b></sub>
         </a>
     </td>
-    <td align="center">
-        <a href="https://github.com/Tracreed">
-            <img src="https://avatars.githubusercontent.com/u/6306365?v=4" width="80;" alt="Tracreed"/>
-            <br />
-            <sub><b>David Alasow</b></sub>
-        </a>
-    </td></tr>
-<tr>
     <td align="center">
         <a href="https://github.com/aviolaris">
             <img src="https://avatars.githubusercontent.com/u/48277853?v=4" width="80;" alt="aviolaris"/>
@@ -354,13 +404,21 @@
             <sub><b>Andreas Violaris</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/Tracreed">
+            <img src="https://avatars.githubusercontent.com/u/6306365?v=4" width="80;" alt="Tracreed"/>
+            <br />
+            <sub><b>David Alasow</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/rubenandre">
             <img src="https://avatars.githubusercontent.com/u/9402773?v=4" width="80;" alt="rubenandre"/>
             <br />
             <sub><b>Rúben Silva</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/rtm516">
             <img src="https://avatars.githubusercontent.com/u/5401186?v=4" width="80;" alt="rtm516"/>
@@ -368,13 +426,6 @@
             <sub><b>Rtm516</b></sub>
         </a>
     </td>
-    <td align="center">
-        <a href="https://github.com/zcq100">
-            <img src="https://avatars.githubusercontent.com/u/425234?v=4" width="80;" alt="zcq100"/>
-            <br />
-            <sub><b>Null</b></sub>
-        </a>
-    </td>
     <td align="center">
         <a href="https://github.com/onedr0p">
             <img src="https://avatars.githubusercontent.com/u/213795?v=4" width="80;" alt="onedr0p"/>
@@ -388,8 +439,7 @@
             <br />
             <sub><b>Stanly0726</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/Bogyie">
             <img src="https://avatars.githubusercontent.com/u/82003678?v=4" width="80;" alt="Bogyie"/>
@@ -410,7 +460,8 @@
             <br />
             <sub><b>Berk Sümbül</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/alucarddelta">
             <img src="https://avatars.githubusercontent.com/u/20882097?v=4" width="80;" alt="alucarddelta"/>
@@ -419,17 +470,38 @@
         </a>
     </td>
     <td align="center">
-        <a href="https://github.com/k073l">
-            <img src="https://avatars.githubusercontent.com/u/21180271?v=4" width="80;" alt="k073l"/>
+        <a href="https://github.com/BySempron">
+            <img src="https://avatars.githubusercontent.com/u/15928132?v=4" width="80;" alt="BySempron"/>
+            <br />
+            <sub><b>Sergio</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/ssrangisetti">
+            <img src="https://avatars.githubusercontent.com/u/46807508?v=4" width="80;" alt="ssrangisetti"/>
             <br />
             <sub><b>Null</b></sub>
         </a>
     </td>
     <td align="center">
-        <a href="https://github.com/kt-alt">
-            <img src="https://avatars.githubusercontent.com/u/51970249?v=4" width="80;" alt="kt-alt"/>
+        <a href="https://github.com/zigotica">
+            <img src="https://avatars.githubusercontent.com/u/178855?v=4" width="80;" alt="zigotica"/>
             <br />
-            <sub><b>Null</b></sub>
+            <sub><b>Sergi Meseguer</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/rokiden">
+            <img src="https://avatars.githubusercontent.com/u/11071229?v=4" width="80;" alt="rokiden"/>
+            <br />
+            <sub><b>Denis Kazimirov</b></sub>
+        </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/patrickheeney">
+            <img src="https://avatars.githubusercontent.com/u/1407228?v=4" width="80;" alt="patrickheeney"/>
+            <br />
+            <sub><b>Patrick Heeney</b></sub>
         </a>
     </td></tr>
 <tr>
@@ -441,31 +513,17 @@
         </a>
     </td>
     <td align="center">
-        <a href="https://github.com/patrickheeney">
-            <img src="https://avatars.githubusercontent.com/u/1407228?v=4" width="80;" alt="patrickheeney"/>
-            <br />
-            <sub><b>Patrick Heeney</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/rokiden">
-            <img src="https://avatars.githubusercontent.com/u/11071229?v=4" width="80;" alt="rokiden"/>
-            <br />
-            <sub><b>Denis Kazimirov</b></sub>
-        </a>
-    </td>
-    <td align="center">
-        <a href="https://github.com/ssrangisetti">
-            <img src="https://avatars.githubusercontent.com/u/46807508?v=4" width="80;" alt="ssrangisetti"/>
+        <a href="https://github.com/kt-alt">
+            <img src="https://avatars.githubusercontent.com/u/51970249?v=4" width="80;" alt="kt-alt"/>
             <br />
             <sub><b>Null</b></sub>
         </a>
     </td>
     <td align="center">
-        <a href="https://github.com/BySempron">
-            <img src="https://avatars.githubusercontent.com/u/15928132?v=4" width="80;" alt="BySempron"/>
+        <a href="https://github.com/k073l">
+            <img src="https://avatars.githubusercontent.com/u/21180271?v=4" width="80;" alt="k073l"/>
             <br />
-            <sub><b>Sergio</b></sub>
+            <sub><b>Null</b></sub>
         </a>
     </td>
     <td align="center">
@@ -474,8 +532,7 @@
             <br />
             <sub><b>Joey Miller</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/hockeymikey">
             <img src="https://avatars.githubusercontent.com/u/1435185?v=4" width="80;" alt="hockeymikey"/>
@@ -489,6 +546,14 @@
             <br />
             <sub><b>Thomas Wienecke</b></sub>
         </a>
+    </td></tr>
+<tr>
+    <td align="center">
+        <a href="https://github.com/GuilhermeLCS95">
+            <img src="https://avatars.githubusercontent.com/u/116608998?v=4" width="80;" alt="GuilhermeLCS95"/>
+            <br />
+            <sub><b>GuilhermeLCS</b></sub>
+        </a>
     </td>
     <td align="center">
         <a href="https://github.com/deneor">
@@ -517,15 +582,15 @@
             <br />
             <sub><b>Stephen Rigney</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/a-mnich">
             <img src="https://avatars.githubusercontent.com/u/56564725?v=4" width="80;" alt="a-mnich"/>
             <br />
             <sub><b>Alexander Mnich</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/alayham">
             <img src="https://avatars.githubusercontent.com/u/518776?v=4" width="80;" alt="alayham"/>
@@ -560,15 +625,15 @@
             <br />
             <sub><b>Shawn Salat</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/royshreyaa">
             <img src="https://avatars.githubusercontent.com/u/139828242?v=4" width="80;" alt="royshreyaa"/>
             <br />
             <sub><b>Null</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/Smexhy">
             <img src="https://avatars.githubusercontent.com/u/4880625?v=4" width="80;" alt="Smexhy"/>
@@ -598,20 +663,20 @@
         </a>
     </td>
     <td align="center">
-        <a href="https://github.com/AmadeusGraves">
-            <img src="https://avatars.githubusercontent.com/u/18572939?v=4" width="80;" alt="AmadeusGraves"/>
+        <a href="https://github.com/twsouthwick">
+            <img src="https://avatars.githubusercontent.com/u/583206?v=4" width="80;" alt="twsouthwick"/>
             <br />
-            <sub><b>Ángel Fernández Sánchez</b></sub>
+            <sub><b>Taylor Southwick</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/turnrye">
             <img src="https://avatars.githubusercontent.com/u/701035?v=4" width="80;" alt="turnrye"/>
             <br />
             <sub><b>Ryan Turner</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/rubjo">
             <img src="https://avatars.githubusercontent.com/u/42270947?v=4" width="80;" alt="rubjo"/>
@@ -646,6 +711,13 @@
             <br />
             <sub><b>Nicholas Malcolm</b></sub>
         </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/stinkybernie">
+            <img src="https://avatars.githubusercontent.com/u/155188453?v=4" width="80;" alt="stinkybernie"/>
+            <br />
+            <sub><b>Michael D</b></sub>
+        </a>
     </td></tr>
 <tr>
     <td align="center">
@@ -663,10 +735,10 @@
         </a>
     </td>
     <td align="center">
-        <a href="https://github.com/ethan-hann">
-            <img src="https://avatars.githubusercontent.com/u/36464732?v=4" width="80;" alt="ethan-hann"/>
+        <a href="https://github.com/AmadeusGraves">
+            <img src="https://avatars.githubusercontent.com/u/18572939?v=4" width="80;" alt="AmadeusGraves"/>
             <br />
-            <sub><b>Ethan Hann</b></sub>
+            <sub><b>Ángel Fernández Sánchez</b></sub>
         </a>
     </td>
     <td align="center">
@@ -791,6 +863,13 @@
             <sub><b>Xert</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/maximemoreillon">
+            <img src="https://avatars.githubusercontent.com/u/29086128?v=4" width="80;" alt="maximemoreillon"/>
+            <br />
+            <sub><b>Maxime Moreillon</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/emiran-orange">
             <img src="https://avatars.githubusercontent.com/u/71817149?v=4" width="80;" alt="emiran-orange"/>
@@ -811,6 +890,14 @@
             <br />
             <sub><b>Dylan Bersans</b></sub>
         </a>
+    </td></tr>
+<tr>
+    <td align="center">
+        <a href="https://github.com/dyauss">
+            <img src="https://avatars.githubusercontent.com/u/50002238?v=4" width="80;" alt="dyauss"/>
+            <br />
+            <sub><b>Thandy Norberto</b></sub>
+        </a>
     </td>
     <td align="center">
         <a href="https://github.com/dougaldhub">
@@ -818,8 +905,7 @@
             <br />
             <sub><b>Doug Lock</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/dkyeremeh">
             <img src="https://avatars.githubusercontent.com/u/52928432?v=4" width="80;" alt="dkyeremeh"/>
@@ -847,7 +933,8 @@
             <br />
             <sub><b>David</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/clsty">
             <img src="https://avatars.githubusercontent.com/u/129247596?v=4" width="80;" alt="clsty"/>
@@ -861,8 +948,7 @@
             <br />
             <sub><b>Bumsoo Kim</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/BhasherBEL">
             <img src="https://avatars.githubusercontent.com/u/45831883?v=4" width="80;" alt="BhasherBEL"/>
@@ -890,7 +976,8 @@
             <br />
             <sub><b>Artyom</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/alydemah">
             <img src="https://avatars.githubusercontent.com/u/652035?v=4" width="80;" alt="alydemah"/>
@@ -904,8 +991,7 @@
             <br />
             <sub><b>5idereal</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/0n1cOn3">
             <img src="https://avatars.githubusercontent.com/u/27576311?v=4" width="80;" alt="0n1cOn3"/>
@@ -913,13 +999,6 @@
             <sub><b>0n1cOn3</b></sub>
         </a>
     </td>
-    <td align="center">
-        <a href="https://github.com/maximemoreillon">
-            <img src="https://avatars.githubusercontent.com/u/29086128?v=4" width="80;" alt="maximemoreillon"/>
-            <br />
-            <sub><b>Maxime Moreillon</b></sub>
-        </a>
-    </td>
     <td align="center">
         <a href="https://github.com/Glitch3dPenguin">
             <img src="https://avatars.githubusercontent.com/u/3271160?v=4" width="80;" alt="Glitch3dPenguin"/>
@@ -940,15 +1019,15 @@
             <br />
             <sub><b>Мирослав Асенов</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/luispabon">
             <img src="https://avatars.githubusercontent.com/u/6388823?v=4" width="80;" alt="luispabon"/>
             <br />
             <sub><b>Luis Pabon</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/LeoColman">
             <img src="https://avatars.githubusercontent.com/u/1577251?v=4" width="80;" alt="LeoColman"/>
@@ -983,15 +1062,15 @@
             <br />
             <sub><b>Jemy SCHNEPP</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/jjmung">
             <img src="https://avatars.githubusercontent.com/u/6049600?v=4" width="80;" alt="jjmung"/>
             <br />
             <sub><b>JJ Munguia</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/b1thunt3r">
             <img src="https://avatars.githubusercontent.com/u/791091?v=4" width="80;" alt="b1thunt3r"/>
@@ -1026,21 +1105,28 @@
             <br />
             <sub><b>Harald Töpfer</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/gbrown09">
             <img src="https://avatars.githubusercontent.com/u/3360055?v=4" width="80;" alt="gbrown09"/>
             <br />
             <sub><b>Garrett Brown</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/FormatToday">
             <img src="https://avatars.githubusercontent.com/u/20515769?v=4" width="80;" alt="FormatToday"/>
             <br />
             <sub><b>FormatToday</b></sub>
         </a>
+    </td>
+    <td align="center">
+        <a href="https://github.com/ethan-hann">
+            <img src="https://avatars.githubusercontent.com/u/36464732?v=4" width="80;" alt="ethan-hann"/>
+            <br />
+            <sub><b>Ethan Hann</b></sub>
+        </a>
     </td></tr>
 </table>
 <!-- readme: contributors -end -->

docs/deployment.md

@@ -7,7 +7,7 @@ Welcome to Dashy, so glad you're here :) Deployment is super easy, and there are
 If you want to skip the fuss, and [get straight down to it](/docs/quick-start.md), then you can spin up a new instance of Dashy by running:
 
 ```bash
-docker run -p 8080:80 lissy93/dashy
+docker run -p 8080:8080 lissy93/dashy
 ```
 
 See [Management Docs](/docs/management.md) for info about securing, monitoring, updating, health checks, auto starting, web server configuration, etc
@@ -67,8 +67,8 @@ Dashy has a built container image hosted on [Docker Hub](https://hub.docker.com/
 
 ```bash
 docker run -d \
-  -p 8080:80 \
-  -v /root/my-local-conf.yml:/app/public/conf.yml \
+  -p 8080:8080 \
+  -v /root/my-local-conf.yml:/app/user-data/conf.yml \
   --name my-dashboard \
   --restart=always \
   lissy93/dashy:latest
@@ -110,9 +110,9 @@ services:
     container_name: Dashy
     # Pass in your config file below, by specifying the path on your host machine
     # volumes:
-      # - /root/my-config.yml:/app/public/conf.yml
+      # - /root/my-config.yml:/app/user-data/conf.yml
     ports:
-      - 4000:80
+      - 4000:8080
     # Set any environmental variables
     environment:
       - NODE_ENV=production
@@ -166,8 +166,8 @@ Installing dashy is really simply and fast:
 
 ```bash
 docker run -d \
-  -p 4000:80 \
-  -v /volume1/docker/dashy/my-local-conf.yml:/app/public/conf.yml \
+  -p 4000:8080 \
+  -v /volume1/docker/dashy/my-local-conf.yml:/app/user-data/conf.yml \
   --name dashy \
   --restart=always \
   lissy93/dashy:latest
@@ -182,7 +182,7 @@ dashy should be up within 1-2min after you've started the install task procedure
 If you do not want to use Docker, you can run Dashy directly on your host system. For this, you will need both [git](https://git-scm.com/downloads) and the latest or LTS version of [Node.js](https://nodejs.org/) installed, and optionally [yarn](https://yarnpkg.com/)
 
 1. Get Code: `git clone https://github.com/Lissy93/dashy.git` and `cd dashy`
-2. Configuration: Fill in you're settings in `./public/conf.yml`
+2. Configuration: Fill in you're settings in `./user-data/conf.yml`
 3. Install dependencies: `yarn`
 4. Build: `yarn build`
 5. Run: `yarn start`

docs/developing.md

@@ -51,7 +51,7 @@ Dashy should now be being served on <http://localhost:8080/>. Hot reload is enab
 
 #### Utils and Checks
 
-- **`yarn validate-config`** - If you have quite a long configuration file, you may wish to check that it's all good to go, before deploying the app. This can be done with `yarn validate-config` or `docker exec -it [container-id] yarn validate-config`. Your config file needs to be in `/public/conf.yml` (or within your Docker container at `/app/public/conf.yml`). This will first check that your YAML is valid, and then validates it against Dashy's [schema](https://github.com/Lissy93/dashy/blob/master/src/utils/ConfigSchema.js).
+- **`yarn validate-config`** - If you have quite a long configuration file, you may wish to check that it's all good to go, before deploying the app. This can be done with `yarn validate-config` or `docker exec -it [container-id] yarn validate-config`. Your config file needs to be in `/user-data/conf.yml` (or within your Docker container at `/app/user-data/conf.yml`). This will first check that your YAML is valid, and then validates it against Dashy's [schema](https://github.com/Lissy93/dashy/blob/master/src/utils/ConfigSchema.js).
 - **`yarn health-check`** - Checks that the application is up and running on it's specified port, and outputs current status and response times. Useful for integrating into your monitoring service, if you need to maintain high system availability
 
 #### Alternate Start Commands

docs/development-guides.md

@@ -104,7 +104,7 @@ If you are not comfortable with making pull requests, or do not want to modify t
 
 This section is for, adding a new setting to the config file.
 
-All of the users config is specified in `./public/conf.yml` - see [Configuring Docs](./configuring.md) for info.
+All of the users config is specified in `./user-data/conf.yml` - see [Configuring Docs](./configuring.md) for info.
 It's important to first ensure that there isn't a similar option already available, the new option is definitely necessary, and most importantly that it is fully backwards compatible.
 
 Next choose the appropriate section to place it under

docs/icons.md

@@ -167,7 +167,7 @@ You can also set an icon by passing in a valid URL pointing to the icons locatio
 
 ## Local Icons
 
-You may also want to store your icons locally, bundled within Dashy so that there is no reliance on outside services. This can be done by putting the icons within Dashy's `./public/item-icons/` directory. If you are using Docker, then the easiest option is to map a volume from your host system, for example: `-v /local/image/directory:/app/public/item-icons/`. To reference an icon stored locally, just specify it's name and extension. For example, if my icon was stored in `/app/public/item-icons/maltrail.png`, then I would just set `icon: maltrail.png`.
+You may also want to store your icons locally, bundled within Dashy so that there is no reliance on outside services. This can be done by putting the icons within Dashy's `./user-data/item-icons/` directory. If you are using Docker, then the easiest option is to map a volume from your host system, for example: `-v /local/image/directory:/app/user-data/item-icons/`. To reference an icon stored locally, just specify it's name and extension. For example, if my icon was stored in `/app/user-data/item-icons/maltrail.png`, then I would just set `icon: maltrail.png`.
 
 You can also use sub-folders within the `item-icons` directory to keep things organized. You would then specify an icon with it's folder name slash image name. For example: `networking/monit.png`
 
@@ -187,7 +187,7 @@ If you don't wish for a given item or section to have an icon, just leave out th
 
 ## Icon Collections and Resources
 
-The following websites provide good-quality, free icon sets. To use any of these icons, either copy the link to the raw icon (it should end in `.svg` or `.png`) and paste it as your `icon`, or download and save the icons in `/public/item-icons` / mapped Docker volume. Full credit to the authors, please see the licenses for each service for usage and copyright information.
+The following websites provide good-quality, free icon sets. To use any of these icons, either copy the link to the raw icon (it should end in `.svg` or `.png`) and paste it as your `icon`, or download and save the icons in `/user-data/item-icons` / mapped Docker volume. Full credit to the authors, please see the licenses for each service for usage and copyright information.
 
 - [Icons for Self-Hosted Apps](https://thehomelab.wiki/books/helpful-tools-resources/page/icons-for-self-hosted-dashboards) - 350+ high-quality icons for commonly self-hosted services
 - [SVG Box](https://svgbox.net/iconsets/) - Cryptocurrency, social media apps and flag icons

docs/management.md

@@ -30,11 +30,11 @@ _The following article is a primer on managing self-hosted apps. It covers every
 
 Although not essential, you will most likely want to provide several assets to your running app.
 
-This is easy to do using [Docker Volumes](https://docs.docker.com/storage/volumes/), which lets you share a file or directory between your host system, and the container. Volumes are specified in the Docker run command, or Docker compose file, using the `--volume` or `-v` flags. The value of which consists of the path to the file / directory on your host system, followed by the destination path within the container. Fields are separated by a colon (`:`), and must be in the correct order. For example: `-v ~/alicia/my-local-conf.yml:/app/public/conf.yml`
+This is easy to do using [Docker Volumes](https://docs.docker.com/storage/volumes/), which lets you share a file or directory between your host system, and the container. Volumes are specified in the Docker run command, or Docker compose file, using the `--volume` or `-v` flags. The value of which consists of the path to the file / directory on your host system, followed by the destination path within the container. Fields are separated by a colon (`:`), and must be in the correct order. For example: `-v ~/alicia/my-local-conf.yml:/app/user-data/conf.yml`
 
 In Dashy, commonly configured resources include:
 
-- `./public/conf.yml` - Your main application config file
+- `./user-data/conf.yml` - Your main application config file
 - `./public/item-icons` - A directory containing your own icons. This allows for offline access, and better performance than fetching from a CDN
 - Also within `./public` you'll find standard website assets, including `favicon.ico`, `manifest.json`, `robots.txt`, etc. There's no need to pass these in, but you can do so if you wish
 - `/src/styles/user-defined-themes.scss` - A stylesheet for applying custom CSS to your app. You can also write your own themes here.
@@ -197,7 +197,9 @@ docker run --rm -v some_volume:/volume -v /tmp:/backup alpine sh -c "rm -rf /vol
 
 ### Dashy-Specific Backup
 
-Since Dashy is open source, and freely available, providing you're configuration data is passed in as volumes, there shouldn't be any need to backup the main container. Your main config file, and any assets you're using should be kept backed up, preferably in at least two places, and you should ensure that you can easily restore from backup, if needed.
+All configuration and dashboard settings are stored in your `user-data/conf.yml` file. If you provide additional assets (like icons, fonts, themes, etc), these will also live in the `user-data` directory. So to backup all Dashy data, this is the only directory you need to backup.
+
+Since Dashy is open source, there shouldn't be any need to backup the main container.
 
 Dashy also has a built-in cloud backup feature, which is free for personal users, and will let you make and restore fully encrypted backups of your config directly through the UI. To learn more, see the [Cloud Backup Docs](/docs/backup-restore.md)
 
@@ -238,7 +240,7 @@ Once you've generated your SSL cert, you'll need to pass it to Dashy. This can b
 
 ```bash
 docker run -d \
-  -p 8080:80 \
+  -p 8080:8080 \
   -v ~/my-private-key.key:/etc/ssl/certs/dashy-priv.key:ro \
   -v ~/my-public-key.pem:/etc/ssl/certs/dashy-pub.pem:ro \
   lissy93/dashy:latest
@@ -276,9 +278,9 @@ services:
     container_name: Dashy
     image: lissy93/dashy
     volumes:
-      - /root/my-config.yml:/app/public/conf.yml
+      - /root/my-config.yml:/app/user-data/conf.yml
     ports:
-      - 4000:80
+      - 4000:8080
     environment:
       - BASE_URL=/my-dashboard
     restart: unless-stopped
@@ -550,7 +552,7 @@ upstream dashy {
 }
 
 server {
-  listen         80;
+  listen         8080;
   server_name    dashy.mydomain.com;
 
   # Setup SSL
@@ -577,7 +579,7 @@ Similarly, a basic `Caddyfile` might look like:
 
 ```text
 dashy.example.com {
-    reverse_proxy / nginx:80
+    reverse_proxy / nginx:8080
 }
 ```
 
@@ -614,7 +616,7 @@ To prevent known container escape vulnerabilities, which typically end in escala
 Docker enables you to limit resource consumption (CPU, memory, disk) on a per-container basis. This not only enhances system performance, but also prevents a compromised container from consuming a large amount of resources, in order to disrupt service or perform malicious activities. To learn more, see the [Resource Constraints Docs](https://docs.docker.com/config/containers/resource_constraints/)
 
 For example, to run Dashy with max of 1GB ram, and max of 50% of 1 CP core:
-`docker run -d -p 8080:80 --cpus=".5" --memory="1024m" lissy93/dashy:latest`
+`docker run -d -p 8080:8080 --cpus=".5" --memory="1024m" lissy93/dashy:latest`
 
 ### Don't Run as Root
 
@@ -629,7 +631,7 @@ One of the best ways to prevent privilege escalation attacks, is to configure th
 You can specify a user, using the [`--user` param](https://docs.docker.com/engine/reference/run/#user), and should include the user ID (`UID`), which can be found by running `id -u`, and the and the group ID (`GID`), using `id -g`.
 
 With Docker run, you specify it like:
-`docker run --user 1000:1000 -p 8080:80 lissy93/dashy`
+`docker run --user 1000:1000 -p 8080:8080 lissy93/dashy`
 
 Of if you're using Docker-compose, you could use an environmental variable
 
@@ -639,7 +641,7 @@ services:
   dashy:
     image: lissy93/dashy
     user: ${CURRENT_UID}
-    ports: [ 4000:80 ]
+    ports: [ 4000:8080 ]
 ```
 
 And then to set the variable, and start the container, run: `CURRENT_UID=$(id -u):$(id -g) docker-compose up`
@@ -659,7 +661,7 @@ version: "3.8"
 services:
   dashy:
     image: lissy93/dashy
-    ports: [ 4000:80 ]
+    ports: [ 4000:8080 ]
     cap_drop:
     - ALL
     cap_add:
@@ -675,7 +677,7 @@ services:
 To prevent processes inside the container from getting additional privileges, pass in the `--security-opt=no-new-privileges:true` option to the Docker run command (see [docs](https://docs.docker.com/engine/reference/run/#security-configuration)).
 
 Run Command:
-`docker run --security-opt=no-new-privileges:true -p 8080:80 lissy93/dashy`
+`docker run --security-opt=no-new-privileges:true -p 8080:8080 lissy93/dashy`
 
 Docker Compose
 
@@ -701,14 +703,14 @@ You can specify that a specific volume should be read-only by appending `:ro` to
 
 ```bash
 docker run -d \
-  -p 8080:80 \
-  -v ~/dashy-conf.yml:/app/public/conf.yml \
+  -p 8080:8080 \
+  -v ~/dashy-conf.yml:/app/user-data/conf.yml \
   -v ~/dashy-icons:/app/public/item-icons:ro \
   -v ~/dashy-theme.scss:/app/src/styles/user-defined-themes.scss:ro \
   lissy93/dashy:latest
 ```
 
-You can also prevent a container from writing any changes to volumes on your host's disk, using the `--read-only` flag. Although, for Dashy, you will not be able to write config changes to disk, when edited through the UI with this method. You could make this work, by specifying the config directory as a temp write location, with `--tmpfs /app/public/conf.yml` - but  that this will not write the volume back to your host.
+You can also prevent a container from writing any changes to volumes on your host's disk, using the `--read-only` flag. Although, for Dashy, you will not be able to write config changes to disk, when edited through the UI with this method. You could make this work, by specifying the config directory as a temp write location, with `--tmpfs /app/user-data/conf.yml` - but  that this will not write the volume back to your host.
 
 ### Set the Logging Level
 
@@ -778,8 +780,8 @@ Create a new file in `/etc/nginx/sites-enabled/dashy`
 
 ```text
 server {
-	listen 80;
-	listen [::]:80;
+	listen 8080;
+	listen [::]:8080;
 
 	root /var/www/dashy/html;
 	index index.html;
@@ -898,7 +900,7 @@ Similar to above, you'll first need to fork and clone Dashy to your local system
 
 Then, either use Dashy's default [`Dockerfile`](https://github.com/Lissy93/dashy/blob/master/Dockerfile) as is, or modify it according to your needs.
 
-To build and deploy locally, first build the app with: `docker build -t dashy .`, and then start the app with `docker run -p 8080:80 --name my-dashboard dashy`.  Or modify the `docker-compose.yml` file, replacing `image: lissy93/dashy` with `build: .` and run `docker compose up`.
+To build and deploy locally, first build the app with: `docker build -t dashy .`, and then start the app with `docker run -p 8080:8080 --name my-dashboard dashy`.  Or modify the `docker-compose.yml` file, replacing `image: lissy93/dashy` with `build: .` and run `docker compose up`.
 
 Your container should now be running, and will appear in the list when you run `docker container ls –a`. If you'd like to enter the container, run `docker exec -it [container-id] /bin/ash`.
 

docs/privacy.md

@@ -192,7 +192,7 @@ The following section outlines all data that is stored in the browsers, as cooki
 > [Local storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) is persisted between sessions, and only deleted when manually removed
 
 - `LANGUAGE` - The locale to show app text in
-- `HIDE_WELCOME_BANNER` - Set to true once user dismissed welcome message, so that it's not shown again
+- `HIDE_INFO_NOTIFICATION` - Set to true once user dismissed welcome message, so that it's not shown again
 - `LAYOUT_ORIENTATION` - Preferred section layout, either horizontal, vertical or auto
 - `COLLAPSE_STATE` - Remembers which sections are collapsed
 - `ICON_SIZE` - Size of items, either small, medium or large

docs/quick-start.md

@@ -2,7 +2,7 @@
 
 Welcome to Dashy! So glad you're here 😊 In a couple of minutes, you'll have your new dashboard up and running 🚀
 
-**TLDR;** Run `docker run -p 8080:80 lissy93/dashy`, then open `http://localhost:8080`
+**TLDR;** Run `docker run -p 8080:8080 lissy93/dashy`, then open `http://localhost:8080`
 
 ---
 
@@ -19,8 +19,8 @@ To pull the latest image, and build and start the app run:
 
 ```bash
 docker run -d \
-  -p 8080:80 \
-  -v ~/my-conf.yml:/app/public/conf.yml \
+  -p 8080:8080 \
+  -v ~/my-conf.yml:/app/user-data/conf.yml \
   --name my-dashboard \
   --restart=always \
   lissy93/dashy:latest
@@ -32,15 +32,41 @@ Your dashboard should now be up and running at `http://localhost:8080` (or your
 
 ---
 
-## 3. Configure
+## 3. User Data Directory
+
+Your config file should be placed inside `user-data/` (in Docker, that's `/app/user-data/`).
+
+This directory can also contain some optional assets you wish to use within your dashboard, like icons, fonts, styles, scripts, etc.
+
+Any files placed here will be served up to the root of the domain, and override the contents of `public/`.
+For example, if you had `user-data/favicon.ico` this would be accessible at `http://my-dashy-instance.local/favicon.ico`
+
+Example Files in `user-data`:
+- `conf.yml` - This is the only file that is compulsary, it's your main Dashy config
+- `**.yml` - Include more config files, if you'd like to have multiple pages, see [Multi-page support](/docs/pages-and-sections.md#multi-page-support) for docs
+- `favicon.ico` - The default favicon, shown in the browser's tab title
+- `initialization.html` - Static HTML page displayed before the app has finished compiling, see [`public/initialization.html`](https://github.com/Lissy93/dashy/blob/master/public/initialization.html)
+- `robots.txt` - Search engine crawl rules, override this if you want your dashboard to be indexable
+- `manifest.json` - PWA configuration file, for installing Dashy on mobile devices
+- `index.html` - The main index page which initializes the client-side app, copy it from [`/public/index.html`](https://github.com/Lissy93/dashy/blob/master/public/index.html)
+- `**.html` - Write your own HTML pages, and access them at `http://my-dashy-instance.local/my-page.html`
+- `fonts/` - Custom fonts (be sure to include the ones already in [`public/fonts`](https://github.com/Lissy93/dashy/tree/master/public/fonts)
+- `item-icons/` - To use your own icons for items on your dashboard, see [Icons --> Local Icons](/docs/icons.md#local-icons)
+- `web-icons/` - Override Dashy logo
+- `widget-resources/` - Fonts, icons and assets for custom widgets
+
+---
+
+## 4. Configure
 
 Now that you've got Dashy running, you are going to want to set it up with your own content.
-Config is written in [YAML Format](https://yaml.org/), and saved in [`/public/conf.yml`](https://github.com/Lissy93/dashy/blob/master/public/conf.yml).
+Config is written in [YAML Format](https://yaml.org/), and saved in [`/user-data/conf.yml`](https://github.com/Lissy93/dashy/blob/master/user-data/conf.yml).
 The format on the config file is pretty straight forward. There are three root attributes:
 
 - [`pageInfo`](https://github.com/Lissy93/dashy/blob/master/docs/configuring.md#pageinfo) - Dashboard meta data, like title, description, nav bar links and footer text
 - [`appConfig`](https://github.com/Lissy93/dashy/blob/master/docs/configuring.md#appconfig-optional) - Dashboard settings, like themes, authentication, language and customization
 - [`sections`](https://github.com/Lissy93/dashy/blob/master/docs/configuring.md#section) - An array of sections, each including an array of items
+- [`pages`](https://github.com/Lissy93/dashy/blob/master/docs/configuring.md#pages-optional) - Have multiples pages in your dashboard
 
 You can view a full list of all available config options in the [Configuring Docs](https://github.com/Lissy93/dashy/blob/master/docs/configuring.md).
 
@@ -72,15 +98,15 @@ sections: # An array of sections
 Notes:
 
 - You can use a Docker volume to pass a config file from your host system to the container
-  - E.g. `-v ./host-system/my-local-conf.yml:/app/public/conf.yml`
+  - E.g. `-v ./host-system/my-local-conf.yml:/app/user-data/conf.yml`
 - It's also possible to edit your config directly through the UI, and changes will be saved in this file
 - Check your config against Dashy's schema, with `docker exec -it [container-id] yarn validate-config`
 - You might find it helpful to look at some examples, a collection of which can be [found here](https://gist.github.com/Lissy93/000f712a5ce98f212817d20bc16bab10)
-- After editing your config, the app will rebuild in the background, which may take a minute
+- It's also possible to load a remote config, e.g. from a GitHub Gist
 
 ---
 
-## 4. Further Customisation
+## 5. Further Customisation
 
 Once you've got Dashy setup, you'll want to ensure the container is properly healthy, secured, backed up and kept up-to-date. All this is covered in the [Management Docs](https://github.com/Lissy93/dashy/blob/master/docs/management.md).
 
@@ -97,7 +123,7 @@ You might also want to check out the docs for specific features you'd like to us
 
 ---
 
-## 5. Final Note
+## 6. Final Note
 
 If you need any help or support in getting Dashy running, head over to the [Discussions](https://github.com/Lissy93/dashy/discussions) page. If you think you've found a bug, please do [raise it](https://github.com/Lissy93/dashy/issues/new/choose) so it can be fixed. For contact options, see the [Support Page](https://github.com/Lissy93/dashy/blob/master/.github/SUPPORT.md).
 
@@ -118,7 +144,7 @@ yarn build # Build the app
 yarn start # Start the app
 ```
 
-Then edit `./public/conf.yml` and rebuild the app with `yarn build`
+Then edit `./user-data/conf.yml`
 
 ---
 
@@ -129,7 +155,7 @@ Don't have a server? No problem! You can run Dashy for free on Netlify (as well
 1. Fork Dashy's repository on GitHub
 2. [Log in](app.netlify.com/login/) to Netlify with GitHub
 3. Click "New site from Git" and select your forked repo, then click **Deploy**!
-4. You can then edit the config in `./public/conf.yml` in your repo, and Netlify will rebuild the app
+4. You can then edit the config in `./user-data/conf.yml` in your repo, and Netlify will rebuild the app
 
 ---
 

docs/showcase.md

@@ -3,6 +3,14 @@
 | 💗 Got a sweet dashboard? Submit it to the showcase! 👉 [See How](#submitting-your-dashboard) |
 |-|
 
+## MNDashboard 
+
+> By [@mahrnet](https://github.com/mahrnet) <sup>Re: [#1491](https://github.com/Lissy93/dashy/issues/1491)</sup>
+
+![screenshot-MNDashboard](https://i.ibb.co/mCJRZgp/d2-At-QO4c-PT4u.png)
+
+---
+
 ## Home Lab 2.0
 
 ![screenshot-homelab](https://raw.githubusercontent.com/Lissy93/dashy/master/docs/showcase/1-home-lab-material.png)

docs/troubleshooting.md

@@ -156,7 +156,7 @@ If you're getting an error about scenarios, then you've likely installed the wro
 Alternatively, as a workaround, you have several options:
 
 - Try using [NPM](https://www.npmjs.com/get-npm) instead: So clone, cd, then run `npm install`, `npm run build` and `npm start`
-- Try using [Docker](https://www.docker.com/get-started) instead, and all of the system setup and dependencies will already be taken care of. So from within the directory, just run `docker build -t lissy93/dashy .` to build, and then use docker start to run the project, e.g: `docker run -it -p 8080:80 lissy93/dashy` (see the [deploying docs](https://github.com/Lissy93/dashy/blob/master/docs/deployment.md#deploy-with-docker) for more info)
+- Try using [Docker](https://www.docker.com/get-started) instead, and all of the system setup and dependencies will already be taken care of. So from within the directory, just run `docker build -t lissy93/dashy .` to build, and then use docker start to run the project, e.g: `docker run -it -p 8080:8080 lissy93/dashy` (see the [deploying docs](https://github.com/Lissy93/dashy/blob/master/docs/deployment.md#deploy-with-docker) for more info)
 
 ---
 
@@ -234,7 +234,7 @@ Version 2.0.4 introduced changes to how the config is read, and the app is build
 
 ```yaml
 volumes:
-- /srv/dashy/conf.yml:/app/public/conf.yml
+- /srv/dashy/conf.yml:/app/user-data/conf.yml
 - /srv/dashy/item-icons:/app/public/item-icons
 ```
 
@@ -273,12 +273,12 @@ See also: #479, #409, #507, #491, #341, #520
 Error response from daemon: OCI runtime create failed: container_linux.go:380:
 starting container process caused: process_linux.go:545: container init caused:
 rootfs_linux.go:76: mounting "/home/ubuntu/my-conf.yml" to rootfs at
-"/app/public/conf.yml" caused: mount through procfd: not a directory:
+"/app/user-data/conf.yml" caused: mount through procfd: not a directory:
 unknown: Are you trying to mount a directory onto a file (or vice-versa)?
 Check if the specified host path exists and is the expected type.
 ```
 
-If you get an error similar to the one above, you are mounting a directory to the config file's location, when a plain file is expected. Create a YAML file, (`touch my-conf.yml`), populate it with a sample config, then pass it as a volume: `-v ./my-local-conf.yml:/app/public/conf.yml`
+If you get an error similar to the one above, you are mounting a directory to the config file's location, when a plain file is expected. Create a YAML file, (`touch my-conf.yml`), populate it with a sample config, then pass it as a volume: `-v ./my-local-conf.yml:/app/user-data/conf.yml`
 
 ---
 

docs/widgets.md

@@ -66,6 +66,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Gluetun VPN Info](#gluetun-vpn-info)
   - [Drone CI Build](#drone-ci-builds)
   - [Linkding](#linkding)
+  - [Uptime Kuma](#uptime-kuma)
 - **[System Resource Monitoring](#system-resource-monitoring)**
   - [CPU Usage Current](#current-cpu-usage)
   - [CPU Usage Per Core](#cpu-usage-per-core)
@@ -91,6 +92,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Widget Usage Guide](#widget-usage-guide)
   - [Continuous Updates](#continuous-updates)
   - [Proxying Requests](#proxying-requests)
+  - [Handling Secrets](#handling-secrets)
   - [Setting Timeout](#setting-timeout)
   - [Adding Labels](#adding-labels)
   - [Ignoring Errors](#ignoring-errors)
@@ -1553,6 +1555,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
@@ -2113,7 +2128,9 @@ This will show the list of nodes.
       token_name: dashy
       token_uuid: bfb152df-abcd-abcd-abcd-ccb95a472d01
 ```
+
 This will show the list of VMs, with a title and a linked fotter, hiding VM templates.
+
 ```yaml
   - type: proxmox-lists
     useProxy: true 
@@ -2130,11 +2147,7 @@ This will show the list of VMs, with a title and a linked fotter, hiding VM temp
       footer_as_link: true
       hide_templates: 1
 ```
-#### Troubleshooting
-- **404 Error in development mode**: The error might disappear in production mode `yarn start`
-- **500 Error in production mode**: Try adding the certificate authority (CA) certificate of your Proxmox host to Node.js. 
-  - Download the Proxmox CA certificate to your Dashy host.
-  - Export environment variable `NODE_EXTRA_CA_CERTS` and set its value to the path of the downloaded CA certificate. Example:  `export NODE_EXTRA_CA_CERTS=/usr/local/share/ca-certificates/devlab_ca.pem`
+
 #### Info
 
 - **CORS**: 🟠 Proxied
@@ -2143,6 +2156,12 @@ This will show the list of VMs, with a title and a linked fotter, hiding VM temp
 - **Host**: Self-Hosted (see [Proxmox Virtual Environment](https://proxmox.com/en/proxmox-ve))
 - **Privacy**: _See [Proxmox's Privacy Policy](https://proxmox.com/en/privacy-policy)_
 
+#### Troubleshooting
+- **404 Error in development mode**: The error might disappear in production mode `yarn start`
+- **500 Error in production mode**: Try adding the certificate authority (CA) certificate of your Proxmox host to Node.js. 
+  - Download the Proxmox CA certificate to your Dashy host.
+  - Export environment variable `NODE_EXTRA_CA_CERTS` and set its value to the path of the downloaded CA certificate. Example:  `export NODE_EXTRA_CA_CERTS=/usr/local/share/ca-certificates/devlab_ca.pem`
+
 ---
 
 ### Sabnzbd
@@ -2225,7 +2244,7 @@ Display the last builds from a [Drone CI](https://www.drone.ci) instance. A self
 **Field** | **Type** | **Required** | **Description**
 --- | --- | --- | ---
 **`host`** | `string` |  Required | The hostname of the Drone CI instance.
-**`apiKey`** | `string` |  Required | The API key (https://<your-drone-instance>/account).
+**`apiKey`** | `string` |  Required | The API key (https://[your-drone-instance]/account).
 **`limit`** | `integer` | _Optional_ | Limit the amounts of listed builds.
 **`repo`** | `string` | _Optional_ | Show only builds of the specified repo
 
@@ -2259,7 +2278,7 @@ Linkding is a self-hosted bookmarking service, which has a clean interface and i
 **Field** | **Type** | **Required** | **Description**
 --- | --- | --- | ---
 **`host`** | `string` |  Required | The hostname of the Drone CI instance.
-**`apiKey`** | `string` |  Required | The API key (https://<your-linkding-instance>/settings/integrations).
+**`apiKey`** | `string` |  Required | The API key (https://your-linkding-instance/settings/integrations).
 **`tags`** | `list of string` | _Optional_ | Filter the links by tag.
 
 #### Example
@@ -2285,6 +2304,37 @@ Linkding is a self-hosted bookmarking service, which has a clean interface and i
 
 ---
 
+### Uptime Kuma
+
+[Uptime Kuma](https://github.com/louislam/uptime-kuma) is an easy-to-use self-hosted monitoring tool.
+
+#### Options
+
+| **Field**    | **Type** | **Required** | **Description**                                                          |
+| ------------ | -------- | ------------ | ------------------------------------------------------------------------ |
+| **`url`**    | `string` | Required     | The URL of the Uptime Kuma instance                                      |
+| **`apiKey`** | `string` | Required     | The API key (see https://github.com/louislam/uptime-kuma/wiki/API-Keys). |
+
+#### Example
+
+```yaml
+- type: uptime-kuma
+  useProxy: true
+  options:
+    apiKey: uk2_99H0Yd3I2pPNIRfn0TqBFu4g5q85R1Mh75yZzw6H
+    url: http://192.168.1.106:3691/metrics
+```
+
+#### Info
+
+- **CORS**: 🟢 Enabled
+- **Auth**: 🟢 Required
+- **Price**: 🟢 Free
+- **Host**: Self-Hosted (see [Uptime Kuma](https://github.com/louislam/uptime-kuma) )
+- **Privacy**: _See [Uptime Kuma](https://github.com/louislam/uptime-kuma)_
+
+---
+
 ## System Resource Monitoring
 
 ### Glances
@@ -2807,6 +2857,32 @@ Vary: Origin
 
 ---
 
+### Handling Secrets
+
+Some widgets require you to pass potentially sensetive info such as API keys. The `conf.yml` is not ideal for this, as it's stored in plaintext.
+Instead, for secrets you should use environmental vairables.
+
+You can do this, by setting the environmental variable name as the value, instead of the actual key, and then setting that env var in your container or local environment.
+
+The key can be named whatever you like, but it must start with `VUE_APP_` (to be picked up by Vue). If you need to update any of these values, a rebuild is required (this can be done under the Config menu in the UI, or by running `yarn build` then restarting the container).
+
+For more infomation about setting and managing your environmental variables, see [Management Docs --> Environmental Variables](/docs/management.md#passing-in-environmental-variables).
+
+For example:
+
+```yaml
+- type: weather
+  options:
+    apiKey: VUE_APP_WEATHER_TOKEN
+    city: London
+    units: metric
+    hideDetails: true
+```
+
+Then, set `VUE_APP_WEATHER_TOKEN='xxx'`
+
+---
+
 ### Setting Timeout
 
 If the endpoint you are requesting data from is slow to respond, you may see a timeout error in the console. This can easily be fixed by specifying the `timeout` property on the offending widget. This should be an integer value, in milliseconds. By default timeout is `2500` ms (2½ seconds).

netlify.toml

@@ -8,14 +8,12 @@
   command = "yarn build"
   publish = "dist"
   functions = "services/serverless-functions"
-  environment = { NODE_VERSION = "16.13.2" }
 
-# Site info, used for the 1-Click deploy page
-[template.environment]
-  STATUSKIT_PAGE_TITLE = "Dashy"
-  STATUSKIT_COMPANY_LOGO = "https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/logo.png"
-  STATUSKIT_SUPPORT_CONTACT_LINK = "https://github.com/lissy93/dashy"
-  STATUSKIT_RESOURCES_LINK = "https://dashy.to/docs"
+# Environmental variables for build command
+[build.environment]
+  NODE_VERSION = "20.11.1"
+  NODE_OPTIONS = "--openssl-legacy-provider"
+  YARN_FLAGS = "--ignore-engines"
 
 # Redirect the Node endpoints to serverless functions
 [[redirects]]

package.json

@@ -1,21 +1,20 @@
 {
-  "name": "Dashy",
-  "version": "2.1.2",
+  "name": "dashy",
+  "version": "3.1.0",
   "license": "MIT",
   "main": "server",
   "author": "Alicia Sykes <alicia@omg.lol> (https://aliciasykes.com)",
   "scripts": {
-    "start": "npm-run-all --parallel build-watch start",
-    "dev": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "start": "node server",
+    "dev": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build",
     "lint": "vue-cli-service lint",
     "pm2-start": "npx pm2 start server.js",
     "build-watch": "vue-cli-service build --watch --mode production",
-    "build-and-start": "npm-run-all --parallel build-watch start",
+    "build-and-start": "NODE_OPTIONS=--openssl-legacy-provider npm-run-all --parallel build start",
     "validate-config": "node services/config-validator",
     "health-check": "node services/healthcheck",
-    "dependency-audit": "npx improved-yarn-audit --ignore-dev-deps",
-    "static-start": "node server"
+    "dependency-audit": "npx improved-yarn-audit --ignore-dev-deps"
   },
   "dependencies": {
     "@babel/core": "^7.0.0",
@@ -27,14 +26,16 @@
     "connect-history-api-fallback": "^1.6.0",
     "crypto-js": "^4.2.0",
     "express": "^4.17.2",
+    "express-basic-auth": "^1.2.1",
     "frappe-charts": "^1.6.2",
     "js-yaml": "^4.1.0",
     "keycloak-js": "^20.0.3",
+    "oidc-client-ts": "^3.0.1",
     "register-service-worker": "^1.7.2",
     "remedial": "^1.0.8",
     "rss-parser": "3.13.0",
+    "simple-icons": "^10.4.0",
     "rsup-progress": "^3.2.0",
-    "simple-icons": "^7.19.0",
     "v-jsoneditor": "^1.4.5",
     "v-tooltip": "^2.1.3",
     "vue": "^2.7.0",
@@ -53,15 +54,18 @@
     "@vue/cli-plugin-babel": "^4.5.15",
     "@vue/cli-plugin-eslint": "^4.5.15",
     "@vue/cli-plugin-pwa": "^4.5.15",
-    "@vue/cli-service": "^4.5.15",
+    "@vue/cli-plugin-typescript": "^5.0.8",
+    "@vue/cli-service": "^4.5.19",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "^10.0.1",
+    "copy-webpack-plugin": "6.4.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-plugin-vue": "^7.9.0",
     "npm-run-all": "^4.1.5",
     "sass": "^1.38.0",
     "sass-loader": "^7.1.0",
+    "typescript": "^5.4.4",
     "vue-cli-plugin-yaml": "^1.0.2",
     "vue-svg-loader": "^0.16.0",
     "vue-template-compiler": "^2.7.0"

public/initialization.html

@@ -50,6 +50,14 @@
 
   <p class="time-note" id="note">This may take a minute or two</p>
 
+  <div class="why-am-i-seeing-this">
+    <h3>Why are you seeing this screen?</h3>
+    <p>
+      The app's built files aren't yet present in the /dist directory,
+      so this page is displayed while we compile the source.
+    </p>
+  </div>
+
   <style lang="css">
     /* Page Layout Styles */
     body,
@@ -60,7 +68,7 @@
     }
 
     body {
-      background: #141b33;
+      background: #0d1220;
       display: flex;
       flex-direction: column;
       justify-content: center;
@@ -194,15 +202,34 @@
     }
 
     .hide { display: none; }
+
+    .why-am-i-seeing-this {
+      color: #808080a6;
+      font-family: Tahoma, 'Trebuchet MS', sans-serif;
+      max-width: 25rem;
+      border: 2px solid #808080a6;
+      border-radius: 6px;
+      padding: 0.5rem;
+      position: absolute;
+      bottom: 1rem;
+      background: #8080800d;
+      font-size: 0.9rem;
+    }
+    .why-am-i-seeing-this h3 {
+      margin: 0 0 0.5rem 0;
+    }
+    .why-am-i-seeing-this p {
+      margin: 0;
+    }
   </style>
 
   <script>
-    const refreshRate = 8000;
-    // Refresh at interval
+    // Refresh the page every 10 seconds
+    const refreshRate = 10000;
     setTimeout(() => { location.reload(); }, refreshRate);
 
-     // Get current stage
-     let initStage = parseInt(sessionStorage.getItem('initStage') || 0);
+    // Get current stage
+    let initStage = parseInt(sessionStorage.getItem('initStage') || 0);
 
     // Check if stage in session storage is old, and if so, reset it
     const now = Math.round(Date.now()/1000);
@@ -262,4 +289,4 @@
   </script>
 </body>
 
-</html>
+</html>

server.js

@@ -6,19 +6,27 @@
  * */
 
 /* Import built-in Node server modules */
+const fs = require('fs');
+const os = require('os');
+const dns = require('dns');
 const http = require('http');
 const path = require('path');
 const util = require('util');
-const dns = require('dns');
-const os = require('os');
+const crypto = require('crypto');
+
+/* Import NPM dependencies */
+const yaml = require('js-yaml');
 
 /* Import Express + middleware functions */
 const express = require('express');
+const basicAuth = require('express-basic-auth');
 const history = require('connect-history-api-fallback');
 
 /* Kick of some basic checks */
 require('./services/update-checker'); // Checks if there are any updates available, prints message
-require('./services/config-validator'); // Include and kicks off the config file validation script
+
+let config = {}; // setup the config
+config = require('./services/config-validator'); // Include and kicks off the config file validation script
 
 /* Include route handlers for API endpoints */
 const statusCheck = require('./services/status-check'); // Used by the status check feature, uses GET
@@ -27,6 +35,7 @@ const rebuild = require('./services/rebuild-app'); // A script to programmatical
 const systemInfo = require('./services/system-info'); // Basic system info, for resource widget
 const sslServer = require('./services/ssl-server'); // TLS-enabled web server
 const corsProxy = require('./services/cors-proxy'); // Enables API requests to CORS-blocked services
+const getUser = require('./services/get-user'); // Enables server side user lookup
 
 /* Helper functions, and default config */
 const printMessage = require('./services/print-message'); // Function to print welcome msg on start
@@ -35,12 +44,15 @@ const ENDPOINTS = require('./src/utils/defaults').serviceEndpoints; // API endpo
 /* Checks if app is running within a container, from env var */
 const isDocker = !!process.env.IS_DOCKER;
 
-/* Checks env var for port. If undefined, will use Port 80 for Docker, or 4000 for metal */
-const port = process.env.PORT || (isDocker ? 80 : 4000);
+/* Checks env var for port. If undefined, will use Port 8080 for Docker, or 4000 for metal */
+const port = process.env.PORT || (isDocker ? 8080 : 4000);
 
 /* Checks env var for host. If undefined, will use 0.0.0.0 */
 const host = process.env.HOST || '0.0.0.0';
 
+/* Indicates for the webpack config, that running as a server */
+process.env.IS_SERVER = 'True';
+
 /* Attempts to get the users local IP, used as part of welcome message */
 const getLocalIp = () => {
   const dnsLookup = util.promisify(dns.lookup);
@@ -55,7 +67,7 @@ const printWelcomeMessage = () => {
       console.log(printMessage(ip, port, isDocker)); // eslint-disable-line no-console
     });
   } catch (e) {
-    // Fetching info for welcome message failed, print simple msg instead
+    // No clue what could of gone wrong here, but print fallback message if above failed
     console.log(`Dashy server has started (${port})`); // eslint-disable-line no-console
   }
 };
@@ -65,18 +77,72 @@ const printWarning = (msg, error) => {
   console.warn(`\x1b[103m\x1b[34m${msg}\x1b[0m\n`, error || ''); // eslint-disable-line no-console
 };
 
+/* Load appConfig.auth.users from config (if present) for authorization purposes */
+function loadUserConfig() {
+  try {
+    const filePath = path.join(__dirname, process.env.USER_DATA_DIR || 'user-data', 'conf.yml');
+    const fileContents = fs.readFileSync(filePath, 'utf8');
+    const data = yaml.load(fileContents);
+    return data?.appConfig?.auth?.users || null;
+  } catch (e) {
+    return [];
+  }
+}
+
+/* If HTTP auth is enabled, and no username/password are pre-set, then check passed credentials */
+function customAuthorizer(username, password) {
+  const sha256 = (input) => crypto.createHash('sha256').update(input).digest('hex').toUpperCase();
+  const generateUserToken = (user) => {
+    if (!user.user || (!user.hash && !user.password)) return '';
+    const strAndUpper = (input) => input.toString().toUpperCase();
+    const passwordHash = user.hash || sha256(process.env[user.password]);
+    const sha = sha256(strAndUpper(user.user) + strAndUpper(passwordHash));
+    return strAndUpper(sha);
+  };
+  if (password.startsWith('Bearer ')) {
+    const token = password.slice('Bearer '.length);
+    const users = loadUserConfig();
+    return users.some(user => generateUserToken(user) === token);
+  } else {
+    const users = loadUserConfig();
+    const userHash = sha256(password);
+    return users.some(user => (
+      user.user.toLowerCase() === username.toLowerCase() && user.hash.toUpperCase() === userHash
+    ));
+  }
+}
+
+/* If a username and password are set, setup auth for config access, otherwise skip */
+function getBasicAuthMiddleware() {
+  const configUsers = process.env.ENABLE_HTTP_AUTH ? loadUserConfig() : null;
+  const { BASIC_AUTH_USERNAME, BASIC_AUTH_PASSWORD } = process.env;
+  if (BASIC_AUTH_USERNAME && BASIC_AUTH_PASSWORD) {
+    return basicAuth({
+      users: { [BASIC_AUTH_USERNAME]: BASIC_AUTH_PASSWORD },
+      challenge: true,
+      unauthorizedResponse: () => 'Unauthorized - Incorrect username or password',
+    });
+  } else if ((configUsers && configUsers.length > 0)) {
+    return basicAuth({
+      authorizer: customAuthorizer,
+      challenge: true,
+      unauthorizedResponse: () => 'Unauthorized - Incorrect token',
+    });
+  } else {
+    return (req, res, next) => next();
+  }
+}
+
+const protectConfig = getBasicAuthMiddleware();
+
 /* A middleware function for Connect, that filters requests based on method type */
 const method = (m, mw) => (req, res, next) => (req.method === m ? mw(req, res, next) : next());
 
 const app = express()
   // Load SSL redirection middleware
   .use(sslServer.middleware)
-  // Serves up static files
-  .use(express.static(path.join(__dirname, 'dist')))
-  .use(express.static(path.join(__dirname, 'public'), { index: 'initialization.html' }))
   // Load middlewares for parsing JSON, and supporting HTML5 history routing
   .use(express.json({ limit: '1mb' }))
-  .use(history())
   // GET endpoint to run status of a given URL with GET request
   .use(ENDPOINTS.statusCheck, (req, res) => {
     try {
@@ -87,10 +153,11 @@ const app = express()
       printWarning(`Error running status check for ${req.url}\n`, e);
     }
   })
-  // POST Endpoint used to save config, by writing conf.yml to disk
+  // POST Endpoint used to save config, by writing config file to disk
   .use(ENDPOINTS.save, method('POST', (req, res) => {
     try {
       saveConfig(req.body, (results) => { res.end(results); });
+      config = req.body.config; // update the config
     } catch (e) {
       printWarning('Error writing config file to disk', e);
       res.end(JSON.stringify({ success: false, message: e }));
@@ -122,6 +189,25 @@ const app = express()
       res.end(JSON.stringify({ success: false, message: e }));
     }
   })
+  // GET endpoint to return user info
+  .use(ENDPOINTS.getUser, (req, res) => {
+    try {
+      const user = getUser(config, req);
+      res.end(JSON.stringify(user));
+    } catch (e) {
+      res.end(JSON.stringify({ success: false, message: e }));
+    }
+  })
+  // Middleware to serve any .yml files in USER_DATA_DIR with optional protection
+  .get('/*.yml', protectConfig, (req, res) => {
+    const ymlFile = req.path.split('/').pop();
+    res.sendFile(path.join(__dirname, process.env.USER_DATA_DIR || 'user-data', ymlFile));
+  })
+  // Serves up static files
+  .use(express.static(path.join(__dirname, process.env.USER_DATA_DIR || 'user-data')))
+  .use(express.static(path.join(__dirname, 'dist')))
+  .use(express.static(path.join(__dirname, 'public'), { index: 'initialization.html' }))
+  .use(history())
   // If no other route is matched, serve up the index.html with a 404 status
   .use((req, res) => {
     res.status(404).sendFile(path.join(__dirname, 'dist', 'index.html'));

services/config-validator.js

@@ -11,7 +11,7 @@ const schema = require('../src/utils/ConfigSchema.json');
 
 /* Tell AJV to use strict mode, and report all errors */
 const validatorOptions = {
-  strict: true,
+  strict: false,
   allowUnionTypes: true,
   allErrors: true,
 };
@@ -98,11 +98,14 @@ const printFileReadError = (e) => {
   }
 };
 
+let config = {};
+
 try { // Try to open and parse the YAML file
-  const config = yaml.load(fs.readFileSync('./public/conf.yml', 'utf8'));
+  config = yaml.load(fs.readFileSync(`./${process.env.USER_DATA_DIR || 'user-data'}/conf.yml`, 'utf8'));
   validate(config);
 } catch (e) { // Something went very wrong...
   setIsValidVariable(false);
   logToConsole(bigError());
   printFileReadError(e);
 }
+module.exports = config;

services/get-user.js

@@ -0,0 +1,15 @@
+module.exports = (config, req) => {
+  try {
+    if (config.appConfig.auth.enableHeaderAuth) {
+      const { userHeader } = config.appConfig.auth.headerAuth;
+      const { proxyWhitelist } = config.appConfig.auth.headerAuth;
+      if (proxyWhitelist.includes(req.socket.remoteAddress)) {
+        return { success: true, user: req.headers[userHeader.toLowerCase()] };
+      }
+    }
+    return {};
+  } catch (e) {
+    console.warn('Error get-user: ', e);
+    return { success: false };
+  }
+};

services/healthcheck.js

@@ -6,11 +6,17 @@
 
 const isSsl = !!process.env.SSL_PRIV_KEY_PATH && !!process.env.SSL_PUB_KEY_PATH;
 
+// eslint-disable-next-line import/no-dynamic-require
 const http = require(isSsl ? 'https' : 'http');
 
 /* Location of the server to test */
 const isDocker = !!process.env.IS_DOCKER;
-const port = isSsl ? (process.env.SSL_PORT || (isDocker ? 443 : 4001)) : (process.env.PORT || (isDocker ? 80 : 4000));
+
+/* Get the port to use (depending on, if docker, if SSL) */
+const sslPort = process.env.SSL_PORT || (isDocker ? 443 : 4001);
+const normalPort = process.env.PORT || (isDocker ? 8080 : 4000);
+const port = isSsl ? sslPort : normalPort;
+
 const host = process.env.HOST || '0.0.0.0';
 const timeout = 2000;
 
@@ -18,7 +24,9 @@ const agent = new http.Agent({
   rejectUnauthorized: false, // Allow self-signed certificates
 });
 
-const requestOptions = { host, port, timeout, agent };
+const requestOptions = {
+  host, port, timeout, agent,
+};
 
 const startTime = new Date(); // Initialize timestamp to calculate time taken
 

services/print-message.js

@@ -32,7 +32,7 @@ module.exports = (ip, port, isDocker) => {
   } else {
     // Prepare message for users running app on bare metal
     msg = `${chars.GREEN}┏${line(75)}┓${chars.BR}`
-      + `┃ ${chars.CYAN}Welcome to Dashy! 🚀${blanks(55)}${chars.GREEN}┃${chars.BR}`
+      + `┃ ${chars.CYAN}Welcome to Dashy! 🚀${blanks(54)}${chars.GREEN}┃${chars.BR}`
       + `┃ ${chars.CYAN}Your new dashboard is now up and running at ${chars.BRIGHT}`
       + `http://${ip}:${port}${chars.RESET}${blanks(18 - ip.length)}${chars.GREEN}┃${chars.BR}`
       + `┗${line(75)}┛${chars.BR}${chars.BR}${chars.RESET}`;

services/save-config.js

@@ -14,19 +14,24 @@ module.exports = async (newConfig, render) => {
     return configObj.filename.replaceAll('/', '').replaceAll('..', '');
   };
 
+  // Path to config file (with navigational characters stripped)
   const usersFileName = makeSafeFileName(newConfig);
 
+  // Path to user data directory
+  const userDataDirectory = process.env.USER_DATA_DIR || './user-data/';
+
   // Define constants for the config file
   const settings = {
-    defaultLocation: './public/',
+    defaultLocation: userDataDirectory,
+    backupLocation: process.env.BACKUP_DIR || path.join(userDataDirectory, 'config-backups'),
     defaultFile: 'conf.yml',
     filename: 'conf',
     backupDenominator: '.backup.yml',
   };
 
   // Make the full file name and path to save the backup config file
-  const backupFilePath = path.normalize(process.env.BACKUP_DIR || settings.defaultLocation) 
-    + `/${usersFileName || settings.filename}-`
+  const backupFilePath = `${path.normalize(settings.backupLocation)
+  }/${usersFileName || settings.filename}-`
     + `${Math.round(new Date() / 1000)}${settings.backupDenominator}`;
 
   // The path where the main conf.yml should be read and saved to
@@ -45,15 +50,20 @@ module.exports = async (newConfig, render) => {
     message: !success ? errorMsg : getSuccessMessage(),
   });
 
-  // Makes a backup of the existing config file
+  // Create a backup of current config, and if backup dir doesn't yet exist, create it
   await fsPromises
-    .copyFile(defaultFilePath, backupFilePath)
-    .catch((error) => render(getRenderMessage(false, `Unable to backup conf.yml: ${error}`)));
+    .mkdir(settings.backupLocation, { recursive: true })
+    .then(() => fsPromises.copyFile(defaultFilePath, backupFilePath))
+    .catch((error) => render(
+      getRenderMessage(false, `Unable to backup ${settings.defaultFile}: ${error}`),
+    ));
 
   // Writes the new content to the conf.yml file
   await fsPromises
     .writeFile(defaultFilePath, newConfig.config.toString(), writeFileOptions)
-    .catch((error) => render(getRenderMessage(false, `Unable to write to conf.yml: ${error}`)));
+    .catch((error) => render(
+      getRenderMessage(false, `Unable to write to ${settings.defaultFile}: ${error}`),
+    ));
 
   // If successful, then render hasn't yet been called- call it
   await render(getRenderMessage(true));

src/App.vue

@@ -4,6 +4,7 @@
     <LoadingScreen :isLoading="isLoading" v-if="shouldShowSplash" />
     <Header :pageInfo="pageInfo" />
     <router-view v-if="!isFetching" />
+    <CriticalError v-if="hasCriticalError" />
     <Footer :text="footerText" v-if="visibleComponents.footer && !isFetching" />
   </div>
 </template>
@@ -12,6 +13,7 @@
 import Header from '@/components/PageStrcture/Header.vue';
 import Footer from '@/components/PageStrcture/Footer.vue';
 import EditModeTopBanner from '@/components/InteractiveEditor/EditModeTopBanner.vue';
+import CriticalError from '@/components/PageStrcture/CriticalError.vue';
 import LoadingScreen from '@/components/PageStrcture/LoadingScreen.vue';
 import { welcomeMsg } from '@/utils/CoolConsole';
 import ErrorHandler from '@/utils/ErrorHandler';
@@ -29,6 +31,7 @@ export default {
     Footer,
     LoadingScreen,
     EditModeTopBanner,
+    CriticalError,
   },
   data() {
     return {
@@ -64,7 +67,7 @@ export default {
       return this.$store.getters.pageInfo;
     },
     sections() {
-      return this.$store.getters.pageInfo;
+      return this.$store.getters.sections;
     },
     visibleComponents() {
       return this.$store.getters.visibleComponents;
@@ -72,6 +75,9 @@ export default {
     isEditMode() {
       return this.$store.state.editMode;
     },
+    hasCriticalError() {
+      return this.$store.state.criticalError;
+    },
     subPageClassName() {
       const currentSubPage = this.$store.state.currentConfigInfo;
       return (currentSubPage && currentSubPage.pageId) ? currentSubPage.pageId : '';

src/assets/locales/en.json

@@ -171,9 +171,9 @@
     "status-fail-msg": "Task Failed",
     "success-msg-disk": "Config file written to disk successfully",
     "success-msg-local": "Local changes saved successfully",
-    "success-note-l1": "The app should rebuild automatically.",
-    "success-note-l2": "This may take up to a minute.",
-    "success-note-l3": "You will need to refresh the page for changes to take effect.",
+    "success-note-l1": "You will need to refresh the page for changes to take effect.",
+    "success-note-l2": "",
+    "success-note-l3": "",
     "error-msg-save-mode": "Please select a Save Mode: Local or File",
     "error-msg-cannot-save": "An error occurred saving config",
     "error-msg-bad-json": "Error in JSON, possibly malformed",
@@ -182,9 +182,9 @@
   },
   "app-rebuild": {
     "title": "Rebuild Application",
-    "rebuild-note-l1": "A rebuild is required for changes written to the conf.yml file to take effect.",
-    "rebuild-note-l2": "This should happen automatically, but if it hasn't, you can manually trigger it here.",
-    "rebuild-note-l3": "This is not required for modifications stored locally.",
+    "rebuild-note-l1": "A rebuild is no longer required for changes to take effect.",
+    "rebuild-note-l2": "Some changes (entry-point, and auth settings) are read at build-time. So to apply these, you should trigger a rebuild here.",
+    "rebuild-note-l3": "Note that this is only available on Node and Docker installations, not via statically deployed instances.",
     "rebuild-button": "Start Build",
     "rebuilding-status-1": "Building...",
     "rebuilding-status-2": "This may take a few minutes",
@@ -312,6 +312,14 @@
       "view-title": "View Config"
     }
   },
+  "critical-error": {
+    "title": "Configuration Load Error",
+    "subtitle": "Dashy has failed to load correctly due to a configuration error.",
+    "sub-ensure-that": "Ensure that",
+    "sub-error-details": "Error Details",
+    "sub-next-steps": "Next Steps",
+    "ignore-button": "Ignore Critical Errors"
+  },
   "widgets": {
     "general": {
       "loading": "Loading...",

src/assets/locales/pt.json

@@ -10,8 +10,12 @@
     "clear-search-tooltip": "Limpar busca",
     "enter-to-search-web": "Tecle enter para buscar na rede"
   },
+  "splash-screen": {
+    "loading": "Carregando"
+  },
   "login": {
     "title": "Dashy",
+    "guest-label": "Entrar como convidado",
     "username-label": "Nome do usuário",
     "password-label": "Senha",
     "login-button": "Conectar",
@@ -31,8 +35,20 @@
     "already-logged-in-text": "Você está logado como",
     "proceed-to-dashboard": "Ir para o Painel",
     "log-out-button": "Sair",
-    "proceed-guest-button": "Seguir como Convidado"
+    "proceed-guest-button": "Seguir como Convidado",
+    "guest-intro-1": "Essa instância possui o acesso como convidado ativado",
+    "guest-intro-2": "Convidados podem apenas visualizar os painéis, logo não podem escrever quaisquer mudanças no disco.",
+    "error": "Erro",
+    "error-no-user-configured": "Autenticação não está habilitada, ou nenhum usuário foi configurado.",
+    "error-go-home-button": "Ir para a página inicial",
+    "logged-in-guest": "Logado como convidado. Redirecionando...",
+    "error-guest-access": "O acesso como convidado não foi permitido"
   },
+
+  "app-info": {
+    "title": "Informação do App"
+  },
+
   "config": {
     "main-tab": "Menu Principal",
     "view-config-tab": "Ver configuração",
@@ -299,6 +315,16 @@
       "remaining": "Restante",
       "up": "Up",
       "down": "Down"
+    },
+    "gluetun-status": {
+      "vpn-ip": "IP da VPN",
+      "country": "País",
+      "region": "Região",
+      "city": "Cidade",
+      "post-code": "Código postal",
+      "location": "Localização",
+      "timezone": "Fuso horário",
+      "organization": "Organização"
     }
   }
-}
+}

src/assets/locales/ro.json

@@ -0,0 +1,448 @@
+{
+  "home": {
+    "no-results": "Niciun rezultat găsit",
+    "no-data": "Nicio dată configurată",
+    "no-items-section": "Niciun element de afișat încă"
+  },
+  "search": {
+    "search-label": "Caută",
+    "search-placeholder": "Începeți să tastați pentru a filtra",
+    "clear-search-tooltip": "Șterge căutarea",
+    "enter-to-search-web": "Apasă enter pentru a căuta pe web"
+  },
+  "splash-screen": {
+    "loading": "Încărcare"
+  },
+  "login": {
+    "title": "Dashy",
+    "guest-label": "Acces Vizitator",
+    "username-label": "Nume utilizator",
+    "password-label": "Parolă",
+    "login-button": "Autentificare",
+    "remember-me-label": "Ține-mă minte pentru",
+    "remember-me-never": "Niciodată",
+    "remember-me-hour": "4 Ore",
+    "remember-me-day": "1 Zi",
+    "remember-me-week": "1 Săptămână",
+    "remember-me-long-time": "O perioadă lungă",
+    "error-missing-username": "Lipsește numele de utilizator",
+    "error-missing-password": "Lipsește parola",
+    "error-incorrect-username": "Utilizator negăsit",
+    "error-incorrect-password": "Parolă incorectă",
+    "success-message": "Autentificare...",
+    "logout-message": "Deconectat",
+    "already-logged-in-title": "Deja autentificat",
+    "already-logged-in-text": "Ești autentificat ca",
+    "proceed-to-dashboard": "Continuă către Tabloul de bord",
+    "log-out-button": "Deconectare",
+    "proceed-guest-button": "Continuă ca Vizitator",
+    "guest-intro-1": "Această instanță are acces pentru vizitatori activat.",
+    "guest-intro-2": "Vizitatorii au acces doar pentru vizualizare la tablourile de bord, deci nu pot scrie modificări pe disc.",
+    "error": "Eroare",
+    "error-no-user-configured": "Autentificarea nu este activată, sau nu au fost configurați utilizatori",
+    "error-go-home-button": "Mergi la Pagina Principală",
+    "logged-in-guest": "Autentificat ca Vizitator, Redirecționare...",
+    "error-guest-access": "Acces Vizitator Interzis"
+  },
+  "app-info": {
+    "title": "Informații Aplicație",
+    "error-log": "Jurnal Erori",
+    "no-errors": "Nicio eroare recentă detectată",
+    "help-support": "Ajutor & Suport",
+    "help-support-description" : "Pentru suport în utilizarea sau configurarea Dashy, consultați",
+    "help-support-discussions": "Discuțiile",
+    "support-dashy": "Suport pentru Dashy",
+    "support-dashy-description": "Pentru moduri în care poți contribui, verificați",
+    "support-dashy-link": "Pagina de Contribuții",
+    "report-bug": "Raportează o Eroare",
+    "report-bug-description": "Dacă crezi că ai găsit o eroare, atunci te rog",
+    "report-bug-link": "deschide o Problemă",
+    "more-info": "Mai Multe Informații",
+    "source": "Sursă",
+    "documentation": "Documentație",
+    "privacy-and-security": "Confidențialitate & Securitate",
+    "privacy-and-security-l1": "Pentru o descompunere a modului în care datele tale sunt gestionate de Dashy, consultați",
+    "privacy-and-security-privacy-policy": "Politica de Confidențialitate",
+    "privacy-and-security-advice": "Pentru sfaturi în securizarea tabloului tău de bord, poți consulta",
+    "privacy-and-security-advice-link": "Documentele de Management",
+    "privacy-and-security-security-issue": "Dacă ați descoperit o potențială problemă de securitate, raportați-o urmând",
+  "privacy-and-security-security-policy": "Politica de Securitate",
+  "license": "Licență",
+  "license-under": "Licențiat sub",
+  "licence-third-party": "Pentru licențele modulelor terțe părți, vă rugăm să consultați",
+  "licence-third-party-link": "Legal",
+  "list-contributors": "Pentru lista completă a contribuitorilor și mulțumiri, vedeți",
+  "list-contributors-link": "Credite",
+  "version": "Versiune"
+  },
+  "config": {
+    "main-tab": "Meniu Principal",
+    "view-config-tab": "Vizualizare Configurație",
+    "edit-config-tab": "Editare Configurație",
+    "custom-css-tab": "Stiluri Personalizate",
+    "heading": "Opțiuni de Configurare",
+    "download-config-button": "Vizualizați / Exportați Configurația",
+    "edit-config-button": "Editare Configurație",
+    "edit-css-button": "Editare CSS Personalizat",
+    "cloud-sync-button": "Activează Sincronizarea în Cloud",
+    "edit-cloud-sync-button": "Editare Sincronizare în Cloud",
+    "rebuild-app-button": "Reconstruire Aplicație",
+    "change-language-button": "Schimbă Limba Aplicației",
+    "reset-settings-button": "Resetează Setările Locale",
+    "disabled-note": "Unele caracteristici de configurare au fost dezactivate de administratorul tău",
+    "small-screen-note": "Utilizați un ecran foarte mic, și unele ecrane din acest meniu s-ar putea să nu fie optimale",
+    "app-info-button": "Informații Aplicație",
+    "backup-note": "Este recomandat să faceți o copie de siguranță a configurației înainte de a face modificări.",
+    "reset-config-msg-l1": "Aceasta va elimina toate setările utilizatorilor din stocarea locală, dar nu va afecta fișierul 'conf.yml'.",
+    "reset-config-msg-l2": "Ar trebui să faceți mai întâi o copie de siguranță a oricăror modificări pe care le-ați făcut local, dacă doriți să le utilizați în viitor.",
+    "reset-config-msg-l3": "Sunteți sigur că doriți să continuați?",
+    "data-cleared-msg": "Datele au fost șterse cu succes",
+    "actions-label": "Acțiuni",
+    "copy-config-label": "Copiază Configurația",
+    "data-copied-msg": "Configurația a fost copiată în clipboard",
+    "reset-config-label": "Resetează Configurația",
+    "css-save-btn": "Salvează Modificările",
+    "css-note-label": "Notă",
+    "css-note-l1": "Va trebui să reîmprospătați pagina pentru ca modificările să aibă efect.",
+    "css-note-l2": "Suprascrierile de stiluri sunt stocate doar local, deci este recomandat să faceți o copie a CSS-ului dvs.",
+    "css-note-l3": "Pentru a elimina toate stilurile personalizate, ștergeți conținutul și apăsați 'Salvează Modificările'",
+    "custom-css": {
+      "title": "CSS Personalizat",
+      "base-theme": "Tema de Bază"
+    }
+  },
+  "alternate-views": {
+    "alternate-view-heading": "Schimbă Vederea",
+    "default": "Implicit",
+    "workspace": "Spațiu de Lucru",
+    "minimal": "Minimal"
+  },
+  "settings": {
+    "theme-label": "Temă",
+    "layout-label": "Aspect",
+    "layout-auto": "Automat",
+    "layout-horizontal": "Orizontal",
+    "layout-vertical": "Vertical",
+    "item-size-label": "Dimensiune Element",
+    "item-size-small": "Mic",
+    "item-size-medium": "Mediu",
+    "item-size-large": "Mare",
+    "config-launcher-label": "Config",
+    "config-launcher-tooltip": "Actualizează Configurația",
+    "sign-out-tooltip": "Deconectare",
+    "sign-in-tooltip": "Conectare",
+    "sign-in-welcome": "Bună {username}!",
+    "hide": "Ascunde",
+    "open": "Deschide"
+  },
+  "updates": {
+    "app-version-note": "Versiune Dashy",
+    "up-to-date": "Actualizat",
+    "out-of-date": "Actualizare Disponibilă",
+    "unsupported-version-l1": "Utilizați o versiune nesuportată de Dashy",
+    "unsupported-version-l2": "Pentru cea mai bună experiență și patch-uri de securitate recente, vă rugăm să actualizați la"
+  },
+  "language-switcher": {
+    "title": "Schimbă Limba Aplicației",
+    "dropdown-label": "Selectați o Limbă",
+    "save-button": "Salvează",
+    "success-msg": "Limba Actualizată la"
+  },
+  "theme-maker": {
+    "title": "Configurator de Temă",
+    "export-button": "Exportă Variabile Personalizate",
+    "reset-button": "Resetează Stilurile pentru",
+    "show-all-button": "Arată Toate Variabilele",
+    "change-fonts-button": "Schimbă Fonturile",
+    "save-button": "Salvează",
+    "cancel-button": "Anulează",
+    "saved-toast": "{theme} Actualizat cu Succes",
+    "copied-toast": "Datele temei pentru {theme} au fost copiate în clipboard",
+    "reset-toast": "Culorile Personalizate pentru {theme} au fost Eliminate"
+  },
+  "config-editor": {
+    "save-location-label": "Locația de Salvare",
+    "location-local-label": "Aplică Local",
+    "location-disk-label": "Scrie Modificările în Fișierul de Configurație",
+    "save-button": "Salvează Modificările",
+    "preview-button": "Previzualizează Modificările",
+    "valid-label": "Configurația este Valabilă",
+    "status-success-msg": "Sarcină Completată",
+    "status-fail-msg": "Sarcină Eșuată",
+    "success-msg-disk": "Fișierul de configurație a fost scris pe disc cu succes",
+    "success-msg-local": "Modificările locale au fost salvate cu succes",
+    "success-note-l1": "Aplicația ar trebui să se reconstruiască automat.",
+    "success-note-l2": "Aceasta poate dura până la un minut.",
+    "success-note-l3": "Va trebui să reîmprospătați pagina pentru ca modificările să aibă efect.",
+    "error-msg-save-mode": "Vă rugăm să selectați un Mod de Salvare: Local sau Fișier",
+    "error-msg-cannot-save": "A apărut o eroare la salvarea configurației",
+    "error-msg-bad-json": "Eroare în JSON, posibil malformat",
+    "warning-msg-validation": "Avertisment de Validare",
+    "not-admin-note": "Nu puteți scrie modificările pe disc deoarece nu sunteți conectat ca administrator"
+  },
+  "app-rebuild": {
+    "title": "Reconstruire Aplicație",
+    "rebuild-note-l1": "O reconstruire este necesară pentru ca modificările scrise în fișierul conf.yml să aibă efect.",
+    "rebuild-note-l2": "Aceasta ar trebui să se întâmple automat, dar dacă nu s-a întâmplat, o puteți declanșa manual aici.",
+    "rebuild-note-l3": "Aceasta nu este necesară pentru modificările stocate local.",
+    "rebuild-button": "Începeți Reconstruirea",
+    "rebuilding-status-1": "Se reconstruiește...",
+    "rebuilding-status-2": "Aceasta poate dura câteva minute",
+    "error-permission": "Nu aveți permisiunea de a declanșa această acțiune",
+    "success-msg": "Reconstruirea a fost completată cu succes",
+    "fail-msg": "Operațiunea de reconstruire a eșuat",
+    "reload-note": "Este necesară reîncărcarea paginii pentru ca modificările să aibă efect",
+    "reload-button": "Reîncarcă Pagina"
+  },
+  "cloud-sync": {
+    "title": "Backup și Restaurare în Cloud",
+    "intro-l1": "Backup-ul și restaurarea în cloud este o caracteristică opțională, care vă permite să încărcați configurația pe internet și apoi să o restaurați pe orice alt dispozitiv sau instanță de Dashy.",
+    "intro-l2": "Toate datele sunt criptate end-to-end cu AES, folosind parola dumneavoastră ca cheie.",
+    "intro-l3": "Pentru mai multe informații, vă rugăm să consultați",
+    "intro-docs": "documentația",
+    "backup-title-setup": "Creați un Backup",
+    "backup-title-update": "Actualizați Backup-ul",
+    "password-label-setup": "Alegeți o Parolă",
+    "password-label-update": "Introduceți Parola",
+    "backup-button-setup": "Backup",
+    "backup-button-update": "Actualizați Backup-ul",
+    "backup-id-label": "ID-ul Dvs. de Backup",
+    "backup-id-note": "Acesta este utilizat pentru a restaura din backup-uri mai târziu. Deci păstrați-l, împreună cu parola dvs., într-un loc sigur.",
+    "restore-title": "Restaurare Backup",
+    "restore-id-label": "ID de Restaurare",
+    "restore-password-label": "Parola",
+    "restore-button": "Restaurare",
+    "backup-missing-password": "Lipsește Parola",
+    "backup-error-unknown": "Imposibil de procesat solicitarea",
+    "backup-error-password": "Parolă incorectă. Vă rugăm să introduceți parola actuală.",
+    "backup-success-msg": "Finalizat cu Succes",
+    "restore-success-msg": "Configurația a fost Restaurată cu Succes"
+  },
+  "menu": {
+    "open-section-title": "Deschide În",
+    "sametab": "Tab Curent",
+    "newtab": "Tab Nou",
+    "modal": "Modal Pop-Up",
+    "workspace": "Vizualizare Spațiu de Lucru",
+    "options-section-title": "Opțiuni",
+    "edit-item": "Editare",
+    "move-item": "Copiază sau Mută",
+    "remove-item": "Șterge"
+  },
+  "context-menus": {
+    "item": {
+      "open-section-title": "Deschide În",
+      "sametab": "Tab Curent",
+      "newtab": "Tab Nou",
+      "modal": "Modal Pop-Up",
+      "workspace": "Vizualizare Spațiu de Lucru",
+      "clipboard": "Copiază în Clipboard",
+      "options-section-title": "Opțiuni",      
+      "edit-item": "Editare",
+      "move-item": "Copiază sau Mută",
+      "remove-item": "Șterge",
+      "copied-toast": "URL-ul a fost copiat în clipboard"
+    },
+    "section": {
+      "open-section": "Deschide Secțiunea",
+      "edit-section": "Editare",
+      "expand-collapse": "Extinde / Colapsează",
+      "move-section": "Mută La",
+      "remove-section": "Șterge"
+    }
+  },
+  "footer": {
+    "dev-by": "Dezvoltat de",
+    "licensed-under": "Licențiat sub",
+    "get-the": "Obțineți",
+    "source-code": "Codul Sursă"
+  },
+  "interactive-editor": {
+    "menu": {
+      "start-editing-tooltip": "Intră în Editorul Interactiv",
+      "edit-site-data-subheading": "Editează Datele Site-ului",
+      "edit-page-info-btn": "Editează Informațiile Paginii",
+      "edit-page-info-tooltip": "Titlul aplicației, descriere, link-uri de navigare, textul din footer, etc.",
+      "edit-app-config-btn": "Editează Configurația Aplicației",
+      "edit-app-config-tooltip": "Toate celelalte opțiuni de configurare a aplicației",
+      "edit-pages-btn": "Editează Paginile",
+      "edit-pages-tooltip": "Adaugă sau elimină vizualizări suplimentare",
+      "config-save-methods-subheading": "Opțiuni de Salvare a Configurației",
+      "save-locally-btn": "Salvează Local",
+      "save-locally-tooltip": "Salvează configurația local, în stocarea browserului. Aceasta nu va afecta fișierul tău de configurare, dar schimbările vor fi salvate doar pe acest dispozitiv",
+      "save-disk-btn": "Salvează pe Disc",
+      "save-disk-tooltip": "Salvează configurația în fișierul conf.yml de pe disc. Aceasta va face un backup și apoi va suprascrie configurația existentă",
+      "export-config-btn": "Exportă Configurația",
+      "export-config-tooltip": "Vizualizează și exportă noua configurație, fie într-un fișier, fie în clipboard",
+      "cloud-backup-btn": "Backup în Cloud",
+      "cloud-backup-tooltip": "Salvează un backup criptat al configurației în cloud",
+      "edit-raw-config-btn": "Editează Configurația Brută",
+      "edit-raw-config-tooltip": "Vizualizează și modifică configurația brută prin editorul JSON",
+      "cancel-changes-btn": "Anulează Modificările",
+      "cancel-changes-tooltip": "Resetează modificările curente și ieși din Modul de Editare. Aceasta nu va afecta configurația salvată",
+      "edit-mode-name": "Mod de Editare",
+      "edit-mode-subtitle": "Ești în Modul de Editare",
+      "edit-mode-description": "Aceasta înseamnă că poți face modificări la configurația ta și să previzualizezi rezultatele, dar până nu salvezi, niciuna dintre modificările tale nu va fi păstrată.",
+      "save-stage-btn": "Salvează",
+      "cancel-stage-btn": "Anulează",
+      "save-locally-warning": "Dacă vei continua, modificările vor fi salvate doar în browserul tău. Ar trebui să exporți o copie a configurației tale pentru utilizare pe alte mașini. Dorești să continui?"
+    },
+    "edit-item": {
+      "missing-title-err": "Este necesar un titlu pentru element"
+    },
+    "edit-section": {
+      "edit-section-title": "Editează Secțiunea",
+      "add-section-title": "Adaugă o Secțiune Nouă",
+      "edit-tooltip": "Clic pentru a edita, sau clic dreapta pentru mai multe opțiuni",
+      "remove-confirm": "Ești sigur că vrei să elimini această secțiune? Această acțiune poate fi anulată mai târziu."
+    },
+    "edit-app-config": {
+      "warning-msg-title": "Procedează cu Atenție",
+      "warning-msg-l1": "Următoarele opțiuni sunt pentru configurarea avansată a aplicației.",
+      "warning-msg-l2": "Dacă nu ești sigur în legătură cu oricare dintre câmpuri, te rog să consulți",
+      "warning-msg-docs": "documentația",
+      "warning-msg-l3": "pentru a evita consecințele nedorite."
+    },
+    "export": {
+      "export-title": "Exportă Configurația",
+      "copy-clipboard-btn": "Copiază în Clipboard",
+      "copy-clipboard-tooltip": "Copiază toată configurația aplicației în clipboard-ul sistemului, în format YAML",
+      "download-file-btn": "Descarcă ca Fișier",
+      "download-file-tooltip": "Descarcă toată configurația aplicației pe dispozitivul tău, într-un fișier YAML",
+      "view-title": "Vizualizează Configurația"
+    }
+  },
+  "widgets": {
+    "general": {
+      "loading": "Se încarcă...",
+      "show-more": "Extinde Detaliile",
+      "cpu-details": "Detalii CPU",
+      "mem-details": "Detalii Memorie",
+      "show-less": "Arată Mai Puțin",
+      "open-link": "Continuă Citirea"
+    },
+    "pi-hole": {
+      "status-heading": "Stare"
+    },
+    "stat-ping": {
+      "up": "Online",
+      "down": "Offline"
+    },
+    "net-data": {
+      "cpu-chart-title": "Istoric CPU",
+      "mem-chart-title": "Utilizare Memorie",
+      "mem-breakdown-title": "Detalii Memorie",
+      "load-chart-title": "Încărcare Sistem"
+    },
+    "glances": {
+      "disk-space-free": "Liber",
+      "disk-space-used": "Utilizat",
+      "disk-mount-point": "Punct de Montare",
+      "disk-file-system": "Sistem de Fișiere",
+      "disk-io-read": "Citire",
+      "disk-io-write": "Scriere",
+      "system-load-desc": "Numărul de procese așteptând în coada de execuție, mediat pe toate nucleele"
+    },
+    "system-info": {
+      "uptime": "Timp de Funcționare"
+    },
+    "flight-data": {
+      "arrivals": "Sosiri",
+      "departures": "Plecări"
+    },
+    "tfl-status": {
+      "good-service-all": "Servicii Bune pe Toate Liniile",
+      "good-service-rest": "Servicii Bune pe Celelalte Linii"
+    },
+    "synology-download": {
+      "download": "Descărcare",
+      "upload": "Încărcare",
+      "downloaded": "Descărcat",
+      "uploaded": "Încărcat",
+      "remaining": "Rămas",
+      "up": "Sus",
+      "down": "Jos"
+    },
+    "gluetun-status": {
+      "vpn-ip": "IP VPN",
+      "country": "Țară",
+      "region": "Regiune",
+      "city": "Oraș",
+      "post-code": "Cod Poștal",
+      "location": "Locație",
+      "timezone": "Fus Orar",
+      "organization": "Organizație"
+    },
+    "nextcloud": {
+      "active": "activ",
+      "and": "și",
+      "applications": "aplicații",
+      "available": "disponibil",
+      "away": "Plecat",
+      "cache-full": "CACHE PLIN",
+      "chat-room": "camera de chat",
+      "delete-all": "Șterge tot",
+      "delete-notification": "Șterge notificarea",
+      "disabled": "dezactivat",
+      "disk-quota": "Cotă de Disc",
+      "disk-space": "Spațiu pe Disc",
+      "dnd": "Nu Deranja",
+      "email": "email",
+      "enabled": "activat",
+      "federated-shares-ucfirst": "Partajări Federate",
+      "federated-shares": "partajări federate",
+      "files": "fișier{plural}",
+      "free": "liber",
+      "groups": "grupuri",
+      "hit-rate": "rata de accesare",
+      "hits": "accesări",
+      "home": "acasă",
+      "in": "în",
+      "keys": "chei",
+      "last-24-hours": "ultimele 24 de ore",
+      "last-5-minutes": "în ultimele 5 minute",
+      "last-hour": "în ultima oră",
+      "last-login": "Ultima autentificare",
+      "last-restart": "Ultimul restart",
+      "load-averages": "Mediile de Încărcare pe toate nucleele CPU",
+      "local-shares": "Partajări Locale",
+      "local": "local",
+      "max-keys": "chei maxime",
+      "memory-used": "memorie utilizată",
+      "memory-utilisation": "utilizarea memoriei",
+      "memory": "memorie",
+      "misses": "rateuri",
+      "no-notifications": "Fără notificări",
+      "no-pending-updates": "fără actualizări în așteptare",
+      "nothing-to-show": "Nimic de afișat aici în acest moment",
+      "of-which": "din care",
+      "of": "din",
+      "offline": "Deconectat",
+      "online": "Conectat",
+      "other": "alt",
+      "overall": "În total",
+      "private-link": "link privat",
+      "public-link": "link public",
+      "quota-enabled": "Cota de Disc este {not}activată pentru acest utilizator",
+      "received": "primit",
+      "scripts": "scripturi",
+      "sent": "trimis",
+      "started": "Început",
+      "storages-by-type": "Stocări pe tip",
+      "storages": "stocare{plural}",
+      "strings-use": "utilizare șiruri",
+      "tasks": "Sarcini",
+      "total-files": "total fișiere",
+      "total-users": "total utilizatori",
+      "total": "total",
+      "until": "Până la",
+      "updates-available-for": "Actualizări disponibile pentru",
+      "updates-available": "actualizare{plural} disponibilă",
+      "used": "utilizat",
+      "user": "utilizator",
+      "using": "utilizând",
+      "version": "versiune",
+      "wasted": "pierdut"
+    }
+  }
+}

src/assets/locales/zh-CN.json

@@ -29,7 +29,7 @@
     "error-missing-password": "密码空缺",
     "error-incorrect-username": "用户不存在",
     "error-incorrect-password": "密码不正确",
-    "success-message": "登陆成功。。。",
+    "success-message": "登陆成功。",
     "logout-message": "注销",
     "already-logged-in-title": "已经成功登陆",
     "already-logged-in-text": "你的登陆身份",
@@ -37,11 +37,11 @@
     "log-out-button": "注销",
     "proceed-guest-button": "以游客身份前往",
     "guest-intro-1": "该实例已启用访客访问.",
-    "guest-intro-2": "访客只有访问权限,无法保存变更",
+    "guest-intro-2": "访客只有访问权限，无法保存变更",
     "error": "错误",
-    "error-no-user-configured": "没有启用验证,或者未配置用户",
+    "error-no-user-configured": "没有启用验证，或者未配置用户",
     "error-go-home-button": "Go Home",
-    "logged-in-guest": "以访客身份登陆,正在跳转...",
+    "logged-in-guest": "以访客身份登陆，正在跳转...",
     "error-guest-access": "不允许访客访问"
   },
   "app-info": {
@@ -78,22 +78,22 @@
   "config": {
     "main-tab": "主菜单",
     "view-config-tab": "视图设置",
-    "edit-config-tab": "编辑设置",
+    "edit-config-tab": "修改设置",
     "custom-css-tab": "自定义样式",
     "heading": "设置选项",
     "download-config-button": "下载配置",
-    "edit-config-button": "编辑设置",
-    "edit-css-button": "编辑自定义 CSS",
-    "cloud-sync-button": "启用云端同步",
-    "edit-cloud-sync-button": "编辑云端同步",
+    "edit-config-button": "修改设置",
+    "edit-css-button": "自定义CSS",
+    "cloud-sync-button": "云端同步",
+    "edit-cloud-sync-button": "修改云端同步",
     "rebuild-app-button": "重建应用",
     "change-language-button": "更改语言",
-    "reset-settings-button": "恢复本地设置",
+    "reset-settings-button": "恢复默认设置",
     "disabled-note": "您的管理员已禁用某些配置功能",
     "small-screen-note": "您正在使用非常小的屏幕，某些菜单屏幕可能不够优化",
     "app-info-button": "应用详情",
     "backup-note": "建议在进行更改之前备份你的配置。",
-    "reset-config-msg-l1": "这将从本地存储中删除所有用户设置，但不会影响‘conf.yml’文件。",
+    "reset-config-msg-l1": "这将从本地存储中删除所有用户设置，但不会影响 conf.yml 文件。",
     "reset-config-msg-l2": "如果想在以后使用它们，应该首先备份你所做的任何更改。",
     "reset-config-msg-l3": "确定执行吗？",
     "data-cleared-msg": "成功清空数据",
@@ -103,9 +103,9 @@
     "reset-config-label": "重置设置",
     "css-save-btn": "保存更改",
     "css-note-label": "注意",
-    "css-note-l1": "你需要刷新页面才能使更改生效。",
-    "css-note-l2": "样式覆盖仅存储在本地，因此建议复制你的 CSS。",
-    "css-note-l3": "要删除所有自定义样式，请删除内容并点击保存更改",
+    "css-note-l1": "需刷新页面使其生效。",
+    "css-note-l2": "自定义样式仅在本地有效，设置储存在当前浏览器，建议做好备份。",
+    "css-note-l3": "如需删除自定义样式，清空上面内容并点击保存。",
     "custom-css": {
       "title": "自定义 CSS",
       "base-theme": "基础主题"
@@ -132,8 +132,8 @@
     "sign-out-tooltip": "注销",
     "sign-in-tooltip": "登陆",
     "sign-in-welcome": "你好 {username}！",
-    "hide": "Hide",
-    "open": "Open"
+    "hide": "隐藏",
+    "open": "打开"
   },
   "updates": {
     "app-version-note": "Dashy 版本",
@@ -195,9 +195,10 @@
     "reload-button": "刷新页面"
   },
   "cloud-sync": {
-    "title": "云备份 & 云恢复",
+    "title": "云备份&恢复",
     "intro-l1": "云备份和云恢复是一项试验性功能，你将配置上传到网络，然后在其他设备或 Dashy 实例上恢复。",
     "intro-l2": "所有数据都使用AES端对端加密，使用你的密码作为密钥。",
+    "intro-docs": "文档",
     "intro-l3": "有关更多信息，请参阅",
     "backup-title-setup": "创建备份",
     "backup-title-update": "更新备份",
@@ -268,11 +269,11 @@
       "edit-pages-tooltip": "添加或删除其他的视图",
       "config-save-methods-subheading": "配置保存选项",
       "save-locally-btn": "暂存本地",
-      "save-locally-tooltip": "将设置保存在本地浏览器上. 这不会影响配置文件,但更改只会保留在当前设备上.",
+      "save-locally-tooltip": "将设置保存在浏览器上。这不会影响配置文件，仅作用于当前的浏览器。",
       "save-disk-btn": "保存",
-      "save-disk-tooltip": "将设置保存到服务端的conf.yml文件.它会备份之前的配置文件.",
+      "save-disk-tooltip": "将设置保存到服务端的conf.yml文件，它会备份之前的配置文件.",
       "export-config-btn": "导出配置",
-      "export-config-tooltip": "查看并导出新的配置 到 文件 或 剪贴板",
+      "export-config-tooltip": "查看并导出新的配置到 文件 或 剪贴板",
       "cloud-backup-btn": "备份到云端",
       "cloud-backup-tooltip": "以加密的方式保存到云端",
       "edit-raw-config-btn": "编辑原始配置",
@@ -284,10 +285,10 @@
       "edit-mode-description": "你可以对配置进行修改并预览，在保存之前，你的任何更改都不会被保留。",
       "save-stage-btn": "保存",
       "cancel-stage-btn": "取消",
-      "save-locally-warning": "如果你继续，更改将仅保存在你的浏览器中。 你应该导出配置的副本以在其他机器上使用。 你想继续吗？"
+      "save-locally-warning": "配置将保存到你当前的浏览器上。你也可以导出配置到其他设备上使用。是否继续？"
     },
     "edit-item": {
-      "missing-title-err": "项目标题是必需的"
+      "missing-title-err": "标题是必需的"
     },
     "edit-section": {
       "edit-section-title": "编辑 Section",
@@ -314,7 +315,9 @@
   "widgets": {
     "general": {
       "loading": "加载中...",
-      "show-more": "展开详情",
+      "show-more": "显示更多",
+      "cpu-details": "CPU 详情",
+      "mem-details": "内存 详情",
       "show-less": "显示更少信息",
       "open-link": "继续读取"
     },

src/components/Configuration/CloudBackupRestore.vue

@@ -155,12 +155,23 @@ export default {
     },
     /* When restored data is revieved, then save to local storage, and apply it in state */
     applyRestoredData(config, backupId) {
-      // Store restored data in local storage
-      localStorage.setItem(localStorageKeys.CONF_SECTIONS, JSON.stringify(config.sections));
-      localStorage.setItem(localStorageKeys.APP_CONFIG, JSON.stringify(config.appConfig));
-      localStorage.setItem(localStorageKeys.PAGE_INFO, JSON.stringify(config.pageInfo));
-      if (config.appConfig.theme) {
-        localStorage.setItem(localStorageKeys.THEME, config.appConfig.theme);
+      const isSubPage = !!this.$store.state.currentConfigInfo.confId;
+      if (isSubPage) { // Apply to sub-page only
+        const subConfigId = this.$store.state.currentConfigInfo.confId;
+        const sectionStorageKey = `${localStorageKeys.CONF_SECTIONS}-${subConfigId}`;
+        const pageInfoStorageKey = `${localStorageKeys.PAGE_INFO}-${subConfigId}`;
+        const themeStoreKey = `${localStorageKeys.THEME}-${subConfigId}`;
+        localStorage.setItem(sectionStorageKey, JSON.stringify(config.sections));
+        localStorage.setItem(pageInfoStorageKey, JSON.stringify(config.pageInfo));
+        localStorage.setItem(themeStoreKey, config.appConfig.theme);
+      } else { // Apply to main config
+        localStorage.setItem(localStorageKeys.CONF_SECTIONS, JSON.stringify(config.sections));
+        localStorage.setItem(localStorageKeys.APP_CONFIG, JSON.stringify(config.appConfig));
+        localStorage.setItem(localStorageKeys.PAGE_INFO, JSON.stringify(config.pageInfo));
+        localStorage.setItem(localStorageKeys.CONF_PAGES, JSON.stringify(config.pages || []));
+        if (config.appConfig.theme) {
+          localStorage.setItem(localStorageKeys.THEME, config.appConfig.theme);
+        }
       }
       // Save hashed token in local storage
       this.setBackupIdLocally(backupId, this.restorePassword);

src/components/Configuration/ConfigContainer.vue

@@ -47,16 +47,17 @@
           </Button>
           <!-- Display app version and language -->
           <p class="language">{{ getLanguage() }}</p>
-          <p v-if="$store.state.currentConfigInfo" class="config-location">
-            Using Config From<br>
-            {{ $store.state.currentConfigInfo.confPath }}
+          <!-- Display location of config file -->
+          <p class="config-location">
+            Using config from
+            <a :href="configPath">{{ configPath }}</a>
           </p>
           <AppVersion />
         </div>
         <!-- Display note if Config disabled, or if on mobile -->
         <p v-if="!enableConfig" class="config-disabled-note">{{ $t('config.disabled-note') }}</p>
         <p class="small-screen-note" style="display: none;">{{ $t('config.small-screen-note') }}</p>
-        <div class="config-note">
+        <div class="config-note" @click="openExportConfigModal">
           <span>{{ $t('config.backup-note') }}</span>
         </div>
       </div>
@@ -116,6 +117,11 @@ export default {
     enableConfig() {
       return this.$store.getters.permissions.allowViewConfig;
     },
+    configPath() {
+      return this.$store.state.currentConfigInfo?.confPath
+      || process.env.VUE_APP_CONFIG_PATH
+      || '/conf.yml';
+    },
   },
   components: {
     Button,
@@ -248,8 +254,12 @@ a.hyperlink-wrapper {
 p.app-version, p.language, p.config-location {
   margin: 0.5rem auto;
   font-size: 1rem;
-  color: var(--transparent-white-50);
+  color: var(--config-settings-color);
   cursor: default;
+  opacity: var(--dimming-factor);
+  a {
+    color: var(--config-settings-color);
+  }
 }
 
 div.code-container {

src/components/Configuration/JsonEditor.vue

@@ -116,7 +116,8 @@ export default {
   },
   mounted() {
     const jsonData = { ...this.config };
-    jsonData.sections = jsonData.sections.map(({ filteredItems, ...section }) => section);
+    jsonData.sections = (jsonData.sections || []).map(({ filteredItems, ...section }) => section);
+    if (!jsonData.pageInfo) jsonData.pageInfo = { title: 'Dashy' };
     this.jsonData = jsonData;
     if (!this.allowWriteToDisk) this.saveMode = 'local';
   },
@@ -143,7 +144,11 @@ export default {
       this.$modal.hide(modalNames.CONF_EDITOR);
     },
     writeToDisk() {
-      this.writeConfigToDisk(this.config);
+      const newData = this.jsonData;
+      this.writeConfigToDisk(newData);
+      // this.$store.commit(StoreKeys.SET_APP_CONFIG, newData.appConfig);
+      this.$store.commit(StoreKeys.SET_PAGE_INFO, newData.pageInfo);
+      this.$store.commit(StoreKeys.SET_SECTIONS, newData.sections);
     },
     saveLocally() {
       const msg = this.$t('interactive-editor.menu.save-locally-warning');

src/components/InteractiveEditor/ExportConfigMenu.vue

@@ -22,6 +22,14 @@
         <DownloadConfigIcon />
       </Button>
     </div>
+    <!-- Show path to which config file is being used -->
+    <div class="config-path-info">
+      <h3>Config Location</h3>
+      <p>
+        The base config file you are currently using is
+        <a :href="configPath">{{ configPath }}</a>
+      </p>
+    </div>
     <!-- View Config in Tree Mode Section -->
     <h3>{{ $t('interactive-editor.export.view-title') }}</h3>
     <tree-view :data="config" class="config-tree-view" />
@@ -61,6 +69,11 @@ export default {
     allowViewConfig() {
       return this.$store.getters.permissions.allowViewConfig;
     },
+    configPath() {
+      return this.$store.state.currentConfigInfo?.confPath
+      || process.env.VUE_APP_CONFIG_PATH
+      || '/conf.yml';
+    },
   },
   methods: {
     convertJsonToYaml() {
@@ -121,6 +134,13 @@ export default {
     border-bottom: 1px dashed var(--interactive-editor-color);
     button { margin: 0 1rem; }
   }
+  .config-path-info {
+    p, a {
+      color: var(--interactive-editor-color);
+      font-size: 1.2rem;
+    }
+    border-bottom: 1px dashed var(--interactive-editor-color);
+  }
   .config-tree-view {
     padding: 0.5rem;
     font-family: var(--font-monospace);

src/components/LinkItems/Collapsable.vue

@@ -64,7 +64,6 @@ export default {
       return this.$store.state.editMode;
     },
     sectionKey() {
-      if (this.isEditMode) return undefined;
       return `collapsible-${this.uniqueKey}`;
     },
     collapseClass() {
@@ -104,12 +103,23 @@ export default {
   watch: {
     checkboxState(newState) {
       this.isExpanded = newState;
+      this.updateLocalStorage(); // Save every change immediately
     },
-    uniqueKey() {
-      this.checkboxState = this.isExpanded;
+    uniqueKey(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.refreshCollapseState(); // Refresh state when key changes
+      }
     },
   },
   methods: {
+    refreshCollapseState() {
+      this.checkboxState = this.isExpanded;
+    },
+    updateLocalStorage() {
+      const collapseState = this.locallyStoredCollapseStates();
+      collapseState[this.uniqueKey] = this.checkboxState;
+      localStorage.setItem(localStorageKeys.COLLAPSE_STATE, JSON.stringify(collapseState));
+    },
     /* Either expand or collapse section, based on it's current state */
     toggle() {
       this.checkboxState = !this.checkboxState;

src/components/LinkItems/ItemIcon.vue

@@ -21,7 +21,6 @@
 </template>
 
 <script>
-import simpleIcons from 'simple-icons';
 import BrokenImage from '@/assets/interface-icons/broken-icon.svg';
 import ErrorHandler from '@/utils/ErrorHandler';
 import EmojiUnicodeRegex from '@/utils/EmojiUnicodeRegex';
@@ -29,6 +28,8 @@ import emojiLookup from '@/utils/emojis.json';
 import { asciiHash } from '@/utils/MiscHelpers';
 import { faviconApi as defaultFaviconApi, faviconApiEndpoints, iconCdns } from '@/utils/defaults';
 
+const simpleicons = require('simple-icons');
+
 export default {
   name: 'Icon',
   props: {
@@ -186,8 +187,8 @@ export default {
     },
     /* Returns the SVG path content  */
     getSimpleIcon(img) {
-      const imageName = img.replace('si-', '');
-      const icon = simpleIcons.Get(imageName);
+      const imageName = img.charAt(3).toUpperCase() + img.slice(4);
+      const icon = simpleicons[`si${imageName}`];
       if (!icon) {
         this.imageNotFound(`No icon was found for '${imageName}' in Simple Icons`);
         return null;

src/components/PageStrcture/CriticalError.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="critical-error-wrap" v-if="shouldShow">
+    <button class="close" title="Close Warning" @click="close">🗙</button>
+    <h3>{{ $t('critical-error.title') }}</h3>
+    <p>{{ $t('critical-error.subtitle') }}</p>
+    <h4>{{ $t('critical-error.sub-ensure-that') }}</h4>
+    <ul>
+      <li>The configuration file can be found at the specified location</li>
+      <li>There are no CORS rules preventing client-side access</li>
+      <li>The YAML is valid, parsable and matches the schema</li>
+    </ul>
+    <h4>{{ $t('critical-error.sub-error-details') }}</h4>
+    <pre>{{ this.$store.state.criticalError }}</pre>
+    <h4>{{ $t('critical-error.sub-next-steps') }}</h4>
+    <ul>
+      <li>Check the browser console for more details
+        (<a href="https://github.com/Lissy93/dashy/blob/master/docs/troubleshooting.md#how-to-open-browser-console">see how</a>)
+      </li>
+      <li>View the
+        <a href="https://github.com/Lissy93/dashy/blob/master/docs/troubleshooting.md">Troubleshooting Guide</a>
+        and <a href="https://dashy.to/docs/">Docs</a>
+      </li>
+      <li>
+        If you've verified the config is present, accessible and valid, and cannot find the solution
+        in the troubleshooting, docs or GitHub issues,
+        then <a href="https://github.com/Lissy93/dashy/issues/new/choose">open a ticket on GitHub</a>
+      </li>
+      <li>Click 'Ignore Critical Errors' below to not show this warning again</li>
+    </ul>
+    <button class="user-doesnt-care" @click="ignoreWarning">
+      {{ $t('critical-error.ignore-button') }}
+    </button>
+  </div>
+</template>
+
+<script>
+import { localStorageKeys } from '@/utils/defaults';
+import Keys from '@/utils/StoreMutations';
+
+export default {
+  name: 'CriticalError',
+  computed: {
+    /* Determines if we should show this component.
+     * If error present AND user hasn't disabled */
+    shouldShow() {
+      return this.$store.state.criticalError
+      && !localStorage[localStorageKeys.DISABLE_CRITICAL_WARNING];
+    },
+  },
+  methods: {
+    /* Ignore all future errors, by putting a key in local storage */
+    ignoreWarning() {
+      localStorage.setItem(localStorageKeys.DISABLE_CRITICAL_WARNING, true);
+      this.close();
+    },
+    /* Close this dialog, by removing this error from the local store */
+    close() {
+      this.$store.commit(Keys.CRITICAL_ERROR_MSG, null);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/media-queries.scss';
+.critical-error-wrap {
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 3;
+  max-width: 50rem;
+  background: var(--background-darker);
+  padding: 1rem;
+  border-radius: var(--curve-factor);
+  color: var(--danger);
+  border: 2px solid var(--danger);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.5rem;
+  transition: all 0.2s ease-in-out;
+  @include tablet-down {
+    top: 50%;
+    width: 85vw;
+  }
+  p, ul, h4, a {
+    margin: 0;
+    color: var(--white);
+  }
+  pre {
+    color: var(--warning);
+    font-size: 0.8rem;
+    overflow: auto;
+    background: var(--transparent-white-10);
+    padding: 0.5rem;
+    border-radius: var(--curve-factor);
+  }
+  h4 {
+    margin: 0.5rem 0 0 0;
+    font-size: 1.2rem;
+  }
+  h3 {
+    font-size: 2.2rem;
+    text-align: center;
+    background: var(--danger);
+    color: var(--white);
+    margin: -1rem -1rem 1rem -1rem;
+    padding: 0.5rem;
+  }
+  ul {
+    padding-left: 1rem;
+  }
+  .user-doesnt-care {
+    background: var(--background-darker);
+    color: var(--white);
+    border-radius: var(--curve-factor);
+    border: none;
+    text-decoration: underline;
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+    width: fit-content;
+    margin: 0 auto;
+    transition: all 0.2s ease-in-out;
+    &:hover {
+      background: var(--danger);
+      color: var(--background-darker);
+      text-decoration: none;
+    }
+  }
+  .close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1rem;
+    background: var(--background);
+    color: var(--primary);
+    border: none;
+    border-radius: var(--curve-factor);
+    transition: all 0.2s ease-in-out;
+    &:hover {
+      background: var(--primary);
+      color: var(--background);
+    }
+  }
+}
+</style>

src/components/PageStrcture/Footer.vue

@@ -1,16 +1,13 @@
 <template>
-  <!-- User Footer -->
-  <footer v-if="text && text !== '' && visible" v-html="text"></footer>
-  <!-- Default Footer -->
-  <footer v-else-if="visible">
-    <span v-if="$store.state.currentConfigInfo" class="path-to-config">
-      Using: {{ $store.state.currentConfigInfo.confPath }}
-    </span>
-    <span>
-      {{ $t('footer.dev-by') }} <a :href="authorUrl">{{authorName}}</a>.
-      {{ $t('footer.licensed-under') }} <a :href="licenseUrl">{{license}}</a>
-      {{ showCopyright? '©': '' }} {{date}}.
-      {{ $t('footer.get-the') }} <a :href="repoUrl">{{ $t('footer.source-code') }}</a>.
+  <footer v-if="visible">
+    <!-- User-defined footer -->
+    <span v-if="text" v-html="text"></span>
+    <!-- Default footer -->
+    <span v-else>
+      <a :href="defaultInfo.projectUrl">Dashy</a> is free & open source
+      - licensed under <a :href="defaultInfo.licenseUrl">{{defaultInfo.license}}</a>,
+      © <a :href="defaultInfo.authorUrl">{{defaultInfo.authorName}}</a> {{defaultInfo.date}}.
+      Get support on GitHub, at <a :href="defaultInfo.repoUrl">{{defaultInfo.repoName}}</a>.
     </span>
   </footer>
 </template>
@@ -23,13 +20,20 @@ export default {
   name: 'Footer',
   props: {
     text: String,
-    authorName: { type: String, default: 'Alicia Sykes' },
-    authorUrl: { type: String, default: 'https://aliciasykes.com' },
-    license: { type: String, default: 'MIT' },
-    licenseUrl: { type: String, default: 'https://gist.github.com/Lissy93/143d2ee01ccc5c052a17' },
-    date: { type: String, default: `${new Date().getFullYear()}` },
-    showCopyright: { type: Boolean, default: true },
-    repoUrl: { type: String, default: 'https://github.com/lissy93/dashy' },
+  },
+  data() {
+    return {
+      defaultInfo: {
+        authorName: 'Alicia Sykes',
+        authorUrl: 'https://as93.net',
+        license: 'MIT',
+        licenseUrl: 'https://gist.github.com/Lissy93/143d2ee01ccc5c052a17',
+        date: `${new Date().getFullYear()}`,
+        repoUrl: 'https://github.com/lissy93/dashy',
+        repoName: 'Lissy93/Dashy',
+        projectUrl: 'https://dashy.to',
+      },
+    };
   },
   computed: {
     visible() {
@@ -56,7 +60,7 @@ footer {
     display: none;
   }
   span.path-to-config {
-    float: right;
+    float: left;
     font-size: 0.75rem;
     margin: 0.1rem 0.5rem 0 0;
     opacity: var(--dimming-factor);

src/components/PageStrcture/PageTitle.vue

@@ -66,7 +66,7 @@ export default {
   span.subtitle {
     color: var(--heading-text-color);
     font-style: italic;
-    text-shadow: 1px 1px 2px #130f23;
+    text-shadow: 1px 1px 2px #130f2347;
     opacity: var(--dimming-factor);
   }
   img.site-logo {

src/components/Settings/AuthButtons.vue

@@ -24,6 +24,13 @@
         v-tooltip="tooltip($t('settings.sign-out-tooltip'))"
         class="layout-icon" tabindex="-2"
       />
+      <!-- If user logged in via oidc, show oidc logout button -->
+      <IconLogout
+        v-if="userType == userStateEnum.oidcEnabled"
+        @click="oidcLogout()"
+        v-tooltip="tooltip($t('settings.sign-out-tooltip'))"
+        class="layout-icon" tabindex="-2"
+      />
     </div>
   </div>
 </template>
@@ -32,6 +39,7 @@
 import router from '@/router';
 import { logout as registerLogout } from '@/utils/Auth';
 import { getKeycloakAuth } from '@/utils/KeycloakAuth';
+import { getOidcAuth } from '@/utils/OidcAuth';
 import { localStorageKeys, userStateEnum } from '@/utils/defaults';
 import IconLogout from '@/assets/interface-icons/user-logout.svg';
 
@@ -56,6 +64,13 @@ export default {
         router.push({ path: '/login' });
       }, 500);
     },
+    oidcLogout() {
+      const oidc = getOidcAuth();
+      this.$toasted.show(this.$t('login.logout-message'));
+      setTimeout(() => {
+        oidc.logout();
+      }, 500);
+    },
     keycloakLogout() {
       const keycloak = getKeycloakAuth();
       this.$toasted.show(this.$t('login.logout-message'));

src/components/Settings/ItemSizeSelector.vue

@@ -37,8 +37,10 @@ export default {
       input: '',
     };
   },
-  props: {
-    iconSize: String,
+  computed: {
+    iconSize() {
+      return this.$store.getters.iconSize;
+    },
   },
   components: {
     IconSmall,

src/components/Settings/LayoutSelector.vue

@@ -5,19 +5,19 @@
       <IconDeafault
         @click="updateDisplayLayout('auto')"
         v-tooltip="tooltip($t('settings.layout-auto'))"
-        :class="`layout-icon ${displayLayout === 'auto' ? 'selected' : ''}`"
+        :class="`layout-icon ${layout === 'auto' ? 'selected' : ''}`"
         tabindex="-2"
       />
       <IconHorizontal
         @click="updateDisplayLayout('horizontal')"
         v-tooltip="tooltip($t('settings.layout-horizontal'))"
-        :class="`layout-icon ${displayLayout === 'horizontal' ? 'selected' : ''}`"
+        :class="`layout-icon ${layout === 'horizontal' ? 'selected' : ''}`"
         tabindex="-2"
       />
       <IconVertical
         @click="updateDisplayLayout('vertical')"
         v-tooltip="tooltip($t('settings.layout-vertical'))"
-        :class="`layout-icon ${displayLayout === 'vertical' ? 'selected' : ''}`"
+        :class="`layout-icon ${layout === 'vertical' ? 'selected' : ''}`"
         tabindex="-2"
       />
     </div>
@@ -40,6 +40,11 @@ export default {
     IconHorizontal,
     IconVertical,
   },
+  computed: {
+    layout() {
+      return this.$store.getters.layout;
+    },
+  },
   methods: {
     updateDisplayLayout(layout) {
       this.$store.commit(StoreKeys.SET_ITEM_LAYOUT, layout);

src/components/Settings/LocalConfigWarning.vue

@@ -1,36 +1,70 @@
 <template>
   <transition name="slide-fade">
     <div class="kb-sc-info" v-if="!shouldHide">
-      <h5>There are keyboard shortcuts! ⌨️🙌</h5>
+      <h5>{{ popupContent.title }}</h5>
       <div class="close" title="Hide forever [Esc]" @click="hideWelcomeHelper()">x</div>
-      <p title="Press [Esc] to hide this tip forever. See there's even a shortcut for that! 🚀">
-        Just start typing to filter. Then use the tab key to cycle through results,
-        and press enter to launch the selected item, or alt + enter to open in a modal.
-        You can hit Esc at anytime to clear the search. Easy 🥳
-      </p>
+      <p :title="popupContent.hoverText">{{ popupContent.message }}</p>
+      <p :title="popupContent.hoverText">{{ popupContent.messageContinued }}</p>
+      <div class="action-buttons">
+        <button @click="exportConfig">Export Local Config</button>
+        <button @click="saveConfig">Save Changes to Disk</button>
+        <button @click="resetLocalConfig">Reset Local Changes</button>
+        <button @click="hideWelcomeHelper">Dismiss this Notification</button>
+      </div>
     </div>
   </transition>
 </template>
 
 <script>
 
-import { localStorageKeys } from '@/utils/defaults';
+import { localStorageKeys, modalNames } from '@/utils/defaults';
+import StoreKeys from '@/utils/StoreMutations';
+import configSavingMixin from '@/mixins/ConfigSaving';
 
 export default {
   name: 'KeyboardShortcutInfo',
+  mixins: [configSavingMixin],
   data() {
     return {
       shouldHide: true, // False = show/ true = hide. Intuitive, eh?
-      timeDelay: 3000, // Short delay in ms before popup appears
+      timeDelay: 2000, // Short delay in ms before popup appears
+      popupContent: {
+        title: '⚠️ You\'re using a local config',
+        message: `This means that your settings are saved in this browser only,
+        and won't persist across devices.`,
+        messageContinued: `To ensure you don't loose your changes,
+        it's recommended to download a copy of your config, so you can restore it later.`,
+        hoverText: 'Press [Esc] to hide this warning',
+      },
     };
   },
   methods: {
+    exportConfig() {
+      this.$modal.show(modalNames.EXPORT_CONFIG_MENU);
+      this.shouldHide = true;
+    },
+    saveConfig() {
+      const localConfig = this.$store.state.config;
+      this.writeConfigToDisk(localConfig);
+      this.shouldHide = true;
+    },
+    resetLocalConfig() {
+      const msg = `${this.$t('config.reset-config-msg-l1')} `
+      + `${this.$t('config.reset-config-msg-l2')}\n\n${this.$t('config.reset-config-msg-l3')}`;
+      const isTheUserSure = confirm(msg); // eslint-disable-line no-alert, no-restricted-globals
+      if (isTheUserSure) {
+        localStorage.clear();
+        this.$toasted.show(this.$t('config.data-cleared-msg'));
+        this.$store.dispatch(StoreKeys.INITIALIZE_CONFIG);
+        this.shouldHide = true;
+      }
+    },
     /**
      * Returns true if the key exists in session storage, otherwise false
      * And the !! just converts 'false' to false, as strings resolve to true
      */
     shouldHideWelcomeMessage() {
-      return !!localStorage[localStorageKeys.HIDE_WELCOME_BANNER];
+      return !!localStorage[localStorageKeys.HIDE_INFO_NOTIFICATION];
     },
     /**
      * Update session storage, so that it won't be shown again
@@ -38,7 +72,7 @@ export default {
      */
     hideWelcomeHelper() {
       this.shouldHide = true;
-      localStorage.setItem(localStorageKeys.HIDE_WELCOME_BANNER, true);
+      localStorage.setItem(localStorageKeys.HIDE_INFO_NOTIFICATION, true);
       window.removeEventListener('keyup', this.keyPressEvent);
     },
     /* Passed to window function, to add/ remove event listener */
@@ -114,6 +148,23 @@ export default {
     }
   }
 }
+.action-buttons {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 1em;
+  button {
+    padding: 0.2rem;
+    background: var(--welcome-popup-background);
+    color: var(--welcome-popup-text-color);
+    border: 1px solid var(--welcome-popup-text-color);
+    border-radius: var(--curve-factor);
+    transition: all 0.2s ease-in-out;
+    &:hover {
+      background: var(--welcome-popup-text-color);
+      color: var(--welcome-popup-background);
+    }
+  }
+}
 /* Animations, animations everywhere */
 .slide-fade-enter-active {
   transition: all 1s ease;

src/components/Settings/SearchBar.vue

@@ -95,7 +95,8 @@ export default {
     },
     /* If configured, launch specific app when hotkey pressed */
     handleHotKey(key) {
-      const usersHotKeys = this.getCustomKeyShortcuts();
+      const sections = this.$store.getters.sections || [];
+      const usersHotKeys = this.getCustomKeyShortcuts(sections);
       usersHotKeys.forEach((hotkey) => {
         if (hotkey.hotkey === parseInt(key, 10)) {
           if (hotkey.url) window.open(hotkey.url, '_blank');

src/components/Settings/SettingsContainer.vue

@@ -7,7 +7,7 @@
     <div class="options-outer">
       <div :class="`options-container ${!settingsVisible ? 'hide' : ''}`">
         <ThemeSelector />
-        <LayoutSelector :displayLayout="displayLayout" />
+        <LayoutSelector :displayLayout="$store.getters.layout" />
         <ItemSizeSelector :iconSize="iconSize" />
         <ConfigLauncher />
         <AuthButtons  v-if="userState !== 0" :userType="userState" />

src/components/Settings/ThemeSelector.vue

@@ -8,7 +8,7 @@
       :value="$store.getters.theme"
       class="theme-dropdown"
       :tabindex="-2"
-      @input="themeChanged"
+      @input="themeChangedInUI"
     />
     </div>
     <IconPalette
@@ -28,18 +28,13 @@
 <script>
 
 import CustomThemeMaker from '@/components/Settings/CustomThemeMaker';
-import {
-  LoadExternalTheme,
-  ApplyLocalTheme,
-  ApplyCustomVariables,
-} from '@/utils/ThemeHelper';
-import Defaults, { localStorageKeys } from '@/utils/defaults';
 import Keys from '@/utils/StoreMutations';
-import ErrorHandler from '@/utils/ErrorHandler';
 import IconPalette from '@/assets/interface-icons/config-color-palette.svg';
+import ThemingMixin from '@/mixins/ThemingMixin';
 
 export default {
   name: 'ThemeSelector',
+  mixins: [ThemingMixin],
   props: {
     hidePallete: Boolean,
   },
@@ -47,101 +42,16 @@ export default {
     CustomThemeMaker,
     IconPalette,
   },
-  watch: {
-    /* When theme in VueX store changes, then update theme */
-    themeFromStore(newTheme) {
-      this.selectedTheme = newTheme;
-      this.updateTheme(newTheme);
-    },
-  },
   data() {
     return {
-      selectedTheme: '',
       themeConfiguratorOpen: false, // Control the opening of theme config popup
-      themeHelper: new LoadExternalTheme(),
-      ApplyLocalTheme,
-      ApplyCustomVariables,
     };
   },
-  computed: {
-    /* Get appConfig from store */
-    appConfig() {
-      return this.$store.getters.appConfig;
-    },
-    /* Get users theme from store */
-    themeFromStore() {
-      return this.$store.getters.theme;
-    },
-    /* Combines all theme names (builtin and user defined) together */
-    themeNames: function themeNames() {
-      const externalThemeNames = Object.keys(this.externalThemes);
-      const specialThemes = ['custom'];
-      return [...this.extraThemeNames, ...externalThemeNames,
-        ...Defaults.builtInThemes, ...specialThemes];
-    },
-    extraThemeNames() {
-      const userThemes = this.appConfig.cssThemes || [];
-      if (typeof userThemes === 'string') return [userThemes];
-      return userThemes;
-    },
-    /* Returns an array of links to external CSS from the Config */
-    externalThemes() {
-      const availibleThemes = {};
-      if (this.appConfig && this.appConfig.externalStyleSheet) {
-        const externals = this.appConfig.externalStyleSheet;
-        if (Array.isArray(externals)) {
-          externals.forEach((ext, i) => {
-            availibleThemes[`External Stylesheet ${i + 1}`] = ext;
-          });
-        } else if (typeof externals === 'string') {
-          availibleThemes['External Stylesheet'] = this.appConfig.externalStyleSheet;
-        } else {
-          ErrorHandler('External stylesheets must be of type string or string[]');
-        }
-      }
-      // availibleThemes.Default = '#';
-      return availibleThemes;
-    },
-  },
+  computed: {},
   mounted() {
-    const initialTheme = this.getInitialTheme();
-    this.selectedTheme = initialTheme;
-    // Quicker loading, if the theme is local we can apply it immidiatley
-    if (this.isThemeLocal(initialTheme)) {
-      this.updateTheme(initialTheme);
-    }
-
-    // If it's an external stylesheet, then wait for promise to resolve
-    if (this.externalThemes && Object.entries(this.externalThemes).length > 0) {
-      const added = Object.keys(this.externalThemes).map(
-        name => this.themeHelper.add(name, this.externalThemes[name]),
-      );
-      // Once, added, then apply users initial theme
-      Promise.all(added).then(() => {
-        this.updateTheme(initialTheme);
-      });
-    }
+    this.initializeTheme();
   },
   methods: {
-    /* Called when dropdown changed
-     * Updates store, which will in turn update theme through watcher
-     */
-    themeChanged() {
-      const pageId = this.$store.state.currentConfigInfo?.pageId || null;
-      this.$store.commit(Keys.SET_THEME, { theme: this.selectedTheme, pageId });
-      this.updateTheme(this.selectedTheme);
-    },
-    /* Returns the initial theme */
-    getInitialTheme() {
-      const localTheme = localStorage[localStorageKeys.THEME];
-      if (localTheme && localTheme !== 'undefined') return localTheme;
-      return this.appConfig.theme || Defaults.theme;
-    },
-    /* Determines if a given theme is local / not a custom user stylesheet */
-    isThemeLocal(themeToCheck) {
-      const localThemes = [...Defaults.builtInThemes, ...this.extraThemeNames];
-      return localThemes.includes(themeToCheck);
-    },
     /* Opens the theme color configurator popup */
     openThemeConfigurator() {
       this.$store.commit(Keys.SET_MODAL_OPEN, true);
@@ -154,24 +64,6 @@ export default {
         this.themeConfiguratorOpen = false;
       }
     },
-    /* Updates theme. Checks if the new theme is local or external,
-    and calls appropirate updating function. Updates local storage */
-    updateTheme(newTheme) {
-      if (newTheme === 'Default') {
-        this.resetToDefault();
-        this.themeHelper.theme = 'Default';
-      } else if (this.isThemeLocal(newTheme)) {
-        this.ApplyLocalTheme(newTheme);
-      } else {
-        this.themeHelper.theme = newTheme;
-      }
-      this.ApplyCustomVariables(newTheme);
-      // localStorage.setItem(localStorageKeys.THEME, newTheme);
-    },
-    /* Removes any applied themes */
-    resetToDefault() {
-      document.getElementsByTagName('html')[0].removeAttribute('data-theme');
-    },
   },
 };
 </script>

src/components/Widgets/AdGuardDnsInfo.vue

@@ -26,7 +26,7 @@ export default {
     /* URL/ IP or hostname to the AdGuardHome instance, without trailing slash */
     hostname() {
       if (!this.options.hostname) this.error('You must specify the path to your AdGuard server');
-      return this.options.hostname;
+      return this.parseAsEnvVar(this.options.hostname);
     },
     showFullInfo() {
       return this.options.showFullInfo;
@@ -39,7 +39,9 @@ export default {
     },
     authHeaders() {
       if (this.options.username && this.options.password) {
-        const encoded = window.btoa(`${this.options.username}:${this.options.password}`);
+        const password = this.parseAsEnvVar(this.options.password);
+        const username = this.parseAsEnvVar(this.options.username);
+        const encoded = window.btoa(`${username}:${password}`);
         return { Authorization: `Basic ${encoded}` };
       }
       return {};

src/components/Widgets/AdGuardFilterStatus.vue

@@ -38,7 +38,7 @@ export default {
     /* URL/ IP or hostname to the AdGuardHome instance, without trailing slash */
     hostname() {
       if (!this.options.hostname) this.error('You must specify the path to your AdGuard server');
-      return this.options.hostname;
+      return this.parseAsEnvVar(this.options.hostname);
     },
     showOnOffStatusOnly() {
       return this.options.showOnOffStatusOnly;
@@ -48,7 +48,9 @@ export default {
     },
     authHeaders() {
       if (this.options.username && this.options.password) {
-        const encoded = window.btoa(`${this.options.username}:${this.options.password}`);
+        const username = this.parseAsEnvVar(this.options.username);
+        const password = this.parseAsEnvVar(this.options.password);
+        const encoded = window.btoa(`${username}:${password}`);
         return { Authorization: `Basic ${encoded}` };
       }
       return {};

src/components/Widgets/AdGuardStats.vue

@@ -20,14 +20,16 @@ export default {
     /* URL/ IP or hostname to the AdGuardHome instance, without trailing slash */
     hostname() {
       if (!this.options.hostname) this.error('You must specify the path to your AdGuard server');
-      return this.options.hostname;
+      return this.parseAsEnvVar(this.options.hostname);
     },
     endpoint() {
       return `${this.hostname}/control/stats`;
     },
     authHeaders() {
       if (this.options.username && this.options.password) {
-        const encoded = window.btoa(`${this.options.username}:${this.options.password}`);
+        const username = this.parseAsEnvVar(this.options.username);
+        const password = this.parseAsEnvVar(this.options.password);
+        const encoded = window.btoa(`${username}:${password}`);
         return { Authorization: `Basic ${encoded}` };
       }
       return {};

src/components/Widgets/AdGuardTopDomains.vue

@@ -36,11 +36,13 @@ export default {
     /* URL/ IP or hostname to the AdGuardHome instance, without trailing slash */
     hostname() {
       if (!this.options.hostname) this.error('You must specify the path to your AdGuard server');
-      return this.options.hostname;
+      return this.parseAsEnvVar(this.options.hostname);
     },
     authHeaders() {
       if (this.options.username && this.options.password) {
-        const encoded = window.btoa(`${this.options.username}:${this.options.password}`);
+        const username = this.parseAsEnvVar(this.options.username);
+        const password = this.parseAsEnvVar(this.options.password);
+        const encoded = window.btoa(`${username}:${password}`);
         return { Authorization: `Basic ${encoded}` };
       }
       return {};

src/components/Widgets/AnonAddy.vue

@@ -113,7 +113,7 @@ export default {
   },
   computed: {
     hostname() {
-      return this.options.hostname || widgetApiEndpoints.anonAddy;
+      return this.parseAsEnvVar(this.options.hostname) || widgetApiEndpoints.anonAddy;
     },
     apiVersion() {
       return this.options.apiVersion || 'v1';
@@ -132,7 +132,7 @@ export default {
     },
     apiKey() {
       if (!this.options.apiKey) this.error('An apiKey is required');
-      return this.options.apiKey;
+      return this.parseAsEnvVar(this.options.apiKey);
     },
     hideMeta() {
       return this.options.hideMeta;

src/components/Widgets/BlacklistCheck.vue

@@ -35,7 +35,7 @@ export default {
     },
     apiKey() {
       if (!this.options.apiKey) this.error('Missing API Key');
-      return this.options.apiKey;
+      return this.parseAsEnvVar(this.options.apiKey);
     },
     endpoint() {
       return `${widgetApiEndpoints.blacklistCheck}/${this.ipAddress}`;

src/components/Widgets/CodeStats.vue

@@ -38,12 +38,12 @@ export default {
     /* The username to fetch data from - REQUIRED */
     username() {
       if (!this.options.username) this.error('You must specify a username');
-      return this.options.username;
+      return this.parseAsEnvVar(this.options.username);
     },
     /* Optionally override hostname, if using a self-hosted instance */
     hostname() {
       if (this.options.hostname) return this.options.hostname;
-      return widgetApiEndpoints.codeStats;
+      return this.parseAsEnvVar(widgetApiEndpoints.codeStats);
     },
     hideMeta() {
       return this.options.hideMeta || false;

src/components/Widgets/DomainMonitor.vue

@@ -63,11 +63,11 @@ export default {
   computed: {
     apiKey() {
       if (!this.options.apiKey) this.error('Missing API Key');
-      return this.options.apiKey;
+      return this.parseAsEnvVar(this.options.apiKey);
     },
     domain() {
       if (!this.options.domain) this.error('Missing Domain Name Key');
-      return this.options.domain;
+      return this.parseAsEnvVar(this.options.domain);
     },
     endpoint() {
       return `${widgetApiEndpoints.domainMonitor}/?domain=${this.domain}&r=whois&apikey=${this.apiKey}`;

src/components/Widgets/DroneCi.vue

@@ -106,7 +106,7 @@ export default {
       if (!this.options.apiKey) {
         this.error('An API key is required, please see the docs for more info');
       }
-      return this.options.apiKey;
+      return this.parseAsEnvVar(this.options.apiKey);
     },
   },
   methods: {

src/components/Widgets/ExchangeRates.vue

@@ -45,7 +45,7 @@ export default {
   computed: {
     /* The users API key for exchangerate-api.com */
     apiKey() {
-      return this.options.apiKey;
+      return this.parseAsEnvVar(this.options.apiKey);
     },
     /* The currency to convert results into */
     inputCurrency() {

src/components/Widgets/Flights.vue

@@ -71,7 +71,7 @@ export default {
         this.error('An API key must be supplied');
         return '';
       }
-      return usersChoice;
+      return this.parseAsEnvVar(usersChoice);
     },
     /* The direction of flights: Arrival, Departure or Both */
     direction() {

src/components/Widgets/GitHubProfile.vue

@@ -1,9 +1,15 @@
 <template>
 <div class="readme-stats">
-  <img class="stats-card" v-if="!hideProfileCard" :src="profileCard" alt="Profile Card" />
-  <img class="stats-card" v-if="!hideLanguagesCard" :src="topLanguagesCard" alt="Languages" />
+  <a v-if="!hideProfileCard" :href="profileCardLink" target="_blank">
+    <img class="stats-card" :src="profileCard" alt="Profile Card" />
+  </a>
+  <a v-if="!hideLanguagesCard" :href="profileCardLink" target="_blank">
+    <img class="stats-card" :src="topLanguagesCard" alt="Languages" />
+  </a>
   <template v-if="repos">
-    <img class="stats-card" v-for="(repo, i) in repoCards" :key="i" :src="repo" :alt="repo" />
+    <a v-for="(repo, i) in repoCards" :key="i" :href="repo.cardHref" target="_blank">
+      <img class="stats-card" :src="repo.cardSrc" :alt="repo" />
+    </a>
   </template>
 </div>
 </template>
@@ -61,6 +67,9 @@ export default {
     profileCard() {
       return `${widgetApiEndpoints.readMeStats}?username=${this.username}${this.cardConfig}`;
     },
+    profileCardLink() {
+      return `https://github.com/${this.username}`;
+    },
     topLanguagesCard() {
       return `${widgetApiEndpoints.readMeStats}/top-langs/?username=${this.username}`
       + `${this.cardConfig}&langs_count=12`;
@@ -70,8 +79,11 @@ export default {
       this.repos.forEach((repo) => {
         const username = repo.split('/')[0];
         const repoName = repo.split('/')[1];
-        cards.push(`${widgetApiEndpoints.readMeStats}/pin/?username=${username}&repo=${repoName}`
-        + `${this.cardConfig}&show_owner=true`);
+        cards.push({
+          cardSrc: `${widgetApiEndpoints.readMeStats}/pin/?username=${username}`
+            + `&repo=${repoName}${this.cardConfig}&show_owner=true`,
+          cardHref: `https://github.com/${username}/${repoName}`,
+        });
       });
       return cards;
     },

src/components/Widgets/GluetunStatus.vue

@@ -58,7 +58,7 @@ export default {
     },
     hostname() {
       if (!this.options.hostname) this.error('`hostname` is required');
-      return this.options.hostname;
+      return this.parseAsEnvVar(this.options.hostname);
     },
   },
   methods: {

src/components/Widgets/HealthChecks.vue

@@ -56,7 +56,7 @@ export default {
         this.error('An API key is required, please see the docs for more info');
       }
       if (typeof this.options.apiKey === 'string') {
-        return [this.options.apiKey];
+        return [this.parseAsEnvVar(this.options.apiKey)];
       }
       return this.options.apiKey;
     },

src/components/Widgets/Linkding.vue

@@ -30,11 +30,11 @@ export default {
   computed: {
     endpoint() {
       if (!this.options.host) this.error('linkgding Host is required');
-      return `${this.options.host}/api/bookmarks`;
+      return `${this.parseAsEnvVar(this.options.host)}/api/bookmarks`;
     },
     apiKey() {
       if (!this.options.apiKey) this.error('linkgding apiKey is required');
-      return this.options.apiKey;
+      return this.parseAsEnvVar(this.options.apiKey);
     },
     filtertags() {
       return this.options.tags;

src/components/Widgets/NewsHeadlines.vue

@@ -29,7 +29,7 @@ export default {
   computed: {
     apiKey() {
       if (!this.options.apiKey) this.error('An API key is required, see docs for more info');
-      return this.options.apiKey;
+      return this.parseAsEnvVar(this.options.apiKey);
     },
     country() {
       return this.options.country ? `&country=${this.options.country}` : '';

src/components/Widgets/NextcloudNotifications.vue

@@ -22,7 +22,7 @@
           </span>
           <span v-if="canDeleteNotification('delete')">
             <a @click="deleteNotification(notification.notification_id)"
-               class="action secondary">{{ tt('delete-notification') }}</a>
+              class="action secondary">{{ tt('delete-notification') }}</a>
           </span>
         </p>
       </div>

src/components/Widgets/NextcloudStats.vue

@@ -44,7 +44,7 @@
         <em v-html="formatNumber(shares.num_shares)"></em>
         <strong>{{ tt('local') }}</strong> <small> {{ tt('and') }}</small>
         <em v-html="formatNumber(shares.num_fed_shares_sent
-                 + shares.num_fed_shares_received)"></em>
+          + shares.num_fed_shares_received)"></em>
         <strong>
           {{ tt('federated-shares') }}
         </strong>

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/components/Widgets/Proxmox.vue

@@ -34,22 +34,22 @@ export default {
   computed: {
     clusterUrl() {
       if (!this.options.cluster_url) this.error('The cluster URL is required.');
-      return this.options.cluster_url || '';
+      return this.parseAsEnvVar(this.options.cluster_url) || '';
     },
     userName() {
       if (!this.options.user_name) this.error('The user name is required.');
-      return this.options.user_name || '';
+      return this.parseAsEnvVar(this.options.user_name) || '';
     },
     tokenName() {
       if (!this.options.token_name) this.error('The token name is required.');
-      return this.options.token_name || '';
+      return this.parseAsEnvVar(this.options.token_name) || '';
     },
     tokenUuid() {
       if (!this.options.token_uuid) this.error('The token uuid is required.');
-      return this.options.token_uuid || '';
+      return this.parseAsEnvVar(this.options.token_uuid) || '';
     },
     node() {
-      return this.options.node || '';
+      return this.parseAsEnvVar(this.options.node) || '';
     },
     nodeData() {
       return this.options.node_data || false;

src/components/Widgets/PublicHolidays.vue

@@ -84,9 +84,12 @@ export default {
     /* Assign data variables to the returned data */
     processData(holidays) {
       const results = [];
-      const makeDate = (date) => timestampToDate(
-        new Date(`${date.year}-${date.month}-${date.day}`).getTime(),
-      );
+      const makeDate = (date) => {
+        const formattedMonth = date.month.toString().padStart(2, '0'); // Ensure two digits
+        const formattedDay = date.day.toString().padStart(2, '0'); // Ensure two digits
+        const dateString = `${date.year}-${formattedMonth}-${formattedDay}T00:00:00`;
+        return timestampToDate(new Date(dateString).getTime());
+      };
       const formatType = (ht) => capitalize(ht.replaceAll('_', ' '));
       holidays.forEach((holiday) => {
         results.push({

src/components/Widgets/PublicIp.vue

@@ -35,7 +35,7 @@ export default {
     },
     provider() {
       // Can be either `ip-api`, `ipapi.co` or `ipgeolocation`
-      return this.options.provider || 'ipapi.co';
+      return this.parseAsEnvVar(this.options.provider) || 'ipapi.co';
     },
   },
   data() {

src/components/Widgets/RssFeed.vue

@@ -51,7 +51,7 @@ export default {
       return this.options.rssUrl || '';
     },
     apiKey() {
-      return this.options.apiKey;
+      return this.parseAsEnvVar(this.options.apiKey);
     },
     parseLocally() {
       return this.options.parseLocally;

src/components/Widgets/SportsScores.vue

@@ -93,7 +93,7 @@ export default {
       return this.options.leagueId;
     },
     apiKey() {
-      return this.options.apiKey || '50130162';
+      return this.parseAsEnvVar(this.options.apiKey) || '50130162';
     },
     limit() {
       return this.options.limit || 20;

src/components/Widgets/StockPriceChart.vue

@@ -29,7 +29,7 @@ export default {
     },
     /* The users API key for AlphaVantage */
     apiKey() {
-      return this.options.apiKey;
+      return this.parseAsEnvVar(this.options.apiKey);
     },
     /* The formatted GET request API endpoint to fetch stock data from */
     endpoint() {

src/components/Widgets/SynologyDownload.vue

@@ -45,15 +45,15 @@ export default {
   computed: {
     hostname() {
       if (!this.options.hostname) this.error('A hostname is required');
-      return this.options.hostname;
+      return this.parseAsEnvVar(this.options.hostname);
     },
     username() {
       if (!this.options.username) this.error('A username is required');
-      return this.options.username;
+      return this.parseAsEnvVar(this.options.username);
     },
     password() {
       if (!this.options.password) this.error('A password is required');
-      return this.options.password;
+      return this.parseAsEnvVar(this.options.password);
     },
     endpointLogin() {
       return `${this.hostname}/webapi/auth.cgi?api=SYNO.API.Auth&version=3&method=login&account=${this.username}&passwd=${this.password}&session=DownloadStation&format=sid`;

src/components/Widgets/UptimeKuma.vue

@@ -0,0 +1,238 @@
+<template>
+  <div>
+    <template v-if="monitors">
+      <div v-for="(monitor, index) in monitors" :key="index" class="item-wrapper">
+        <div class="item monitor-row">
+          <div class="title-title"><span class="text">{{ monitor.name }}</span></div>
+          <div class="monitors-container">
+            <div class="status-container">
+              <span class="status-pill" :class="[monitor.statusClass]">{{ monitor.status }}</span>
+            </div>
+            <div class="status-container">
+              <span class="response-time">{{ monitor.responseTime }}ms</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template v-if="errorMessage">
+      <div class="error-message">
+        <span class="text">{{ errorMessage }}</span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+/**
+ * A simple example which you can use as a template for creating your own widget.
+ * Takes two optional parameters (`text` and `count`), and fetches a list of images
+ * from dummyapis.com, then renders the results to the UI.
+ */
+import WidgetMixin from '@/mixins/WidgetMixin';
+
+export default {
+  mixins: [WidgetMixin],
+  components: {},
+  data() {
+    return {
+      monitors: null,
+      errorMessage: null,
+      errorMessageConstants: {
+        missingApiKey: 'No API key set',
+        missingUrl: 'No URL set',
+      },
+    };
+  },
+
+  mounted() {
+    this.fetchData();
+  },
+  computed: {
+    /* Get API key for access to instance */
+    apiKey() {
+      return this.parseAsEnvVar(this.options.apiKey);
+    },
+    /* Get instance URL */
+    url() {
+      return this.parseAsEnvVar(this.options.url);
+    },
+    /* Create authorisation header for the instance from the apiKey */
+    authHeaders() {
+      if (!this.options.apiKey) {
+        return {};
+      }
+      const encoded = window.btoa(`:${this.options.apiKey}`);
+      return { Authorization: `Basic ${encoded}` };
+    },
+  },
+  methods: {
+    /* The update() method extends mixin, used to update the data.
+     * It's called by parent component, when the user presses update
+     */
+    update() {
+      this.startLoading();
+      this.fetchData();
+    },
+    /* Make the data request to the computed API endpoint */
+    fetchData() {
+      const { authHeaders, url } = this;
+
+      if (!this.optionsValid({ authHeaders, url })) {
+        return;
+      }
+
+      this.makeRequest(url, authHeaders)
+        .then(this.processData);
+    },
+    /* Convert API response data into a format to be consumed by the UI */
+    processData(response) {
+      const monitorRows = this.getMonitorRows(response);
+
+      const monitors = new Map();
+
+      for (let index = 0; index < monitorRows.length; index += 1) {
+        const row = monitorRows[index];
+        this.processRow(row, monitors);
+      }
+
+      this.monitors = Array.from(monitors.values());
+    },
+    getMonitorRows(response) {
+      return response.split('\n').filter(row => row.startsWith('monitor_'));
+    },
+    processRow(row, monitors) {
+      const dataType = this.getRowDataType(row);
+      const monitorName = this.getRowMonitorName(row);
+
+      if (!monitors.has(monitorName)) {
+        monitors.set(monitorName, { name: monitorName });
+      }
+
+      const monitor = monitors.get(monitorName);
+      const value = this.getRowValue(row);
+
+      const updated = this.setMonitorValue(dataType, monitor, value);
+
+      monitors.set(monitorName, updated);
+    },
+    setMonitorValue(key, monitor, value) {
+      const copy = { ...monitor };
+      switch (key) {
+        case 'monitor_cert_days_remaining': {
+          copy.certDaysRemaining = value;
+          break;
+        }
+        case 'monitor_cert_is_valid': {
+          copy.certValid = value;
+          break;
+        }
+        case 'monitor_response_time': {
+          copy.responseTime = value;
+          break;
+        }
+        case 'monitor_status': {
+          copy.status = value === '1' ? 'Up' : 'Down';
+          copy.statusClass = copy.status.toLowerCase();
+          break;
+        }
+        default:
+          break;
+      }
+
+      return copy;
+    },
+    getRowValue(row) {
+      return this.getValueWithRegex(row, /\b\d+\b$/);
+    },
+    getRowMonitorName(row) {
+      return this.getValueWithRegex(row, /monitor_name="([^"]+)"/);
+    },
+    getRowDataType(row) {
+      return this.getValueWithRegex(row, /^(.*?)\{/);
+    },
+    getValueWithRegex(string, regex) {
+      const result = string.match(regex);
+
+      const isArray = Array.isArray(result);
+
+      if (!isArray) {
+        return result;
+      }
+
+      return result.length > 1 ? result[1] : result[0];
+    },
+    optionsValid({ url, authHeaders }) {
+      const errors = [];
+      if (url === undefined) {
+        errors.push(this.errorMessageConstants.missingUrl);
+      }
+
+      if (authHeaders === undefined) {
+        errors.push(this.errorMessageConstants.missingApiKey);
+      }
+
+      if (errors.length === 0) { return true; }
+
+      this.errorMessage = errors.join('\n');
+      return false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.status-pill {
+  border-radius: 50em;
+  box-sizing: border-box;
+  font-size: 0.75em;
+  display: inline-block;
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  padding: .35em .65em;
+  margin: 1em 0.5em;
+  min-width: 64px;
+
+  &.up {
+    background-color: rgb(92, 221, 139);
+    color: black;
+  }
+
+  &.down {
+    background-color: rgb(220, 53, 69);
+    color: white;
+  }
+}
+
+div.item.monitor-row:hover {
+  background-color: var(--item-background);
+  color: var(--current-color);
+  opacity: 1;
+
+  div.title-title>span.text {
+    color: var(--current-color);
+  }
+}
+
+.monitors-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  width: 50%;
+}
+
+.monitor-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.35em 0.5em;
+  align-items: center;
+}
+
+.title-title {
+  font-weight: bold;
+}
+</style>