Release 2.31.0 (#3758)

Thanks to: @Developer-Incoming, @eltociear, @geraki, @khassel,
@KristjanESPERANTO, @MagMar94, @mixasgr, @n8many, @OWL4C, @rejas,
@savvadam, @sdetweil.

> ⚠️ This release needs nodejs version `v22.14.0 or higher`

### Added

- Add CSS support to the digital clock hour/minute/second through the
use of the classes `clock-hour-digital`, `clock-minute-digital`, and
`clock-second-digital`.
- Add Arabic (#3719) and Esperanto translation.
- Mark option `secondsColor` as deprecated in clock module.
- Add Greek translation to Alerts module.
- [newsfeed] Add specific ignoreOlderThan value (override) per feed
(#3360)
- [weather] Added option Humidity to hourly View
- [weather] Added option to hide hourly entries that are Zero, hiding
the entire column if empty.
- [updatenotification] Added option to iterate over modules directory
instead using modules defined in `config.js` (#3739)

### Changed

- [core] starting clientonly now checks for needed env var
`WAYLAND_DISPLAY` or `DISPLAY` and starts electron with needed
parameters (if both are set wayland is used) (#3677)
- [core] Optimize systeminformation calls and output (#3689)
- [core] Add issue templates for feature requests and bug reports
(#3695)
- [core] Adapt `start:x11:dev` script
- [weather/yr] The Yr weather provider now enforces a minimum
`updateInterval` of 600 000 ms (10 minutes) to comply with the terms of
service. If a lower value is set, it will be automatically increased to
this minimum.
- [weather/weatherflow] Fixed icons and added hourly support as well as
UV, precipitation, and location name support.
- [workflow] Run `sudo apt-get update` before installing packages to
avoid install errors
- [workflow] Exclude issues with label `ready (coming with next
release)` from stale job

### Removed

### Updated

- [core] Update requirements and dependencies including electron to v35
and formatting (#3593, #3693, #3717)
- [core] Update prettier, ESLint and simplify config
- Update Greek translation

### Fixed

- [calendar] Fix clipping events being broadcast (#3678)
- [tests] Fix Electron tests by running them under new github image
ubuntu-24.04, replace xserver with labwc, running under xserver and
labwc depending on env variable WAYLAND_DISPLAY is set (#3676)
- [calendar] Fix arrayed symbols, #3267, again, add testcase, add
testcase for #3678
- [weather] Fix wrong weatherCondition name in openmeteo provider which
lead to n/a icon (#3691)
- [core] Fix wrong port in log message when starting server only (#3696)
- [calendar] Fix NewYork event processed on system in Central timezone
shows wrong time #3701
- [weather/yr] The Yr weather provider is now able to recover from bad
API responses instead of freezing (#3296)
- [compliments] Fix evening events being shown during the day (#3727)
- [weather] Fixed minor spacing issues when using UV Index in Hourly
- [workflow] Fix command to run spellcheck

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Michael Teeuw <michael@xonaymedia.nl>
Co-authored-by: Kristjan ESPERANTO <35647502+KristjanESPERANTO@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Karsten Hassel <hassel@gmx.de>
Co-authored-by: Ross Younger <crazyscot@gmail.com>
Co-authored-by: Bugsounet - Cédric <github@bugsounet.fr>
Co-authored-by: jkriegshauser <joshuakr@nvidia.com>
Co-authored-by: illimarkangur <116028111+illimarkangur@users.noreply.github.com>
Co-authored-by: sam detweiler <sdetweil@gmail.com>
Co-authored-by: vppencilsharpener <tim.pray@gmail.com>
Co-authored-by: Paranoid93 <6515818+Paranoid93@users.noreply.github.com>
Co-authored-by: Brian O'Connor <btoconnor@users.noreply.github.com>
Co-authored-by: WallysWellies <59727507+WallysWellies@users.noreply.github.com>
Co-authored-by: Jason Stieber <jrstieber@gmail.com>
Co-authored-by: jargordon <50050429+jargordon@users.noreply.github.com>
Co-authored-by: Daniel <32464403+dkallen78@users.noreply.github.com>
Co-authored-by: Ryan Williams <65094007+ryan-d-williams@users.noreply.github.com>
Co-authored-by: Panagiotis Skias <panagiotis.skias@gmail.com>
Co-authored-by: Marc Landis <dirk.rettschlag@gmail.com>
Co-authored-by: HeikoGr <20295490+HeikoGr@users.noreply.github.com>
Co-authored-by: Pedro Lamas <pedrolamas@gmail.com>
Co-authored-by: veeck <gitkraken@veeck.de>
Co-authored-by: Magnus <34011212+MagMar94@users.noreply.github.com>
Co-authored-by: Ikko Eltociear Ashimine <eltociear@gmail.com>
Co-authored-by: DevIncomin <56730075+Developer-Incoming@users.noreply.github.com>
Co-authored-by: Nathan <n8nyoung@gmail.com>
Co-authored-by: mixasgr <mixasgr@users.noreply.github.com>
Co-authored-by: Savvas Adamtziloglou <savvas-gr@greeklug.gr>
Co-authored-by: Konstantinos <geraki@gmail.com>
Co-authored-by: OWL4C <124401812+OWL4C@users.noreply.github.com>

.editorconfig

@@ -0,0 +1,15 @@
+# editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 250
+trim_trailing_whitespace = true
+
+[*.{js,json}]
+indent_size = 4
+indent_style = tab

.eslintignore

@@ -1,6 +0,0 @@
-vendor/*
-!/vendor/vendor.js
-!/modules/default/**
-!/modules/node_helper
-!/modules/node_helper/**
-!/modules/default/defaultmodules.js

.eslintrc.json

@@ -1,16 +0,0 @@
-{
-	"rules": {
-		"indent": ["error", "tab"],
-		"quotes": ["error", "double"],
-		"max-len": ["error", 250],
-		"curly": "error",
-		"camelcase": ["error", {"properties": "never"}],
-		"no-trailing-spaces": ["error"],
-		"no-irregular-whitespace": ["error"]
-	},
-	"env": {
-		"browser": true,
-		"node": true,
-		"es6": true
-	}
-}

.gitattributes

@@ -0,0 +1,56 @@
+# .gitattributes snippet to force users to use same line endings for project.
+# 
+# Handle line endings automatically for files detected as text
+# and leave all files detected as binary untouched.
+* text=auto
+
+#
+# The above will handle all files NOT found below
+# https://help.github.com/articles/dealing-with-line-endings/
+# https://github.com/Danimoth/gitattributes/blob/master/Web.gitattributes
+
+
+
+# These files are text and should be normalized (Convert crlf => lf)
+*.php text
+*.css text
+*.scss text
+*.js text
+*.json text
+*.htm text
+*.html text
+*.xml text
+*.txt text
+*.ini text
+*.inc text
+*.pl text
+*.rb text
+*.py text
+*.scm text
+*.sql text
+.htaccess text
+*.sh text
+Dockerfile* text
+*.yml text
+*.yaml text
+*.md text
+*.markdown text
+
+# These files are binary and should be left untouched
+# (binary is a macro for -text -diff)
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.gif binary
+*.ico binary
+*.mov binary
+*.mp4 binary
+*.mp3 binary
+*.flv binary
+*.fla binary
+*.swf binary
+*.gz binary
+*.zip binary
+*.7z binary
+*.ttf binary
+*.pyc binary

.github/CONTRIBUTING.md

@@ -1,49 +1,38 @@
-Contribution Policy for MagicMirror²
-====================================
+# Contribution Policy for MagicMirror²
 
 Thanks for contributing to MagicMirror²!
 
 We hold our code to standard, and these standards are documented below.
 
-If you wish to run both linters, use `grunt` without any arguments.
+## Linters
+
+We use [prettier](https://prettier.io/) for automatic formatting a lot all our files. The configuration is in our `prettier.config.mjs` file.
+
+To run prettier, use `npm run lint:prettier`.
 
 ### JavaScript: Run ESLint
 
-We use [ESLint](http://eslint.org) on our JavaScript files.
+We use [ESLint](https://eslint.org) to lint our JavaScript files. The configuration is in our `eslint.config.mjs` file.
 
-Our ESLint configuration is in our .eslintrc.json and .eslintignore files.
-
-To run ESLint, use `grunt eslint`.
+To run ESLint, use `npm run lint:js`.
 
 ### CSS: Run StyleLint
 
-We use [StyleLint](http://stylelint.io) to lint our CSS. Our configuration is in our .stylelintrc file.
+We use [StyleLint](https://stylelint.io) to lint our CSS. The configuration is in our `.stylelintrc.json` file.
 
-To run StyleLint, use `grunt stylelint`.
+To run StyleLint, use `npm run lint:css`.
 
-### Submitting Issues
+### Markdown: Run markdownlint
 
-Please only submit reproducible issues.
+We use [markdownlint-cli2](https://github.com/DavidAnson/markdownlint-cli2) to lint our markdown files. The configuration is in our `.markdownlint.json` file.
 
-If you're not sure if it's a real bug or if it's just you, please open a topic on the forum: [https://forum.magicmirror.builders/category/15/bug-hunt](https://forum.magicmirror.builders/category/15/bug-hunt)
-Problems installing or configuring your MagicMirror? Check out: [https://forum.magicmirror.builders/category/10/troubleshooting](https://forum.magicmirror.builders/category/10/troubleshooting)
+To run markdownlint, use `npm run markdownlint:css`.
 
-When submitting a new issue, please supply the following information:
+## Testing
 
-**Platform**: Place your platform here... give us your web browser/Electron version *and* your hardware (Raspberry Pi 2/3, Windows, Mac, Linux, System V UNIX).
+We use [Jest](https://jestjs.io) for JavaScript testing.
 
-**Node Version**: Make sure it's version 0.12.13 or later.
+To run all tests, use `npm run test`.
 
-**MagicMirror Version**: Now that the versions have split, tell us if you are using the PHP version (v1) or the newer JavaScript version (v2).
-
-**Description**: Provide a detailed description about the issue and include specific details to help us understand the problem. Adding screenshots will help describing the problem.
-
-**Steps to Reproduce**: List the step by step process to reproduce the issue.
-
-**Expected Results**: Describe what you expected to see.
-
-**Actual Results**: Describe what you actually saw.
-
-**Configuration**: What does the used config.js file look like? Don't forget to remove any sensitive information!
-
-**Additional Notes**: Provide any other relevant notes not previously mentioned. This is optional.
+The specific test commands are defined in `package.json`.
+So you can also run the specific tests with other commands, e.g. `npm run test:unit` or `npx jest tests/e2e/env_spec.js`.

.github/FUNDING.yaml

@@ -0,0 +1,2 @@
+github: MichMich
+custom: ["https://magicmirror.builders/#donate"]

.github/ISSUE_TEMPLATE.md

@@ -1,24 +0,0 @@
-Please only submit reproducible issues. 
-
-If you're not sure if it's a real bug or if it's just you, please open a topic on the forum: [https://forum.magicmirror.builders/category/15/bug-hunt](https://forum.magicmirror.builders/category/15/bug-hunt)
-Problems installing or configuring your MagicMirror? Check out: [https://forum.magicmirror.builders/category/10/troubleshooting](https://forum.magicmirror.builders/category/10/troubleshooting)
-
-When submitting a new issue, please supply the following information:
-
-**Platform**: Place your platform here... give us your web browser/Electron version *and* your hardware (Raspberry Pi 2/3, Windows, Mac, Linux, System V UNIX).
-
-**Node Version**: Make sure it's version 0.12.13 or later.
-
-**MagicMirror Version**: Now that the versions have split, tell us if you are using the PHP version (v1) or the newer JavaScript version (v2).
-
-**Description**: Provide a detailed description about the issue and include specific details to help us understand the problem. Adding screenshots will help describing the problem.
-
-**Steps to Reproduce**: List the step by step process to reproduce the issue.
-
-**Expected Results**: Describe what you expected to see.
-
-**Actual Results**: Describe what you actually saw.
-
-**Configuration**: What does the used config.js file look like? Don't forget to remove any sensitive information!
-
-**Additional Notes**: Provide any other relevant notes not previously mentioned. This is optional.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,154 @@
+name: 🐛 Report a problem
+description: Report an issue with MagicMirror² 🚨
+title: "[Bug] {{ brief description }}"
+labels:
+  - bug
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for reporting a bug! Please fill in the following template to help us reproduce the issue.
+        Please only submit reproducible issues. If you're not sure if it's a real bug or if it's just you, please open a topic on the forum.
+  - type: textarea
+    id: environment
+    attributes:
+      label: Environment
+      description: |
+        Please tell us about how your MagicMirror² is set up.
+
+        Optimal would be the systeminformation from the logs, which looks like this:
+        ```bash
+        [2025-01-14 20:05:03.529] [INFO]  System information:
+        ### SYSTEM:    manufacturer: Raspberry Pi Foundation; model: Raspberry Pi 4 Model B Rev 1.5; virtual: false
+        ### OS:        platform: linux; distro: Debian GNU/Linux; release: 12; arch: arm64; kernel: 6.1.21-v8+
+        ### VERSIONS:  electron: 31.2.1; used node: 20.15.0; installed node: 22.4.1; npm: 10.8.1; pm2:
+        ### OTHER:     timeZone: Europe/Berlin; ELECTRON_ENABLE_GPU: undefined
+        ```
+
+        If you can't provide this information, please provide the following:
+        - MagicMirror² version: Can be found in the `package.json` file. Please use the latest version before reporting a bug.
+        - Node version: Run `node -v` to find out. Make sure it's version 20 or later (recommended is 22).
+        - npm version: Run `npm -v` to find out.
+        - Platform: Are you using a Raspberry Pi (2/3/4/5), Windows, Mac, Linux, Docker, or something else?
+      value: |
+        MagicMirror² version: 
+        Node version: 
+        npm version: 
+        Platform:
+    validations:
+      required: true
+  - type: dropdown
+    id: start-option
+    attributes:
+      label: Which start option are you using?
+      description: |
+        Please keep in mind that some problems are specific to certain start options.
+      options:
+        - "npm run start"
+        - "npm run start:wayland"
+        - "npm run start:windows"
+        - "npm run start:x11"
+        - "npm run server"
+        - "node clientonly --address ... --port ..."
+    validations:
+      required: true
+  - type: dropdown
+    id: pm2
+    attributes:
+      label: Are you using PM2?
+      options:
+        - "No"
+        - "Yes"
+        - "I don't know"
+    validations:
+      required: true
+  - type: dropdown
+    id: module
+    attributes:
+      label: Module
+      description: |
+        If the issue is related to a specific module, please provide the name of the module.
+        Note: Please don't report issues with 3rd party modules here. Report them on the module's repository.
+      options:
+        - "alert"
+        - "calendar"
+        - "clock"
+        - "compliments"
+        - "helloworld"
+        - "newsfeed"
+        - "updatenotification"
+        - "weather"
+  - type: checkboxes
+    id: module-disabled
+    attributes:
+      label: Have you tried disabling other modules?
+      options:
+        - label: "Yes"
+        - label: "No"
+  - type: checkboxes
+    id: search
+    attributes:
+      label: Have you searched if someone else has already reported the issue on the forum or in the issues?
+      options:
+        - label: "Yes"
+          required: true
+  - type: textarea
+    id: description
+    attributes:
+      label: What did you do?
+      description: |
+        Please include a *minimal* reproduction case. List the step by step process to reproduce the issue.
+        You can use Markdown in this field.
+      value: |
+        <details>
+        <summary>Configuration</summary>
+
+        ```
+        <!-- Paste your configuration here. Don't forget to remove any sensitive information! -->
+        ```
+        </details>
+
+        ```js
+        <!-- Paste relevant code here -->
+        ```
+
+        Steps to reproduce the issue:
+    validations:
+      required: true
+  - type: textarea
+    id: expectation
+    attributes:
+      label: What did you expect to happen?
+      description: |
+        You can use Markdown in this field.
+    validations:
+      required: true
+  - type: textarea
+    id: lint-output
+    attributes:
+      label: What actually happened?
+      description: |
+        Please copy-paste relevant log output or error messages.
+        You can use Markdown in this field.
+    validations:
+      required: true
+
+  - type: textarea
+    id: comments
+    attributes:
+      label: Additional comments
+      description: |
+        Is there anything else that's important for the team to know?
+        Fill out all fields and provide as much information as possible.
+        Adding screenshots might help us understand your problem better.
+
+  - type: checkboxes
+    attributes:
+      label: Participation
+      options:
+        - label: "I am willing to submit a pull request for this change."
+          required: false
+
+  - type: markdown
+    attributes:
+      value: Please **do not** open a pull request until this issue has been accepted by the team.

.github/ISSUE_TEMPLATE/change_request.yml

@@ -0,0 +1,41 @@
+name: 🔀 Request a change
+description: Request a change that is not a bug fix, a feature request or a support request.
+title: "[Change Request] {{ brief description }}"
+labels:
+  - enhancement
+  - core
+body:
+  - type: markdown
+    attributes:
+      value: Thanks for requesting a change! Please fill in the following template to help us understand your request.
+  - type: textarea
+    attributes:
+      label: What problem do you want to solve with this change?
+      description: |
+        Please explain your use case in as much detail as possible.
+      placeholder: |
+        Currently...
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: What do you think is the correct solution?
+      description: |
+        Please explain how you'd like to change MagicMirror² to address the problem.
+      placeholder: |
+        I'd like MagicMirror² to...
+    validations:
+      required: true
+  - type: checkboxes
+    attributes:
+      label: Participation
+      options:
+        - label: I am willing to submit a pull request for this change.
+          required: false
+  - type: markdown
+    attributes:
+      value: Please **do not** open a pull request until this issue has been accepted by the team.
+  - type: textarea
+    attributes:
+      label: Additional comments
+      description: Is there anything else that's important for the team to know?

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,14 @@
+blank_issues_enabled: false
+contact_links:
+  - name: 📚 Documentation
+    url: https://github.com/MagicMirrorOrg/MagicMirror-Documentation/issues
+    about: This issue tracker is not for documentation issues. Please file documentation issues on the docs repo.
+  - name: 🤔 Support Question
+    url: https://forum.magicmirror.builders/
+    about: Problems installing or configuring your MagicMirror? Please post your question on the MagicMirror² Forum.
+  - name: 💬 Exchange of ideas
+    url: https://discord.gg/AmGBBwPph5
+    about: This issue tracker is not for general discussion. Please use the Discord channel.
+  - name: 📦 Issues with a 3rd-party module
+    url: https://kristjanesperanto.github.io/MagicMirror-3rd-Party-Modules/
+    about: This issue tracker is not for 3rd-party module issues. Please file 3rd-party module issues on the module's repo.

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,67 @@
+name: 🚀 Feature Request
+description: Suggest a new feature for MagicMirror² 💡
+title: "[Feature Request] {{ brief description }}"
+body:
+  - type: checkboxes
+    id: prerequisites
+    attributes:
+      label: Prerequisites
+      description: Please ensure you have completed all of the following.
+      options:
+        - label: I am running the latest version of MagicMirror², and know that this feature is not available now.
+          required: true
+        - label: I know my issue is not related to a third-party module.
+          required: true
+        - label: I have searched for [existing issues](https://github.com/MagicMirrorOrg/MagicMirror/issues) that already include this feature request, without success.
+          required: true
+
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the Feature Request
+      description: A clear and concise description of what the feature does.
+    validations:
+      required: true
+
+  - type: textarea
+    id: use-case
+    attributes:
+      label: Describe the Use Case
+      description: A clear and concise use case for what problem this feature would solve.
+    validations:
+      required: true
+
+  - type: textarea
+    id: proposed-solution
+    attributes:
+      label: Describe Preferred Solution
+      description: A clear and concise description of how you want this feature to be added to MagicMirror².
+
+  - type: textarea
+    id: alternatives-considered
+    attributes:
+      label: Describe Alternatives
+      description: A clear and concise description of any alternative solutions or features you have considered.
+
+  - type: textarea
+    id: related-code
+    attributes:
+      label: Related Code
+      description: If you are able to illustrate the feature request with an example, please provide a sample here.
+
+  - type: textarea
+    id: additional-information
+    attributes:
+      label: Additional Information
+      description: List any other information that is relevant to your issue. Related issues, suggestions on how to implement, Stack Overflow links, forum links, etc.
+
+  - type: checkboxes
+    attributes:
+      label: Participation
+      options:
+        - label: I am willing to submit a pull request for this change.
+          required: false
+
+  - type: markdown
+    attributes:
+      value: Please **do not** open a pull request until this issue has been accepted by the team.

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,14 +1,23 @@
-> Please send your pull requests the develop branch.
-> Don't forget to add the change to CHANGELOG.md.
+Hello and thank you for wanting to contribute to the MagicMirror² project!
+
+**Please make sure that you have followed these 4 rules before submitting your Pull Request:**
+
+> 1. Base your pull requests against the `develop` branch.
+> 2. Include these infos in the description:
+>
+> - Does the pull request solve a **related** issue?
+> - If so, can you reference the issue like this `Fixes #<issue_number>`?
+> - What does the pull request accomplish? Use a list if needed.
+> - If it includes major visual changes please add screenshots.
+>
+> 3. Please run `npm run lint:prettier` before submitting so that
+>    style issues are fixed.
+> 4. Don't forget to add an entry about your changes to
+>    the CHANGELOG.md file.
 
 **Note**: Sometimes the development moves very fast. It is highly
 recommended that you update your branch of `develop` before creating a
 pull request to send us your changes. This makes everyone's lives
 easier (including yours) and helps us out on the development team.
-Thanks!
 
-
-* Does the pull request solve a **related** issue?
-* If so, can you reference the issue?
-* What does the pull request accomplish? Use a list if needed.
-* If it includes major visual changes please add screenshots.
+Thanks again and have a nice day!

.github/dependabot.yaml

@@ -0,0 +1,40 @@
+version: 2
+updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    target-branch: "develop"
+    labels:
+      - "Skip Changelog"
+      - "dependencies"
+
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "monthly"
+    target-branch: "develop"
+    labels:
+      - "Skip Changelog"
+      - "dependencies"
+      - "javascript"
+
+  - package-ecosystem: "npm"
+    directory: "/vendor"
+    schedule:
+      interval: "monthly"
+    target-branch: "develop"
+    labels:
+      - "Skip Changelog"
+      - "dependencies"
+      - "javascript"
+
+  - package-ecosystem: "npm"
+    directory: "/fonts"
+    schedule:
+      interval: "monthly"
+    target-branch: "develop"
+    labels:
+      - "Skip Changelog"
+      - "dependencies"
+      - "javascript"

.github/workflows/automated-tests.yaml

@@ -0,0 +1,67 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: "Run Automated Tests"
+
+on:
+  push:
+    branches: [master, develop]
+  pull_request:
+    branches: [master, develop]
+
+permissions:
+  contents: read
+
+jobs:
+  code-style-check:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - name: "Checkout code"
+        uses: actions/checkout@v4
+      - name: "Use Node.js"
+        uses: actions/setup-node@v4
+        with:
+          node-version: 23
+          cache: "npm"
+      - name: "Install dependencies"
+        run: |
+          npm run install-mm:dev
+      - name: "Run linter tests"
+        run: |
+          npm run test:prettier
+          npm run test:js
+          npm run test:css
+          npm run test:markdown
+  test:
+    runs-on: ubuntu-24.04
+    timeout-minutes: 30
+    strategy:
+      matrix:
+        node-version: [22.14.0, 22.x, 23.x]
+    steps:
+      - name: Install electron dependencies and labwc
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libnss3 libasound2t64 labwc
+      - name: "Checkout code"
+        uses: actions/checkout@v4
+      - name: "Use Node.js ${{ matrix.node-version }}"
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          check-latest: true
+          cache: "npm"
+      - name: "Install MagicMirror²"
+        run: |
+          npm run install-mm:dev
+      - name: "Run tests"
+        run: |
+          # Fix chrome-sandbox permissions:
+          sudo chown root:root ./node_modules/electron/dist/chrome-sandbox
+          sudo chmod 4755 ./node_modules/electron/dist/chrome-sandbox
+          # Start labwc
+          WLR_BACKENDS=headless WLR_LIBINPUT_NO_DEVICES=1 WLR_RENDERER=pixman labwc &
+          export WAYLAND_DISPLAY=wayland-0
+          touch css/custom.css
+          npm run test

.github/workflows/dep-review.yaml

@@ -0,0 +1,18 @@
+# This workflow scans your pull requests for dependency changes, and will raise an error if any vulnerabilities or invalid licenses are being introduced.
+# For more information see: https://github.com/actions/dependency-review-action
+
+name: "Review Dependencies"
+
+on: [pull_request]
+
+permissions:
+  contents: read
+
+jobs:
+  dependency-review:
+    runs-on: ubuntu-latest
+    steps:
+      - name: "Checkout code"
+        uses: actions/checkout@v4
+      - name: "Dependency Review"
+        uses: actions/dependency-review-action@v4

.github/workflows/electron-rebuild.yaml

@@ -0,0 +1,32 @@
+name: "Electron Rebuild Testing"
+
+on: [pull_request]
+
+jobs:
+  rebuild:
+    name: Run electron-rebuild
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [22.14.0, 22.x, 23.x]
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: "Use Node.js ${{ matrix.node-version }}"
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          check-latest: true
+      - name: Install MagicMirror
+        run: npm run install-mm
+      - name: Install @electron/rebuild
+        run: npm install @electron/rebuild
+      - name: Install node-libgpiod deps
+        run: |
+          sudo apt-get update
+          sudo apt-get install gpiod libgpiod2 libgpiod-dev
+      - name: Install test library (node-libgpiod) to be rebuilded
+        run: npm install node-libgpiod
+      - name: Run electron-rebuild
+        run: npx electron-rebuild
+        continue-on-error: false

.github/workflows/enforce-pullrequest-rules.yaml

@@ -0,0 +1,28 @@
+# This workflow enforces on every pull request:
+# - the update of our CHANGELOG.md file, see: https://github.com/dangoslen/changelog-enforcer
+# - that the PR is not based against master, taken from https://github.com/oppia/oppia-android/pull/2832/files
+
+name: "Enforce Pull-Request Rules"
+
+on:
+  pull_request_target:
+    types: [opened, synchronize, reopened, ready_for_review, labeled, unlabeled]
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - name: "Enforce changelog"
+        uses: dangoslen/changelog-enforcer@v3
+        with:
+          changeLogPath: "CHANGELOG.md"
+          skipLabels: "Skip Changelog"
+      - name: "Enforce develop branch"
+        if: ${{ github.event.pull_request.base.ref == 'master' && !contains(github.event.pull_request.labels.*.name, 'mastermerge') }}
+        run: |
+          echo "This PR is based against the master branch and not a release or hotfix."
+          echo "Please don't do this. Switch the branch to 'develop'."
+          exit 1
+        env:
+          BASE_BRANCH: ${{ github.event.pull_request.base.ref }}

.github/workflows/spellcheck.yaml

@@ -0,0 +1,31 @@
+# This workflow will run a spellcheck on the codebase.
+# It runs a few days before each release. At 00:00 on day-of-month 27 in March, June, September, and December.
+
+name: Run Spellcheck
+
+on:
+  schedule:
+    - cron: "0 0 27 3,6,9,12 *"
+
+permissions:
+  contents: read
+
+jobs:
+  spellcheck:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          ref: develop
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          check-latest: true
+          cache: "npm"
+      - name: Install dependencies
+        run: |
+          npm run install-mm:dev
+      - name: Run Spellcheck
+        run: npm run test:spelling

.github/workflows/stale.yaml

@@ -0,0 +1,22 @@
+name: "Close stale issues and PRs"
+
+on:
+  workflow_dispatch: # needed for manually running this workflow
+  schedule:
+    - cron: "30 1 * * 6" # every Saturday at 1:30
+
+permissions:
+  issues: write
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v9
+        with:
+          stale-issue-message: "This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions."
+          days-before-issue-stale: 60
+          days-before-issue-close: 7
+          operations-per-run: 100
+          stale-issue-label: "wontfix"
+          exempt-issue-labels: "pinned,security,under investigation,pr welcome,ready (coming with next release)"

.gitignore

@@ -1,5 +1,4 @@
 # Various Node ignoramuses.
-
 logs
 *.log
 npm-debug.log*
@@ -8,10 +7,12 @@ pids
 *.seed
 lib-cov
 coverage
-.grunt
 .lock-wscript
 build/Release
-node_modules
+/node_modules/**/*
+fonts/node_modules/**/*
+vendor/node_modules/**/*
+!/tests/node_modules/**/*
 jspm_modules
 .npm
 .node_repl_history
@@ -19,6 +20,9 @@ jspm_modules
 # Visual Studio Code ignoramuses.
 .vscode/
 
+# IDE Code ignoramuses.
+.idea/
+
 # Various Windows ignoramuses.
 Thumbs.db
 ehthumbs.db
@@ -49,25 +53,24 @@ Temporary Items
 .apdisk
 
 # Various Linux ignoramuses.
-
 .fuse_hidden*
 .directory
 .Trash-*
 
-# Various Magic Mirror ignoramuses and anti-ignoramuses.
-
-# Don't ignore the node_helper core module.
-!/modules/node_helper
-!/modules/node_helper/**
-
 # Ignore all modules except the default modules.
 /modules/**
 !/modules/default
 !/modules/default/**
 !/modules/README.md**
 
-# Ignore changes to the custom css files.
-/css/custom.css
+# Ignore changes to the custom css files but keep the sample and main.
+/css/*
+!/css/custom.css.sample
+!/css/main.css
+
+# Ignore users config file but keep the sample.
+/config/*
+!/config/config.js.sample
 
 # Vim
 ## swap
@@ -78,3 +81,6 @@ Temporary Items
 *.orig
 *.rej
 *.bak
+
+# Ignore positions file (#3518)
+js/positions.js

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+
+if command -v npx &> /dev/null; then
+  npx lint-staged
+fi

.markdownlint.json

@@ -0,0 +1,6 @@
+{
+	"line_length": false,
+	"no-duplicate-heading": false,
+	"no-inline-html": false,
+	"no-trailing-punctuation": false
+}

.npmrc

@@ -0,0 +1,3 @@
+engine-strict=true
+audit=false
+loglevel="error"

.prettierignore

@@ -0,0 +1,8 @@
+*.js
+*.mjs
+.husky/pre-commit
+.prettierignore
+/config
+/coverage
+package-lock.json
+**.ics

.snyk

@@ -1,14 +0,0 @@
-version: v1.5.2
-ignore: {}
-patch:
-  'npm:minimatch:20160620':
-    - snyk > recursive-readdir > minimatch:
-        patched: '2016-07-30T14:02:31.280Z'
-  'npm:negotiator:20160616':
-    - socket.io > engine.io > accepts > negotiator:
-        patched: '2016-07-30T14:02:31.280Z'
-  'npm:ws:20160624':
-    - socket.io > engine.io > ws:
-        patched: '2016-07-30T14:02:31.280Z'
-    - socket.io > socket.io-client > engine.io-client > ws:
-        patched: '2016-07-30T14:02:31.280Z'

.stylelintrc

@@ -1,5 +0,0 @@
-{
-	"extends": "stylelint-config-standard",
-	"font-family-name-quotes": "double-where-recommended",
-	"block-no-empty": false
-}

.stylelintrc.json

@@ -0,0 +1,7 @@
+{
+	"extends": ["stylelint-config-standard"],
+	"plugins": ["stylelint-prettier"],
+	"rules": {
+		"prettier/prettier": true
+	}
+}

.travis.yml

@@ -1,20 +0,0 @@
-language: node_js
-node_js:
- - "8"
- - "7"
- - "6"
- - "5.1"
-before_script:
- - npm install grunt-cli -g
- - "export DISPLAY=:99.0"
- - "sh -e /etc/init.d/xvfb start"
- - sleep 5
-script:
-- grunt
-- npm run test:unit
-- npm run test:e2e
-after_script:
- - npm list
-cache:
- directories:
-  - node_modules

Collaboration.md

@@ -0,0 +1,67 @@
+# Collaboration
+
+This document describes how collaborators of this repository should work together.
+
+## Pull Requests
+
+- never merge your own PR's
+- never merge without someone having approved (approving and merging from same person is allowed)
+- wait for all approvals requested (or the author decides something different in the comments)
+- merge to `master` only for releases or other urgent issues (update notification is only triggered by tags)
+- merges to master should be tagged with the "mastermerge" label so that the test runs through
+
+## Issues
+
+- "real" Issues are closed if the problem is solved and the fix is released
+- unrelated Issues (e.g. related to a foreign module) are closed immediately with a comment to open an issue in the module repository or to discuss this further in the forum or discord
+
+## Releases
+
+Are done by
+
+- [ ] @rejas
+- [ ] @sdetweil
+- [ ] @khassel
+
+### Pre-Deployment steps
+
+- [ ] update dependencies (a few days before)
+
+### Deployment steps
+
+- [ ] pull latest `develop` branch
+- [ ] create `prep-release` branch from `develop`
+  - [ ] update `package.json` and `package-lock.json` to reflect correct version number `2.xx.0`
+  - [ ] test `prep-release` branch
+  - [ ] update `CHANGELOG.md`
+    - [ ] add all contributor names: `...`
+    - [ ] add min. node version: > ⚠️ This release needs nodejs version `v22.14.0` or higher
+    - [ ] check release link at the bottom of the file
+  - [ ] commit and push all changes
+  - [ ] create pull request from `prep-release` to `develop` branch with title `Prepare Release 2.xx.0`
+  - [ ] after successful test run via github actions: merge pull request to `develop`
+- [ ] after successful test run via github actions: create pull request from `develop` to `master` branch
+  - [ ] add label `mastermerge`
+  - [ ] title of the PR is `Release 2.xx.0`
+  - [ ] description of the PR is the section of the `CHANGELOG.md`
+- [ ] after PR tests run without issues, merge PR
+- [ ] create new release with
+  - [ ] corresponding version tag `v2.xx.0`
+  - [ ] a release name: `...`
+  - [ ] description of the release is the section of the `CHANGELOG.md`
+
+### Draft new development release
+
+- [ ] checkout `develop` branch
+- [ ] update `package.json` and `package-lock.json` to reflect correct version number `2.xx.0-develop`
+- [ ] draft new section in `CHANGELOG.md`
+  - [ ] create new release link at the bottom of the file
+- [ ] commit and publish `develop` branch
+- [ ] if new release will be in January, update the year in LICENSE.md
+
+### After release
+
+- [ ] publish release notes with link to github release on forum in new locked topic
+- [ ] close all issues with label `ready (coming with next release)`
+- [ ] release new documentation by merging `develop` on `master` in documentation repository
+- [ ] publish new version on [npm](https://www.npmjs.com/package/magicmirror)

Gruntfile.js

@@ -1,103 +0,0 @@
-module.exports = function(grunt) {
-	require("time-grunt")(grunt);
-	grunt.initConfig({
-		pkg: grunt.file.readJSON("package.json"),
-		eslint: {
-			options: {
-				configFile: ".eslintrc.json"
-			},
-			target: [
-				"js/*.js",
-				"modules/default/*.js",
-				"modules/default/*/*.js",
-				"serveronly/*.js",
-				"*.js",
-				"tests/**/*.js",
-				"!modules/default/alert/notificationFx.js",
-				"!modules/default/alert/modernizr.custom.js",
-				"!modules/default/alert/classie.js",
-				"config/*",
-				"translations/translations.js",
-				"vendor/vendor.js",
-				"modules/node_modules/node_helper/index.js"
-			]
-		},
-		stylelint: {
-			simple: {
-				options: {
-					configFile: ".stylelintrc"
-				},
-				src: [
-					"css/main.css",
-					"modules/default/calendar/calendar.css",
-					"modules/default/clock/clock_styles.css",
-					"modules/default/currentweather/currentweather.css",
-					"modules/default/weatherforcast/weatherforcast.css"
-				]
-			}
-		},
-		jsonlint: {
-			main: {
-				src: [
-					"package.json",
-					".eslintrc.json",
-					".stylelintrc",
-					"translations/*.json",
-					"modules/default/*/translations/*.json",
-					"installers/pm2_MagicMirror.json",
-					"vendor/package.js"
-				],
-				options: {
-					reporter: "jshint"
-				}
-			}
-		},
-		markdownlint: {
-			all: {
-				options: {
-					config: {
-						"default": true,
-						"line-length": false,
-						"blanks-around-headers": false,
-						"no-duplicate-header": false,
-						"no-inline-html": false,
-						"MD010": false,
-						"MD001": false,
-						"MD031": false,
-						"MD040": false,
-						"MD002": false,
-						"MD029": false,
-						"MD041": false,
-						"MD032": false,
-						"MD036": false,
-						"MD037": false,
-						"MD009": false,
-						"MD018": false,
-						"MD012": false,
-						"MD026": false,
-						"MD038": false
-					}
-				},
-				src: [
-					"README.md",
-					"CHANGELOG.md",
-					"LICENSE.md",
-					"modules/README.md",
-					"modules/default/**/*.md",
-					"!modules/default/calendar/vendor/ical.js/readme.md"
-				]
-			}
-		},
-		yamllint: {
-			all: [
-				".travis.yml"
-			]
-		}
-	});
-	grunt.loadNpmTasks("grunt-eslint");
-	grunt.loadNpmTasks("grunt-stylelint");
-	grunt.loadNpmTasks("grunt-jsonlint");
-	grunt.loadNpmTasks("grunt-yamllint");
-	grunt.loadNpmTasks("grunt-markdownlint");
-	grunt.registerTask("default", ["eslint", "stylelint", "jsonlint", "markdownlint", "yamllint"]);
-};

LICENSE.md

@@ -1,7 +1,6 @@
-The MIT License (MIT)
-=====================
+# The MIT License (MIT)
 
-Copyright © 2016-2017 Michael Teeuw
+Copyright © 2016-2025 Michael Teeuw
 
 Permission is hereby granted, free of charge, to any person
 obtaining a copy of this software and associated documentation

README.md

@@ -1,186 +1,53 @@
-![MagicMirror²: The open source modular smart mirror platform. ](.github/header.png)
+# ![MagicMirror²: The open source modular smart mirror platform.](.github/header.png)
 
-<p align="center">
-	<a href="https://david-dm.org/MichMich/MagicMirror"><img src="https://david-dm.org/MichMich/MagicMirror.svg" alt="Dependency Status"></a>
-	<a href="https://david-dm.org/MichMich/MagicMirror#info=devDependencies"><img src="https://david-dm.org/MichMich/MagicMirror/dev-status.svg" alt="devDependency Status"></a>
-	<a href="https://bestpractices.coreinfrastructure.org/projects/347"><img src="https://bestpractices.coreinfrastructure.org/projects/347/badge"></a>
-	<a href="http://choosealicense.com/licenses/mit"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License"></a>
-	<a href="https://travis-ci.org/MichMich/MagicMirror"><img src="https://travis-ci.org/MichMich/MagicMirror.svg" alt="Travis"></a>
-	<a href="https://snyk.io/test/github/MichMich/MagicMirror"><img src="https://snyk.io/test/github/MichMich/MagicMirror/badge.svg" alt="Known Vulnerabilities" data-canonical-src="https://snyk.io/test/github/MichMich/MagicMirror" style="max-width:100%;"></a>
-	<a href="http://slack.magicmirror.builders"><img src="http://slack.magicmirror.builders:3000/badge.svg" alt="Slack Status"></a>
+<p style="text-align: center">
+  <a href="https://choosealicense.com/licenses/mit">
+  <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License">
+ </a>
+ <img src="https://img.shields.io/github/actions/workflow/status/magicmirrororg/magicmirror/automated-tests.yaml" alt="GitHub Actions">
+ <img src="https://img.shields.io/github/check-runs/magicmirrororg/magicmirror/master" alt="Build Status">
+ <a href="https://github.com/MagicMirrorOrg/MagicMirror">
+  <img src="https://img.shields.io/github/stars/magicmirrororg/magicmirror?style=social" alt="GitHub Stars">
+ </a>
 </p>
 
-**MagicMirror²** is an open source modular smart mirror platform. With a growing list of installable modules, the **MagicMirror²** allows you to convert your hallway or bathroom mirror into your personal assistant. **MagicMirror²** is built by the creator of [the original MagicMirror](http://michaelteeuw.nl/tagged/magicmirror) with the incredible help of a [growing community of contributors](https://github.com/MichMich/MagicMirror/graphs/contributors).
+**MagicMirror²** is an open source modular smart mirror platform. With a growing list of installable modules, the **MagicMirror²** allows you to convert your hallway or bathroom mirror into your personal assistant. **MagicMirror²** is built by the creator of [the original MagicMirror](https://michaelteeuw.nl/tagged/magicmirror) with the incredible help of a [growing community of contributors](https://github.com/MagicMirrorOrg/MagicMirror/graphs/contributors).
 
-MagicMirror² focuses on a modular plugin system and uses [Electron](http://electron.atom.io/) as an application wrapper. So no more web server or browser installs necessary!
+MagicMirror² focuses on a modular plugin system and uses [Electron](https://www.electronjs.org/) as an application wrapper. So no more web server or browser installs necessary!
 
-## Table Of Contents
+## Documentation
 
-- [Usage](#usage)
-- [Configuration](#configuration)
-- [Modules](#modules)
-- [Known Issues](#known-issues)
-- [Community](#community)
-- [Contributing Guidelines](#contributing-guidelines)
+For the full documentation including **[installation instructions](https://docs.magicmirror.builders/getting-started/installation.html)**, please visit our dedicated documentation website: [https://docs.magicmirror.builders](https://docs.magicmirror.builders).
 
-## Usage
+## Links
 
-### Raspberry Pi Support
-Electron, the app wrapper around MagicMirror², only supports the Raspberry Pi 2 & 3. The Raspberry Pi 1 is currently **not** supported. If you want to run this on a Raspberry Pi 1, use the [server only](#server-only) feature and setup a fullscreen browser yourself.
-
-### Automatic Installer (Raspberry Pi Only!)
-
-Execute the following command on your Raspberry Pi to install MagicMirror²:
-````
-bash -c "$(curl -sL https://raw.githubusercontent.com/MichMich/MagicMirror/master/installers/raspberry.sh)"
-````
-
-### Manual Installation
-
-1. Download and install the latest Node.js version.
-2. Clone the repository and check out the master branch: `git clone https://github.com/MichMich/MagicMirror`
-3. Enter the repository: `cd ~/MagicMirror`
-4. Install and run the app: `npm install && npm start`
-
-**Important:** `npm start` does **not** work via SSH, use `DISPLAY=:0 nohup npm start &` instead. This starts the mirror on the remote display.
-
-**Note:** if you want to debug on Raspberry Pi you can use `npm start dev` which will start the MagicMirror app with Dev Tools enabled.
-
-### Server Only
-In some cases, you want to start the application without an actual app window. In this case, you can start MagicMirror² in server only mode by manually running `node serveronly` or using Docker. This will start the server, after which you can open the application in your browser of choice. Detailed description below.
-
-### Client Only
-When you have a server running remotely and want to connect a standalone client to this instance, you can manually run `node clientonly --address 192.168.1.5 --port 8080`. (Specify the ip address and port number of the server)
-
-**Important:** Make sure that you whitelist the interface/ip in the server config where you want the client to connect to, otherwise it will not be allowed to connect to the server
-
-#### Docker
-
-MagicMirror² in server only mode can be deployed using [Docker](https://docker.com). After a successful [Docker installation](https://docs.docker.com/engine/installation/) you just need to execute the following command in the shell:
-
-```bash
-docker run  -d \
-			--publish 80:8080 \
-			--restart always \
-			--volume ~/magic_mirror/config:/opt/magic_mirror/config \
-			--volume ~/magic_mirror/modules:/opt/magic_mirror/modules \
-			--name magic_mirror \
-			bastilimbach/docker-magicmirror
-```
-
-| **Volumes** | **Description** |
-| --- | --- |
-| `/opt/magic_mirror/config` | Mount this volume to insert your own config into the docker container. |
-| `/opt/magic_mirror/modules` | Mount this volume to add your own custom modules into the docker container. |
-
-You may need to add your Docker Host IP to your `ipWhitelist` option. If you have some issues setting up this configuration, check [this forum post](https://forum.magicmirror.builders/topic/1326/ipwhitelist-howto).
-
-```javascript
-var config = {
-	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:172.17.0.1"]
-};
-```
-
-If you want to run the server on a raspberry pi, use the `raspberry` tag. (bastilimbach/docker-magicmirror:raspberry)
-
-#### Manual
-
-1. Download and install the latest Node.js version.
-2. Clone the repository and check out the master branch: `git clone https://github.com/MichMich/MagicMirror`
-3. Enter the repository: `cd ~/MagicMirror`
-4. Install and run the app: `npm install && node serveronly`
-
-### Raspberry Configuration & Auto Start.
-
-The following wiki links are helpful in the configuration of your MagicMirror² operating system:
-- [Configuring the Raspberry Pi](https://github.com/MichMich/MagicMirror/wiki/Configuring-the-Raspberry-Pi)
-- [Auto Starting MagicMirror](https://github.com/MichMich/MagicMirror/wiki/Auto-Starting-MagicMirror)
-
-### Updating your MagicMirror²
-
-If you want to update your MagicMirror² to the latest version, use your terminal to go to your Magic Mirror folder and type the following command:
-
-```bash
-git pull && npm install
-```
-
-If you changed nothing more than the config or the modules, this should work without any problems.
-Type `git status` to see your changes, if there are any, you can reset them with `git reset --hard`. After that, git pull should be possible.
-
-## Configuration
-
-1. Duplicate `config/config.js.sample` to `config/config.js`. **Note:** If you used the installer script. This step is already done for you.
-2. Modify your required settings.
-
-Note: You'll can check your configuration running the follow command:
-```bash
-npm run config:check
-```
-
-The following properties can be configured:
-
-| **Option** | **Description** |
-| --- | --- |
-| `port` | The port on which the MagicMirror² server will run on. The default value is `8080`. |
-| `address` | The ip address the accept connections. The  default open bind `::` is IPv6 is available or `0.0.0.0` IPv4 run on.  Example config: `192.168.10.100`. |
-| `ipWhitelist` | The list of IPs from which you are allowed to access the MagicMirror². The default value is `["127.0.0.1", "::ffff:127.0.0.1", "::1"]`. It is possible to specify IPs with subnet masks (`["127.0.0.1", "127.0.0.1/24"]`) or define ip ranges (`["127.0.0.1", ["192.168.0.1", "192.168.0.100"]]`). Set `[]` to allow all IP addresses. For more information about how configure this directive see the [follow post ipWhitelist HowTo](https://forum.magicmirror.builders/topic/1326/ipwhitelist-howto) |
-| `zoom` | This allows to scale the mirror contents with a given zoom factor. The default value is `1.0`|
-| `language` | The language of the interface. (Note: Not all elements will be localized.) Possible values are `en`, `nl`, `ru`, `fr`, etc., but the default value is `en`. |
-| `timeFormat` | The form of time notation that will be used. Possible values are `12` or `24`. The default is `24`. |
-| `units` | The units that will be used in the default weather modules. Possible values are `metric` or `imperial`. The default is `metric`. |
-| `modules` | An array of active modules. **The array must contain objects. See the next table below for more information.** |
-| `electronOptions` | An optional array of Electron (browser) options. This allows configuration of e.g. the browser screen size and position (example: `electronOptions: { fullscreen: false, width: 800, height: 600 }`). Kiosk mode can be enabled by setting `kiosk = true`, `autoHideMenuBar = false` and `fullscreen = false`. More options can be found [here](https://github.com/electron/electron/blob/master/docs/api/browser-window.md). |
-| `customCss` | The path of the `custom.css` stylesheet. The default is `css/custom.css`. |
-
-Module configuration:
-
-| **Option** | **Description** |
-| --- | --- |
-| `module` | The name of the module. This can also contain the subfolder. Valid examples include `clock`, `default/calendar` and `custommodules/mymodule`. |
-| `position` | The location of the module in which the module will be loaded. Possible values are `top_ bar`, `top_left`, `top_center`, `top_right`, `upper_third`, `middle_center`, `lower_third`, `bottom_left`, `bottom_center`, `bottom_right`, `bottom_bar`, `fullscreen_above`, and `fullscreen_below`. This field is optional but most modules require this field to set. Check the documentation of the module for more information. Multiple modules with the same position will be ordered based on the order in the configuration file. |
-| `classes` | Additional classes which are passed to the module. The field is optional. |
-| `header` | To display a header text above the module, add the header property. This field is optional. |
-| `disabled` | Set disabled to `true` to skip creating the module. This field is optional. |
-| `config` | An object with the module configuration properties. Check the documentation of the module for more information. This field is optional, unless the module requires extra configuration. |
-
-## Modules
-
-The following modules are installed by default.
-
-- [**Clock**](modules/default/clock)
-- [**Calendar**](modules/default/calendar)
-- [**Current Weather**](modules/default/currentweather)
-- [**Weather Forecast**](modules/default/weatherforecast)
-- [**News Feed**](modules/default/newsfeed)
-- [**Compliments**](modules/default/compliments)
-- [**Hello World**](modules/default/helloworld)
-- [**Alert**](modules/default/alert)
-
-For more available modules, check out out the wiki page: [MagicMirror² Modules](https://github.com/MichMich/MagicMirror/wiki/MagicMirror²-Modules). If you want to build your own modules, check out the [MagicMirror² Module Development Documentation](modules) and don't forget to add it to the wiki and the [forum](https://forum.magicmirror.builders/category/7/showcase)!
-
-## Known issues
-
-- Electron seems to have some issues on certain Raspberry Pi 2's. See [#145](https://github.com/MichMich/MagicMirror/issues/145).
-- MagicMirror² (Electron) sometimes quits without an error after an extended period of use. See [#150](https://github.com/MichMich/MagicMirror/issues/150).
-
-## Community
-
-The community around the MagicMirror² is constantly growing. We even have a [forum](https://forum.magicmirror.builders) now where you can share your ideas, ask questions, help others and get inspired by other builders. We would love to see you there!
+- Website: [https://magicmirror.builders](https://magicmirror.builders)
+- Documentation: [https://docs.magicmirror.builders](https://docs.magicmirror.builders)
+- Forum: [https://forum.magicmirror.builders](https://forum.magicmirror.builders)
+  - Technical discussions: <https://forum.magicmirror.builders/category/11/core-system>
+- Discord: [https://discord.gg/J5BAtvx](https://discord.gg/J5BAtvx)
+- Blog: [https://michaelteeuw.nl/tagged/magicmirror](https://michaelteeuw.nl/tagged/magicmirror)
+- Donations: [https://magicmirror.builders/#donate](https://magicmirror.builders/#donate)
 
 ## Contributing Guidelines
 
-Contributions of all kinds are welcome, not only in the form of code but also with regards bug reports and documentation.
+Contributions of all kinds are welcome, not only in the form of code but also with regards to
 
-Please keep the following in mind:
+- bug reports
+- documentation
+- translations
 
-- **Bug Reports**:  Make sure you're running the latest version. If the issue(s) still persist: please open a clearly documented issue with a clear title.
-- **Minor Bug Fixes**: Please send a pull request with a clear explanation of the issue or a link to the issue it solves.
-- **Major Bug Fixes**: please discuss your approach in an GitHub issue before you start to alter a big part of the code.
-- **New Features**: please please discuss in a GitHub issue before you start to alter a big part of the code. Without discussion upfront, the pull request will not be accepted / merged.
+For the full contribution guidelines, check out: [https://docs.magicmirror.builders/about/contributing.html](https://docs.magicmirror.builders/about/contributing.html)
 
-Thanks for your help in making MagicMirror² better!
+## Enjoying MagicMirror? Consider a donation!
 
-<p align="center">
-<br>
-	<a href="https://forum.magicmirror.builders/topic/728/magicmirror-is-voted-number-1-in-the-magpi-top-50"><img src="https://magicmirror.builders/img/magpi-best-watermark-custom.png" width="150" alt="MagPi Top 50"></a>
+MagicMirror² is Open Source and free. That doesn't mean we don't need any money.
+
+Please consider a donation to help us cover the ongoing costs like webservers and email services.
+If we receive enough donations we might even be able to free up some working hours and spend some extra time improving the MagicMirror² core.
+
+To donate, please follow [this](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=G5D8E9MR5DTD2&source=url) link.
+
+<p style="text-align: center">
+  <a href="https://forum.magicmirror.builders/topic/728/magicmirror-is-voted-number-1-in-the-magpi-top-50"><img src="https://magicmirror.builders/img/magpi-best-watermark-custom.png" width="150" alt="MagPi Top 50"></a>
 </p>

clientonly/index.js

@@ -1,56 +1,75 @@
-/* jshint esversion: 6 */
-
 "use strict";
 
-// Use seperate scope to prevent global scope pollution
+// Use separate scope to prevent global scope pollution
 (function () {
-	var config = {};
+	const config = {};
 
-	// Helper function to get server address/hostname from either the commandline or env
-	function getServerAddress() {
-		// Helper function to get command line parameters
-		// Assumes that a cmdline parameter is defined with `--key [value]`
-		function getCommandLineParameter(key, defaultValue = undefined) {
-			var index = process.argv.indexOf(`--${key}`);
-			var value = index > -1 ? process.argv[index + 1] : undefined;
+	/**
+	 * Helper function to get server address/hostname from either the commandline or env
+	 */
+	function getServerAddress () {
+
+		/**
+		 * Get command line parameters
+		 * Assumes that a cmdline parameter is defined with `--key [value]`
+		 * @param {string} key key to look for at the command line
+		 * @param {string} defaultValue value if no key is given at the command line
+		 * @returns {string} the value of the parameter
+		 */
+		function getCommandLineParameter (key, defaultValue = undefined) {
+			const index = process.argv.indexOf(`--${key}`);
+			const value = index > -1 ? process.argv[index + 1] : undefined;
 			return value !== undefined ? String(value) : defaultValue;
 		}
 
 		// Prefer command line arguments over environment variables
 		["address", "port"].forEach((key) => {
 			config[key] = getCommandLineParameter(key, process.env[key.toUpperCase()]);
-		})
+		});
+
+		// determine if "--use-tls"-flag was provided
+		config.tls = process.argv.indexOf("--use-tls") > 0;
 	}
 
-	function getServerConfig(url) {
+	/**
+	 * Gets the config from the specified server url
+	 * @param {string} url location where the server is running.
+	 * @returns {Promise} the config
+	 */
+	function getServerConfig (url) {
 		// Return new pending promise
 		return new Promise((resolve, reject) => {
-			// Select http or https module, depending on reqested url
-			const lib = url.startsWith("https") ? require("https") : require("http");
+			// Select http or https module, depending on requested url
+			const lib = url.startsWith("https") ? require("node:https") : require("node:http");
 			const request = lib.get(url, (response) => {
-				var configData = "";
+				let configData = "";
 
-				// Gather incomming data
-				response.on("data", function(chunk) {
+				// Gather incoming data
+				response.on("data", function (chunk) {
 					configData += chunk;
 				});
 				// Resolve promise at the end of the HTTP/HTTPS stream
-				response.on("end", function() {
+				response.on("end", function () {
 					resolve(JSON.parse(configData));
 				});
 			});
 
-			request.on("error", function(error) {
+			request.on("error", function (error) {
 				reject(new Error(`Unable to read config from server (${url} (${error.message}`));
 			});
-		})
-	};
+		});
+	}
 
-	function fail(message, code = 1) {
+	/**
+	 * Print a message to the console in case of errors
+	 * @param {string} message error message to print
+	 * @param {number} code error code for the exit call
+	 */
+	function fail (message, code = 1) {
 		if (message !== undefined && typeof message === "string") {
 			console.log(message);
 		} else {
-			console.log("Usage: 'node clientonly --address 192.168.1.10 --port 8080'");
+			console.log("Usage: 'node clientonly --address 192.168.1.10 --port 8080 [--use-tls]'");
 		}
 		process.exit(code);
 	}
@@ -58,21 +77,35 @@
 	getServerAddress();
 
 	(config.address && config.port) || fail();
+	const prefix = config.tls ? "https://" : "http://";
 
 	// Only start the client if a non-local server was provided
 	if (["localhost", "127.0.0.1", "::1", "::ffff:127.0.0.1", undefined].indexOf(config.address) === -1) {
-		getServerConfig(`http://${config.address}:${config.port}/config/`)
-			.then(function (config) {
+		getServerConfig(`${prefix}${config.address}:${config.port}/config/`)
+			.then(function (configReturn) {
+				// check environment for DISPLAY or WAYLAND_DISPLAY
+				const elecParams = ["js/electron.js"];
+				if (process.env.WAYLAND_DISPLAY) {
+					console.log(`Client: Using WAYLAND_DISPLAY=${process.env.WAYLAND_DISPLAY}`);
+					elecParams.push("--enable-features=UseOzonePlatform");
+					elecParams.push("--ozone-platform=wayland");
+				} else if (process.env.DISPLAY) {
+					console.log(`Client: Using DISPLAY=${process.env.DISPLAY}`);
+				} else {
+					fail("Error: Requires environment variable WAYLAND_DISPLAY or DISPLAY, none is provided.");
+				}
 				// Pass along the server config via an environment variable
-				var env = Object.create(process.env);
-				var options = { env: env };
-				config.address = config.address;
-				config.port = config.port;
-				env.config = JSON.stringify(config);
+				const env = Object.create(process.env);
+				env.clientonly = true; // set to pass to electron.js
+				const options = { env: env };
+				configReturn.address = config.address;
+				configReturn.port = config.port;
+				configReturn.tls = config.tls;
+				env.config = JSON.stringify(configReturn);
 
 				// Spawn electron application
 				const electron = require("electron");
-				const child = require("child_process").spawn(electron, ["js/electron.js"], options);
+				const child = require("node:child_process").spawn(electron, elecParams, options);
 
 				// Pipe all child process output to current stdout
 				child.stdout.on("data", function (buf) {
@@ -88,12 +121,11 @@
 					process.stdout.write(`Client: ${err}`);
 				});
 
-				child.on('close', (code) => {
-					if (code != 0) {
+				child.on("close", (code) => {
+					if (code !== 0) {
 						console.log(`There something wrong. The clientonly is not running code ${code}`);
 					}
 				});
-
 			})
 			.catch(function (reason) {
 				fail(`Unable to connect to server: (${reason})`);

config/.gitignore

@@ -1,2 +0,0 @@
-*
-!config.js.sample

config/config.js.sample

@@ -1,27 +1,39 @@
-/* Magic Mirror Config Sample
+/* Config Sample
  *
- * By Michael Teeuw http://michaelteeuw.nl
- * MIT Licensed.
- *
- * For more information how you can configurate this file
- * See https://github.com/MichMich/MagicMirror#configuration
+ * For more information on how you can configure this file
+ * see https://docs.magicmirror.builders/configuration/introduction.html
+ * and https://docs.magicmirror.builders/modules/configuration.html
  *
+ * You can use environment variables using a `config.js.template` file instead of `config.js`
+ * which will be converted to `config.js` while starting. For more information
+ * see https://docs.magicmirror.builders/configuration/introduction.html#enviromnent-variables
  */
-
-var config = {
-	address: "localhost", // Address to listen on, can be:
-	                      // - "localhost", "127.0.0.1", "::1" to listen on loopback interface
-	                      // - another specific IPv4/6 to listen on a specific interface
-	                      // - "", "0.0.0.0", "::" to listen on any interface
-	                      // Default, when address config is left out, is "localhost"
+let config = {
+	address: "localhost",	// Address to listen on, can be:
+							// - "localhost", "127.0.0.1", "::1" to listen on loopback interface
+							// - another specific IPv4/6 to listen on a specific interface
+							// - "0.0.0.0", "::" to listen on any interface
+							// Default, when address config is left out or empty, is "localhost"
 	port: 8080,
-	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], // Set [] to allow all IP addresses
-	                                                       // or add a specific IPv4 of 192.168.1.5 :
-	                                                       // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
-	                                                       // or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
-	                                                       // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],
+	basePath: "/",	// The URL path where MagicMirror² is hosted. If you are using a Reverse proxy
+									// you must set the sub path here. basePath must end with a /
+	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"],	// Set [] to allow all IP addresses
+									// or add a specific IPv4 of 192.168.1.5 :
+									// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
+									// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
+									// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],
+
+	useHttps: false,			// Support HTTPS or not, default "false" will use HTTP
+	httpsPrivateKey: "",	// HTTPS private key path, only require when useHttps is true
+	httpsCertificate: "",	// HTTPS Certificate path, only require when useHttps is true
 
 	language: "en",
+	locale: "en-US",   // this variable is provided as a consistent location
+			   // it is currently only used by 3rd party modules. no MagicMirror code uses this value
+			   // as we have no usage, we  have no constraints on what this field holds
+			   // see https://en.wikipedia.org/wiki/Locale_(computer_software) for the possibilities
+
+	logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
 	timeFormat: 24,
 	units: "metric",
 
@@ -44,8 +56,9 @@ var config = {
 			config: {
 				calendars: [
 					{
-						symbol: "calendar-check-o ",
-						url: "webcal://www.calendarlabs.com/templates/ical/US-Holidays.ics"
+						fetchInterval: 7 * 24 * 60 * 60 * 1000,
+						symbol: "calendar-check",
+						url: "https://ics.calendarlabs.com/76/mm3137/US_Holidays.ics"
 					}
 				]
 			}
@@ -55,22 +68,24 @@ var config = {
 			position: "lower_third"
 		},
 		{
-			module: "currentweather",
+			module: "weather",
 			position: "top_right",
 			config: {
-				location: "New York",
-				locationID: "",  //ID from http://www.openweathermap.org/help/city_list.txt
-				appid: "YOUR_OPENWEATHER_API_KEY"
+				weatherProvider: "openmeteo",
+				type: "current",
+				lat: 40.776676,
+				lon: -73.971321
 			}
 		},
 		{
-			module: "weatherforecast",
+			module: "weather",
 			position: "top_right",
 			header: "Weather Forecast",
 			config: {
-				location: "New York",
-				locationID: "5128581",  //ID from http://www.openweathermap.org/help/city_list.txt
-				appid: "YOUR_OPENWEATHER_API_KEY"
+				weatherProvider: "openmeteo",
+				type: "forecast",
+				lat: 40.776676,
+				lon: -73.971321
 			}
 		},
 		{
@@ -80,16 +95,17 @@ var config = {
 				feeds: [
 					{
 						title: "New York Times",
-						url: "http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml"
+						url: "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml"
 					}
 				],
 				showSourceTitle: true,
-				showPublishDate: true
+				showPublishDate: true,
+				broadcastNewsFeeds: true,
+				broadcastNewsUpdates: true
 			}
 		},
 	]
-
 };
 
 /*************** DO NOT EDIT THE LINE BELOW ***************/
-if (typeof module !== "undefined") {module.exports = config;}
+if (typeof module !== "undefined") { module.exports = config; }

cspell.config.json

@@ -0,0 +1,245 @@
+{
+	"version": "0.2",
+	"language": "en",
+	"words": [
+		"aarch",
+		"Alvinger",
+		"Ampio",
+		"andrezibaia",
+		"angeldeejay",
+		"apiontek",
+		"armv",
+		"ashishtank",
+		"autoplay",
+		"beada",
+		"Binney",
+		"bluemanos",
+		"bnitkin",
+		"bokmål",
+		"Brasileiro",
+		"Brento",
+		"browserwindow",
+		"bryanzzhu",
+		"btoconnor",
+		"bugsounet",
+		"buxxi",
+		"byday",
+		"calendarfetcherutils",
+		"calendarutils",
+		"chamakura",
+		"cjbrunner",
+		"clientonly",
+		"clockfaces",
+		"cmdline",
+		"codac",
+		"Crazylegstoo",
+		"crazyscot",
+		"Creepin",
+		"currentweather",
+		"CUSTOMCSS",
+		"customregions",
+		"cxmj",
+		"Cymraeg",
+		"dariom",
+		"darksky",
+		"dateheader",
+		"dateheaders",
+		"davide",
+		"DAYAFTERTOMORROW",
+		"DAYBEFOREYESTERDAY",
+		"defaultmodules",
+		"dgoth",
+		"dkallen",
+		"drivelist",
+		"DTEND",
+		"Duffman",
+		"earlman",
+		"easyas",
+		"eddiehung",
+		"Edgardos",
+		"Ekristoffe",
+		"elec",
+		"envcanada",
+		"envsub",
+		"envsubst",
+		"eouia",
+		"exdate",
+		"expectedheaders",
+		"ezeholz",
+		"Faizan",
+		"feedme",
+		"feelslike",
+		"Fenner",
+		"fewieden",
+		"fixuppm",
+		"flopp",
+		"fontawesome",
+		"fontface",
+		"forecastweather",
+		"fortawesome",
+		"frameguard",
+		"Frysk",
+		"fulldate",
+		"fullday",
+		"fullscreen",
+		"Gevoelstemperatuur",
+		"GHSA",
+		"ghsas",
+		"grenagit",
+		"Heiko",
+		"Hirschberger",
+		"hourlyweather",
+		"Hwind",
+		"ical",
+		"illimarkangur",
+		"Ingan",
+		"ipfilter",
+		"ismarslomic",
+		"jakemulley",
+		"jakobsarwary",
+		"jalibu",
+		"jargordon",
+		"jetson",
+		"jkriegshauser",
+		"jsdocs",
+		"jsonlint",
+		"jupadin",
+		"kaennchenstruggle",
+		"kenzal",
+		"Keyport",
+		"khassel",
+		"Kingdon",
+		"kioskmode",
+		"klaernie",
+		"kleinmantara",
+		"Kmph",
+		"Knapoc",
+		"Koepke",
+		"kolbyjack",
+		"krekos",
+		"Kristjan",
+		"krukle",
+		"labwc",
+		"Landis",
+		"larryare",
+		"letsencrypt",
+		"libgpiod",
+		"Lightspeed",
+		"locationforecast",
+		"lockstring",
+		"lstrip",
+		"Luciella",
+		"luxon",
+		"lxsession",
+		"magicmirror",
+		"martingron",
+		"marvai",
+		"mastermerge",
+		"matchtype",
+		"maxentries",
+		"Meteo",
+		"michaelteeuw",
+		"michmich",
+		"Midori",
+		"mirontoli",
+		"MISSINGLANG",
+		"MMPM",
+		"modernizr",
+		"modulename",
+		"multiday",
+		"Mystara",
+		"Ñandú",
+		"nathannaveen",
+		"naveensrinivasan",
+		"ndom",
+		"Nerfzooka",
+		"NEWSFEED",
+		"newsitems",
+		"nfogal",
+		"njwilliams",
+		"nonrepeating",
+		"Norsk",
+		"nunjuck",
+		"odroid",
+		"oemel",
+		"onecall",
+		"onevent",
+		"openmeteo",
+		"openweathermap",
+		"oraclesean",
+		"oscarb",
+		"philnagel",
+		"Português",
+		"PRECIP",
+		"Problema",
+		"psieg",
+		"radokristof",
+		"rajniszp",
+		"rebuilded",
+		"Reis",
+		"rejas",
+		"Resig",
+		"roboto",
+		"rohitdharavath",
+		"Rosso",
+		"rrule",
+		"sdetweil",
+		"sendheaders",
+		"serveronly",
+		"skpanagiotis",
+		"SMHI",
+		"Snille",
+		"socketclient",
+		"socketio",
+		"spectron",
+		"Starinvest",
+		"sthuber",
+		"Stieber",
+		"stylelintrc",
+		"subclassing",
+		"sunaction",
+		"suncalc",
+		"suntimes",
+		"symboltest",
+		"systeminformation",
+		"tada",
+		"taglist",
+		"Teeuw",
+		"TESTMODE",
+		"thomasrockhu",
+		"tomzt",
+		"ukmetoffice",
+		"ukmetofficedatahub",
+		"unitless",
+		"unparseable",
+		"updatenotification",
+		"Vaice",
+		"veeck",
+		"VEVENT",
+		"vgtu",
+		"Voelt",
+		"vppencilsharpener",
+		"Wallys",
+		"Weatherbit",
+		"WEATHERDATA",
+		"Weatherflow",
+		"weatherforecast",
+		"weathergov",
+		"weathericons",
+		"weatherobject",
+		"weatherutils",
+		"windspeed",
+		"Woolridge",
+		"worktree",
+		"xlarge",
+		"xrandr",
+		"xsmall",
+		"xsorifc",
+		"xwindows",
+		"xxxe",
+		"Ybbet",
+		"yearmatchgroup"
+	],
+	"ignorePaths": ["node_modules/**", "modules/**", "vendor/node_modules/**", "translations/**", "tests/mocks/**", "tests/e2e/modules/clock_es_spec.js", "fonts/roboto.css"],
+	"dictionaries": ["node"]
+}

css/custom.css

@@ -1,14 +0,0 @@
-/*****************************************************
- * Magic Mirror                                      *
- * Custom CSS                                        *
- *                                                   *
- * By Michael Teeuw http://michaelteeuw.nl           *
- * MIT Licensed.                                     *
- *                                                   *
- * Add any custom CSS below.                         *
- * Changes to this files will be ignored by GIT. *
- *****************************************************/
-
- body {
- 	
- }

css/custom.css.sample

@@ -0,0 +1,29 @@
+/* Custom CSS Sample
+ *
+ * Change color and fonts here.
+ *
+ * Beware that properties cannot be unitless, so for example write '--gap-body: 0px;' instead of just '--gap-body: 0;'
+ */
+
+/* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */
+/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */
+
+:root {
+  --color-text: #999;
+  --color-text-dimmed: #666;
+  --color-text-bright: #fff;
+  --color-background: black;
+
+  --font-primary: "Roboto Condensed";
+  --font-secondary: "Roboto";
+
+  --font-size: 20px;
+  --font-size-small: 0.75rem;
+
+  --gap-body-top: 60px;
+  --gap-body-right: 60px;
+  --gap-body-bottom: 60px;
+  --gap-body-left: 60px;
+
+  --gap-modules: 30px;
+}

css/main.css

@@ -1,7 +1,29 @@
+:root {
+  --color-text: #999;
+  --color-text-dimmed: #666;
+  --color-text-bright: #fff;
+  --color-background: #000;
+  --font-primary: "Roboto Condensed";
+  --font-secondary: "Roboto";
+  --font-size: 20px;
+  --font-size-xsmall: 0.75rem;
+  --font-size-small: 1rem;
+  --font-size-medium: 1.5rem;
+  --font-size-large: 3.25rem;
+  --font-size-xlarge: 3.75rem;
+  --gap-body-top: 60px;
+  --gap-body-right: 60px;
+  --gap-body-bottom: 60px;
+  --gap-body-left: 60px;
+  --gap-modules: 30px;
+}
+
 html {
   cursor: none;
   overflow: hidden;
-  background: #000;
+  background: var(--color-background);
+  user-select: none;
+  font-size: var(--font-size);
 }
 
 ::-webkit-scrollbar {
@@ -9,16 +31,15 @@ html {
 }
 
 body {
-  margin: 60px;
+  margin: var(--gap-body-top) var(--gap-body-right) var(--gap-body-bottom) var(--gap-body-left);
   position: absolute;
-  height: calc(100% - 120px);
-  width: calc(100% - 120px);
-  background: #000;
-  color: #aaa;
-  font-family: "Roboto Condensed", sans-serif;
+  height: calc(100% - var(--gap-body-top) - var(--gap-body-bottom));
+  width: calc(100% - var(--gap-body-right) - var(--gap-body-left));
+  background: var(--color-background);
+  color: var(--color-text);
+  font-family: var(--font-primary), sans-serif;
   font-weight: 400;
-  font-size: 2em;
-  line-height: 1.5em;
+  line-height: 1.5;
   -webkit-font-smoothing: antialiased;
 }
 
@@ -27,60 +48,60 @@ body {
  */
 
 .dimmed {
-  color: #666;
+  color: var(--color-text-dimmed);
 }
 
 .normal {
-  color: #999;
+  color: var(--color-text);
 }
 
 .bright {
-  color: #fff;
+  color: var(--color-text-bright);
 }
 
 .xsmall {
-  font-size: 15px;
-  line-height: 20px;
+  font-size: var(--font-size-xsmall);
+  line-height: 1.275;
 }
 
 .small {
-  font-size: 20px;
-  line-height: 25px;
+  font-size: var(--font-size-small);
+  line-height: 1.25;
 }
 
 .medium {
-  font-size: 30px;
-  line-height: 35px;
+  font-size: var(--font-size-medium);
+  line-height: 1.225;
 }
 
 .large {
-  font-size: 65px;
-  line-height: 65px;
+  font-size: var(--font-size-large);
+  line-height: 1;
 }
 
 .xlarge {
-  font-size: 75px;
-  line-height: 75px;
+  font-size: var(--font-size-xlarge);
+  line-height: 1;
   letter-spacing: -3px;
 }
 
 .thin {
-  font-family: Roboto, sans-serif;
+  font-family: var(--font-secondary), sans-serif;
   font-weight: 100;
 }
 
 .light {
-  font-family: "Roboto Condensed", sans-serif;
+  font-family: var(--font-primary), sans-serif;
   font-weight: 300;
 }
 
 .regular {
-  font-family: "Roboto Condensed", sans-serif;
+  font-family: var(--font-primary), sans-serif;
   font-weight: 400;
 }
 
 .bold {
-  font-family: "Roboto Condensed", sans-serif;
+  font-family: var(--font-primary), sans-serif;
   font-weight: 700;
 }
 
@@ -94,14 +115,14 @@ body {
 
 header {
   text-transform: uppercase;
-  font-size: 15px;
-  font-family: "Roboto Condensed";
+  font-size: var(--font-size-xsmall);
+  font-family: var(--font-primary), Arial, Helvetica, sans-serif;
   font-weight: 400;
-  border-bottom: 1px solid #666;
+  border-bottom: 1px solid var(--color-text-dimmed);
   line-height: 15px;
   padding-bottom: 5px;
   margin-bottom: 10px;
-  color: #999;
+  color: var(--color-text);
 }
 
 sup {
@@ -114,11 +135,19 @@ sup {
  */
 
 .module {
-  margin-bottom: 30px;
+  margin-bottom: var(--gap-modules);
+}
+
+.module.hidden {
+  pointer-events: none;
+}
+
+.module:not(.hidden) {
+  pointer-events: auto;
 }
 
 .region.bottom .module {
-  margin-top: 30px;
+  margin-top: var(--gap-modules);
   margin-bottom: 0;
 }
 
@@ -128,6 +157,10 @@ sup {
   text-overflow: ellipsis;
 }
 
+.pre-line {
+  white-space: pre-line;
+}
+
 /**
  * Region Definitions.
  */
@@ -138,40 +171,22 @@ sup {
 
 .region.fullscreen {
   position: absolute;
-  top: -60px;
-  left: -60px;
-  right: -60px;
-  bottom: -60px;
+  inset: calc(-1 * var(--gap-body-top)) calc(-1 * var(--gap-body-right)) calc(-1 * var(--gap-body-bottom)) calc(-1 * var(--gap-body-left));
   pointer-events: none;
 }
 
-.region.fullscreen * {
-  pointer-events: auto;
-}
-
 .region.right {
   right: 0;
+  text-align: right;
 }
 
 .region.top {
   top: 0;
 }
 
-.region.top .container {
-  margin-bottom: 25px;
-}
-
-.region.top .container:empty {
-  margin-bottom: 0;
-}
-
 .region.top.center,
 .region.bottom.center {
   left: 50%;
-  -moz-transform: translateX(-50%);
-  -o-transform: translateX(-50%);
-  -webkit-transform: translateX(-50%);
-  -ms-transform: translateX(-50%);
   transform: translateX(-50%);
 }
 
@@ -185,14 +200,6 @@ sup {
   bottom: 0;
 }
 
-.region.bottom .container {
-  margin-top: 25px;
-}
-
-.region.bottom .container:empty {
-  margin-top: 0;
-}
-
 .region.bottom.right,
 .region.bottom.center,
 .region.bottom.left {
@@ -208,10 +215,6 @@ sup {
 .region.middle.center {
   width: 100%;
   text-align: center;
-  -moz-transform: translateY(-50%);
-  -o-transform: translateY(-50%);
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
   transform: translateY(-50%);
 }
 
@@ -231,10 +234,6 @@ sup {
   text-align: left;
 }
 
-.region.right {
-  text-align: right;
-}
-
 .region table {
   width: 100%;
   border-spacing: 0;

eslint.config.mjs

@@ -0,0 +1,124 @@
+import eslintPluginImport from "eslint-plugin-import";
+import eslintPluginJest from "eslint-plugin-jest";
+import eslintPluginJs from "@eslint/js";
+import eslintPluginPackageJson from "eslint-plugin-package-json";
+import eslintPluginStylistic from "@stylistic/eslint-plugin";
+import globals from "globals";
+
+const config = [
+	eslintPluginImport.flatConfigs.recommended,
+	eslintPluginJest.configs["flat/recommended"],
+	eslintPluginJs.configs.recommended,
+	eslintPluginPackageJson.configs.recommended,
+	eslintPluginStylistic.configs.all,
+	{
+		files: ["**/*.js"],
+		languageOptions: {
+			ecmaVersion: "latest",
+			globals: {
+				...globals.browser,
+				...globals.node,
+				...globals.jest,
+				Log: "readonly",
+				MM: "readonly",
+				Module: "readonly",
+				config: "readonly",
+				moment: "readonly"
+			}
+		},
+		rules: {
+			"@stylistic/array-element-newline": ["error", "consistent"],
+			"@stylistic/arrow-parens": ["error", "always"],
+			"@stylistic/brace-style": "off",
+			"@stylistic/comma-dangle": ["error", "never"],
+			"@stylistic/dot-location": ["error", "property"],
+			"@stylistic/function-call-argument-newline": ["error", "consistent"],
+			"@stylistic/function-paren-newline": ["error", "consistent"],
+			"@stylistic/implicit-arrow-linebreak": ["error", "beside"],
+			"@stylistic/indent": ["error", "tab"],
+			"@stylistic/max-statements-per-line": ["error", {max: 2}],
+			"@stylistic/multiline-comment-style": "off",
+			"@stylistic/multiline-ternary": ["error", "always-multiline"],
+			"@stylistic/newline-per-chained-call": ["error", {ignoreChainWithDepth: 4}],
+			"@stylistic/no-extra-parens": "off",
+			"@stylistic/no-tabs": "off",
+			"@stylistic/object-curly-spacing": ["error", "always"],
+			"@stylistic/object-property-newline": ["error", {allowAllPropertiesOnSameLine: true}],
+			"@stylistic/operator-linebreak": ["error", "before"],
+			"@stylistic/padded-blocks": "off",
+			"@stylistic/quote-props": ["error", "as-needed"],
+			"@stylistic/quotes": ["error", "double"],
+			"@stylistic/semi": ["error", "always"],
+			"@stylistic/space-before-function-paren": ["error", "always"],
+			"@stylistic/spaced-comment": "off",
+			"dot-notation": "error",
+			eqeqeq: "error",
+			"id-length": "off",
+			"import/extensions": "error",
+			"import/newline-after-import": "error",
+			"import/order": "error",
+			"init-declarations": "off",
+			"jest/consistent-test-it": "warn",
+			"jest/no-done-callback": "warn",
+			"jest/prefer-expect-resolves": "warn",
+			"jest/prefer-mock-promise-shorthand": "warn",
+			"jest/prefer-to-be": "warn",
+			"jest/prefer-to-have-length": "warn",
+			"max-lines-per-function": ["warn", 400],
+			"max-statements": "off",
+			"no-global-assign": "off",
+			"no-inline-comments": "off",
+			"no-magic-numbers": "off",
+			"no-param-reassign": "error",
+			"no-plusplus": "off",
+			"no-prototype-builtins": "off",
+			"no-ternary": "off",
+			"no-throw-literal": "error",
+			"no-undefined": "off",
+			"no-unneeded-ternary": "error",
+			"no-unused-vars": "off",
+			"no-useless-return": "error",
+			"no-warning-comments": "off",
+			"object-shorthand": ["error", "methods"],
+			"one-var": "off",
+			"prefer-destructuring": "off",
+			"prefer-template": "error",
+			"sort-keys": "off"
+		}
+	},
+	{
+		files: ["**/*.mjs"],
+		languageOptions: {
+			ecmaVersion: "latest",
+			globals: {
+				...globals.node
+			},
+			sourceType: "module"
+		},
+		rules: {
+			"@stylistic/array-element-newline": "off",
+			"@stylistic/indent": ["error", "tab"],
+			"@stylistic/padded-blocks": ["error", "never"],
+			"@stylistic/quote-props": ["error", "as-needed"],
+			"func-style": "off",
+			"import/namespace": "off",
+			"import/no-unresolved": "off",
+			"max-lines-per-function": ["error", 100],
+			"no-magic-numbers": "off",
+			"one-var": "off",
+			"prefer-destructuring": "off",
+			"sort-keys": "error"
+		}
+	},
+	{
+		files: ["tests/configs/modules/weather/*.js"],
+		rules: {
+			"@stylistic/quotes": "off"
+		}
+	},
+	{
+		ignores: ["config/**", "modules/**/*", "!modules/default/**", "js/positions.js"]
+	}
+];
+
+export default config;

fonts/package-lock.json

@@ -0,0 +1,35 @@
+{
+	"name": "magicmirror-fonts",
+	"version": "1.0.0",
+	"lockfileVersion": 3,
+	"requires": true,
+	"packages": {
+		"": {
+			"name": "magicmirror-fonts",
+			"version": "1.0.0",
+			"license": "MIT",
+			"dependencies": {
+				"@fontsource/roboto": "^5.2.5",
+				"@fontsource/roboto-condensed": "^5.2.5"
+			}
+		},
+		"node_modules/@fontsource/roboto": {
+			"version": "5.2.5",
+			"resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.2.5.tgz",
+			"integrity": "sha512-70r2UZ0raqLn5W+sPeKhqlf8wGvUXFWlofaDlcbt/S3d06+17gXKr3VNqDODB0I1ASme3dGT5OJj9NABt7OTZQ==",
+			"license": "OFL-1.1",
+			"funding": {
+				"url": "https://github.com/sponsors/ayuhito"
+			}
+		},
+		"node_modules/@fontsource/roboto-condensed": {
+			"version": "5.2.5",
+			"resolved": "https://registry.npmjs.org/@fontsource/roboto-condensed/-/roboto-condensed-5.2.5.tgz",
+			"integrity": "sha512-FVubmVJpZ2js2+nCBEA3IOHhAgWmZ2/YKvTae0X25jlxbd85umOOvUIY6FL6OMpUvIgvwOImS9l0GJjzEPk+mg==",
+			"license": "OFL-1.1",
+			"funding": {
+				"url": "https://github.com/sponsors/ayuhito"
+			}
+		}
+	}
+}

fonts/package.json

@@ -1,15 +1,17 @@
 {
-  "name": "magicmirror-fonts",
-  "description": "Package for fonts use by MagicMirror Core.",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/MichMich/MagicMirror.git"
-  },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/MichMich/MagicMirror/issues"
-  },
-  "dependencies": {
-	"roboto-fontface": "^0.8.0"
-  }
+	"name": "magicmirror-fonts",
+	"version": "1.0.0",
+	"description": "Package for fonts use by MagicMirror² core.",
+	"bugs": {
+		"url": "https://github.com/MagicMirrorOrg/MagicMirror/issues"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/MagicMirrorOrg/MagicMirror"
+	},
+	"license": "MIT",
+	"dependencies": {
+		"@fontsource/roboto": "^5.2.5",
+		"@fontsource/roboto-condensed": "^5.2.5"
+	}
 }

fonts/roboto.css

@@ -1,95 +1,671 @@
+/* roboto-cyrillic-ext-100-normal */
 @font-face {
   font-family: Roboto;
   font-style: normal;
+  font-display: var(--fontsource-display, swap);
   font-weight: 100;
   src:
-    local("Roboto Thin"),
-    local("Roboto-Thin"),
-    url("node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.woff2") format("woff2"),
-    url("node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.woff") format("woff"),
-    url("node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.ttf") format("truetype");
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-ext-100-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-ext-100-normal.woff") format("woff");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 
+/* roboto-cyrillic-100-normal */
 @font-face {
-  font-family: "Roboto Condensed";
+  font-family: Roboto;
   font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 100;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-100-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-100-normal.woff") format("woff");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* roboto-greek-ext-100-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 100;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-greek-ext-100-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-greek-ext-100-normal.woff") format("woff");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* roboto-greek-100-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 100;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-greek-100-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-greek-100-normal.woff") format("woff");
+  unicode-range: U+0370-03FF;
+}
+
+/* roboto-vietnamese-100-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 100;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-vietnamese-100-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-vietnamese-100-normal.woff") format("woff");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* roboto-latin-ext-100-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 100;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-latin-ext-100-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-latin-ext-100-normal.woff") format("woff");
+  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* roboto-latin-100-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 100;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-latin-100-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-latin-100-normal.woff") format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* roboto-cyrillic-ext-300-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
   font-weight: 300;
   src:
-    local("Roboto Condensed Light"),
-    local("RobotoCondensed-Light"),
-    url("node_modules/roboto-fontface/fonts/roboto-condensed/Roboto-Condensed-Light.woff2") format("woff2"),
-    url("node_modules/roboto-fontface/fonts/roboto-condensed/Roboto-Condensed-Light.woff") format("woff"),
-    url("node_modules/roboto-fontface/fonts/roboto-condensed/Roboto-Condensed-Light.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Roboto Condensed";
-  font-style: normal;
-  font-weight: 400;
-  src:
-    local("Roboto Condensed"),
-    local("RobotoCondensed-Regular"),
-    url("node_modules/roboto-fontface/fonts/roboto-condensed/Roboto-Condensed-Regular.woff2") format("woff2"),
-    url("node_modules/roboto-fontface/fonts/roboto-condensed/Roboto-Condensed-Regular.woff") format("woff"),
-    url("node_modules/roboto-fontface/fonts/roboto-condensed/Roboto-Condensed-Regular.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Roboto Condensed";
-  font-style: normal;
-  font-weight: 700;
-  src:
-    local("Roboto Condensed Bold"),
-    local("RobotoCondensed-Bold"),
-    url("node_modules/roboto-fontface/fonts/roboto-condensed/Roboto-Condensed-Bold.woff2") format("woff2"),
-    url("node_modules/roboto-fontface/fonts/roboto-condensed/Roboto-Condensed-Bold.woff") format("woff"),
-    url("node_modules/roboto-fontface/fonts/roboto-condensed/Roboto-Condensed-Bold.ttf") format("truetype");
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-ext-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-ext-300-normal.woff") format("woff");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 
+/* roboto-cyrillic-300-normal */
 @font-face {
   font-family: Roboto;
   font-style: normal;
-  font-weight: 400;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
   src:
-    local("Roboto"),
-    local("Roboto-Regular"),
-    url("node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff2") format("woff2"),
-    url("node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff") format("woff"),
-    url("node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.ttf") format("truetype");
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-300-normal.woff") format("woff");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 
+/* roboto-greek-ext-300-normal */
 @font-face {
   font-family: Roboto;
   font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-greek-ext-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-greek-ext-300-normal.woff") format("woff");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* roboto-greek-300-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-greek-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-greek-300-normal.woff") format("woff");
+  unicode-range: U+0370-03FF;
+}
+
+/* roboto-vietnamese-300-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-vietnamese-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-vietnamese-300-normal.woff") format("woff");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* roboto-latin-ext-300-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-latin-ext-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-latin-ext-300-normal.woff") format("woff");
+  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* roboto-latin-300-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-latin-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-latin-300-normal.woff") format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* roboto-cyrillic-ext-400-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-ext-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-ext-400-normal.woff") format("woff");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* roboto-cyrillic-400-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-400-normal.woff") format("woff");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* roboto-greek-ext-400-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-greek-ext-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-greek-ext-400-normal.woff") format("woff");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* roboto-greek-400-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-greek-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-greek-400-normal.woff") format("woff");
+  unicode-range: U+0370-03FF;
+}
+
+/* roboto-vietnamese-400-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-vietnamese-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-vietnamese-400-normal.woff") format("woff");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* roboto-latin-ext-400-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-latin-ext-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-latin-ext-400-normal.woff") format("woff");
+  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* roboto-latin-400-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-latin-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-latin-400-normal.woff") format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* roboto-cyrillic-ext-500-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
   font-weight: 500;
   src:
-    local("Roboto Medium"),
-    local("Roboto-Medium"),
-    url("node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff2") format("woff2"),
-    url("node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff") format("woff"),
-    url("node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.ttf") format("truetype");
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-ext-500-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-ext-500-normal.woff") format("woff");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 
+/* roboto-cyrillic-500-normal */
 @font-face {
   font-family: Roboto;
   font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 500;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-500-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-500-normal.woff") format("woff");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* roboto-greek-ext-500-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 500;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-greek-ext-500-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-greek-ext-500-normal.woff") format("woff");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* roboto-greek-500-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 500;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-greek-500-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-greek-500-normal.woff") format("woff");
+  unicode-range: U+0370-03FF;
+}
+
+/* roboto-vietnamese-500-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 500;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-vietnamese-500-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-vietnamese-500-normal.woff") format("woff");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* roboto-latin-ext-500-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 500;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-latin-ext-500-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-latin-ext-500-normal.woff") format("woff");
+  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* roboto-latin-500-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 500;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-latin-500-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-latin-500-normal.woff") format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* roboto-cyrillic-ext-700-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
   font-weight: 700;
   src:
-    local("Roboto Bold"),
-    local("Roboto-Bold"),
-    url("node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff2") format("woff2"),
-    url("node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff") format("woff"),
-    url("node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.ttf") format("truetype");
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-ext-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-ext-700-normal.woff") format("woff");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 
+/* roboto-cyrillic-700-normal */
 @font-face {
   font-family: Roboto;
   font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-cyrillic-700-normal.woff") format("woff");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* roboto-greek-ext-700-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-greek-ext-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-greek-ext-700-normal.woff") format("woff");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* roboto-greek-700-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-greek-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-greek-700-normal.woff") format("woff");
+  unicode-range: U+0370-03FF;
+}
+
+/* roboto-vietnamese-700-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-vietnamese-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-vietnamese-700-normal.woff") format("woff");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* roboto-latin-ext-700-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-latin-ext-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-latin-ext-700-normal.woff") format("woff");
+  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* roboto-latin-700-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto/files/roboto-latin-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto/files/roboto-latin-700-normal.woff") format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* roboto-condensed-cyrillic-ext-300-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
   font-weight: 300;
   src:
-    local("Roboto Light"),
-    local("Roboto-Light"),
-    url("node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff2") format("woff2"),
-    url("node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff") format("woff"),
-    url("node_modules/roboto-fontface/fonts/roboto/Roboto-Light.ttf") format("truetype");
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-ext-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-ext-300-normal.woff") format("woff");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* roboto-condensed-cyrillic-300-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-300-normal.woff") format("woff");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* roboto-condensed-greek-ext-300-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-ext-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-ext-300-normal.woff") format("woff");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* roboto-condensed-greek-300-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-300-normal.woff") format("woff");
+  unicode-range: U+0370-03FF;
+}
+
+/* roboto-condensed-vietnamese-300-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-vietnamese-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-vietnamese-300-normal.woff") format("woff");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* roboto-condensed-latin-ext-300-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-ext-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-ext-300-normal.woff") format("woff");
+  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* roboto-condensed-latin-300-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 300;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-300-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-300-normal.woff") format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* roboto-condensed-cyrillic-ext-400-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-ext-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-ext-400-normal.woff") format("woff");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* roboto-condensed-cyrillic-400-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-400-normal.woff") format("woff");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* roboto-condensed-greek-ext-400-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-ext-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-ext-400-normal.woff") format("woff");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* roboto-condensed-greek-400-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-400-normal.woff") format("woff");
+  unicode-range: U+0370-03FF;
+}
+
+/* roboto-condensed-vietnamese-400-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-vietnamese-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-vietnamese-400-normal.woff") format("woff");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* roboto-condensed-latin-ext-400-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-ext-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-ext-400-normal.woff") format("woff");
+  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* roboto-condensed-latin-400-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 400;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-400-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-400-normal.woff") format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* roboto-condensed-cyrillic-ext-700-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-ext-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-ext-700-normal.woff") format("woff");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* roboto-condensed-cyrillic-700-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-cyrillic-700-normal.woff") format("woff");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* roboto-condensed-greek-ext-700-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-ext-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-ext-700-normal.woff") format("woff");
+  unicode-range: U+1F00-1FFF;
+}
+
+/* roboto-condensed-greek-700-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-greek-700-normal.woff") format("woff");
+  unicode-range: U+0370-03FF;
+}
+
+/* roboto-condensed-vietnamese-700-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-vietnamese-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-vietnamese-700-normal.woff") format("woff");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* roboto-condensed-latin-ext-700-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-ext-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-ext-700-normal.woff") format("woff");
+  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* roboto-condensed-latin-700-normal */
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-display: var(--fontsource-display, swap);
+  font-weight: 700;
+  src:
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-700-normal.woff2") format("woff2"),
+    url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-700-normal.woff") format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

index.html

@@ -1,54 +1,62 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
-	<title>MagicMirror²</title>
-	<meta name="google" content="notranslate" />
-	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+  <head>
+    <title>MagicMirror²</title>
+    <meta name="google" content="notranslate" />
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 
-	<meta name="apple-mobile-web-app-capable" content="yes">
-	<meta name="apple-mobile-web-app-status-bar-style" content="black">
-	<meta name="format-detection" content="telephone=no">
-	<meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="mobile-web-app-capable" content="yes" />
 
-	<link rel="icon" href="data:;base64,iVBORw0KGgo=">
-	<link rel="stylesheet" type="text/css" href="css/main.css">
-	<link rel="stylesheet" type="text/css" href="fonts/roboto.css">
-	<!-- custom.css is loaded by the loader.js to make sure it's loaded after the module css files. -->
+    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
+    <link rel="stylesheet" type="text/css" href="css/main.css" />
+    <link rel="stylesheet" type="text/css" href="fonts/roboto.css" />
+    <link rel="stylesheet" type="text/css" href="vendor/node_modules/animate.css/animate.min.css" />
+    <!-- custom.css is loaded by the loader.js to make sure it's loaded after the module css files. -->
 
-	<script type="text/javascript">
-		var version = "#VERSION#";
-	</script>
-</head>
-<body>
-	<div class="region fullscreen below"><div class="container"></div></div>
-	<div class="region top bar">
-		<div class="container"></div>
-		<div class="region top left"><div class="container"></div></div>
-		<div class="region top center"><div class="container"></div></div>
-		<div class="region top right"><div class="container"></div></div>
-	</div>
-	<div class="region upper third"><div class="container"></div></div>
-	<div class="region middle center"><div class="container"></div></div>
-	<div class="region lower third"><div class="container"><br/></div></div>
-	<div class="region bottom bar">
-		<div class="container"></div>
-		<div class="region bottom left"><div class="container"></div></div>
-		<div class="region bottom center"><div class="container"></div></div>
-		<div class="region bottom right"><div class="container"></div></div>
-	</div>
-	<div class="region fullscreen above"><div class="container"></div></div>
-	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
-	<script type="text/javascript" src="js/defaults.js"></script>
-	<script type="text/javascript" src="#CONFIG_FILE#"></script>
-	<script type="text/javascript" src="vendor/vendor.js"></script>
-	<script type="text/javascript" src="modules/default/defaultmodules.js"></script>
-	<script type="text/javascript" src="js/logger.js"></script>
-	<script type="text/javascript" src="translations/translations.js"></script>
-	<script type="text/javascript" src="js/translator.js"></script>
-	<script type="text/javascript" src="js/class.js"></script>
-	<script type="text/javascript" src="js/module.js"></script>
-	<script type="text/javascript" src="js/loader.js"></script>
-	<script type="text/javascript" src="js/socketclient.js"></script>
-	<script type="text/javascript" src="js/main.js"></script>
-</body>
+    <script type="text/javascript">
+      window.mmVersion = "#VERSION#";
+      window.mmTestMode = "#TESTMODE#";
+    </script>
+  </head>
+  <body>
+    <div class="region fullscreen below"><div class="container"></div></div>
+    <div class="region top bar">
+      <div class="container"></div>
+      <div class="region top left"><div class="container"></div></div>
+      <div class="region top center"><div class="container"></div></div>
+      <div class="region top right"><div class="container"></div></div>
+    </div>
+    <div class="region upper third"><div class="container"></div></div>
+    <div class="region middle center"><div class="container"></div></div>
+    <div class="region lower third">
+      <div class="container"><br /></div>
+    </div>
+    <div class="region bottom bar">
+      <div class="container"></div>
+      <div class="region bottom left"><div class="container"></div></div>
+      <div class="region bottom center"><div class="container"></div></div>
+      <div class="region bottom right"><div class="container"></div></div>
+    </div>
+    <div class="region fullscreen above"><div class="container"></div></div>
+    <script type="text/javascript" src="socket.io/socket.io.js"></script>
+    <script type="text/javascript" src="vendor/node_modules/nunjucks/browser/nunjucks.min.js"></script>
+    <script type="text/javascript" src="js/defaults.js"></script>
+    <script type="text/javascript" src="#CONFIG_FILE#"></script>
+    <script type="text/javascript" src="vendor/vendor.js"></script>
+    <script type="text/javascript" src="modules/default/defaultmodules.js"></script>
+    <script type="text/javascript" src="modules/default/utils.js"></script>
+    <script type="text/javascript" src="js/logger.js"></script>
+    <script type="text/javascript" src="translations/translations.js"></script>
+    <script type="text/javascript" src="js/translator.js"></script>
+    <script type="text/javascript" src="js/class.js"></script>
+    <script type="text/javascript" src="js/module.js"></script>
+    <script type="text/javascript" src="js/loader.js"></script>
+    <script type="text/javascript" src="js/socketclient.js"></script>
+    <script type="text/javascript" src="js/animateCSS.js"></script>
+    <script type="text/javascript" src="js/positions.js"></script>
+    <script type="text/javascript" src="js/main.js"></script>
+  </body>
 </html>

installers/mm.sh

@@ -1,2 +0,0 @@
-cd ~/MagicMirror
-DISPLAY=:0 npm start

installers/pm2_MagicMirror.json

@@ -1,7 +0,0 @@
-{
-  "apps" : [{
-    "name"        : "MagicMirror",
-    "script"      : "/home/pi/MagicMirror/installers/mm.sh",
-    "watch"       : ["/home/pi/MagicMirror/config/config.js"]
-  }]
-}

installers/postinstall/postinstall.sh

@@ -1,2 +0,0 @@
-echo "\033[32mMagicMirror installation successful!"
-exit 0

installers/raspberry.sh

@@ -1,163 +0,0 @@
-#!/usr/bin/env bash
-
-# This is an installer script for MagicMirror2. It works well enough
-# that it can detect if you have Node installed, run a binary script
-# and then download and run MagicMirror2.
-
-echo -e "\e[0m"
-echo '$$\      $$\                     $$\           $$\      $$\ $$\                                          $$$$$$\'
-echo '$$$\    $$$ |                    \__|          $$$\    $$$ |\__|                                        $$  __$$\'
-echo '$$$$\  $$$$ | $$$$$$\   $$$$$$\  $$\  $$$$$$$\ $$$$\  $$$$ |$$\  $$$$$$\   $$$$$$\   $$$$$$\   $$$$$$\  \__/  $$ |'
-echo '$$\$$\$$ $$ | \____$$\ $$  __$$\ $$ |$$  _____|$$\$$\$$ $$ |$$ |$$  __$$\ $$  __$$\ $$  __$$\ $$  __$$\  $$$$$$  |'
-echo '$$ \$$$  $$ | $$$$$$$ |$$ /  $$ |$$ |$$ /      $$ \$$$  $$ |$$ |$$ |  \__|$$ |  \__|$$ /  $$ |$$ |  \__|$$  ____/'
-echo '$$ |\$  /$$ |$$  __$$ |$$ |  $$ |$$ |$$ |      $$ |\$  /$$ |$$ |$$ |      $$ |      $$ |  $$ |$$ |      $$ |'
-echo '$$ | \_/ $$ |\$$$$$$$ |\$$$$$$$ |$$ |\$$$$$$$\ $$ | \_/ $$ |$$ |$$ |      $$ |      \$$$$$$  |$$ |      $$$$$$$$\'
-echo '\__|     \__| \_______| \____$$ |\__| \_______|\__|     \__|\__|\__|      \__|       \______/ \__|      \________|'
-echo '                       $$\   $$ |'
-echo '                       \$$$$$$  |'
-echo '                        \______/'
-echo -e "\e[0m"
-
-# Define the tested version of Node.js.
-NODE_TESTED="v5.1.0"
-
-# Determine which Pi is running.
-ARM=$(uname -m) 
-
-# Check the Raspberry Pi version.
-if [ "$ARM" != "armv7l" ]; then
-	echo -e "\e[91mSorry, your Raspberry Pi is not supported."
-	echo -e "\e[91mPlease run MagicMirror on a Raspberry Pi 2 or 3."
-	echo -e "\e[91mIf this is a Pi Zero, you are in the same boat as the original Raspberry Pi. You must run in server only mode."
-	exit;
-fi
-
-# Define helper methods.
-function version_gt() { test "$(echo "$@" | tr " " "\n" | sort -V | head -n 1)" != "$1"; }
-function command_exists () { type "$1" &> /dev/null ;}
-
-# Update before first apt-get
-echo -e "\e[96mUpdating packages ...\e[90m"
-sudo apt-get update || echo -e "\e[91mUpdate failed, carrying on installation ...\e[90m"
-
-# Installing helper tools
-echo -e "\e[96mInstalling helper tools ...\e[90m"
-sudo apt-get install curl wget git build-essential unzip || exit
-
-# Check if we need to install or upgrade Node.js.
-echo -e "\e[96mCheck current Node installation ...\e[0m"
-NODE_INSTALL=false
-if command_exists node; then
-	echo -e "\e[0mNode currently installed. Checking version number.";
-	NODE_CURRENT=$(node -v)
-	echo -e "\e[0mMinimum Node version: \e[1m$NODE_TESTED\e[0m"
-	echo -e "\e[0mInstalled Node version: \e[1m$NODE_CURRENT\e[0m"
-	if version_gt $NODE_TESTED $NODE_CURRENT; then
-		echo -e "\e[96mNode should be upgraded.\e[0m"
-		NODE_INSTALL=true
-
-		# Check if a node process is currenlty running.
-		# If so abort installation.
-		if pgrep "node" > /dev/null; then
-			echo -e "\e[91mA Node process is currently running. Can't upgrade."
-			echo "Please quit all Node processes and restart the installer."
-			exit;
-		fi
-
-	else
-		echo -e "\e[92mNo Node.js upgrade necessary.\e[0m"
-	fi
-
-else
-	echo -e "\e[93mNode.js is not installed.\e[0m";
-	NODE_INSTALL=true
-fi
-
-# Install or upgrade node if necessary.
-if $NODE_INSTALL; then
-	
-	echo -e "\e[96mInstalling Node.js ...\e[90m"
-
-	# Fetch the latest version of Node.js from the selected branch
-	# The NODE_STABLE_BRANCH variable will need to be manually adjusted when a new branch is released. (e.g. 7.x)
-	# Only tested (stable) versions are recommended as newer versions could break MagicMirror.
-	
-	NODE_STABLE_BRANCH="6.x"
-	curl -sL https://deb.nodesource.com/setup_$NODE_STABLE_BRANCH | sudo -E bash -
-	sudo apt-get install -y nodejs
-	echo -e "\e[92mNode.js installation Done!\e[0m"
-fi
-
-# Install MagicMirror
-cd ~
-if [ -d "$HOME/MagicMirror" ] ; then
-	echo -e "\e[93mIt seems like MagicMirror is already installed."
-	echo -e "To prevent overwriting, the installer will be aborted."
-	echo -e "Please rename the \e[1m~/MagicMirror\e[0m\e[93m folder and try again.\e[0m"
-	echo ""
-	echo -e "If you want to upgrade your installation run \e[1m\e[97mgit pull\e[0m from the ~/MagicMirror directory."
-	echo ""
-	exit;
-fi
-
-echo -e "\e[96mCloning MagicMirror ...\e[90m"
-if git clone https://github.com/MichMich/MagicMirror.git; then 
-	echo -e "\e[92mCloning MagicMirror Done!\e[0m"
-else
-	echo -e "\e[91mUnable to clone MagicMirror."
-	exit;
-fi
-
-cd ~/MagicMirror  || exit
-echo -e "\e[96mInstalling dependencies ...\e[90m"
-if npm install; then 
-	echo -e "\e[92mDependencies installation Done!\e[0m"
-else
-	echo -e "\e[91mUnable to install dependencies!"
-	exit;
-fi
-
-# Use sample config for start MagicMirror
-cp config/config.js.sample config/config.js
-
-# Check if plymouth is installed (default with PIXEL desktop environment), then install custom splashscreen.
-echo -e "\e[96mCheck plymouth installation ...\e[0m"
-if command_exists plymouth; then
-	THEME_DIR="/usr/share/plymouth/themes"
-	echo -e "\e[90mSplashscreen: Checking themes directory.\e[0m"
-	if [ -d $THEME_DIR ]; then
-		echo -e "\e[90mSplashscreen: Create theme directory if not exists.\e[0m"
-		if [ ! -d $THEME_DIR/MagicMirror ]; then
-			sudo mkdir $THEME_DIR/MagicMirror
-		fi
-
-		if sudo cp ~/MagicMirror/splashscreen/splash.png $THEME_DIR/MagicMirror/splash.png && sudo cp ~/MagicMirror/splashscreen/MagicMirror.plymouth $THEME_DIR/MagicMirror/MagicMirror.plymouth && sudo cp ~/MagicMirror/splashscreen/MagicMirror.script $THEME_DIR/MagicMirror/MagicMirror.script; then
-			echo -e "\e[90mSplashscreen: Theme copied successfully.\e[0m"
-			if sudo plymouth-set-default-theme -R MagicMirror; then
-				echo -e "\e[92mSplashscreen: Changed theme to MagicMirror successfully.\e[0m"
-			else
-				echo -e "\e[91mSplashscreen: Couldn't change theme to MagicMirror!\e[0m"
-			fi
-		else
-			echo -e "\e[91mSplashscreen: Copying theme failed!\e[0m"
-		fi
-	else
-		echo -e "\e[91mSplashscreen: Themes folder doesn't exist!\e[0m"
-	fi
-else
-	echo -e "\e[93mplymouth is not installed.\e[0m";
-fi
-
-# Use pm2 control like a service MagicMirror
-read -p "Do you want use pm2 for auto starting of your MagicMirror (y/n)?" choice
-if [[ $choice =~ ^[Yy]$ ]]; then
-    sudo npm install -g pm2
-    sudo su -c "env PATH=$PATH:/usr/bin pm2 startup linux -u pi --hp /home/pi"
-    pm2 start ~/MagicMirror/installers/pm2_MagicMirror.json
-    pm2 save
-fi
-
-echo " "
-echo -e "\e[92mWe're ready! Run \e[1m\e[97mDISPLAY=:0 npm start\e[0m\e[92m from the ~/MagicMirror directory to start your MagicMirror.\e[0m"
-echo " "
-echo " "

jest.config.js

@@ -0,0 +1,33 @@
+module.exports = async () => {
+	return {
+		verbose: true,
+		testTimeout: 20000,
+		testSequencer: "<rootDir>/tests/utils/test_sequencer.js",
+		projects: [
+			{
+				displayName: "unit",
+				globalSetup: "<rootDir>/tests/unit/helpers/global-setup.js",
+				moduleNameMapper: {
+					logger: "<rootDir>/js/logger.js"
+				},
+				testMatch: ["**/tests/unit/**/*.[jt]s?(x)"],
+				testPathIgnorePatterns: ["<rootDir>/tests/unit/mocks", "<rootDir>/tests/unit/helpers"]
+			},
+			{
+				displayName: "electron",
+				testMatch: ["**/tests/electron/**/*.[jt]s?(x)"],
+				testPathIgnorePatterns: ["<rootDir>/tests/electron/helpers"]
+			},
+			{
+				displayName: "e2e",
+				setupFilesAfterEnv: ["<rootDir>/tests/e2e/helpers/mock-console.js"],
+				testMatch: ["**/tests/e2e/**/*.[jt]s?(x)"],
+				modulePaths: ["<rootDir>/js/"],
+				testPathIgnorePatterns: ["<rootDir>/tests/e2e/helpers", "<rootDir>/tests/e2e/mocks"]
+			}
+		],
+		collectCoverageFrom: ["./clientonly/**/*.js", "./js/**/*.js", "./modules/default/**/*.js", "./serveronly/**/*.js"],
+		coverageReporters: ["lcov", "text"],
+		coverageProvider: "v8"
+	};
+};

js/animateCSS.js

@@ -0,0 +1,158 @@
+/* enumeration of animations in Array **/
+const AnimateCSSIn = [
+	// Attention seekers
+	"bounce",
+	"flash",
+	"pulse",
+	"rubberBand",
+	"shakeX",
+	"shakeY",
+	"headShake",
+	"swing",
+	"tada",
+	"wobble",
+	"jello",
+	"heartBeat",
+	// Back entrances
+	"backInDown",
+	"backInLeft",
+	"backInRight",
+	"backInUp",
+	// Bouncing entrances
+	"bounceIn",
+	"bounceInDown",
+	"bounceInLeft",
+	"bounceInRight",
+	"bounceInUp",
+	// Fading entrances
+	"fadeIn",
+	"fadeInDown",
+	"fadeInDownBig",
+	"fadeInLeft",
+	"fadeInLeftBig",
+	"fadeInRight",
+	"fadeInRightBig",
+	"fadeInUp",
+	"fadeInUpBig",
+	"fadeInTopLeft",
+	"fadeInTopRight",
+	"fadeInBottomLeft",
+	"fadeInBottomRight",
+	// Flippers
+	"flip",
+	"flipInX",
+	"flipInY",
+	// Lightspeed
+	"lightSpeedInRight",
+	"lightSpeedInLeft",
+	// Rotating entrances
+	"rotateIn",
+	"rotateInDownLeft",
+	"rotateInDownRight",
+	"rotateInUpLeft",
+	"rotateInUpRight",
+	// Specials
+	"jackInTheBox",
+	"rollIn",
+	// Zooming entrances
+	"zoomIn",
+	"zoomInDown",
+	"zoomInLeft",
+	"zoomInRight",
+	"zoomInUp",
+	// Sliding entrances
+	"slideInDown",
+	"slideInLeft",
+	"slideInRight",
+	"slideInUp"
+];
+
+const AnimateCSSOut = [
+	// Back exits
+	"backOutDown",
+	"backOutLeft",
+	"backOutRight",
+	"backOutUp",
+	// Bouncing exits
+	"bounceOut",
+	"bounceOutDown",
+	"bounceOutLeft",
+	"bounceOutRight",
+	"bounceOutUp",
+	// Fading exits
+	"fadeOut",
+	"fadeOutDown",
+	"fadeOutDownBig",
+	"fadeOutLeft",
+	"fadeOutLeftBig",
+	"fadeOutRight",
+	"fadeOutRightBig",
+	"fadeOutUp",
+	"fadeOutUpBig",
+	"fadeOutTopLeft",
+	"fadeOutTopRight",
+	"fadeOutBottomRight",
+	"fadeOutBottomLeft",
+	// Flippers
+	"flipOutX",
+	"flipOutY",
+	// Lightspeed
+	"lightSpeedOutRight",
+	"lightSpeedOutLeft",
+	// Rotating exits
+	"rotateOut",
+	"rotateOutDownLeft",
+	"rotateOutDownRight",
+	"rotateOutUpLeft",
+	"rotateOutUpRight",
+	// Specials
+	"hinge",
+	"rollOut",
+	// Zooming exits
+	"zoomOut",
+	"zoomOutDown",
+	"zoomOutLeft",
+	"zoomOutRight",
+	"zoomOutUp",
+	// Sliding exits
+	"slideOutDown",
+	"slideOutLeft",
+	"slideOutRight",
+	"slideOutUp"
+];
+
+/**
+ * Create an animation with Animate CSS
+ * @param {string} [element] div element to animate.
+ * @param {string} [animation] animation name.
+ * @param {number} [animationTime] animation duration.
+ */
+function addAnimateCSS (element, animation, animationTime) {
+	const animationName = `animate__${animation}`;
+	const node = document.getElementById(element);
+	if (!node) {
+		// don't execute animate: we don't find div
+		Log.warn("addAnimateCSS: node not found for", element);
+		return;
+	}
+	node.style.setProperty("--animate-duration", `${animationTime}s`);
+	node.classList.add("animate__animated", animationName);
+}
+
+/**
+ * Remove an animation with Animate CSS
+ * @param {string} [element] div element to animate.
+ * @param {string} [animation] animation name.
+ */
+function removeAnimateCSS (element, animation) {
+	const animationName = `animate__${animation}`;
+	const node = document.getElementById(element);
+	if (!node) {
+		// don't execute animate: we don't find div
+		Log.warn("removeAnimateCSS: node not found for", element);
+		return;
+	}
+	node.classList.remove("animate__animated", animationName);
+	node.style.removeProperty("--animate-duration");
+}
+if (typeof window === "undefined") module.exports = { AnimateCSSIn, AnimateCSSOut };

js/app.js

@@ -1,29 +1,38 @@
-/* Magic Mirror
- * The Core App (Server)
- *
- * By Michael Teeuw http://michaelteeuw.nl
- * MIT Licensed.
- */
+// Alias modules mentioned in package.js under _moduleAliases.
+require("module-alias/register");
 
-var fs = require("fs");
-var Server = require(__dirname + "/server.js");
-var Utils = require(__dirname + "/utils.js");
-var defaultModules = require(__dirname + "/../modules/default/defaultmodules.js");
-var path = require("path");
+const fs = require("node:fs");
+const path = require("node:path");
+const envsub = require("envsub");
+const Log = require("logger");
+
+const Server = require(`${__dirname}/server`);
+const Utils = require(`${__dirname}/utils`);
+const defaultModules = require(`${__dirname}/../modules/default/defaultmodules`);
+const { getEnvVarsAsObj } = require(`${__dirname}/server_functions`);
+
+// used to control fetch timeout for node_helpers
+const { setGlobalDispatcher, Agent } = require("undici");
+// common timeout value, provide environment override in case
+const fetch_timeout = process.env.mmFetchTimeout !== undefined ? process.env.mmFetchTimeout : 30000;
 
 // Get version number.
-global.version = JSON.parse(fs.readFileSync("package.json", "utf8")).version;
-console.log("Starting MagicMirror: v" + global.version);
+global.version = require(`${__dirname}/../package.json`).version;
+global.mmTestMode = process.env.mmTestMode === "true";
+Log.log(`Starting MagicMirror: v${global.version}`);
+
+// Log system information.
+Utils.logSystemInformation();
 
 // global absolute root path
-global.root_path = path.resolve(__dirname + "/../");
+global.root_path = path.resolve(`${__dirname}/../`);
 
 if (process.env.MM_CONFIG_FILE) {
-	global.configuration_file = process.env.MM_CONFIG_FILE;
+	global.configuration_file = process.env.MM_CONFIG_FILE.replace(`${global.root_path}/`, "");
 }
 
 // FIXME: Hotfix Pull Request
-// https://github.com/MichMich/MagicMirror/pull/673
+// https://github.com/MagicMirrorOrg/MagicMirror/pull/673
 if (process.env.MM_PORT) {
 	global.mmPort = process.env.MM_PORT;
 }
@@ -31,108 +40,196 @@ if (process.env.MM_PORT) {
 // The next part is here to prevent a major exception when there
 // is no internet connection. This could probable be solved better.
 process.on("uncaughtException", function (err) {
-	console.log("Whoops! There was an uncaught exception...");
-	console.error(err);
-	console.log("MagicMirror will not quit, but it might be a good idea to check why this happened. Maybe no internet connection?");
-	console.log("If you think this really is an issue, please open an issue on GitHub: https://github.com/MichMich/MagicMirror/issues");
+	// ignore strange exceptions under aarch64 coming from systeminformation:
+	if (!err.stack.includes("node_modules/systeminformation")) {
+		Log.error("Whoops! There was an uncaught exception...");
+		Log.error(err);
+		Log.error("MagicMirror² will not quit, but it might be a good idea to check why this happened. Maybe no internet connection?");
+		Log.error("If you think this really is an issue, please open an issue on GitHub: https://github.com/MagicMirrorOrg/MagicMirror/issues");
+	}
 });
 
-/* App - The core app.
+/**
+ * The core app.
+ * @class
  */
-var App = function() {
-	var nodeHelpers = [];
+function App () {
+	let nodeHelpers = [];
+	let httpServer;
 
-	/* loadConfig(callback)
-	 * Loads the config file. combines it with the defaults,
-	 * and runs the callback with the found config as argument.
-	 *
-	 * argument callback function - The callback function.
+	/**
+	 * Loads the config file. Combines it with the defaults and returns the config
+	 * @async
+	 * @returns {Promise<object>} the loaded config or the defaults if something goes wrong
 	 */
-
-	var loadConfig = function(callback) {
-		console.log("Loading config ...");
-		var defaults = require(__dirname + "/defaults.js");
+	async function loadConfig () {
+		Log.log("Loading config ...");
+		const defaults = require(`${__dirname}/defaults`);
+		if (process.env.JEST_WORKER_ID !== undefined) {
+			// if we are running with jest
+			defaults.address = "0.0.0.0";
+		}
 
 		// For this check proposed to TestSuite
 		// https://forum.magicmirror.builders/topic/1456/test-suite-for-magicmirror/8
-		var configFilename = path.resolve(global.root_path + "/config/config.js");
-		if (typeof(global.configuration_file) !== "undefined") {
-		    configFilename = path.resolve(global.configuration_file);
+		const configFilename = path.resolve(global.configuration_file || `${global.root_path}/config/config.js`);
+		let templateFile = `${configFilename}.template`;
+
+		// check if templateFile exists
+		try {
+			fs.accessSync(templateFile, fs.F_OK);
+		} catch (err) {
+			templateFile = null;
+			Log.log("config template file not exists, no envsubst");
 		}
 
+		if (templateFile) {
+			// save current config.js
+			try {
+				if (fs.existsSync(configFilename)) {
+					fs.copyFileSync(configFilename, `${configFilename}-old`);
+				}
+			} catch (err) {
+				Log.warn(`Could not copy ${configFilename}: ${err.message}`);
+			}
+
+			// check if config.env exists
+			const envFiles = [];
+			const configEnvFile = `${configFilename.substr(0, configFilename.lastIndexOf("."))}.env`;
+			try {
+				if (fs.existsSync(configEnvFile)) {
+					envFiles.push(configEnvFile);
+				}
+			} catch (err) {
+				Log.log(`${configEnvFile} does not exist. ${err.message}`);
+			}
+
+			let options = {
+				all: true,
+				diff: false,
+				envFiles: envFiles,
+				protect: false,
+				syntax: "default",
+				system: true
+			};
+
+			// envsubst variables in templateFile and create new config.js
+			// naming for envsub must be templateFile and outputFile
+			const outputFile = configFilename;
+			try {
+				await envsub({ templateFile, outputFile, options });
+			} catch (err) {
+				Log.error(`Could not envsubst variables: ${err.message}`);
+			}
+		}
+
+		require(`${global.root_path}/js/check_config.js`);
+
 		try {
 			fs.accessSync(configFilename, fs.F_OK);
-			var c = require(configFilename);
+			const c = require(configFilename);
+			if (Object.keys(c).length === 0) {
+				Log.error("WARNING! Config file appears empty, maybe missing module.exports last line?");
+			}
 			checkDeprecatedOptions(c);
-			var config = Object.assign(defaults, c);
-			callback(config);
+			return Object.assign(defaults, c);
 		} catch (e) {
-			if (e.code == "ENOENT") {
-				console.error(Utils.colors.error("WARNING! Could not find config file. Please create one. Starting with default configuration."));
+			if (e.code === "ENOENT") {
+				Log.error("WARNING! Could not find config file. Please create one. Starting with default configuration.");
 			} else if (e instanceof ReferenceError || e instanceof SyntaxError) {
-				console.error(Utils.colors.error("WARNING! Could not validate config file. Please correct syntax errors. Starting with default configuration."));
+				Log.error(`WARNING! Could not validate config file. Starting with default configuration. Please correct syntax errors at or above this line: ${e.stack}`);
 			} else {
-				console.error(Utils.colors.error("WARNING! Could not load config file. Starting with default configuration. Error found: " + e));
+				Log.error(`WARNING! Could not load config file. Starting with default configuration. Error found: ${e}`);
 			}
-			callback(defaults);
 		}
-	};
 
-	var checkDeprecatedOptions = function(userConfig) {
-		var deprecated = require(global.root_path + "/js/deprecated.js");
-		var deprecatedOptions = deprecated.configs;
+		return defaults;
+	}
 
-		var usedDeprecated = [];
+	/**
+	 * Checks the config for deprecated options and throws a warning in the logs
+	 * if it encounters one option from the deprecated.js list
+	 * @param {object} userConfig The user config
+	 */
+	function checkDeprecatedOptions (userConfig) {
+		const deprecated = require(`${global.root_path}/js/deprecated`);
 
-		deprecatedOptions.forEach(function(option) {
-			if (userConfig.hasOwnProperty(option)) {
-				usedDeprecated.push(option);
-			}
-		});
+		// check for deprecated core options
+		const deprecatedOptions = deprecated.configs;
+		const usedDeprecated = deprecatedOptions.filter((option) => userConfig.hasOwnProperty(option));
 		if (usedDeprecated.length > 0) {
-			console.warn(Utils.colors.warn(
-				"WARNING! Your config is using deprecated options: " +
-				usedDeprecated.join(", ") +
-				". Check README and CHANGELOG for more up-to-date ways of getting the same functionality.")
-			);
+			Log.warn(`WARNING! Your config is using deprecated option(s): ${usedDeprecated.join(", ")}. Check README and CHANGELOG for more up-to-date ways of getting the same functionality.`);
+		}
+
+		// check for deprecated module options
+		for (const element of userConfig.modules) {
+			if (deprecated[element.module] !== undefined && element.config !== undefined) {
+				const deprecatedModuleOptions = deprecated[element.module];
+				const usedDeprecatedModuleOptions = deprecatedModuleOptions.filter((option) => element.config.hasOwnProperty(option));
+				if (usedDeprecatedModuleOptions.length > 0) {
+					Log.warn(`WARNING! Your config for module ${element.module} is using deprecated option(s): ${usedDeprecatedModuleOptions.join(", ")}. Check README and CHANGELOG for more up-to-date ways of getting the same functionality.`);
+				}
+			}
 		}
 	}
 
-	/* loadModule(module)
+	/**
 	 * Loads a specific module.
-	 *
-	 * argument module string - The name of the module (including subpath).
+	 * @param {string} module The name of the module (including subpath).
 	 */
-	var loadModule = function(module, callback) {
+	function loadModule (module) {
+		const elements = module.split("/");
+		const moduleName = elements[elements.length - 1];
+		const env = getEnvVarsAsObj();
+		let moduleFolder = path.resolve(`${__dirname}/../${env.modulesDir}`, module);
 
-		var elements = module.split("/");
-		var moduleName = elements[elements.length - 1];
-		var moduleFolder =  __dirname + "/../modules/" + module;
-
-		if (defaultModules.indexOf(moduleName) !== -1) {
-			moduleFolder =  __dirname + "/../modules/default/" + module;
+		if (defaultModules.includes(moduleName)) {
+			const defaultModuleFolder = path.resolve(`${__dirname}/../modules/default/`, module);
+			if (process.env.JEST_WORKER_ID === undefined) {
+				moduleFolder = defaultModuleFolder;
+			} else {
+				// running in Jest, allow defaultModules placed under moduleDir for testing
+				if (env.modulesDir === "modules" || env.modulesDir === "tests/mocks") {
+					moduleFolder = defaultModuleFolder;
+				}
+			}
 		}
 
-		var helperPath = moduleFolder + "/node_helper.js";
+		const moduleFile = `${moduleFolder}/${moduleName}.js`;
 
-		var loadModule = true;
+		try {
+			fs.accessSync(moduleFile, fs.R_OK);
+		} catch (e) {
+			Log.warn(`No ${moduleFile} found for module: ${moduleName}.`);
+		}
+
+		const helperPath = `${moduleFolder}/node_helper.js`;
+
+		let loadHelper = true;
 		try {
 			fs.accessSync(helperPath, fs.R_OK);
 		} catch (e) {
-			loadModule = false;
-			console.log("No helper found for module: " + moduleName + ".");
+			loadHelper = false;
+			Log.log(`No helper found for module: ${moduleName}.`);
 		}
 
-		if (loadModule) {
-			var Module = require(helperPath);
-			var m = new Module();
+		// if the helper was found
+		if (loadHelper) {
+			let Module;
+			try {
+				Module = require(helperPath);
+			} catch (e) {
+				Log.error(`Error when loading ${moduleName}:`, e.message);
+				return;
+			}
+			let m = new Module();
 
 			if (m.requiresVersion) {
-				console.log("Check MagicMirror version for node helper '" + moduleName + "' - Minimum version:  " + m.requiresVersion + " - Current version: " + global.version);
+				Log.log(`Check MagicMirror² version for node helper '${moduleName}' - Minimum version: ${m.requiresVersion} - Current version: ${global.version}`);
 				if (cmpVersions(global.version, m.requiresVersion) >= 0) {
-					console.log("Version is ok!");
+					Log.log("Version is ok!");
 				} else {
-					console.log("Version is incorrect. Skip module: '" + moduleName + "'");
+					Log.warn(`Version is incorrect. Skip module: '${moduleName}'`);
 					return;
 				}
 			}
@@ -141,49 +238,38 @@ var App = function() {
 			m.setPath(path.resolve(moduleFolder));
 			nodeHelpers.push(m);
 
-			m.loaded(callback);
-		} else {
-			callback();
+			m.loaded();
 		}
-	};
+	}
 
-	/* loadModules(modules)
+	/**
 	 * Loads all modules.
-	 *
-	 * argument module string - The name of the module (including subpath).
+	 * @param {Module[]} modules All modules to be loaded
+	 * @returns {Promise} A promise that is resolved when all modules been loaded
 	 */
-	var loadModules = function(modules, callback) {
-		console.log("Loading module helpers ...");
+	async function loadModules (modules) {
+		Log.log("Loading module helpers ...");
 
-		var loadNextModule = function() {
-			if (modules.length > 0) {
-				var nextModule = modules[0];
-				loadModule(nextModule, function() {
-					modules = modules.slice(1);
-					loadNextModule();
-				});
-			} else {
-				// All modules are loaded
-				console.log("All module helpers loaded.");
-				callback();
-			}
-		};
+		for (let module of modules) {
+			await loadModule(module);
+		}
 
-		loadNextModule();
-	};
+		Log.log("All module helpers loaded.");
+	}
 
-	/* cmpVersions(a,b)
-	 * Compare two symantic version numbers and return the difference.
-	 *
-	 * argument a string - Version number a.
-	 * argument a string - Version number b.
+	/**
+	 * Compare two semantic version numbers and return the difference.
+	 * @param {string} a Version number a.
+	 * @param {string} b Version number b.
+	 * @returns {number} A positive number if a is larger than b, a negative
+	 * number if a is smaller and 0 if they are the same
 	 */
-	function cmpVersions(a, b) {
-		var i, diff;
-		var regExStrip0 = /(\.0+)+$/;
-		var segmentsA = a.replace(regExStrip0, "").split(".");
-		var segmentsB = b.replace(regExStrip0, "").split(".");
-		var l = Math.min(segmentsA.length, segmentsB.length);
+	function cmpVersions (a, b) {
+		let i, diff;
+		const regExStrip0 = /(\.0+)+$/;
+		const segmentsA = a.replace(regExStrip0, "").split(".");
+		const segmentsB = b.replace(regExStrip0, "").split(".");
+		const l = Math.min(segmentsA.length, segmentsB.length);
 
 		for (i = 0; i < l; i++) {
 			diff = parseInt(segmentsA[i], 10) - parseInt(segmentsB[i], 10);
@@ -194,48 +280,142 @@ var App = function() {
 		return segmentsA.length - segmentsB.length;
 	}
 
-	/* start(callback)
-	 * This methods starts the core app.
-	 * It loads the config, then it loads all modules.
-	 * When it"s done it executs the callback with the config as argument.
+	/**
+	 * Start the core app.
 	 *
-	 * argument callback function - The callback function.
+	 * It loads the config, then it loads all modules.
+	 * @async
+	 * @returns {Promise<object>} the config used
 	 */
-	this.start = function(callback) {
+	this.start = async function () {
+		config = await loadConfig();
 
-		loadConfig(function(c) {
-			config = c;
+		Log.setLogLevel(config.logLevel);
 
-			var modules = [];
+		// get the used module positions
+		Utils.getModulePositions();
 
-			for (var m in config.modules) {
-				var module = config.modules[m];
-				if (modules.indexOf(module.module) === -1 && !module.disabled) {
-					modules.push(module.module);
+		let modules = [];
+		for (const module of config.modules) {
+			if (module.disabled) continue;
+			if (module.module) {
+				if (Utils.moduleHasValidPosition(module.position) || typeof (module.position) === "undefined") {
+					// Only add this module to be loaded if it is not a duplicate (repeated instance of the same module)
+					if (!modules.includes(module.module)) {
+						modules.push(module.module);
+					}
+				} else {
+					Log.warn("Invalid module position found for this configuration:" + `\n${JSON.stringify(module, null, 2)}`);
 				}
+			} else {
+				Log.warn("No module name found for this configuration:" + `\n${JSON.stringify(module, null, 2)}`);
 			}
+		}
 
-			loadModules(modules, function() {
-				var server = new Server(config, function(app, io) {
-					console.log("Server started ...");
+		setGlobalDispatcher(new Agent({ connect: { timeout: fetch_timeout } }));
 
-					for (var h in nodeHelpers) {
-						var nodeHelper = nodeHelpers[h];
-						nodeHelper.setExpressApp(app);
-						nodeHelper.setSocketIO(io);
-						nodeHelper.start();
-					}
+		await loadModules(modules);
 
-					console.log("Sockets connected & modules started ...");
+		httpServer = new Server(config);
+		const { app, io } = await httpServer.open();
+		Log.log("Server started ...");
 
-					if (typeof callback === "function") {
-						callback(config);
-					}
+		const nodePromises = [];
+		for (let nodeHelper of nodeHelpers) {
+			nodeHelper.setExpressApp(app);
+			nodeHelper.setSocketIO(io);
 
-				});
-			});
+			try {
+				nodePromises.push(nodeHelper.start());
+			} catch (error) {
+				Log.error(`Error when starting node_helper for module ${nodeHelper.name}:`);
+				Log.error(error);
+			}
+		}
+
+		const results = await Promise.allSettled(nodePromises);
+
+		// Log errors that happened during async node_helper startup
+		results.forEach((result) => {
+			if (result.status === "rejected") {
+				Log.error(result.reason);
+			}
 		});
+
+		Log.log("Sockets connected & modules started ...");
+
+		return config;
 	};
-};
+
+	/**
+	 * Stops the core app. This calls each node_helper's STOP() function, if it
+	 * exists.
+	 *
+	 * Added to fix #1056
+	 * @returns {Promise} A promise that is resolved when all node_helpers and
+	 * the http server has been closed
+	 */
+	this.stop = async function () {
+		const nodePromises = [];
+		for (let nodeHelper of nodeHelpers) {
+			try {
+				if (typeof nodeHelper.stop === "function") {
+					nodePromises.push(nodeHelper.stop());
+				}
+			} catch (error) {
+				Log.error(`Error when stopping node_helper for module ${nodeHelper.name}:`);
+				console.error(error);
+			}
+		}
+
+		const results = await Promise.allSettled(nodePromises);
+
+		// Log errors that happened during async node_helper stopping
+		results.forEach((result) => {
+			if (result.status === "rejected") {
+				Log.error(result.reason);
+			}
+		});
+
+		Log.log("Node_helpers stopped ...");
+
+		// To be able to stop the app even if it hasn't been started (when
+		// running with Electron against another server)
+		if (!httpServer) {
+			return Promise.resolve();
+		}
+
+		return httpServer.close();
+	};
+
+	/**
+	 * Listen for SIGINT signal and call stop() function.
+	 *
+	 * Added to fix #1056
+	 * Note: this is only used if running `server-only`. Otherwise
+	 * this.stop() is called by app.on("before-quit"... in `electron.js`
+	 */
+	process.on("SIGINT", async () => {
+		Log.log("[SIGINT] Received. Shutting down server...");
+		setTimeout(() => {
+			process.exit(0);
+		}, 3000); // Force quit after 3 seconds
+		await this.stop();
+		process.exit(0);
+	});
+
+	/**
+	 * Listen to SIGTERM signals so we can stop everything when we
+	 * are asked to stop by the OS.
+	 */
+	process.on("SIGTERM", async () => {
+		Log.log("[SIGTERM] Received. Shutting down server...");
+		setTimeout(() => {
+			process.exit(0);
+		}, 3000); // Force quit after 3 seconds
+		await this.stop();
+		process.exit(0);
+	});
+}
 
 module.exports = new App();

js/check_config.js

@@ -0,0 +1,131 @@
+const path = require("node:path");
+const fs = require("node:fs");
+const Ajv = require("ajv");
+const colors = require("ansis");
+const globals = require("globals");
+const { Linter } = require("eslint");
+
+const rootPath = path.resolve(`${__dirname}/../`);
+const Log = require(`${rootPath}/js/logger.js`);
+const Utils = require(`${rootPath}/js/utils.js`);
+
+const linter = new Linter({ configType: "flat" });
+const ajv = new Ajv();
+
+/**
+ * Returns a string with path of configuration file.
+ * Check if set by environment variable MM_CONFIG_FILE
+ * @returns {string} path and filename of the config file
+ */
+function getConfigFile () {
+	// FIXME: This function should be in core. Do you want refactor me ;) ?, be good!
+	return path.resolve(process.env.MM_CONFIG_FILE || `${rootPath}/config/config.js`);
+}
+
+/**
+ * Checks the config file using eslint.
+ */
+function checkConfigFile () {
+	const configFileName = getConfigFile();
+
+	// Check if file is present
+	if (fs.existsSync(configFileName) === false) {
+		throw new Error(`File not found: ${configFileName}\nNo config file present!`);
+	}
+
+	// Check permission
+	try {
+		fs.accessSync(configFileName, fs.F_OK);
+	} catch (error) {
+		throw new Error(`${error}\nNo permission to access config file!`);
+	}
+
+	// Validate syntax of the configuration file.
+	Log.info(`Checking config file ${configFileName} ...`);
+
+	// I'm not sure if all ever is utf-8
+	const configFile = fs.readFileSync(configFileName, "utf-8");
+
+	const errors = linter.verify(
+		configFile,
+		{
+			languageOptions: {
+				ecmaVersion: "latest",
+				globals: {
+					...globals.node
+				}
+			}
+		},
+		configFileName
+	);
+
+	if (errors.length === 0) {
+		Log.info(colors.green("Your configuration file doesn't contain syntax errors :)"));
+		validateModulePositions(configFileName);
+	} else {
+		let errorMessage = "Your configuration file contains syntax errors :(";
+
+		for (const error of errors) {
+			errorMessage += `\nLine ${error.line} column ${error.column}: ${error.message}`;
+		}
+		throw new Error(errorMessage);
+	}
+}
+
+function validateModulePositions (configFileName) {
+	Log.info("Checking modules structure configuration ...");
+
+	const positionList = Utils.getModulePositions();
+
+	// Make Ajv schema configuration of modules config
+	// Only scan "module" and "position"
+	const schema = {
+		type: "object",
+		properties: {
+			modules: {
+				type: "array",
+				items: {
+					type: "object",
+					properties: {
+						module: {
+							type: "string"
+						},
+						position: {
+							type: "string",
+							enum: positionList
+						}
+					},
+					required: ["module"]
+				}
+			}
+		}
+	};
+
+	// Scan all modules
+	const validate = ajv.compile(schema);
+	const data = require(configFileName);
+
+	const valid = validate(data);
+	if (valid) {
+		Log.info(colors.green("Your modules structure configuration doesn't contain errors :)"));
+	} else {
+		const module = validate.errors[0].instancePath.split("/")[2];
+		const position = validate.errors[0].instancePath.split("/")[3];
+		let errorMessage = "This module configuration contains errors:";
+		errorMessage += `\n${JSON.stringify(data.modules[module], null, 2)}`;
+		if (position) {
+			errorMessage += `\n${position}: ${validate.errors[0].message}`;
+			errorMessage += `\n${JSON.stringify(validate.errors[0].params.allowedValues, null, 2).slice(1, -1)}`;
+		} else {
+			errorMessage += validate.errors[0].message;
+		}
+		Log.error(errorMessage);
+	}
+}
+
+try {
+	checkConfigFile();
+} catch (error) {
+	Log.error(error.message);
+	process.exit(1);
+}

js/class.js

@@ -1,56 +1,73 @@
-/* Simple JavaScript Inheritance
- * By John Resig http://ejohn.org/
+/* global Class, xyz */
+
+/*
+ * Simple JavaScript Inheritance
+ * By John Resig https://johnresig.com/
+ *
+ * Inspired by base2 and Prototype
+ *
  * MIT Licensed.
  */
-
-// Inspired by base2 and Prototype
 (function () {
-	var initializing = false;
-	var fnTest = /xyz/.test(function () { xyz; }) ? /\b_super\b/ : /.*/;
+	let initializing = false;
+	const fnTest = (/xyz/).test(function () {
+		xyz;
+	})
+		? /\b_super\b/
+		: /.*/;
 
 	// The base Class implementation (does nothing)
-	this.Class = function () { };
+	this.Class = function () {};
 
 	// Create a new Class that inherits from this class
 	Class.extend = function (prop) {
-		var _super = this.prototype;
+		let _super = this.prototype;
 
-		// Instantiate a base class (but only create the instance,
-		// don't run the init constructor)
+		/*
+		 * Instantiate a base class (but only create the instance,
+		 * don't run the init constructor)
+		 */
 		initializing = true;
-		var prototype = new this();
+		const prototype = new this();
 		initializing = false;
 
-		// Make a copy of all prototype properies, to prevent reference issues.
-		for (var name in prototype) {
-			prototype[name] = cloneObject(prototype[name]);
+		// Make a copy of all prototype properties, to prevent reference issues.
+		for (const p in prototype) {
+			prototype[p] = cloneObject(prototype[p]);
 		}
 
 		// Copy the properties over onto the new prototype
-		for (var name in prop) {
+		for (const name in prop) {
 			// Check if we're overwriting an existing function
-			prototype[name] = typeof prop[name] == "function" &&
-				typeof _super[name] == "function" && fnTest.test(prop[name]) ? (function (name, fn) {
-					return function () {
-						var tmp = this._super;
+			prototype[name]
+				= typeof prop[name] === "function" && typeof _super[name] === "function" && fnTest.test(prop[name])
+					? (function (name, fn) {
+						return function () {
+							const tmp = this._super;
 
-						// Add a new ._super() method that is the same method
-						// but on the super-class
-						this._super = _super[name];
+							/*
+							 * Add a new ._super() method that is the same method
+							 * but on the super-class
+							 */
+							this._super = _super[name];
 
-						// The method only need to be bound temporarily, so we
-						// remove it when we're done executing
-						var ret = fn.apply(this, arguments);
-						this._super = tmp;
+							/*
+							 * The method only need to be bound temporarily, so we
+							 * remove it when we're done executing
+							 */
+							const ret = fn.apply(this, arguments);
+							this._super = tmp;
 
-
-						return ret;
-					};
-				})(name, prop[name]) : prop[name];
+							return ret;
+						};
+					}(name, prop[name]))
+					: prop[name];
 		}
 
-		// The dummy class constructor
-		function Class() {
+		/**
+		 * The dummy class constructor
+		 */
+		function Class () {
 			// All construction is actually done in the init method
 			if (!initializing && this.init) {
 				this.init.apply(this, arguments);
@@ -68,17 +85,24 @@
 
 		return Class;
 	};
-})();
+}());
 
-//Define the clone method for later use.
-//Helper Method
-function cloneObject(obj) {
+/**
+ * Define the clone method for later use. Helper Method.
+ * @param {object} obj Object to be cloned
+ * @returns {object} the cloned object
+ */
+function cloneObject (obj) {
 	if (obj === null || typeof obj !== "object") {
 		return obj;
 	}
 
-	var temp = obj.constructor(); // give temp the original obj's constructor
-	for (var key in obj) {
+	if (obj.constructor.name === "RegExp") {
+		return new RegExp(obj);
+	}
+
+	const temp = obj.constructor(); // give temp the original obj's constructor
+	for (const key in obj) {
 		temp[key] = cloneObject(obj[key]);
 
 		if (key === "lockStrings") {
@@ -92,7 +116,4 @@ function cloneObject(obj) {
 /*************** DO NOT EDIT THE LINE BELOW ***************/
 if (typeof module !== "undefined") {
 	module.exports = Class;
-	module.exports._test = {
-		cloneObject: cloneObject
-	}
 }

js/defaults.js

@@ -1,29 +1,33 @@
-/* exported defaults */
+/* global mmPort */
 
-/* Magic Mirror
- * Config Defauls
- *
- * By Michael Teeuw http://michaelteeuw.nl
- * MIT Licensed.
- */
-
-var port = 8080;
-var address = "localhost";
-if (typeof(mmPort) !== "undefined") {
+const address = "localhost";
+let port = 8080;
+if (typeof mmPort !== "undefined") {
 	port = mmPort;
 }
-var defaults = {
+const defaults = {
 	address: address,
 	port: port,
+	basePath: "/",
 	kioskmode: false,
 	electronOptions: {},
 	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"],
 
 	language: "en",
+	logLevel: ["INFO", "LOG", "WARN", "ERROR"],
 	timeFormat: 24,
 	units: "metric",
 	zoom: 1,
 	customCss: "css/custom.css",
+	foreignModulesDir: "modules",
+	// httpHeaders used by helmet, see https://helmetjs.github.io/. You can add other/more object values by overriding this in config.js,
+	// e.g. you need to add `frameguard: false` for embedding MagicMirror in another website, see https://github.com/MagicMirrorOrg/MagicMirror/issues/2847
+	httpHeaders: { contentSecurityPolicy: false, crossOriginOpenerPolicy: false, crossOriginEmbedderPolicy: false, crossOriginResourcePolicy: false, originAgentCluster: false },
+
+	// properties for checking if server is alive and has same startup-timestamp, the check is per default enabled
+	// (interval 30 seconds). If startup-timestamp has changed the client reloads the magicmirror webpage.
+	checkServerInterval: 30 * 1000,
+	reloadAfterServerRestart: false,
 
 	modules: [
 		{
@@ -35,14 +39,14 @@ var defaults = {
 			position: "upper_third",
 			classes: "large thin",
 			config: {
-				text: "Magic Mirror<sup>2</sup>"
+				text: "MagicMirror²"
 			}
 		},
 		{
 			module: "helloworld",
 			position: "middle_center",
 			config: {
-				text: "Please create a config file."
+				text: "Please create a config file or check the existing one for errors."
 			}
 		},
 		{
@@ -58,7 +62,7 @@ var defaults = {
 			position: "middle_center",
 			classes: "xsmall",
 			config: {
-				text: "If you get this message while your config file is already<br>created, your config file probably contains an error.<br>Use a JavaScript linter to validate your file."
+				text: "If you get this message while your config file is already created,<br>" + "it probably contains an error. To validate your config file run in your MagicMirror² directory<br>" + "<pre>npm run config:check</pre>"
 			}
 		},
 		{
@@ -66,16 +70,13 @@ var defaults = {
 			position: "bottom_bar",
 			classes: "xsmall dimmed",
 			config: {
-				text: "www.michaelteeuw.nl"
+				text: "https://magicmirror.builders/"
 			}
-		},
-	],
-
-	paths: {
-		modules: "modules",
-		vendor: "vendor"
-	},
+		}
+	]
 };
 
 /*************** DO NOT EDIT THE LINE BELOW ***************/
-if (typeof module !== "undefined") {module.exports = defaults;}
+if (typeof module !== "undefined") {
+	module.exports = defaults;
+}

js/deprecated.js

@@ -1,14 +1,4 @@
-/* Magic Mirror Deprecated Config Options List
- *
- * By Michael Teeuw http://michaelteeuw.nl
- * MIT Licensed.
- *
- * Olex S. original idea this deprecated option
- */
-
-var deprecated = {
+module.exports = {
 	configs: ["kioskmode"],
+	clock: ["secondsColor"]
 };
-
-/*************** DO NOT EDIT THE LINE BELOW ***************/
-if (typeof module !== "undefined") {module.exports = deprecated;}

js/electron.js

@@ -1,105 +1,235 @@
-/* jshint esversion: 6 */
-
 "use strict";
 
 const electron = require("electron");
-const core = require(__dirname + "/app.js");
+const core = require("./app");
+const Log = require("./logger");
 
 // Config
-var config = process.env.config ? JSON.parse(process.env.config) : {};
+let config = process.env.config ? JSON.parse(process.env.config) : {};
 // Module to control application life.
 const app = electron.app;
+
+/*
+ * Per default electron is started with --disable-gpu flag, if you want the gpu enabled,
+ * you must set the env var ELECTRON_ENABLE_GPU=1 on startup.
+ * See https://www.electronjs.org/docs/latest/tutorial/offscreen-rendering for more info.
+ */
+if (process.env.ELECTRON_ENABLE_GPU !== "1") {
+	app.disableHardwareAcceleration();
+}
+
 // Module to create native browser window.
 const BrowserWindow = electron.BrowserWindow;
 
-// Keep a global reference of the window object, if you don't, the window will
-// be closed automatically when the JavaScript object is garbage collected.
+/*
+ * Keep a global reference of the window object, if you don't, the window will
+ * be closed automatically when the JavaScript object is garbage collected.
+ */
 let mainWindow;
 
-function createWindow() {
-	var electronOptionsDefaults = {
-		width: 800,
-		height: 600,
+/**
+ *
+ */
+function createWindow () {
+
+	/*
+	 * see https://www.electronjs.org/docs/latest/api/screen
+	 * Create a window that fills the screen's available work area.
+	 */
+	let electronSize = (800, 600);
+	try {
+		electronSize = electron.screen.getPrimaryDisplay().workAreaSize;
+	} catch {
+		Log.warn("Could not get display size, using defaults ...");
+	}
+
+	let electronSwitchesDefaults = ["autoplay-policy", "no-user-gesture-required"];
+	app.commandLine.appendSwitch(...new Set(electronSwitchesDefaults, config.electronSwitches));
+	let electronOptionsDefaults = {
+		width: electronSize.width,
+		height: electronSize.height,
+		icon: "mm2.png",
 		x: 0,
 		y: 0,
 		darkTheme: true,
 		webPreferences: {
+			contextIsolation: true,
 			nodeIntegration: false,
 			zoomFactor: config.zoom
 		},
 		backgroundColor: "#000000"
 	};
 
-	// DEPRECATED: "kioskmode" backwards compatibility, to be removed
-	// settings these options directly instead provides cleaner interface
+	/*
+	 * DEPRECATED: "kioskmode" backwards compatibility, to be removed
+	 * settings these options directly instead provides cleaner interface
+	 */
 	if (config.kioskmode) {
 		electronOptionsDefaults.kiosk = true;
 	} else {
+		electronOptionsDefaults.show = false;
+		electronOptionsDefaults.frame = false;
+		electronOptionsDefaults.transparent = true;
+		electronOptionsDefaults.hasShadow = false;
 		electronOptionsDefaults.fullscreen = true;
-		electronOptionsDefaults.autoHideMenuBar = true;
 	}
 
-	var electronOptions = Object.assign({}, electronOptionsDefaults, config.electronOptions);
+	const electronOptions = Object.assign({}, electronOptionsDefaults, config.electronOptions);
+
+	if (process.env.JEST_WORKER_ID !== undefined && process.env.MOCK_DATE !== undefined) {
+		// if we are running with jest and we want to mock the current date
+		const fakeNow = new Date(process.env.MOCK_DATE).valueOf();
+		Date = class extends Date {
+			constructor (...args) {
+				if (args.length === 0) {
+					super(fakeNow);
+				} else {
+					super(...args);
+				}
+			}
+		};
+		const __DateNowOffset = fakeNow - Date.now();
+		const __DateNow = Date.now;
+		Date.now = () => __DateNow() + __DateNowOffset;
+	}
 
 	// Create the browser window.
 	mainWindow = new BrowserWindow(electronOptions);
 
-	// and load the index.html of the app.
-	// If config.address is not defined or is an empty string (listening on all interfaces), connect to localhost
-	var address = (config.address === void 0) | (config.address === "") ? (config.address = "localhost") : config.address;
-	mainWindow.loadURL(`http://${address}:${config.port}`);
+	/*
+	 * and load the index.html of the app.
+	 * If config.address is not defined or is an empty string (listening on all interfaces), connect to localhost
+	 */
+
+	let prefix;
+	if ((config.tls !== null && config.tls) || config.useHttps) {
+		prefix = "https://";
+	} else {
+		prefix = "http://";
+	}
+
+	let address = (config.address === void 0) | (config.address === "") | (config.address === "0.0.0.0") ? (config.address = "localhost") : config.address;
+	const port = process.env.MM_PORT || config.port;
+	mainWindow.loadURL(`${prefix}${address}:${port}`);
 
 	// Open the DevTools if run with "npm start dev"
 	if (process.argv.includes("dev")) {
+		if (process.env.JEST_WORKER_ID !== undefined) {
+			// if we are running with jest
+			const devtools = new BrowserWindow(electronOptions);
+			mainWindow.webContents.setDevToolsWebContents(devtools.webContents);
+		}
 		mainWindow.webContents.openDevTools();
 	}
 
+	// simulate mouse move to hide black cursor on start
+	mainWindow.webContents.on("dom-ready", (event) => {
+		mainWindow.webContents.sendInputEvent({ type: "mouseMove", x: 0, y: 0 });
+	});
+
 	// Set responders for window events.
-	mainWindow.on("closed", function() {
+	mainWindow.on("closed", function () {
 		mainWindow = null;
 	});
 
 	if (config.kioskmode) {
-		mainWindow.on("blur", function() {
+		mainWindow.on("blur", function () {
 			mainWindow.focus();
 		});
 
-		mainWindow.on("leave-full-screen", function() {
+		mainWindow.on("leave-full-screen", function () {
 			mainWindow.setFullScreen(true);
 		});
 
-		mainWindow.on("resize", function() {
-			setTimeout(function() {
+		mainWindow.on("resize", function () {
+			setTimeout(function () {
 				mainWindow.reload();
 			}, 1000);
 		});
 	}
+
+	//remove response headers that prevent sites of being embedded into iframes if configured
+	mainWindow.webContents.session.webRequest.onHeadersReceived((details, callback) => {
+		let curHeaders = details.responseHeaders;
+		if (config.ignoreXOriginHeader || false) {
+			curHeaders = Object.fromEntries(Object.entries(curHeaders).filter((header) => !(/x-frame-options/i).test(header[0])));
+		}
+
+		if (config.ignoreContentSecurityPolicy || false) {
+			curHeaders = Object.fromEntries(Object.entries(curHeaders).filter((header) => !(/content-security-policy/i).test(header[0])));
+		}
+
+		callback({ responseHeaders: curHeaders });
+	});
+
+	mainWindow.once("ready-to-show", () => {
+		mainWindow.show();
+	});
 }
 
-// This method will be called when Electron has finished
-// initialization and is ready to create browser windows.
-app.on("ready", function() {
-	console.log("Launching application.");
-	createWindow();
-});
-
 // Quit when all windows are closed.
-app.on("window-all-closed", function() {
-	createWindow();
+app.on("window-all-closed", function () {
+	if (process.env.JEST_WORKER_ID !== undefined) {
+		// if we are running with jest
+		app.quit();
+	} else {
+		createWindow();
+	}
 });
 
-app.on("activate", function() {
-	// On OS X it's common to re-create a window in the app when the
-	// dock icon is clicked and there are no other windows open.
+app.on("activate", function () {
+
+	/*
+	 * On OS X it's common to re-create a window in the app when the
+	 * dock icon is clicked and there are no other windows open.
+	 */
 	if (mainWindow === null) {
 		createWindow();
 	}
 });
 
-// Start the core application if server is run on localhost
-// This starts all node helpers and starts the webserver.
-if (["localhost", "127.0.0.1", "::1", "::ffff:127.0.0.1", undefined].indexOf(config.address) > -1) {
-	core.start(function(c) {
-		config = c;
+/*
+ * This method will be called when SIGINT is received and will call
+ * each node_helper's stop function if it exists. Added to fix #1056
+ *
+ * Note: this is only used if running Electron. Otherwise
+ * core.stop() is called by process.on("SIGINT"... in `app.js`
+ */
+app.on("before-quit", async (event) => {
+	Log.log("Shutting down server...");
+	event.preventDefault();
+	setTimeout(() => {
+		process.exit(0);
+	}, 3000); // Force-quit after 3 seconds.
+	await core.stop();
+	process.exit(0);
+});
+
+/**
+ * Handle errors from self-signed certificates
+ */
+app.on("certificate-error", (event, webContents, url, error, certificate, callback) => {
+	event.preventDefault();
+	callback(true);
+});
+
+if (process.env.clientonly) {
+	app.whenReady().then(() => {
+		Log.log("Launching client viewer application.");
+		createWindow();
+	});
+}
+
+/*
+ * Start the core application if server is run on localhost
+ * This starts all node helpers and starts the webserver.
+ */
+if (["localhost", "127.0.0.1", "::1", "::ffff:127.0.0.1", undefined].includes(config.address)) {
+	core.start().then((c) => {
+		config = c;
+		app.whenReady().then(() => {
+			Log.log("Launching application.");
+			createWindow();
+		});
 	});
 }

js/loader.js

@@ -1,241 +1,257 @@
-/* global config, vendor, MM, Log, Module */
-/* Magic Mirror
- * Module and File loaders.
- *
- * By Michael Teeuw http://michaelteeuw.nl
- * MIT Licensed.
- */
+/* global defaultModules, vendor */
 
-var Loader = (function() {
+const Loader = (function () {
 
-	/* Create helper valiables */
+	/* Create helper variables */
 
-	var loadedModuleFiles = [];
-	var loadedFiles = [];
-	var moduleObjects = [];
+	const loadedModuleFiles = [];
+	const loadedFiles = [];
+	const moduleObjects = [];
 
 	/* Private Methods */
 
-	/* loadModules()
-	 * Loops thru all modules and requests load for every module.
+	/**
+	 * Retrieve object of env variables.
+	 * @returns {object} with key: values as assembled in js/server_functions.js
 	 */
-	var loadModules = function() {
-
-		var moduleData = getModuleData();
-
-		var loadNextModule = function() {
-			if (moduleData.length > 0) {
-				var nextModule = moduleData[0];
-				loadModule(nextModule, function() {
-					moduleData = moduleData.slice(1);
-					loadNextModule();
-				});
-			} else {
-				// All modules loaded. Load custom.css
-				// This is done after all the modules so we can
-				// overwrite all the defined styles.
-
-				loadFile(config.customCss, function() {
-					// custom.css loaded. Start all modules.
-					startModules();
-				});
-
-			}
-		};
-
-		loadNextModule();
+	const getEnvVars = async function () {
+		const res = await fetch(`${location.protocol}//${location.host}${config.basePath}env`);
+		return JSON.parse(await res.text());
 	};
 
-	/* startModules()
-	 * Loops thru all modules and requests start for every module.
+	/**
+	 * Loops through all modules and requests start for every module.
 	 */
-	var startModules = function() {
-		for (var m in moduleObjects) {
-			var module = moduleObjects[m];
-			module.start();
+	const startModules = async function () {
+		const modulePromises = [];
+		for (const module of moduleObjects) {
+			try {
+				modulePromises.push(module.start());
+			} catch (error) {
+				Log.error(`Error when starting node_helper for module ${module.name}:`);
+				Log.error(error);
+			}
 		}
 
-		// Notifiy core of loded modules.
+		const results = await Promise.allSettled(modulePromises);
+
+		// Log errors that happened during async node_helper startup
+		results.forEach((result) => {
+			if (result.status === "rejected") {
+				Log.error(result.reason);
+			}
+		});
+
+		// Notify core of loaded modules.
 		MM.modulesStarted(moduleObjects);
+
+		// Starting modules also hides any modules that have requested to be initially hidden
+		for (const thisModule of moduleObjects) {
+			if (thisModule.data.hiddenOnStartup) {
+				Log.info(`Initially hiding ${thisModule.name}`);
+				thisModule.hide();
+			}
+		}
 	};
 
-	/* getAllModules()
+	/**
 	 * Retrieve list of all modules.
-	 *
-	 * return array - module data as configured in config
+	 * @returns {object[]} module data as configured in config
 	 */
-	var getAllModules = function() {
-		return config.modules;
+	const getAllModules = function () {
+		const AllModules = config.modules.filter((module) => (module.module !== undefined) && (MM.getAvailableModulePositions.indexOf(module.position) > -1 || typeof (module.position) === "undefined"));
+		return AllModules;
 	};
 
-	/* getModuleData()
+	/**
 	 * Generate array with module information including module paths.
-	 *
-	 * return array - Module information.
+	 * @returns {object[]} Module information.
 	 */
-	var getModuleData = function() {
-		var modules = getAllModules();
-		var moduleFiles = [];
+	const getModuleData = async function () {
+		const modules = getAllModules();
+		const moduleFiles = [];
+		const envVars = await getEnvVars();
 
-		for (var m in modules) {
-			var moduleData = modules[m];
-			var module = moduleData.module;
+		modules.forEach(function (moduleData, index) {
+			const module = moduleData.module;
 
-			var elements = module.split("/");
-			var moduleName = elements[elements.length - 1];
-			var moduleFolder =  config.paths.modules + "/" + module;
+			const elements = module.split("/");
+			const moduleName = elements[elements.length - 1];
+			let moduleFolder = `${envVars.modulesDir}/${module}`;
 
 			if (defaultModules.indexOf(moduleName) !== -1) {
-				moduleFolder =  config.paths.modules + "/default/" + module;
+				const defaultModuleFolder = `modules/default/${module}`;
+				if (window.name !== "jsdom") {
+					moduleFolder = defaultModuleFolder;
+				} else {
+					// running in Jest, allow defaultModules placed under moduleDir for testing
+					if (envVars.modulesDir === "modules") {
+						moduleFolder = defaultModuleFolder;
+					}
+				}
 			}
 
 			if (moduleData.disabled === true) {
-				continue;
+				return;
 			}
 
 			moduleFiles.push({
-				index: m,
-				identifier: "module_" + m + "_" + module,
+				index: index,
+				identifier: `module_${index}_${module}`,
 				name: moduleName,
-				path: moduleFolder + "/" ,
-				file: moduleName + ".js",
+				path: `${moduleFolder}/`,
+				file: `${moduleName}.js`,
 				position: moduleData.position,
+				animateIn: moduleData.animateIn,
+				animateOut: moduleData.animateOut,
+				hiddenOnStartup: moduleData.hiddenOnStartup,
 				header: moduleData.header,
+				configDeepMerge: typeof moduleData.configDeepMerge === "boolean" ? moduleData.configDeepMerge : false,
 				config: moduleData.config,
-				classes: (typeof moduleData.classes !== "undefined") ? moduleData.classes + " " + module : module
+				classes: typeof moduleData.classes !== "undefined" ? `${moduleData.classes} ${module}` : module
 			});
-
-		}
+		});
 
 		return moduleFiles;
 	};
 
-	/* loadModule(module)
+	/**
 	 * Load modules via ajax request and create module objects.
-	 *
-	 * argument callback function - Function called when done.
-	 * argument module object - Information about the module we want to load.
+	 * @param {object} module Information about the module we want to load.
+	 * @returns {Promise<void>} resolved when module is loaded
 	 */
-	var loadModule = function(module, callback) {
-		var url = module.path + "/" + module.file;
+	const loadModule = async function (module) {
+		const url = module.path + module.file;
 
-		var afterLoad = function() {
-			var moduleObject = Module.create(module.name);
+		/**
+		 * @returns {Promise<void>}
+		 */
+		const afterLoad = async function () {
+			const moduleObject = Module.create(module.name);
 			if (moduleObject) {
-				bootstrapModule(module, moduleObject, function() {
-					callback();
-				});
-			} else {
-				callback();
+				await bootstrapModule(module, moduleObject);
 			}
 		};
 
 		if (loadedModuleFiles.indexOf(url) !== -1) {
-			afterLoad();
+			await afterLoad();
 		} else {
-			loadFile(url, function() {
-				loadedModuleFiles.push(url);
-				afterLoad();
-			});
+			await loadFile(url);
+			loadedModuleFiles.push(url);
+			await afterLoad();
 		}
-
 	};
 
-	/* bootstrapModule(module, mObj)
+	/**
 	 * Bootstrap modules by setting the module data and loading the scripts & styles.
-	 *
-	 * argument module object - Information about the module we want to load.
-	 * argument mObj object - Modules instance.
-	 * argument callback function - Function called when done.
+	 * @param {object} module Information about the module we want to load.
+	 * @param {Module} mObj Modules instance.
 	 */
-	var bootstrapModule = function(module, mObj, callback) {
-		Log.info("Bootstrapping module: " + module.name);
-
+	const bootstrapModule = async function (module, mObj) {
+		Log.info(`Bootstrapping module: ${module.name}`);
 		mObj.setData(module);
 
-		mObj.loadScripts(function() {
-			Log.log("Scripts loaded for: " + module.name);
-			mObj.loadStyles(function() {
-				Log.log("Styles loaded for: " + module.name);
-				mObj.loadTranslations(function() {
-					Log.log("Translations loaded for: " + module.name);
-					moduleObjects.push(mObj);
-					callback();
-				});
-			});
-		});
+		await mObj.loadScripts();
+		Log.log(`Scripts loaded for: ${module.name}`);
 
+		await mObj.loadStyles();
+		Log.log(`Styles loaded for: ${module.name}`);
+
+		await mObj.loadTranslations();
+		Log.log(`Translations loaded for: ${module.name}`);
+
+		moduleObjects.push(mObj);
 	};
 
-	/* loadFile(fileName)
+	/**
 	 * Load a script or stylesheet by adding it to the dom.
-	 *
-	 * argument fileName string - Path of the file we want to load.
-	 * argument callback function - Function called when done.
+	 * @param {string} fileName Path of the file we want to load.
+	 * @returns {Promise} resolved when the file is loaded
 	 */
-	var loadFile = function(fileName, callback) {
-
-		var extension =  fileName.slice((Math.max(0, fileName.lastIndexOf(".")) || Infinity) + 1);
+	const loadFile = async function (fileName) {
+		const extension = fileName.slice((Math.max(0, fileName.lastIndexOf(".")) || Infinity) + 1);
+		let script, stylesheet;
 
 		switch (extension.toLowerCase()) {
-		case "js":
-			Log.log("Load script: " + fileName);
-			var script = document.createElement("script");
-			script.type = "text/javascript";
-			script.src = fileName;
-			script.onload = function() {
-				if (typeof callback === "function") {callback();}
-			};
-			script.onerror = function() {
-				console.error("Error on loading script:", fileName);
-				if (typeof callback === "function") {callback();}
-			};
+			case "js":
+				return new Promise((resolve) => {
+					Log.log(`Load script: ${fileName}`);
+					script = document.createElement("script");
+					script.type = "text/javascript";
+					script.src = fileName;
+					script.onload = function () {
+						resolve();
+					};
+					script.onerror = function () {
+						Log.error("Error on loading script:", fileName);
+						script.remove();
+						resolve();
+					};
+					document.getElementsByTagName("body")[0].appendChild(script);
+				});
+			case "css":
+				return new Promise((resolve) => {
+					Log.log(`Load stylesheet: ${fileName}`);
 
-			document.getElementsByTagName("body")[0].appendChild(script);
-			break;
-		case "css":
-			Log.log("Load stylesheet: " + fileName);
-			var stylesheet = document.createElement("link");
-			stylesheet.rel = "stylesheet";
-			stylesheet.type = "text/css";
-			stylesheet.href = fileName;
-			stylesheet.onload = function() {
-				if (typeof callback === "function") {callback();}
-			};
-			stylesheet.onerror = function() {
-				console.error("Error on loading stylesheet:", fileName);
-				if (typeof callback === "function") {callback();}
-			};
-
-			document.getElementsByTagName("head")[0].appendChild(stylesheet);
-			break;
+					stylesheet = document.createElement("link");
+					stylesheet.rel = "stylesheet";
+					stylesheet.type = "text/css";
+					stylesheet.href = fileName;
+					stylesheet.onload = function () {
+						resolve();
+					};
+					stylesheet.onerror = function () {
+						Log.error("Error on loading stylesheet:", fileName);
+						stylesheet.remove();
+						resolve();
+					};
+					document.getElementsByTagName("head")[0].appendChild(stylesheet);
+				});
 		}
-
 	};
 
 	/* Public Methods */
 	return {
 
-		/* loadModules()
+		/**
 		 * Load all modules as defined in the config.
 		 */
-		loadModules: function() {
-			loadModules();
+		async loadModules () {
+			let moduleData = await getModuleData();
+			const envVars = await getEnvVars();
+			const customCss = envVars.customCss;
+
+			/**
+			 * @returns {Promise<void>} when all modules are loaded
+			 */
+			const loadNextModule = async function () {
+				if (moduleData.length > 0) {
+					const nextModule = moduleData[0];
+					await loadModule(nextModule);
+					moduleData = moduleData.slice(1);
+					await loadNextModule();
+				} else {
+					// All modules loaded. Load custom.css
+					// This is done after all the modules so we can
+					// overwrite all the defined styles.
+					await loadFile(customCss);
+					// custom.css loaded. Start all modules.
+					await startModules();
+				}
+			};
+			await loadNextModule();
 		},
 
-		/* loadFile()
+		/**
 		 * Load a file (script or stylesheet).
 		 * Prevent double loading and search for files in the vendor folder.
-		 *
-		 * argument fileName string - Path of the file we want to load.
-		 * argument module Module Object - the module that calls the loadFile function.
-		 * argument callback function - Function called when done.
+		 * @param {string} fileName Path of the file we want to load.
+		 * @param {Module} module The module that calls the loadFile function.
+		 * @returns {Promise} resolved when the file is loaded
 		 */
-		loadFile: function(fileName, module, callback) {
-
+		async loadFileForModule (fileName, module) {
 			if (loadedFiles.indexOf(fileName.toLowerCase()) !== -1) {
-				Log.log("File already loaded: " + fileName);
-				callback();
+				Log.log(`File already loaded: ${fileName}`);
 				return;
 			}
 
@@ -243,23 +259,20 @@ var Loader = (function() {
 				// This is an absolute or relative path.
 				// Load it and then return.
 				loadedFiles.push(fileName.toLowerCase());
-				loadFile(fileName, callback);
-				return;
+				return loadFile(fileName);
 			}
 
 			if (vendor[fileName] !== undefined) {
 				// This file is available in the vendor folder.
 				// Load it from this vendor folder.
 				loadedFiles.push(fileName.toLowerCase());
-				loadFile(config.paths.vendor + "/" + vendor[fileName], callback);
-				return;
+				return loadFile(`vendor/${vendor[fileName]}`);
 			}
 
 			// File not loaded yet.
 			// Load it based on the module path.
 			loadedFiles.push(fileName.toLowerCase());
-			loadFile(module.file(fileName), callback);
+			return loadFile(module.file(fileName));
 		}
 	};
-
-})();
+}());

js/logger.js

@@ -1,27 +1,100 @@
-/* global console */
-/* exported Log */
-
-/* Magic Mirror
- * Logger
- *
- * By Michael Teeuw http://michaelteeuw.nl
- * MIT Licensed.
- */
-
 // This logger is very simple, but needs to be extended.
-// This system can eventually be used to push the log messages to an external target.
+(function (root, factory) {
+	if (typeof exports === "object") {
+		if (process.env.JEST_WORKER_ID === undefined) {
+			const colors = require("ansis");
 
-var Log = (function() {
-	return {
-		info: Function.prototype.bind.call(console.info, console),
-		log:  Function.prototype.bind.call(console.log, console),
-		error: Function.prototype.bind.call(console.error, console),
-		warn: Function.prototype.bind.call(console.warn, console),
-		group: Function.prototype.bind.call(console.group, console),
-		groupCollapsed: Function.prototype.bind.call(console.groupCollapsed, console),
-		groupEnd: Function.prototype.bind.call(console.groupEnd, console),
-		time: Function.prototype.bind.call(console.time, console),
-		timeEnd: Function.prototype.bind.call(console.timeEnd, console),
-		timeStamp: Function.prototype.bind.call(console.timeStamp, console)
-	};
-})();
+			// add timestamps in front of log messages
+			require("console-stamp")(console, {
+				format: ":date(yyyy-mm-dd HH:MM:ss.l) :label(7) :msg",
+				tokens: {
+					label: (arg) => {
+						const { method, defaultTokens } = arg;
+						let label = defaultTokens.label(arg);
+						if (method === "error") {
+							label = colors.red(label);
+						} else if (method === "warn") {
+							label = colors.yellow(label);
+						} else if (method === "debug") {
+							label = colors.bgBlue(label);
+						} else if (method === "info") {
+							label = colors.blue(label);
+						}
+						return label;
+					},
+					msg: (arg) => {
+						const { method, defaultTokens } = arg;
+						let msg = defaultTokens.msg(arg);
+						if (method === "error") {
+							msg = colors.red(msg);
+						} else if (method === "warn") {
+							msg = colors.yellow(msg);
+						} else if (method === "info") {
+							msg = colors.blue(msg);
+						}
+						return msg;
+					}
+				}
+			});
+		}
+		// Node, CommonJS-like
+		module.exports = factory(root.config);
+	} else {
+		// Browser globals (root is window)
+		root.Log = factory(root.config);
+	}
+}(this, function (config) {
+	let logLevel;
+	let enableLog;
+	if (typeof exports === "object") {
+		// in nodejs and not running with jest
+		enableLog = process.env.JEST_WORKER_ID === undefined;
+	} else {
+		// in browser and not running with jsdom
+		enableLog = typeof window === "object" && window.name !== "jsdom";
+	}
+
+	if (enableLog) {
+		logLevel = {
+			debug: Function.prototype.bind.call(console.debug, console),
+			log: Function.prototype.bind.call(console.log, console),
+			info: Function.prototype.bind.call(console.info, console),
+			warn: Function.prototype.bind.call(console.warn, console),
+			error: Function.prototype.bind.call(console.error, console),
+			group: Function.prototype.bind.call(console.group, console),
+			groupCollapsed: Function.prototype.bind.call(console.groupCollapsed, console),
+			groupEnd: Function.prototype.bind.call(console.groupEnd, console),
+			time: Function.prototype.bind.call(console.time, console),
+			timeEnd: Function.prototype.bind.call(console.timeEnd, console),
+			timeStamp: Function.prototype.bind.call(console.timeStamp, console)
+		};
+
+		logLevel.setLogLevel = function (newLevel) {
+			if (newLevel) {
+				Object.keys(logLevel).forEach(function (key) {
+					if (!newLevel.includes(key.toLocaleUpperCase())) {
+						logLevel[key] = function () {};
+					}
+				});
+			}
+		};
+	} else {
+		logLevel = {
+			debug () {},
+			log () {},
+			info () {},
+			warn () {},
+			error () {},
+			group () {},
+			groupCollapsed () {},
+			groupEnd () {},
+			time () {},
+			timeEnd () {},
+			timeStamp () {}
+		};
+
+		logLevel.setLogLevel = function () {};
+	}
+
+	return logLevel;
+}));

js/main.js

@@ -1,182 +1,269 @@
-/* global  Log, Loader, Module, config, defaults */
-/* jshint -W020 */
+/* global Loader, defaults, Translator, addAnimateCSS, removeAnimateCSS, AnimateCSSIn, AnimateCSSOut, modulePositions */
 
-/* Magic Mirror
- * Main System
- *
- * By Michael Teeuw http://michaelteeuw.nl
- * MIT Licensed.
- */
-
-var MM = (function() {
-
-	var modules = [];
+const MM = (function () {
+	let modules = [];
 
 	/* Private Methods */
 
-	/* createDomObjects()
-	 * Create dom objects for all modules that
-	 * are configured for a specific position.
+	/**
+	 * Create dom objects for all modules that are configured for a specific position.
 	 */
-	var createDomObjects = function() {
-		for (var m in modules) {
-			var module = modules[m];
+	const createDomObjects = function () {
+		const domCreationPromises = [];
 
-			if (typeof module.data.position === "string") {
-
-				var wrapper = selectWrapper(module.data.position);
-
-				var dom = document.createElement("div");
-				dom.id = module.identifier;
-				dom.className = module.name;
-
-				if (typeof module.data.classes === "string") {
-					dom.className = "module " + dom.className + " " + module.data.classes;
-				}
-
-				dom.opacity = 0;
-				wrapper.appendChild(dom);
-
-				if (typeof module.data.header !== "undefined" && module.data.header !== "") {
-					var moduleHeader = document.createElement("header");
-					moduleHeader.innerHTML = module.data.header;
-					moduleHeader.className = "module-header";
-					dom.appendChild(moduleHeader);
-				}
-
-				var moduleContent = document.createElement("div");
-				moduleContent.className = "module-content";
-				dom.appendChild(moduleContent);
-
-				updateDom(module, 0);
+		modules.forEach(function (module) {
+			if (typeof module.data.position !== "string") {
+				return;
 			}
-		}
+
+			let haveAnimateIn = null;
+			// check if have valid animateIn in module definition (module.data.animateIn)
+			if (module.data.animateIn && AnimateCSSIn.indexOf(module.data.animateIn) !== -1) haveAnimateIn = module.data.animateIn;
+
+			const wrapper = selectWrapper(module.data.position);
+
+			const dom = document.createElement("div");
+			dom.id = module.identifier;
+			dom.className = module.name;
+
+			if (typeof module.data.classes === "string") {
+				dom.className = `module ${dom.className} ${module.data.classes}`;
+			}
+
+			dom.opacity = 0;
+			wrapper.appendChild(dom);
+
+			const moduleHeader = document.createElement("header");
+			moduleHeader.innerHTML = module.getHeader();
+			moduleHeader.className = "module-header";
+			dom.appendChild(moduleHeader);
+
+			if (typeof module.getHeader() === "undefined" || module.getHeader() !== "") {
+				moduleHeader.style.display = "none;";
+			} else {
+				moduleHeader.style.display = "block;";
+			}
+
+			const moduleContent = document.createElement("div");
+			moduleContent.className = "module-content";
+			dom.appendChild(moduleContent);
+
+			// create the domCreationPromise with AnimateCSS (with animateIn of module definition)
+			// or just display it
+			var domCreationPromise;
+			if (haveAnimateIn) domCreationPromise = updateDom(module, { options: { speed: 1000, animate: { in: haveAnimateIn } } }, true);
+			else domCreationPromise = updateDom(module, 0);
+
+			domCreationPromises.push(domCreationPromise);
+			domCreationPromise
+				.then(function () {
+					sendNotification("MODULE_DOM_CREATED", null, null, module);
+				})
+				.catch(Log.error);
+		});
 
 		updateWrapperStates();
 
-		sendNotification("DOM_OBJECTS_CREATED");
+		Promise.all(domCreationPromises).then(function () {
+			sendNotification("DOM_OBJECTS_CREATED");
+		});
 	};
 
-	/* selectWrapper(position)
+	/**
 	 * Select the wrapper dom object for a specific position.
-	 *
-	 * argument position string - The name of the position.
+	 * @param {string} position The name of the position.
+	 * @returns {HTMLElement | void} the wrapper element
 	 */
-	var selectWrapper = function(position) {
-		var classes = position.replace("_"," ");
-		var parentWrapper = document.getElementsByClassName(classes);
+	const selectWrapper = function (position) {
+		const classes = position.replace("_", " ");
+		const parentWrapper = document.getElementsByClassName(classes);
 		if (parentWrapper.length > 0) {
-			var wrapper = parentWrapper[0].getElementsByClassName("container");
+			const wrapper = parentWrapper[0].getElementsByClassName("container");
 			if (wrapper.length > 0) {
 				return wrapper[0];
 			}
 		}
 	};
 
-	/* sendNotification(notification, payload, sender)
+	/**
 	 * Send a notification to all modules.
-	 *
-	 * argument notification string - The identifier of the notification.
-	 * argument payload mixed - The payload of the notification.
-	 * argument sender Module - The module that sent the notification.
+	 * @param {string} notification The identifier of the notification.
+	 * @param {*} payload The payload of the notification.
+	 * @param {Module} sender The module that sent the notification.
+	 * @param {Module} [sendTo] The (optional) module to send the notification to.
 	 */
-	var sendNotification = function(notification, payload, sender) {
-		for (var m in modules) {
-			var module = modules[m];
-			if (module !== sender) {
+	const sendNotification = function (notification, payload, sender, sendTo) {
+		for (const m in modules) {
+			const module = modules[m];
+			if (module !== sender && (!sendTo || module === sendTo)) {
 				module.notificationReceived(notification, payload, sender);
 			}
 		}
 	};
 
-	/* updateDom(module, speed)
+	/**
 	 * Update the dom for a specific module.
-	 *
-	 * argument module Module - The module that needs an update.
-	 * argument speed Number - The number of microseconds for the animation. (optional)
+	 * @param {Module} module The module that needs an update.
+	 * @param {object|number} [updateOptions] The (optional) number of microseconds for the animation or object with updateOptions (speed/animates)
+	 * @param {boolean} [createAnimatedDom] for displaying only animateIn (used on first start of MagicMirror)
+	 * @returns {Promise} Resolved when the dom is fully updated.
 	 */
-	var updateDom = function(module, speed) {
-		var newContent = module.getDom();
-		var newHeader = module.getHeader();
+	const updateDom = function (module, updateOptions, createAnimatedDom = false) {
+		return new Promise(function (resolve) {
+			let speed = updateOptions;
+			let animateOut = null;
+			let animateIn = null;
+			if (typeof updateOptions === "object") {
+				if (typeof updateOptions.options === "object" && updateOptions.options.speed !== undefined) {
+					speed = updateOptions.options.speed;
+					Log.debug(`updateDom: ${module.identifier} Has speed in object: ${speed}`);
+					if (typeof updateOptions.options.animate === "object") {
+						animateOut = updateOptions.options.animate.out;
+						animateIn = updateOptions.options.animate.in;
+						Log.debug(`updateDom: ${module.identifier} Has animate in object: out->${animateOut}, in->${animateIn}`);
+					}
+				} else {
+					Log.debug(`updateDom: ${module.identifier} Has no speed in object`);
+					speed = 0;
+				}
+			}
 
-		if (!module.hidden) {
+			const newHeader = module.getHeader();
+			let newContentPromise = module.getDom();
+
+			if (!(newContentPromise instanceof Promise)) {
+				// convert to a promise if not already one to avoid if/else's everywhere
+				newContentPromise = Promise.resolve(newContentPromise);
+			}
+
+			newContentPromise
+				.then(function (newContent) {
+					const updatePromise = updateDomWithContent(module, speed, newHeader, newContent, animateOut, animateIn, createAnimatedDom);
+
+					updatePromise.then(resolve).catch(Log.error);
+				})
+				.catch(Log.error);
+		});
+	};
+
+	/**
+	 * Update the dom with the specified content
+	 * @param {Module} module The module that needs an update.
+	 * @param {number} [speed] The (optional) number of microseconds for the animation.
+	 * @param {string} newHeader The new header that is generated.
+	 * @param {HTMLElement} newContent The new content that is generated.
+	 * @param {string} [animateOut] AnimateCss animation name before hidden
+	 * @param {string} [animateIn] AnimateCss animation name on show
+	 * @param {boolean} [createAnimatedDom] for displaying only animateIn (used on first start)
+	 * @returns {Promise} Resolved when the module dom has been updated.
+	 */
+	const updateDomWithContent = function (module, speed, newHeader, newContent, animateOut, animateIn, createAnimatedDom = false) {
+		return new Promise(function (resolve) {
+			if (module.hidden || !speed) {
+				updateModuleContent(module, newHeader, newContent);
+				resolve();
+				return;
+			}
 
 			if (!moduleNeedsUpdate(module, newHeader, newContent)) {
+				resolve();
 				return;
 			}
 
 			if (!speed) {
 				updateModuleContent(module, newHeader, newContent);
+				resolve();
 				return;
 			}
 
-			hideModule(module, speed / 2, function() {
+			if (createAnimatedDom && animateIn !== null) {
+				Log.debug(`${module.identifier} createAnimatedDom (${animateIn})`);
 				updateModuleContent(module, newHeader, newContent);
 				if (!module.hidden) {
-					showModule(module, speed / 2);
+					showModule(module, speed, null, { animate: animateIn });
 				}
-			});
-		} else {
-			updateModuleContent(module, newHeader, newContent);
-		}
+				resolve();
+				return;
+			}
+
+			hideModule(
+				module,
+				speed / 2,
+				function () {
+					updateModuleContent(module, newHeader, newContent);
+					if (!module.hidden) {
+						showModule(module, speed / 2, null, { animate: animateIn });
+					}
+					resolve();
+				},
+				{ animate: animateOut }
+			);
+		});
 	};
 
-	/* moduleNeedsUpdate(module, newContent)
+	/**
 	 * Check if the content has changed.
-	 *
-	 * argument module Module - The module to check.
-	 * argument newContent Domobject - The new content that is generated.
-	 *
-	 * return bool - Does the module need an update?
+	 * @param {Module} module The module to check.
+	 * @param {string} newHeader The new header that is generated.
+	 * @param {HTMLElement} newContent The new content that is generated.
+	 * @returns {boolean} True if the module need an update, false otherwise
 	 */
-	var moduleNeedsUpdate = function(module, newHeader, newContent) {
-		var moduleWrapper = document.getElementById(module.identifier);
-		var contentWrapper = moduleWrapper.getElementsByClassName("module-content");
-		var headerWrapper = moduleWrapper.getElementsByClassName("module-header");
+	const moduleNeedsUpdate = function (module, newHeader, newContent) {
+		const moduleWrapper = document.getElementById(module.identifier);
+		if (moduleWrapper === null) {
+			return false;
+		}
 
-		var headerNeedsUpdate = false;
-		var contentNeedsUpdate = false;
+		const contentWrapper = moduleWrapper.getElementsByClassName("module-content");
+		const headerWrapper = moduleWrapper.getElementsByClassName("module-header");
+
+		let headerNeedsUpdate = false;
+		let contentNeedsUpdate;
 
 		if (headerWrapper.length > 0) {
 			headerNeedsUpdate = newHeader !== headerWrapper[0].innerHTML;
 		}
 
-		var tempContentWrapper = document.createElement("div");
+		const tempContentWrapper = document.createElement("div");
 		tempContentWrapper.appendChild(newContent);
 		contentNeedsUpdate = tempContentWrapper.innerHTML !== contentWrapper[0].innerHTML;
 
 		return headerNeedsUpdate || contentNeedsUpdate;
 	};
 
-	/* moduleNeedsUpdate(module, newContent)
+	/**
 	 * Update the content of a module on screen.
-	 *
-	 * argument module Module - The module to check.
-	 * argument newContent Domobject - The new content that is generated.
+	 * @param {Module} module The module to check.
+	 * @param {string} newHeader The new header that is generated.
+	 * @param {HTMLElement} newContent The new content that is generated.
 	 */
-	var updateModuleContent = function(module, newHeader, newContent) {
-		var moduleWrapper = document.getElementById(module.identifier);
-		var headerWrapper = moduleWrapper.getElementsByClassName("module-header");
-		var contentWrapper = moduleWrapper.getElementsByClassName("module-content");
+	const updateModuleContent = function (module, newHeader, newContent) {
+		const moduleWrapper = document.getElementById(module.identifier);
+		if (moduleWrapper === null) {
+			return;
+		}
+		const headerWrapper = moduleWrapper.getElementsByClassName("module-header");
+		const contentWrapper = moduleWrapper.getElementsByClassName("module-content");
 
 		contentWrapper[0].innerHTML = "";
 		contentWrapper[0].appendChild(newContent);
 
-		if( headerWrapper.length > 0 && newHeader) {
-			headerWrapper[0].innerHTML = newHeader;
+		headerWrapper[0].innerHTML = newHeader;
+		if (headerWrapper.length > 0 && newHeader) {
+			headerWrapper[0].style.display = "block";
+		} else {
+			headerWrapper[0].style.display = "none";
 		}
 	};
 
-	/* hideModule(module, speed, callback)
+	/**
 	 * Hide the module.
-	 *
-	 * argument module Module - The module to hide.
-	 * argument speed Number - The speed of the hide animation.
-	 * argument callback function - Called when the animation is done.
+	 * @param {Module} module The module to hide.
+	 * @param {number} speed The speed of the hide animation.
+	 * @param {Function} callback Called when the animation is done.
+	 * @param {object} [options] Optional settings for the hide method.
 	 */
-	var hideModule = function(module, speed, callback, options) {
-		options = options || {};
-
+	const hideModule = function (module, speed, callback, options = {}) {
 		// set lockString if set in options.
 		if (options.lockString) {
 			// Log.log("Has lockstring: " + options.lockString);
@@ -185,83 +272,177 @@ var MM = (function() {
 			}
 		}
 
-		var moduleWrapper = document.getElementById(module.identifier);
+		const moduleWrapper = document.getElementById(module.identifier);
 		if (moduleWrapper !== null) {
-			moduleWrapper.style.transition = "opacity " + speed / 1000 + "s";
-			moduleWrapper.style.opacity = 0;
-
 			clearTimeout(module.showHideTimer);
-			module.showHideTimer = setTimeout(function() {
-				// To not take up any space, we just make the position absolute.
-				// since it's fade out anyway, we can see it lay above or
-				// below other modules. This works way better than adjusting
-				// the .display property.
-				moduleWrapper.style.position = "fixed";
+			// reset all animations if needed
+			if (module.hasAnimateOut) {
+				removeAnimateCSS(module.identifier, module.hasAnimateOut);
+				Log.debug(`${module.identifier} Force remove animateOut (in hide): ${module.hasAnimateOut}`);
+				module.hasAnimateOut = false;
+			}
+			if (module.hasAnimateIn) {
+				removeAnimateCSS(module.identifier, module.hasAnimateIn);
+				Log.debug(`${module.identifier} Force remove animateIn (in hide): ${module.hasAnimateIn}`);
+				module.hasAnimateIn = false;
+			}
+			// haveAnimateName for verify if we are using AnimateCSS library
+			// we check AnimateCSSOut Array for validate it
+			// and finally return the animate name or `null` (for default MM² animation)
+			let haveAnimateName = null;
+			// check if have valid animateOut in module definition (module.data.animateOut)
+			if (module.data.animateOut && AnimateCSSOut.indexOf(module.data.animateOut) !== -1) haveAnimateName = module.data.animateOut;
+			// can't be override with options.animate
+			else if (options.animate && AnimateCSSOut.indexOf(options.animate) !== -1) haveAnimateName = options.animate;
 
-				updateWrapperStates();
+			if (haveAnimateName) {
+				// with AnimateCSS
+				Log.debug(`${module.identifier} Has animateOut: ${haveAnimateName}`);
+				module.hasAnimateOut = haveAnimateName;
+				addAnimateCSS(module.identifier, haveAnimateName, speed / 1000);
+				module.showHideTimer = setTimeout(function () {
+					removeAnimateCSS(module.identifier, haveAnimateName);
+					Log.debug(`${module.identifier} Remove animateOut: ${module.hasAnimateOut}`);
+					// AnimateCSS is now done
+					moduleWrapper.style.opacity = 0;
+					moduleWrapper.classList.add("hidden");
+					moduleWrapper.style.position = "fixed";
+					module.hasAnimateOut = false;
 
-				if (typeof callback === "function") { callback(); }
-			}, speed);
+					updateWrapperStates();
+					if (typeof callback === "function") {
+						callback();
+					}
+				}, speed);
+			} else {
+				// default MM² Animate
+				moduleWrapper.style.transition = `opacity ${speed / 1000}s`;
+				moduleWrapper.style.opacity = 0;
+				moduleWrapper.classList.add("hidden");
+				module.showHideTimer = setTimeout(function () {
+					// To not take up any space, we just make the position absolute.
+					// since it's fade out anyway, we can see it lay above or
+					// below other modules. This works way better than adjusting
+					// the .display property.
+					moduleWrapper.style.position = "fixed";
+
+					updateWrapperStates();
+
+					if (typeof callback === "function") {
+						callback();
+					}
+				}, speed);
+			}
+		} else {
+			// invoke callback even if no content, issue 1308
+			if (typeof callback === "function") {
+				callback();
+			}
 		}
 	};
 
-	/* showModule(module, speed, callback)
+	/**
 	 * Show the module.
-	 *
-	 * argument module Module - The module to show.
-	 * argument speed Number - The speed of the show animation.
-	 * argument callback function - Called when the animation is done.
+	 * @param {Module} module The module to show.
+	 * @param {number} speed The speed of the show animation.
+	 * @param {Function} callback Called when the animation is done.
+	 * @param {object} [options] Optional settings for the show method.
 	 */
-	var showModule = function(module, speed, callback, options) {
-		options = options || {};
-
+	const showModule = function (module, speed, callback, options = {}) {
 		// remove lockString if set in options.
 		if (options.lockString) {
-			var index = module.lockStrings.indexOf(options.lockString);
-			if ( index !== -1) {
+			const index = module.lockStrings.indexOf(options.lockString);
+			if (index !== -1) {
 				module.lockStrings.splice(index, 1);
 			}
 		}
 
-		// Check if there are no more lockstrings set, or the force option is set.
+		// Check if there are no more lockStrings set, or the force option is set.
 		// Otherwise cancel show action.
 		if (module.lockStrings.length !== 0 && options.force !== true) {
-			Log.log("Will not show " + module.name + ". LockStrings active: " + module.lockStrings.join(","));
+			Log.log(`Will not show ${module.name}. LockStrings active: ${module.lockStrings.join(",")}`);
+			if (typeof options.onError === "function") {
+				options.onError(new Error("LOCK_STRING_ACTIVE"));
+			}
 			return;
 		}
+		// reset all animations if needed
+		if (module.hasAnimateOut) {
+			removeAnimateCSS(module.identifier, module.hasAnimateOut);
+			Log.debug(`${module.identifier} Force remove animateOut (in show): ${module.hasAnimateOut}`);
+			module.hasAnimateOut = false;
+		}
+		if (module.hasAnimateIn) {
+			removeAnimateCSS(module.identifier, module.hasAnimateIn);
+			Log.debug(`${module.identifier} Force remove animateIn (in show): ${module.hasAnimateIn}`);
+			module.hasAnimateIn = false;
+		}
 
 		module.hidden = false;
 
-		// If forced show, clean current lockstrings.
+		// If forced show, clean current lockStrings.
 		if (module.lockStrings.length !== 0 && options.force === true) {
-			Log.log("Force show of module: " + module.name);
+			Log.log(`Force show of module: ${module.name}`);
 			module.lockStrings = [];
 		}
 
-		var moduleWrapper = document.getElementById(module.identifier);
+		const moduleWrapper = document.getElementById(module.identifier);
 		if (moduleWrapper !== null) {
-			moduleWrapper.style.transition = "opacity " + speed / 1000 + "s";
-			// Restore the postition. See hideModule() for more info.
+			clearTimeout(module.showHideTimer);
+
+			// haveAnimateName for verify if we are using AnimateCSS library
+			// we check AnimateCSSIn Array for validate it
+			// and finally return the animate name or `null` (for default MM² animation)
+			let haveAnimateName = null;
+			// check if have valid animateOut in module definition (module.data.animateIn)
+			if (module.data.animateIn && AnimateCSSIn.indexOf(module.data.animateIn) !== -1) haveAnimateName = module.data.animateIn;
+			// can't be override with options.animate
+			else if (options.animate && AnimateCSSIn.indexOf(options.animate) !== -1) haveAnimateName = options.animate;
+
+			if (!haveAnimateName) moduleWrapper.style.transition = `opacity ${speed / 1000}s`;
+			// Restore the position. See hideModule() for more info.
 			moduleWrapper.style.position = "static";
+			moduleWrapper.classList.remove("hidden");
 
 			updateWrapperStates();
 
 			// Waiting for DOM-changes done in updateWrapperStates before we can start the animation.
-			var dummy = moduleWrapper.parentElement.parentElement.offsetHeight;
+			const dummy = moduleWrapper.parentElement.parentElement.offsetHeight;
 			moduleWrapper.style.opacity = 1;
 
-			clearTimeout(module.showHideTimer);
-			module.showHideTimer = setTimeout(function() {
-				if (typeof callback === "function") { callback(); }
-			}, speed);
-
+			if (haveAnimateName) {
+				// with AnimateCSS
+				Log.debug(`${module.identifier} Has animateIn: ${haveAnimateName}`);
+				module.hasAnimateIn = haveAnimateName;
+				addAnimateCSS(module.identifier, haveAnimateName, speed / 1000);
+				module.showHideTimer = setTimeout(function () {
+					removeAnimateCSS(module.identifier, haveAnimateName);
+					Log.debug(`${module.identifier} Remove animateIn: ${haveAnimateName}`);
+					module.hasAnimateIn = false;
+					if (typeof callback === "function") {
+						callback();
+					}
+				}, speed);
+			} else {
+				// default MM² Animate
+				module.showHideTimer = setTimeout(function () {
+					if (typeof callback === "function") {
+						callback();
+					}
+				}, speed);
+			}
+		} else {
+			// invoke callback
+			if (typeof callback === "function") {
+				callback();
+			}
 		}
 	};
 
-	/* updateWrapperStates()
+	/**
 	 * Checks for all positions if it has visible content.
 	 * If not, if will hide the position to prevent unwanted margins.
-	 * This method schould be called by the show and hide methods.
+	 * This method should be called by the show and hide methods.
 	 *
 	 * Example:
 	 * If the top_bar only contains the update notification. And no update is available,
@@ -270,16 +451,14 @@ var MM = (function() {
 	 * update notification is not visible.
 	 */
 
-	var updateWrapperStates = function() {
-		var positions = ["top_bar", "top_left", "top_center", "top_right", "upper_third", "middle_center", "lower_third", "bottom_left", "bottom_center", "bottom_right", "bottom_bar", "fullscreen_above", "fullscreen_below"];
+	const updateWrapperStates = function () {
+		modulePositions.forEach(function (position) {
+			const wrapper = selectWrapper(position);
+			const moduleWrappers = wrapper.getElementsByClassName("module");
 
-		positions.forEach(function(position) {
-			var wrapper = selectWrapper(position);
-			var moduleWrappers = wrapper.getElementsByClassName("module");
-
-			var showWrapper = false;
-			Array.prototype.forEach.call(moduleWrappers, function(moduleWrapper) {
-				if (moduleWrapper.style.position == "" || moduleWrapper.style.position == "static") {
+			let showWrapper = false;
+			Array.prototype.forEach.call(moduleWrappers, function (moduleWrapper) {
+				if (moduleWrapper.style.position === "" || moduleWrapper.style.position === "static") {
 					showWrapper = true;
 				}
 			});
@@ -288,10 +467,11 @@ var MM = (function() {
 		});
 	};
 
-	/* loadConfig()
-	 * Loads the core config and combines it with de system defaults.
+	/**
+	 * Loads the core config and combines it with the system defaults.
 	 */
-	var loadConfig = function() {
+	const loadConfig = function () {
+		// FIXME: Think about how to pass config around without breaking tests
 		if (typeof config === "undefined") {
 			config = defaults;
 			Log.error("Config file is missing! Please create a config file.");
@@ -301,54 +481,46 @@ var MM = (function() {
 		config = Object.assign({}, defaults, config);
 	};
 
-	/* setSelectionMethodsForModules()
+	/**
 	 * Adds special selectors on a collection of modules.
-	 *
-	 * argument modules array - Array of modules.
+	 * @param {Module[]} modules Array of modules.
 	 */
-	var setSelectionMethodsForModules = function(modules) {
+	const setSelectionMethodsForModules = function (modules) {
 
-		/* withClass(className)
-		 * calls modulesByClass to filter modules with the specified classes.
-		 *
-		 * argument className string/array - one or multiple classnames. (array or space divided)
-		 *
-		 * return array - Filtered collection of modules.
+		/**
+		 * Filter modules with the specified classes.
+		 * @param {string|string[]} className one or multiple classnames (array or space divided).
+		 * @returns {Module[]} Filtered collection of modules.
 		 */
-		var withClass = function(className) {
+		const withClass = function (className) {
 			return modulesByClass(className, true);
 		};
 
-		/* exceptWithClass(className)
-		 * calls modulesByClass to filter modules without the specified classes.
-		 *
-		 * argument className string/array - one or multiple classnames. (array or space divided)
-		 *
-		 * return array - Filtered collection of modules.
+		/**
+		 * Filter modules without the specified classes.
+		 * @param {string|string[]} className one or multiple classnames (array or space divided).
+		 * @returns {Module[]} Filtered collection of modules.
 		 */
-		var exceptWithClass  = function(className) {
+		const exceptWithClass = function (className) {
 			return modulesByClass(className, false);
 		};
 
-		/* modulesByClass(className, include)
-		 * filters a collection of modules based on classname(s).
-		 *
-		 * argument className string/array - one or multiple classnames. (array or space divided)
-		 * argument include boolean - if the filter should include or exclude the modules with the specific classes.
-		 *
-		 * return array - Filtered collection of modules.
+		/**
+		 * Filters a collection of modules based on classname(s).
+		 * @param {string|string[]} className one or multiple classnames (array or space divided).
+		 * @param {boolean} include if the filter should include or exclude the modules with the specific classes.
+		 * @returns {Module[]} Filtered collection of modules.
 		 */
-		var modulesByClass = function(className, include) {
-			var searchClasses = className;
+		const modulesByClass = function (className, include) {
+			let searchClasses = className;
 			if (typeof className === "string") {
 				searchClasses = className.split(" ");
 			}
 
-			var newModules = modules.filter(function(module) {
-				var classes = module.data.classes.toLowerCase().split(" ");
+			const newModules = modules.filter(function (module) {
+				const classes = module.data.classes.toLowerCase().split(" ");
 
-				for (var c in searchClasses) {
-					var searchClass = searchClasses[c];
+				for (const searchClass of searchClasses) {
 					if (classes.indexOf(searchClass.toLowerCase()) !== -1) {
 						return include;
 					}
@@ -361,15 +533,13 @@ var MM = (function() {
 			return newModules;
 		};
 
-		/* exceptModule(module)
+		/**
 		 * Removes a module instance from the collection.
-		 *
-		 * argument module Module object - The module instance to remove from the collection.
-		 *
-		 * return array - Filtered collection of modules.
+		 * @param {object} module The module instance to remove from the collection.
+		 * @returns {Module[]} Filtered collection of modules.
 		 */
-		var exceptModule = function(module) {
-			var newModules = modules.filter(function(mod) {
+		const exceptModule = function (module) {
+			const newModules = modules.filter(function (mod) {
 				return mod.identifier !== module.identifier;
 			});
 
@@ -377,62 +547,89 @@ var MM = (function() {
 			return newModules;
 		};
 
-		/* enumerate(callback)
+		/**
 		 * Walks thru a collection of modules and executes the callback with the module as an argument.
-		 *
-		 * argument callback function - The function to execute with the module as an argument.
+		 * @param {Function} callback The function to execute with the module as an argument.
 		 */
-		var enumerate = function(callback) {
-			modules.map(function(module) {
+		const enumerate = function (callback) {
+			modules.map(function (module) {
 				callback(module);
 			});
 		};
 
-		if (typeof modules.withClass === "undefined") { Object.defineProperty(modules, "withClass",  {value: withClass, enumerable: false}); }
-		if (typeof modules.exceptWithClass === "undefined") { Object.defineProperty(modules, "exceptWithClass",  {value: exceptWithClass, enumerable: false}); }
-		if (typeof modules.exceptModule === "undefined") { Object.defineProperty(modules, "exceptModule",  {value: exceptModule, enumerable: false}); }
-		if (typeof modules.enumerate === "undefined") { Object.defineProperty(modules, "enumerate",  {value: enumerate, enumerable: false}); }
+		if (typeof modules.withClass === "undefined") {
+			Object.defineProperty(modules, "withClass", { value: withClass, enumerable: false });
+		}
+		if (typeof modules.exceptWithClass === "undefined") {
+			Object.defineProperty(modules, "exceptWithClass", { value: exceptWithClass, enumerable: false });
+		}
+		if (typeof modules.exceptModule === "undefined") {
+			Object.defineProperty(modules, "exceptModule", { value: exceptModule, enumerable: false });
+		}
+		if (typeof modules.enumerate === "undefined") {
+			Object.defineProperty(modules, "enumerate", { value: enumerate, enumerable: false });
+		}
 	};
 
 	return {
+
 		/* Public Methods */
 
-		/* init()
+		/**
 		 * Main init method.
 		 */
-		init: function() {
-			Log.info("Initializing MagicMirror.");
+		async init () {
+			Log.info("Initializing MagicMirror².");
 			loadConfig();
-			Translator.loadCoreTranslations(config.language);
-			Loader.loadModules();
+
+			Log.setLogLevel(config.logLevel);
+
+			await Translator.loadCoreTranslations(config.language);
+			await Loader.loadModules();
 		},
 
-		/* modulesStarted(moduleObjects)
+		/**
 		 * Gets called when all modules are started.
-		 *
-		 * argument moduleObjects array<Module> - All module instances.
+		 * @param {Module[]} moduleObjects All module instances.
 		 */
-		modulesStarted: function(moduleObjects) {
+		modulesStarted (moduleObjects) {
 			modules = [];
-			for (var m in moduleObjects) {
-				var module = moduleObjects[m];
-				modules[module.data.index] = module;
-			}
+			let startUp = "";
+
+			moduleObjects.forEach((module) => modules.push(module));
 
 			Log.info("All modules started!");
 			sendNotification("ALL_MODULES_STARTED");
 
 			createDomObjects();
+
+			if (config.reloadAfterServerRestart) {
+				setInterval(async () => {
+					// if server startup time has changed (which means server was restarted)
+					// the client reloads the mm page
+					try {
+						const res = await fetch(`${location.protocol}//${location.host}${config.basePath}startup`);
+						const curr = await res.text();
+						if (startUp === "") startUp = curr;
+						if (startUp !== curr) {
+							startUp = "";
+							window.location.reload(true);
+							console.warn("Refreshing Website because server was restarted");
+						}
+					} catch (err) {
+						Log.error(`MagicMirror not reachable: ${err}`);
+					}
+				}, config.checkServerInterval);
+			}
 		},
 
-		/* sendNotification(notification, payload, sender)
+		/**
 		 * Send a notification to all modules.
-		 *
-		 * argument notification string - The identifier of the noitication.
-		 * argument payload mixed - The payload of the notification.
-		 * argument sender Module - The module that sent the notification.
+		 * @param {string} notification The identifier of the notification.
+		 * @param {*} payload The payload of the notification.
+		 * @param {Module} sender The module that sent the notification.
 		 */
-		sendNotification: function(notification, payload, sender) {
+		sendNotification (notification, payload, sender) {
 			if (arguments.length < 3) {
 				Log.error("sendNotification: Missing arguments.");
 				return;
@@ -452,74 +649,80 @@ var MM = (function() {
 			sendNotification(notification, payload, sender);
 		},
 
-		/* updateDom(module, speed)
+		/**
 		 * Update the dom for a specific module.
-		 *
-		 * argument module Module - The module that needs an update.
-		 * argument speed Number - The number of microseconds for the animation. (optional)
+		 * @param {Module} module The module that needs an update.
+		 * @param {object|number} [updateOptions] The (optional) number of microseconds for the animation or object with updateOptions (speed/animates)
 		 */
-		updateDom: function(module, speed) {
+		updateDom (module, updateOptions) {
 			if (!(module instanceof Module)) {
 				Log.error("updateDom: Sender should be a module.");
 				return;
 			}
 
+			if (!module.data.position) {
+				Log.warn("module tries to update the DOM without being displayed.");
+				return;
+			}
+
 			// Further implementation is done in the private method.
-			updateDom(module, speed);
+			updateDom(module, updateOptions).then(function () {
+				// Once the update is complete and rendered, send a notification to the module that the DOM has been updated
+				sendNotification("MODULE_DOM_UPDATED", null, null, module);
+			});
 		},
 
-		/* getModules(module, speed)
+		/**
 		 * Returns a collection of all modules currently active.
-		 *
-		 * return array - A collection of all modules currently active.
+		 * @returns {Module[]} A collection of all modules currently active.
 		 */
-		getModules: function() {
+		getModules () {
 			setSelectionMethodsForModules(modules);
 			return modules;
 		},
 
-		/* hideModule(module, speed, callback)
+		/**
 		 * Hide the module.
-		 *
-		 * argument module Module - The module hide.
-		 * argument speed Number - The speed of the hide animation.
-		 * argument callback function - Called when the animation is done.
-		 * argument options object - Optional settings for the hide method.
+		 * @param {Module} module The module to hide.
+		 * @param {number} speed The speed of the hide animation.
+		 * @param {Function} callback Called when the animation is done.
+		 * @param {object} [options] Optional settings for the hide method.
 		 */
-		hideModule: function(module, speed, callback, options) {
+		hideModule (module, speed, callback, options) {
 			module.hidden = true;
 			hideModule(module, speed, callback, options);
 		},
 
-		/* showModule(module, speed, callback)
+		/**
 		 * Show the module.
-		 *
-		 * argument module Module - The module show.
-		 * argument speed Number - The speed of the show animation.
-		 * argument callback function - Called when the animation is done.
-		 * argument options object - Optional settings for the hide method.
+		 * @param {Module} module The module to show.
+		 * @param {number} speed The speed of the show animation.
+		 * @param {Function} callback Called when the animation is done.
+		 * @param {object} [options] Optional settings for the show method.
 		 */
-		showModule: function(module, speed, callback, options) {
+		showModule (module, speed, callback, options) {
 			// do not change module.hidden yet, only if we really show it later
 			showModule(module, speed, callback, options);
-		}
-	};
+		},
 
-})();
+		// Return all available module positions.
+		getAvailableModulePositions: modulePositions
+	};
+}());
 
 // Add polyfill for Object.assign.
-if (typeof Object.assign != "function") {
-	(function() {
-		Object.assign = function(target) {
+if (typeof Object.assign !== "function") {
+	(function () {
+		Object.assign = function (target) {
 			"use strict";
 			if (target === undefined || target === null) {
 				throw new TypeError("Cannot convert undefined or null to object");
 			}
-			var output = Object(target);
-			for (var index = 1; index < arguments.length; index++) {
-				var source = arguments[index];
+			const output = Object(target);
+			for (let index = 1; index < arguments.length; index++) {
+				const source = arguments[index];
 				if (source !== undefined && source !== null) {
-					for (var nextKey in source) {
+					for (const nextKey in source) {
 						if (source.hasOwnProperty(nextKey)) {
 							output[nextKey] = source[nextKey];
 						}
@@ -528,7 +731,7 @@ if (typeof Object.assign != "function") {
 			}
 			return output;
 		};
-	})();
+	}());
 }
 
 MM.init();

js/module.js

@@ -1,20 +1,18 @@
-/* global Log, Class, Loader, Class , MM */
-/* exported Module */
+/* global Class, cloneObject, Loader, MMSocket, nunjucks, Translator */
 
-/* Magic Mirror
+/*
  * Module Blueprint.
- *
- * By Michael Teeuw http://michaelteeuw.nl
- * MIT Licensed.
+ * @typedef {Object} Module
  */
+const Module = Class.extend({
 
-var Module = Class.extend({
-
-	/*********************************************************
+	/**
+	 ********************************************************
 	 * All methods (and properties) below can be subclassed. *
-	 *********************************************************/
+	 ********************************************************
+	 */
 
-	// Set the minimum MagicMirror module version for this module.
+	// Set the minimum MagicMirror² module version for this module.
 	requiresVersion: "2.0.0",
 
 	// Module config defaults.
@@ -23,402 +21,495 @@ var Module = Class.extend({
 	// Timer reference used for showHide animation callbacks.
 	showHideTimer: null,
 
-	// Array to store lockStrings. These strings are used to lock
-	// visibility when hiding and showing module.
+	/*
+	 * Array to store lockStrings. These strings are used to lock
+	 * visibility when hiding and showing module.
+	 */
 	lockStrings: [],
 
-	/* init()
-	 * Is called when the module is instantiated.
+	/*
+	 * Storage of the nunjucks Environment,
+	 * This should not be referenced directly.
+	 * Use the nunjucksEnvironment() to get it.
 	 */
-	init: function () {
+	_nunjucksEnvironment: null,
+
+	/**
+	 * Called when the module is instantiated.
+	 */
+	init () {
 		//Log.log(this.defaults);
 	},
 
-	/* start()
-	 * Is called when the module is started.
+	/**
+	 * Called when the module is started.
 	 */
-	start: function () {
-		Log.info("Starting module: " + this.name);
+	async start () {
+		Log.info(`Starting module: ${this.name}`);
 	},
 
-	/* getScripts()
+	/**
 	 * Returns a list of scripts the module requires to be loaded.
-	 *
-	 * return Array<String> - An array with filenames.
+	 * @returns {string[]} An array with filenames.
 	 */
-	getScripts: function () {
+	getScripts () {
 		return [];
 	},
 
-	/* getStyles()
+	/**
 	 * Returns a list of stylesheets the module requires to be loaded.
-	 *
-	 * return Array<String> - An array with filenames.
+	 * @returns {string[]} An array with filenames.
 	 */
-	getStyles: function () {
+	getStyles () {
 		return [];
 	},
 
-	/* getTranslations()
+	/**
 	 * Returns a map of translation files the module requires to be loaded.
 	 *
-	 * return Map<String, String> - A map with langKeys and filenames.
+	 * return Map<String, String> -
+	 * @returns {*} A map with langKeys and filenames.
 	 */
-	getTranslations: function () {
+	getTranslations () {
 		return false;
 	},
 
-	/* getDom()
-	 * This method generates the dom which needs to be displayed. This method is called by the Magic Mirror core.
-	 * This method needs to be subclassed if the module wants to display info on the mirror.
-	 *
-	 * return domobject - The dom to display.
+	/**
+	 * Generates the dom which needs to be displayed. This method is called by the MagicMirror² core.
+	 * This method can to be subclassed if the module wants to display info on the mirror.
+	 * Alternatively, the getTemplate method could be subclassed.
+	 * @returns {HTMLElement|Promise} The dom or a promise with the dom to display.
 	 */
-	getDom: function () {
-		var nameWrapper = document.createElement("div");
-		var name = document.createTextNode(this.name);
-		nameWrapper.appendChild(name);
+	getDom () {
+		return new Promise((resolve) => {
+			const div = document.createElement("div");
+			const template = this.getTemplate();
+			const templateData = this.getTemplateData();
 
-		var identifierWrapper = document.createElement("div");
-		var identifier = document.createTextNode(this.identifier);
-		identifierWrapper.appendChild(identifier);
-		identifierWrapper.className = "small dimmed";
+			// Check to see if we need to render a template string or a file.
+			if ((/^.*((\.html)|(\.njk))$/).test(template)) {
+				// the template is a filename
+				this.nunjucksEnvironment().render(template, templateData, function (err, res) {
+					if (err) {
+						Log.error(err);
+					}
 
-		var div = document.createElement("div");
-		div.appendChild(nameWrapper);
-		div.appendChild(identifierWrapper);
+					div.innerHTML = res;
 
-		return div;
+					resolve(div);
+				});
+			} else {
+				// the template is a template string.
+				div.innerHTML = this.nunjucksEnvironment().renderString(template, templateData);
+
+				resolve(div);
+			}
+		});
 	},
 
-	/* getHeader()
-	 * This method generates the header string which needs to be displayed if a user has a header configured for this module.
-	 * This method is called by the Magic Mirror core, but only if the user has configured a default header for the module.
+	/**
+	 * Generates the header string which needs to be displayed if a user has a header configured for this module.
+	 * This method is called by the MagicMirror² core, but only if the user has configured a default header for the module.
 	 * This method needs to be subclassed if the module wants to display modified headers on the mirror.
-	 *
-	 * return string - The header to display above the header.
+	 * @returns {string} The header to display above the header.
 	 */
-	getHeader: function () {
+	getHeader () {
 		return this.data.header;
 	},
 
-	/* notificationReceived(notification, payload, sender)
-	 * This method is called when a notification arrives.
-	 * This method is called by the Magic Mirror core.
-	 *
-	 * argument notification string - The identifier of the notification.
-	 * argument payload mixed - The payload of the notification.
-	 * argument sender Module - The module that sent the notification.
+	/**
+	 * Returns the template for the module which is used by the default getDom implementation.
+	 * This method needs to be subclassed if the module wants to use a template.
+	 * It can either return a template sting, or a template filename.
+	 * If the string ends with '.html' it's considered a file from within the module's folder.
+	 * @returns {string} The template string of filename.
 	 */
-	notificationReceived: function (notification, payload, sender) {
+	getTemplate () {
+		return `<div class="normal">${this.name}</div><div class="small dimmed">${this.identifier}</div>`;
+	},
+
+	/**
+	 * Returns the data to be used in the template.
+	 * This method needs to be subclassed if the module wants to use a custom data.
+	 * @returns {object} The data for the template
+	 */
+	getTemplateData () {
+		return {};
+	},
+
+	/**
+	 * Called by the MagicMirror² core when a notification arrives.
+	 * @param {string} notification The identifier of the notification.
+	 * @param {*} payload The payload of the notification.
+	 * @param {Module} sender The module that sent the notification.
+	 */
+	notificationReceived (notification, payload, sender) {
 		if (sender) {
-			Log.log(this.name + " received a module notification: " + notification + " from sender: " + sender.name);
+			// Log.log(this.name + " received a module notification: " + notification + " from sender: " + sender.name);
 		} else {
-			Log.log(this.name + " received a system notification: " + notification);
+			// Log.log(this.name + " received a system notification: " + notification);
 		}
 	},
 
-	/* socketNotificationReceived(notification, payload)
-	 * This method is called when a socket notification arrives.
-	 *
-	 * argument notification string - The identifier of the notification.
-	 * argument payload mixed - The payload of the notification.
+	/**
+	 * Returns the nunjucks environment for the current module.
+	 * The environment is checked in the _nunjucksEnvironment instance variable.
+	 * @returns {object} The Nunjucks Environment
 	 */
-	socketNotificationReceived: function (notification, payload) {
-		Log.log(this.name + " received a socket notification: " + notification + " - Payload: " + payload);
+	nunjucksEnvironment () {
+		if (this._nunjucksEnvironment !== null) {
+			return this._nunjucksEnvironment;
+		}
+
+		this._nunjucksEnvironment = new nunjucks.Environment(new nunjucks.WebLoader(this.file(""), { async: true }), {
+			trimBlocks: true,
+			lstripBlocks: true
+		});
+
+		this._nunjucksEnvironment.addFilter("translate", (str, variables) => {
+			return nunjucks.runtime.markSafe(this.translate(str, variables));
+		});
+
+		return this._nunjucksEnvironment;
 	},
 
-	/* suspend()
-	 * This method is called when a module is hidden.
+	/**
+	 * Called when a socket notification arrives.
+	 * @param {string} notification The identifier of the notification.
+	 * @param {*} payload The payload of the notification.
 	 */
-	suspend: function () {
-		Log.log(this.name + " is suspended.");
+	socketNotificationReceived (notification, payload) {
+		Log.log(`${this.name} received a socket notification: ${notification} - Payload: ${payload}`);
 	},
 
-	/* resume()
-	 * This method is called when a module is shown.
+	/**
+	 * Called when the module is hidden.
 	 */
-	resume: function () {
-		Log.log(this.name + " is resumed.");
+	suspend () {
+		Log.log(`${this.name} is suspended.`);
 	},
 
-	/*********************************************
-	 * The methods below don"t need subclassing. *
-	 *********************************************/
+	/**
+	 * Called when the module is shown.
+	 */
+	resume () {
+		Log.log(`${this.name} is resumed.`);
+	},
 
-	/* setData(data)
+	/**
+	 ********************************************
+	 * The methods below don't need subclassing. *
+	 ********************************************
+	 */
+
+	/**
 	 * Set the module data.
-	 *
-	 * argument data obejct - Module data.
+	 * @param {object} data The module data
 	 */
-	setData: function (data) {
+	setData (data) {
 		this.data = data;
 		this.name = data.name;
 		this.identifier = data.identifier;
 		this.hidden = false;
+		this.hasAnimateIn = false;
+		this.hasAnimateOut = false;
 
-		this.setConfig(data.config);
+		this.setConfig(data.config, data.configDeepMerge);
 	},
 
-	/* setConfig(config)
+	/**
 	 * Set the module config and combine it with the module defaults.
-	 *
-	 * argument config obejct - Module config.
+	 * @param {object} config The combined module config.
+	 * @param {boolean} deep Merge module config in deep.
 	 */
-	setConfig: function (config) {
-		this.config = Object.assign({}, this.defaults, config);
+	setConfig (config, deep) {
+		this.config = deep ? configMerge({}, this.defaults, config) : Object.assign({}, this.defaults, config);
 	},
 
-	/* socket()
-	 * Returns a socket object. If it doesn"t exist, it"s created.
+	/**
+	 * Returns a socket object. If it doesn't exist, it's created.
 	 * It also registers the notification callback.
+	 * @returns {MMSocket} a socket object
 	 */
-	socket: function () {
+	socket () {
 		if (typeof this._socket === "undefined") {
-			this._socket = this._socket = new MMSocket(this.name);
+			this._socket = new MMSocket(this.name);
 		}
 
-		var self = this;
-		this._socket.setNotificationCallback(function (notification, payload) {
-			self.socketNotificationReceived(notification, payload);
+		this._socket.setNotificationCallback((notification, payload) => {
+			this.socketNotificationReceived(notification, payload);
 		});
 
 		return this._socket;
 	},
 
-	/* file(file)
+	/**
 	 * Retrieve the path to a module file.
-	 *
-	 * argument file string - Filename.
-	 *
-	 * return string - File path.
+	 * @param {string} file Filename
+	 * @returns {string} the file path
 	 */
-	file: function (file) {
-		return (this.data.path + "/" + file).replace("//", "/");
+	file (file) {
+		return `${this.data.path}/${file}`.replace("//", "/");
 	},
 
-	/* loadStyles()
+	/**
 	 * Load all required stylesheets by requesting the MM object to load the files.
-	 *
-	 * argument callback function - Function called when done.
+	 * @returns {Promise<void>}
 	 */
-	loadStyles: function (callback) {
-		this.loadDependencies("getStyles", callback);
+	loadStyles () {
+		return this.loadDependencies("getStyles");
 	},
 
-	/* loadScripts()
+	/**
 	 * Load all required scripts by requesting the MM object to load the files.
-	 *
-	 * argument callback function - Function called when done.
+	 * @returns {Promise<void>}
 	 */
-	loadScripts: function (callback) {
-		this.loadDependencies("getScripts", callback);
+	loadScripts () {
+		return this.loadDependencies("getScripts");
 	},
 
-	/* loadDependencies(funcName, callback)
+	/**
 	 * Helper method to load all dependencies.
-	 *
-	 * argument funcName string - Function name to call to get scripts or styles.
-	 * argument callback function - Function called when done.
+	 * @param {string} funcName Function name to call to get scripts or styles.
+	 * @returns {Promise<void>}
 	 */
-	loadDependencies: function (funcName, callback) {
-		var self = this;
-		var dependencies = this[funcName]();
+	async loadDependencies (funcName) {
+		let dependencies = this[funcName]();
 
-		var loadNextDependency = function () {
+		const loadNextDependency = async () => {
 			if (dependencies.length > 0) {
-				var nextDependency = dependencies[0];
-				Loader.loadFile(nextDependency, self, function () {
-					dependencies = dependencies.slice(1);
-					loadNextDependency();
-				});
+				const nextDependency = dependencies[0];
+				await Loader.loadFileForModule(nextDependency, this);
+				dependencies = dependencies.slice(1);
+				await loadNextDependency();
 			} else {
-				callback();
+				return Promise.resolve();
 			}
 		};
 
-		loadNextDependency();
+		await loadNextDependency();
 	},
 
-	/* loadScripts()
-	 * Load all required scripts by requesting the MM object to load the files.
-	 *
-	 * argument callback function - Function called when done.
+	/**
+	 * Load all translations.
+	 * @returns {Promise<void>}
 	 */
-	loadTranslations: function (callback) {
-		var self = this;
-		var translations = this.getTranslations();
-		var lang = config.language.toLowerCase();
+	async loadTranslations () {
+		const translations = this.getTranslations() || {};
+		const language = config.language.toLowerCase();
 
-		// The variable `first` will contain the first
-		// defined translation after the following line.
-		for (var first in translations) { break; }
+		const languages = Object.keys(translations);
+		const fallbackLanguage = languages[0];
 
-		if (translations) {
-			var translationFile = translations[lang] || undefined;
-			var translationsFallbackFile = translations[first];
+		if (languages.length === 0) {
+			return;
+		}
 
-			// If a translation file is set, load it and then also load the fallback translation file.
-			// Otherwise only load the fallback translation file.
-			if (translationFile !== undefined && translationFile !== translationsFallbackFile) {
-				Translator.load(self, translationFile, false, function () {
-					Translator.load(self, translationsFallbackFile, true, callback);
-				});
-			} else {
-				Translator.load(self, translationsFallbackFile, true, callback);
-			}
-		} else {
-			callback();
+		const translationFile = translations[language];
+		const translationsFallbackFile = translations[fallbackLanguage];
+
+		if (!translationFile) {
+			return Translator.load(this, translationsFallbackFile, true);
+		}
+
+		await Translator.load(this, translationFile, false);
+
+		if (translationFile !== translationsFallbackFile) {
+			return Translator.load(this, translationsFallbackFile, true);
 		}
 	},
 
-	/* translate(key, defaultValueOrVariables, defaultValue)
+	/**
 	 * Request the translation for a given key with optional variables and default value.
-	 *
-	 * argument key string - The key of the string to translate
-   * argument defaultValueOrVariables string/object - The default value or variables for translating. (Optional)
-   * argument defaultValue string - The default value with variables. (Optional)
+	 * @param {string} key The key of the string to translate
+	 * @param {string|object} [defaultValueOrVariables] The default value or variables for translating.
+	 * @param {string} [defaultValue] The default value with variables.
+	 * @returns {string} the translated key
 	 */
-	translate: function (key, defaultValueOrVariables, defaultValue) {
-		if(typeof defaultValueOrVariables === "object") {
+	translate (key, defaultValueOrVariables, defaultValue) {
+		if (typeof defaultValueOrVariables === "object") {
 			return Translator.translate(this, key, defaultValueOrVariables) || defaultValue || "";
 		}
 		return Translator.translate(this, key) || defaultValueOrVariables || "";
 	},
 
-	/* updateDom(speed)
+	/**
 	 * Request an (animated) update of the module.
-	 *
-	 * argument speed Number - The speed of the animation. (Optional)
+	 * @param {number|object} [updateOptions] The speed of the animation or object with for updateOptions (speed/animates)
 	 */
-	updateDom: function (speed) {
-		MM.updateDom(this, speed);
+	updateDom (updateOptions) {
+		MM.updateDom(this, updateOptions);
 	},
 
-	/* sendNotification(notification, payload)
+	/**
 	 * Send a notification to all modules.
-	 *
-	 * argument notification string - The identifier of the notification.
-	 * argument payload mixed - The payload of the notification.
+	 * @param {string} notification The identifier of the notification.
+	 * @param {*} payload The payload of the notification.
 	 */
-	sendNotification: function (notification, payload) {
+	sendNotification (notification, payload) {
 		MM.sendNotification(notification, payload, this);
 	},
 
-	/* sendSocketNotification(notification, payload)
+	/**
 	 * Send a socket notification to the node helper.
-	 *
-	 * argument notification string - The identifier of the notification.
-	 * argument payload mixed - The payload of the notification.
+	 * @param {string} notification The identifier of the notification.
+	 * @param {*} payload The payload of the notification.
 	 */
-	sendSocketNotification: function (notification, payload) {
+	sendSocketNotification (notification, payload) {
 		this.socket().sendNotification(notification, payload);
 	},
 
-	/* hideModule(module, speed, callback)
+	/**
 	 * Hide this module.
-	 *
-	 * argument speed Number - The speed of the hide animation.
-	 * argument callback function - Called when the animation is done.
-	 * argument options object - Optional settings for the hide method.
+	 * @param {number} speed The speed of the hide animation.
+	 * @param {Function} callback Called when the animation is done.
+	 * @param {object} [options] Optional settings for the hide method.
 	 */
-	hide: function (speed, callback, options) {
+	hide (speed, callback, options = {}) {
+		let usedCallback = callback || function () {};
+		let usedOptions = options;
+
 		if (typeof callback === "object") {
-			options = callback;
-			callback = function () { };
+			Log.error("Parameter mismatch in module.hide: callback is not an optional parameter!");
+			usedOptions = callback;
+			usedCallback = function () {};
 		}
 
-		callback = callback || function () { };
-		options = options || {};
-
-		var self = this;
-		MM.hideModule(self, speed, function () {
-			self.suspend();
-			callback();
-		}, options);
+		MM.hideModule(
+			this,
+			speed,
+			() => {
+				this.suspend();
+				usedCallback();
+			},
+			usedOptions
+		);
 	},
 
-	/* showModule(module, speed, callback)
+	/**
 	 * Show this module.
-	 *
-	 * argument speed Number - The speed of the show animation.
-	 * argument callback function - Called when the animation is done.
-	 * argument options object - Optional settings for the hide method.
+	 * @param {number} speed The speed of the show animation.
+	 * @param {Function} callback Called when the animation is done.
+	 * @param {object} [options] Optional settings for the show method.
 	 */
-	show: function (speed, callback, options) {
+	show (speed, callback, options) {
+		let usedCallback = callback || function () {};
+		let usedOptions = options;
+
 		if (typeof callback === "object") {
-			options = callback;
-			callback = function () { };
+			Log.error("Parameter mismatch in module.show: callback is not an optional parameter!");
+			usedOptions = callback;
+			usedCallback = function () {};
 		}
 
-		callback = callback || function () { };
-		options = options || {};
-
-		this.resume();
-		MM.showModule(this, speed, callback, options);
+		MM.showModule(
+			this,
+			speed,
+			() => {
+				this.resume();
+				usedCallback();
+			},
+			usedOptions
+		);
 	}
 });
 
+/**
+ * Merging MagicMirror² (or other) default/config script by @bugsounet
+ * Merge 2 objects or/with array
+ *
+ * Usage:
+ * -------
+ * this.config = configMerge({}, this.defaults, this.config)
+ * -------
+ * arg1: initial object
+ * arg2: config model
+ * arg3: config to merge
+ * -------
+ * why using it ?
+ * Object.assign() function don't to all job
+ * it don't merge all thing in deep
+ * -> object in object and array is not merging
+ * -------
+ *
+ * Todo: idea of Mich determinate what do you want to merge or not
+ * @param {object} result the initial object
+ * @returns {object} the merged config
+ */
+function configMerge (result) {
+	const stack = Array.prototype.slice.call(arguments, 1);
+	let item, key;
+
+	while (stack.length) {
+		item = stack.shift();
+		for (key in item) {
+			if (item.hasOwnProperty(key)) {
+				if (typeof result[key] === "object" && result[key] && Object.prototype.toString.call(result[key]) !== "[object Array]") {
+					if (typeof item[key] === "object" && item[key] !== null) {
+						result[key] = configMerge({}, result[key], item[key]);
+					} else {
+						result[key] = item[key];
+					}
+				} else {
+					result[key] = item[key];
+				}
+			}
+		}
+	}
+	return result;
+}
+
 Module.definitions = {};
 
 Module.create = function (name) {
-
 	// Make sure module definition is available.
 	if (!Module.definitions[name]) {
 		return;
 	}
 
-	var moduleDefinition = Module.definitions[name];
-	var clonedDefinition = cloneObject(moduleDefinition);
+	const moduleDefinition = Module.definitions[name];
+	const clonedDefinition = cloneObject(moduleDefinition);
 
 	// Note that we clone the definition. Otherwise the objects are shared, which gives problems.
-	var ModuleClass = Module.extend(clonedDefinition);
+	const ModuleClass = Module.extend(clonedDefinition);
 
 	return new ModuleClass();
-
 };
 
-/* cmpVersions(a,b)
-* Compare two symantic version numbers and return the difference.
-*
-* argument a string - Version number a.
-* argument a string - Version number b.
-*/
-function cmpVersions(a, b) {
-	var i, diff;
-	var regExStrip0 = /(\.0+)+$/;
-	var segmentsA = a.replace(regExStrip0, "").split(".");
-	var segmentsB = b.replace(regExStrip0, "").split(".");
-	var l = Math.min(segmentsA.length, segmentsB.length);
+Module.register = function (name, moduleDefinition) {
+	if (moduleDefinition.requiresVersion) {
+		Log.log(`Check MagicMirror² version for module '${name}' - Minimum version:  ${moduleDefinition.requiresVersion} - Current version: ${window.mmVersion}`);
+		if (cmpVersions(window.mmVersion, moduleDefinition.requiresVersion) >= 0) {
+			Log.log("Version is ok!");
+		} else {
+			Log.warn(`Version is incorrect. Skip module: '${name}'`);
+			return;
+		}
+	}
+	Log.log(`Module registered: ${name}`);
+	Module.definitions[name] = moduleDefinition;
+};
 
-	for (i = 0; i < l; i++) {
-		diff = parseInt(segmentsA[i], 10) - parseInt(segmentsB[i], 10);
+window.Module = Module;
+
+/**
+ * Compare two semantic version numbers and return the difference.
+ * @param {string} a Version number a.
+ * @param {string} b Version number b.
+ * @returns {number} A positive number if a is larger than b, a negative
+ * number if a is smaller and 0 if they are the same
+ */
+function cmpVersions (a, b) {
+	const regExStrip0 = /(\.0+)+$/;
+	const segmentsA = a.replace(regExStrip0, "").split(".");
+	const segmentsB = b.replace(regExStrip0, "").split(".");
+	const l = Math.min(segmentsA.length, segmentsB.length);
+
+	for (let i = 0; i < l; i++) {
+		let diff = parseInt(segmentsA[i], 10) - parseInt(segmentsB[i], 10);
 		if (diff) {
 			return diff;
 		}
 	}
 	return segmentsA.length - segmentsB.length;
 }
-
-Module.register = function (name, moduleDefinition) {
-
-	if (moduleDefinition.requiresVersion) {
-		Log.log("Check MagicMirror version for module '" + name + "' - Minimum version:  " + moduleDefinition.requiresVersion + " - Current version: " + version);
-		if (cmpVersions(version, moduleDefinition.requiresVersion) >= 0) {
-			Log.log("Version is ok!");
-		} else {
-			Log.log("Version is incorrect. Skip module: '" + name + "'");
-			return;
-		}
-	}
-	Log.log("Module registered: " + name);
-	Module.definitions[name] = moduleDefinition;
-};
-
-if (typeof exports != "undefined") { // For testing purpose only
-	// A good a idea move the function cmpversions a helper file.
-	// It's used into other side.
-	exports._test = {
-		cmpVersions: cmpVersions
-	}
-}

js/node_helper.js

@@ -0,0 +1,126 @@
+const express = require("express");
+const Log = require("logger");
+const Class = require("./class");
+
+const NodeHelper = Class.extend({
+	init () {
+		Log.log("Initializing new module helper ...");
+	},
+
+	loaded () {
+		Log.log(`Module helper loaded: ${this.name}`);
+	},
+
+	start () {
+		Log.log(`Starting module helper: ${this.name}`);
+	},
+
+	/**
+	 * Called when the MagicMirror² server receives a `SIGINT`
+	 * Close any open connections, stop any sub-processes and
+	 * gracefully exit the module.
+	 */
+	stop () {
+		Log.log(`Stopping module helper: ${this.name}`);
+	},
+
+	/**
+	 * This method is called when a socket notification arrives.
+	 * @param {string} notification The identifier of the notification.
+	 * @param {*}  payload The payload of the notification.
+	 */
+	socketNotificationReceived (notification, payload) {
+		Log.log(`${this.name} received a socket notification: ${notification} - Payload: ${payload}`);
+	},
+
+	/**
+	 * Set the module name.
+	 * @param {string} name Module name.
+	 */
+	setName (name) {
+		this.name = name;
+	},
+
+	/**
+	 * Set the module path.
+	 * @param {string} path Module path.
+	 */
+	setPath (path) {
+		this.path = path;
+	},
+
+	/*
+	 * sendSocketNotification(notification, payload)
+	 * Send a socket notification to the node helper.
+	 *
+	 * argument notification string - The identifier of the notification.
+	 * argument payload mixed - The payload of the notification.
+	 */
+	sendSocketNotification (notification, payload) {
+		this.io.of(this.name).emit(notification, payload);
+	},
+
+	/*
+	 * setExpressApp(app)
+	 * Sets the express app object for this module.
+	 * This allows you to host files from the created webserver.
+	 *
+	 * argument app Express app - The Express app object.
+	 */
+	setExpressApp (app) {
+		this.expressApp = app;
+
+		app.use(`/${this.name}`, express.static(`${this.path}/public`));
+	},
+
+	/*
+	 * setSocketIO(io)
+	 * Sets the socket io object for this module.
+	 * Binds message receiver.
+	 *
+	 * argument io Socket.io - The Socket io object.
+	 */
+	setSocketIO (io) {
+		this.io = io;
+
+		Log.log(`Connecting socket for: ${this.name}`);
+
+		io.of(this.name).on("connection", (socket) => {
+			// register catch all.
+			socket.onAny((notification, payload) => {
+				this.socketNotificationReceived(notification, payload);
+			});
+		});
+	}
+});
+
+NodeHelper.checkFetchStatus = function (response) {
+	// response.status >= 200 && response.status < 300
+	if (response.ok) {
+		return response;
+	} else {
+		throw Error(response.statusText);
+	}
+};
+
+/**
+ * Look at the specified error and return an appropriate error type, that
+ * can be translated to a detailed error message
+ * @param {Error} error the error from fetching something
+ * @returns {string} the string of the detailed error message in the translations
+ */
+NodeHelper.checkFetchError = function (error) {
+	let error_type = "MODULE_ERROR_UNSPECIFIED";
+	if (error.code === "EAI_AGAIN") {
+		error_type = "MODULE_ERROR_NO_CONNECTION";
+	} else if (error.message === "Unauthorized") {
+		error_type = "MODULE_ERROR_UNAUTHORIZED";
+	}
+	return error_type;
+};
+
+NodeHelper.create = function (moduleDefinition) {
+	return NodeHelper.extend(moduleDefinition);
+};
+
+module.exports = NodeHelper;

js/server.js

@@ -1,78 +1,115 @@
-/* Magic Mirror
+const fs = require("node:fs");
+const http = require("node:http");
+const https = require("node:https");
+const path = require("node:path");
+const express = require("express");
+const ipfilter = require("express-ipfilter").IpFilter;
+const helmet = require("helmet");
+const socketio = require("socket.io");
+
+const Log = require("logger");
+const { cors, getConfig, getHtml, getVersion, getStartup, getEnvVars } = require("./server_functions");
+
+/**
  * Server
- *
- * By Michael Teeuw http://michaelteeuw.nl
- * MIT Licensed.
+ * @param {object} config The MM config
+ * @class
  */
+function Server (config) {
+	const app = express();
+	const port = process.env.MM_PORT || config.port;
+	const serverSockets = new Set();
+	let server = null;
 
-var express = require("express");
-var app = require("express")();
-var server = require("http").Server(app);
-var io = require("socket.io")(server);
-var path = require("path");
-var ipfilter = require("express-ipfilter").IpFilter;
-var fs = require("fs");
-var helmet = require("helmet");
-var Utils = require(__dirname + "/utils.js");
-
-var Server = function(config, callback) {
-
-	var port = config.port;
-	if (process.env.MM_PORT) {
-		port = process.env.MM_PORT;
-	}
-
-	console.log("Starting server on port " + port + " ... ");
-
-	server.listen(port, config.address ? config.address : null);
-
-	if (config.ipWhitelist instanceof Array && config.ipWhitelist.length == 0) {
-		console.info(Utils.colors.warn("You're using a full whitelist configuration to allow for all IPs"))
-	}
-
-	app.use(function(req, res, next) {
-		var result = ipfilter(config.ipWhitelist, {mode: config.ipWhitelist.length === 0 ? "deny" : "allow", log: false})(req, res, function(err) {
-			if (err === undefined) {
-				return next();
+	/**
+	 * Opens the server for incoming connections
+	 * @returns {Promise} A promise that is resolved when the server listens to connections
+	 */
+	this.open = function () {
+		return new Promise((resolve) => {
+			if (config.useHttps) {
+				const options = {
+					key: fs.readFileSync(config.httpsPrivateKey),
+					cert: fs.readFileSync(config.httpsCertificate)
+				};
+				server = https.Server(options, app);
+			} else {
+				server = http.Server(app);
 			}
-			console.log(err.message);
-			res.status(403).send("This device is not allowed to access your mirror. <br> Please check your config.js or config.js.sample to change this.");
+			const io = socketio(server, {
+				cors: {
+					origin: /.*$/,
+					credentials: true
+				},
+				allowEIO3: true
+			});
+
+			server.on("connection", (socket) => {
+				serverSockets.add(socket);
+				socket.on("close", () => {
+					serverSockets.delete(socket);
+				});
+			});
+
+			Log.log(`Starting server on port ${port} ... `);
+			server.listen(port, config.address || "localhost");
+
+			if (config.ipWhitelist instanceof Array && config.ipWhitelist.length === 0) {
+				Log.warn("You're using a full whitelist configuration to allow for all IPs");
+			}
+
+			app.use(function (req, res, next) {
+				ipfilter(config.ipWhitelist, { mode: config.ipWhitelist.length === 0 ? "deny" : "allow", log: false })(req, res, function (err) {
+					if (err === undefined) {
+						res.header("Access-Control-Allow-Origin", "*");
+						return next();
+					}
+					Log.log(err.message);
+					res.status(403).send("This device is not allowed to access your mirror. <br> Please check your config.js or config.js.sample to change this.");
+				});
+			});
+
+			app.use(helmet(config.httpHeaders));
+			app.use("/js", express.static(__dirname));
+
+			let directories = ["/config", "/css", "/fonts", "/modules", "/vendor", "/translations", "/tests/configs", "/tests/mocks"];
+			for (const directory of directories) {
+				app.use(directory, express.static(path.resolve(global.root_path + directory)));
+			}
+
+			app.get("/cors", async (req, res) => await cors(req, res));
+
+			app.get("/version", (req, res) => getVersion(req, res));
+
+			app.get("/config", (req, res) => getConfig(req, res));
+
+			app.get("/startup", (req, res) => getStartup(req, res));
+
+			app.get("/env", (req, res) => getEnvVars(req, res));
+
+			app.get("/", (req, res) => getHtml(req, res));
+
+			server.on("listening", () => {
+				resolve({
+					app,
+					io
+				});
+			});
 		});
-	});
-	app.use(helmet());
+	};
 
-	app.use("/js", express.static(__dirname));
-	var directories = ["/config", "/css", "/fonts", "/modules", "/vendor", "/translations", "/tests/configs"];
-	var directory;
-	for (var i in directories) {
-		directory = directories[i];
-		app.use(directory, express.static(path.resolve(global.root_path + directory)));
-	}
-
-	app.get("/version", function(req,res) {
-		res.send(global.version);
-	});
-
-	app.get("/config", function(req,res) {
-		res.send(config);
-	});
-
-	app.get("/", function(req, res) {
-		var html = fs.readFileSync(path.resolve(global.root_path + "/index.html"), {encoding: "utf8"});
-		html = html.replace("#VERSION#", global.version);
-
-		configFile = "config/config.js";
-		if (typeof(global.configuration_file) !== "undefined") {
-		    configFile = global.configuration_file;
-		}
-		html = html.replace("#CONFIG_FILE#", configFile);
-
-		res.send(html);
-	});
-
-	if (typeof callback === "function") {
-		callback(app, io);
-	}
-};
+	/**
+	 * Closes the server and destroys all lingering connections to it.
+	 * @returns {Promise} A promise that resolves when server has successfully shut down
+	 */
+	this.close = function () {
+		return new Promise((resolve) => {
+			for (const socket of serverSockets.values()) {
+				socket.destroy();
+			}
+			server.close(resolve);
+		});
+	};
+}
 
 module.exports = Server;

js/server_functions.js

@@ -0,0 +1,158 @@
+const fs = require("node:fs");
+const path = require("node:path");
+const Log = require("logger");
+
+const startUp = new Date();
+
+/**
+ * Gets the config.
+ * @param {Request} req - the request
+ * @param {Response} res - the result
+ */
+function getConfig (req, res) {
+	res.send(config);
+}
+
+/**
+ * Gets the startup time.
+ * @param {Request} req - the request
+ * @param {Response} res - the result
+ */
+function getStartup (req, res) {
+	res.send(startUp);
+}
+
+/**
+ * A method that forwards HTTP Get-methods to the internet to avoid CORS-errors.
+ *
+ * Example input request url: /cors?sendheaders=header1:value1,header2:value2&expectedheaders=header1,header2&url=http://www.test.com/path?param1=value1
+ *
+ * Only the url-param of the input request url is required. It must be the last parameter.
+ * @param {Request} req - the request
+ * @param {Response} res - the result
+ */
+async function cors (req, res) {
+	try {
+		const urlRegEx = "url=(.+?)$";
+		let url;
+
+		const match = new RegExp(urlRegEx, "g").exec(req.url);
+		if (!match) {
+			url = `invalid url: ${req.url}`;
+			Log.error(url);
+			res.send(url);
+		} else {
+			url = match[1];
+
+			const headersToSend = getHeadersToSend(req.url);
+			const expectedReceivedHeaders = geExpectedReceivedHeaders(req.url);
+
+			Log.log(`cors url: ${url}`);
+			const response = await fetch(url, { headers: headersToSend });
+
+			for (const header of expectedReceivedHeaders) {
+				const headerValue = response.headers.get(header);
+				if (header) res.set(header, headerValue);
+			}
+			const data = await response.text();
+			res.send(data);
+		}
+	} catch (error) {
+		Log.error(error);
+		res.send(error);
+	}
+}
+
+/**
+ * Gets headers and values to attach to the web request.
+ * @param {string} url - The url containing the headers and values to send.
+ * @returns {object} An object specifying name and value of the headers.
+ */
+function getHeadersToSend (url) {
+	const headersToSend = { "User-Agent": `Mozilla/5.0 MagicMirror/${global.version}` };
+	const headersToSendMatch = new RegExp("sendheaders=(.+?)(&|$)", "g").exec(url);
+	if (headersToSendMatch) {
+		const headers = headersToSendMatch[1].split(",");
+		for (const header of headers) {
+			const keyValue = header.split(":");
+			if (keyValue.length !== 2) {
+				throw new Error(`Invalid format for header ${header}`);
+			}
+			headersToSend[keyValue[0]] = decodeURIComponent(keyValue[1]);
+		}
+	}
+	return headersToSend;
+}
+
+/**
+ * Gets the headers expected from the response.
+ * @param {string} url - The url containing the expected headers from the response.
+ * @returns {string[]} headers - The name of the expected headers.
+ */
+function geExpectedReceivedHeaders (url) {
+	const expectedReceivedHeaders = ["Content-Type"];
+	const expectedReceivedHeadersMatch = new RegExp("expectedheaders=(.+?)(&|$)", "g").exec(url);
+	if (expectedReceivedHeadersMatch) {
+		const headers = expectedReceivedHeadersMatch[1].split(",");
+		for (const header of headers) {
+			expectedReceivedHeaders.push(header);
+		}
+	}
+	return expectedReceivedHeaders;
+}
+
+/**
+ * Gets the HTML to display the magic mirror.
+ * @param {Request} req - the request
+ * @param {Response} res - the result
+ */
+function getHtml (req, res) {
+	let html = fs.readFileSync(path.resolve(`${global.root_path}/index.html`), { encoding: "utf8" });
+	html = html.replace("#VERSION#", global.version);
+	html = html.replace("#TESTMODE#", global.mmTestMode);
+
+	let configFile = "config/config.js";
+	if (typeof global.configuration_file !== "undefined") {
+		configFile = global.configuration_file;
+	}
+	html = html.replace("#CONFIG_FILE#", configFile);
+
+	res.send(html);
+}
+
+/**
+ * Gets the MagicMirror version.
+ * @param {Request} req - the request
+ * @param {Response} res - the result
+ */
+function getVersion (req, res) {
+	res.send(global.version);
+}
+
+/**
+ * Gets environment variables needed in the browser.
+ * @returns {object} environment variables key: values
+ */
+function getEnvVarsAsObj () {
+	const obj = { modulesDir: `${config.foreignModulesDir}`, customCss: `${config.customCss}` };
+	if (process.env.MM_MODULES_DIR) {
+		obj.modulesDir = process.env.MM_MODULES_DIR.replace(`${global.root_path}/`, "");
+	}
+	if (process.env.MM_CUSTOMCSS_FILE) {
+		obj.customCss = process.env.MM_CUSTOMCSS_FILE.replace(`${global.root_path}/`, "");
+	}
+
+	return obj;
+}
+
+/**
+ * Gets environment variables needed in the browser.
+ * @param {Request} req - the request
+ * @param {Response} res - the result
+ */
+function getEnvVars (req, res) {
+	const obj = getEnvVarsAsObj();
+	res.send(obj);
+}
+
+module.exports = { cors, getConfig, getHtml, getVersion, getStartup, getEnvVars, getEnvVarsAsObj };

js/socket.js

@@ -1,35 +0,0 @@
-/* exported Log */
-
-/* Magic Mirror
- * Socket Connection
- *
- * By Michael Teeuw http://michaelteeuw.nl
- * MIT Licensed.
- */
-
-var MMSocket = function(moduleName) {
-
-	var self = this;
-
-	if (typeof moduleName !== "string") {
-		throw new Error("Please set the module name for the MMSocket.");
-	}
-
-	self.moduleName = moduleName;
-
-	self.socket = io("http://localhost:8080");
-	self.socket.on("notification", function(data) {
-		MM.sendNotification(data.notification, data.payload, Socket);
-	});
-
-	return {
-		sendMessage: function(notification, payload, sender) {
-			Log.log("Send socket message: " + notification);
-			self.socket.emit("notification", {
-				notification: notification,
-				sender: sender,
-				payload: payload
-			});
-		}
-	};
-};

js/socketclient.js

@@ -1,40 +1,44 @@
-var MMSocket = function(moduleName) {
-	var self = this;
+/* global io */
 
+const MMSocket = function (moduleName) {
 	if (typeof moduleName !== "string") {
 		throw new Error("Please set the module name for the MMSocket.");
 	}
 
-	self.moduleName = moduleName;
+	this.moduleName = moduleName;
 
 	// Private Methods
-	self.socket = io("/" + self.moduleName);
-	var notificationCallback = function() {};
+	let base = "/";
+	if (typeof config !== "undefined" && typeof config.basePath !== "undefined") {
+		base = config.basePath;
+	}
+	this.socket = io(`/${this.moduleName}`, {
+		path: `${base}socket.io`
+	});
 
-	var onevent = self.socket.onevent;
-	self.socket.onevent = function(packet) {
-		var args = packet.data || [];
-		onevent.call(this, packet);    // original call
+	let notificationCallback = function () {};
+
+	const onevent = this.socket.onevent;
+	this.socket.onevent = (packet) => {
+		const args = packet.data || [];
+		onevent.call(this.socket, packet); // original call
 		packet.data = ["*"].concat(args);
-		onevent.call(this, packet);      // additional call to catch-all
+		onevent.call(this.socket, packet); // additional call to catch-all
 	};
 
 	// register catch all.
-	self.socket.on("*", function(notification, payload) {
+	this.socket.on("*", (notification, payload) => {
 		if (notification !== "*") {
 			notificationCallback(notification, payload);
 		}
 	});
 
 	// Public Methods
-	this.setNotificationCallback = function(callback) {
+	this.setNotificationCallback = (callback) => {
 		notificationCallback = callback;
 	};
 
-	this.sendNotification = function(notification, payload) {
-		if (typeof payload === "undefined") {
-			payload = {};
-		}
-		self.socket.emit(notification, payload);
+	this.sendNotification = (notification, payload = {}) => {
+		this.socket.emit(notification, payload);
 	};
 };

js/translator.js

@@ -1,108 +1,32 @@
-/* exported Translator */
-/* Magic Mirror
- * Translator (l10n)
- *
- * By Christopher Fenner http://github.com/CFenner
- * MIT Licensed.
- */
-var Translator = (function() {
+/* global translations */
 
-	/* loadJSON(file, callback)
+const Translator = (function () {
+
+	/**
 	 * Load a JSON file via XHR.
-	 *
-	 * argument file string - Path of the file we want to load.
-	 * argument callback function - Function called when done.
+	 * @param {string} file Path of the file we want to load.
+	 * @returns {Promise<object>} the translations in the specified file
 	 */
-	function loadJSON(file, callback) {
-		var xhr = new XMLHttpRequest();
-		xhr.overrideMimeType("application/json");
-		xhr.open("GET", file, true);
-		xhr.onreadystatechange = function () {
-			if (xhr.readyState == 4 && xhr.status == "200") {
-				callback(JSON.parse(stripComments(xhr.responseText)));
-			}
-		};
-		xhr.send(null);
-	}
-
-	/* loadJSON(str, options)
-	 * Remove any commenting from a json file so it can be parsed.
-	 *
-	 * argument str string - The string that contains json with comments.
-	 * argument opts function - Strip options.
-	 *
-	 * return the stripped string.
-	 */
-	function stripComments(str, opts) {
-		// strip comments copied from: https://github.com/sindresorhus/strip-json-comments
-
-		var singleComment = 1;
-		var multiComment = 2;
-
-		function stripWithoutWhitespace() {
-			return "";
-		}
-
-		function stripWithWhitespace(str, start, end) {
-			return str.slice(start, end).replace(/\S/g, " ");
-		}
-
-		opts = opts || {};
-
-		var currentChar;
-		var nextChar;
-		var insideString = false;
-		var insideComment = false;
-		var offset = 0;
-		var ret = "";
-		var strip = opts.whitespace === false ? stripWithoutWhitespace : stripWithWhitespace;
-
-		for (var i = 0; i < str.length; i++) {
-			currentChar = str[i];
-			nextChar = str[i + 1];
-
-			if (!insideComment && currentChar === "\"") {
-				var escaped = str[i - 1] === "\\" && str[i - 2] !== "\\";
-				if (!escaped) {
-					insideString = !insideString;
+	async function loadJSON (file) {
+		const xhr = new XMLHttpRequest();
+		return new Promise(function (resolve) {
+			xhr.overrideMimeType("application/json");
+			xhr.open("GET", file, true);
+			xhr.onreadystatechange = function () {
+				if (xhr.readyState === 4 && xhr.status === 200) {
+					// needs error handler try/catch at least
+					let fileInfo = null;
+					try {
+						fileInfo = JSON.parse(xhr.responseText);
+					} catch (exception) {
+						// nothing here, but don't die
+						Log.error(` loading json file =${file} failed`);
+					}
+					resolve(fileInfo);
 				}
-			}
-
-			if (insideString) {
-				continue;
-			}
-
-			if (!insideComment && currentChar + nextChar === "//") {
-				ret += str.slice(offset, i);
-				offset = i;
-				insideComment = singleComment;
-				i++;
-			} else if (insideComment === singleComment && currentChar + nextChar === "\r\n") {
-				i++;
-				insideComment = false;
-				ret += strip(str, offset, i);
-				offset = i;
-				continue;
-			} else if (insideComment === singleComment && currentChar === "\n") {
-				insideComment = false;
-				ret += strip(str, offset, i);
-				offset = i;
-			} else if (!insideComment && currentChar + nextChar === "/*") {
-				ret += str.slice(offset, i);
-				offset = i;
-				insideComment = multiComment;
-				i++;
-				continue;
-			} else if (insideComment === multiComment && currentChar + nextChar === "*/") {
-				i++;
-				insideComment = false;
-				ret += strip(str, offset, i + 1);
-				offset = i + 1;
-				continue;
-			}
-		}
-
-		return ret + (insideComment ? strip(str.substr(offset)) : str.substr(offset));
+			};
+			xhr.send(null);
+		});
 	}
 
 	return {
@@ -111,30 +35,38 @@ var Translator = (function() {
 		translations: {},
 		translationsFallback: {},
 
-		/* translate(module, key, variables)
+		/**
 		 * Load a translation for a given key for a given module.
-		 *
-		 * argument module Module - The module to load the translation for.
-		 * argument key string - The key of the text to translate.
-		 * argument variables - The variables to use within the translation template (optional)
+		 * @param {Module} module The module to load the translation for.
+		 * @param {string} key The key of the text to translate.
+		 * @param {object} variables The variables to use within the translation template (optional)
+		 * @returns {string} the translated key
 		 */
-		translate: function(module, key, variables) {
-			variables = variables || {}; //Empty object by default
+		translate (module, key, variables = {}) {
 
-			// Combines template and variables like:
-			// template: "Please wait for {timeToWait} before continuing with {work}."
-			// variables: {timeToWait: "2 hours", work: "painting"}
-			// to: "Please wait for 2 hours before continuing with painting."
-			function createStringFromTemplate(template, variables) {
-				if(variables.fallback && !template.match(new RegExp("\{.+\}"))) {
-					template = variables.fallback;
+			/**
+			 * Combines template and variables like:
+			 * template: "Please wait for {timeToWait} before continuing with {work}."
+			 * variables: {timeToWait: "2 hours", work: "painting"}
+			 * to: "Please wait for 2 hours before continuing with painting."
+			 * @param {string} template Text with placeholder
+			 * @param {object} variables Variables for the placeholder
+			 * @returns {string} the template filled with the variables
+			 */
+			function createStringFromTemplate (template, variables) {
+				if (Object.prototype.toString.call(template) !== "[object String]") {
+					return template;
 				}
-				return template.replace(new RegExp("\{([^\}]+)\}", "g"), function(_unused, varName){
-					return variables[varName] || "{"+varName+"}";
+				let templateToUse = template;
+				if (variables.fallback && !template.match(new RegExp("{.+}"))) {
+					templateToUse = variables.fallback;
+				}
+				return templateToUse.replace(new RegExp("{([^}]+)}", "g"), function (_unused, varName) {
+					return varName in variables ? variables[varName] : `{${varName}}`;
 				});
 			}
 
-			if(this.translations[module.name] && key in this.translations[module.name]) {
+			if (this.translations[module.name] && key in this.translations[module.name]) {
 				// Log.log("Got translation for " + key + " from module translation: ");
 				return createStringFromTemplate(this.translations[module.name][key], variables);
 			}
@@ -156,70 +88,52 @@ var Translator = (function() {
 
 			return key;
 		},
-		/* load(module, file, callback)
+
+		/**
 		 * Load a translation file (json) and remember the data.
-		 *
-		 * argument module Module - The module to load the translation file for.
-		 * argument file string - Path of the file we want to load.
-		 * argument callback function - Function called when done.
+		 * @param {Module} module The module to load the translation file for.
+		 * @param {string} file Path of the file we want to load.
+		 * @param {boolean} isFallback Flag to indicate fallback translations.
 		 */
-		load: function(module, file, isFallback, callback) {
-			if (!isFallback) {
-				Log.log(module.name + " - Load translation: " + file);
-			} else {
-				Log.log(module.name + " - Load translation fallback: " + file);
+		async load (module, file, isFallback) {
+			Log.log(`${module.name} - Load translation${isFallback ? " fallback" : ""}: ${file}`);
+
+			if (this.translationsFallback[module.name]) {
+				return;
 			}
 
-			var self = this;
-			if(!this.translationsFallback[module.name]) {
-				loadJSON(module.file(file), function(json) {
-					if (!isFallback) {
-						self.translations[module.name] = json;
-					} else {
-						self.translationsFallback[module.name] = json;
-					}
-					callback();
-				});
-			} else {
-				callback();
-			}
+			const json = await loadJSON(module.file(file));
+			const property = isFallback ? "translationsFallback" : "translations";
+			this[property][module.name] = json;
 		},
 
-		/* loadCoreTranslations(lang)
+		/**
 		 * Load the core translations.
-		 *
-		 * argument lang String - The language identifier of the core language.
+		 * @param {string} lang The language identifier of the core language.
 		 */
-		loadCoreTranslations: function(lang) {
-			var self = this;
-
+		async loadCoreTranslations (lang) {
 			if (lang in translations) {
-				Log.log("Loading core translation file: " + translations[lang]);
-				loadJSON(translations[lang], function(translations) {
-					self.coreTranslations = translations;
-				});
+				Log.log(`Loading core translation file: ${translations[lang]}`);
+				this.coreTranslations = await loadJSON(translations[lang]);
 			} else {
 				Log.log("Configured language not found in core translations.");
 			}
 
-			self.loadCoreTranslationsFallback();
+			await this.loadCoreTranslationsFallback();
 		},
 
-		/* loadCoreTranslationsFallback()
-		 * Load the core translations fallback.
+		/**
+		 * Load the core translations' fallback.
 		 * The first language defined in translations.js will be used.
 		 */
-		loadCoreTranslationsFallback: function() {
-			var self = this;
-
-			// The variable `first` will contain the first
-			// defined translation after the following line.
-			for (var first in translations) {break;}
-
-			Log.log("Loading core translation fallback file: " + translations[first]);
-			loadJSON(translations[first], function(translations) {
-				self.coreTranslationsFallback = translations;
-			});
-		},
+		async loadCoreTranslationsFallback () {
+			let first = Object.keys(translations)[0];
+			if (first) {
+				Log.log(`Loading core translation fallback file: ${translations[first]}`);
+				this.coreTranslationsFallback = await loadJSON(translations[first]);
+			}
+		}
 	};
-})();
+}());
+
+window.Translator = Translator;

js/utils.js

@@ -1,19 +1,79 @@
-/* exported Utils */
-/* Magic Mirror
- * Utils
- *
- * By Rodrigo Ramírez Norambuena https://rodrigoramirez.com
- * MIT Licensed.
- */
+const execSync = require("node:child_process").execSync;
+const path = require("node:path");
 
-var colors = require("colors/safe");
+const rootPath = path.resolve(`${__dirname}/../`);
+const Log = require(`${rootPath}/js/logger.js`);
+const os = require("node:os");
+const fs = require("node:fs");
+const si = require("systeminformation");
 
-var Utils = {
-	colors: {
-		warn: colors.yellow,
-		error: colors.red,
-		info: colors.blue
+const modulePositions = []; // will get list from index.html
+const regionRegEx = /"region ([^"]*)/i;
+const indexFileName = "index.html";
+const discoveredPositionsJSFilename = "js/positions.js";
+
+module.exports = {
+
+	async logSystemInformation  () {
+		try {
+			let installedNodeVersion = execSync("node -v", { encoding: "utf-8" }).replace("v", "").replace(/(?:\r\n|\r|\n)/g, "");
+
+			const staticData = await si.get({
+				system: "manufacturer, model, virtual",
+				osInfo: "platform, distro, release, arch",
+				versions: "kernel, node, npm, pm2"
+			});
+			let systemDataString = `System information:
+					### SYSTEM:   manufacturer: ${staticData.system.manufacturer}; model: ${staticData.system.model}; virtual: ${staticData.system.virtual}
+					### OS:       platform: ${staticData.osInfo.platform}; distro: ${staticData.osInfo.distro}; release: ${staticData.osInfo.release}; arch: ${staticData.osInfo.arch}; kernel: ${staticData.versions.kernel}
+					### VERSIONS: electron: ${process.versions.electron}; used node: ${staticData.versions.node}; installed node: ${installedNodeVersion}; npm: ${staticData.versions.npm}; pm2: ${staticData.versions.pm2}
+					### OTHER:    timeZone: ${Intl.DateTimeFormat().resolvedOptions().timeZone}; ELECTRON_ENABLE_GPU: ${process.env.ELECTRON_ENABLE_GPU}`
+				.replace(/\t/g, "");
+			Log.info(systemDataString);
+
+			// Return is currently only for jest
+			return systemDataString;
+		} catch (e) {
+			Log.error(e);
+		}
+	},
+
+	// return all available module positions
+	getAvailableModulePositions () {
+		return modulePositions;
+	},
+
+	// return if position is on modulePositions Array (true/false)
+	moduleHasValidPosition (position) {
+		if (this.getAvailableModulePositions().indexOf(position) === -1) return false;
+		return true;
+	},
+
+	getModulePositions () {
+		// if not already discovered
+		if (modulePositions.length === 0) {
+			// get the lines of the index.html
+			const lines = fs.readFileSync(indexFileName).toString().split("\n");
+			// loop thru the lines
+			lines.forEach((line) => {
+				// run the regex on each line
+				const results = regionRegEx.exec(line);
+				// if the regex returned something
+				if (results && results.length > 0) {
+					// get the position parts and replace space with underscore
+					const positionName = results[1].replace(" ", "_");
+					// add it to the list
+					modulePositions.push(positionName);
+				}
+			});
+			try {
+				fs.writeFileSync(discoveredPositionsJSFilename, `const modulePositions=${JSON.stringify(modulePositions)}`);
+			}
+			catch (error) {
+				console.error("unable to write js/positions.js with the discovered module positions\nmake the MagicMirror/js folder writeable by the user starting MagicMirror");
+			}
+		}
+		// return the list to the caller
+		return modulePositions;
 	}
 };
-
-if (typeof module !== "undefined") {module.exports = Utils;}

jsconfig.json

@@ -6,8 +6,5 @@
 		"module": "commonjs",
 		"allowSyntheticDefaultImports": true
 	},
-	"exclude": [
-		"modules",
-		"node_modules"
-	]
+	"exclude": ["modules", "node_modules"]
 }

module-types.ts

@@ -0,0 +1,34 @@
+type ModuleProperties = {
+  defaults?: object;
+  [key: string]: any;
+  start?(): void;
+  getScripts?(): string[];
+  getStyles?(): string[];
+  getTranslations?(): object;
+  getDom?(): HTMLElement;
+  getHeader?(): string;
+  getTemplate?(): string;
+  getTemplateData?(): object;
+  notificationReceived?(notification: string, payload: any, sender: object): void;
+  nunjucksEnvironment?(): void;
+  socketNotificationReceived?(notification: string, payload: any): void;
+  suspend?(): void;
+  resume?(): void;
+};
+
+export declare const Module: {
+  register(moduleName: string, moduleProperties: ModuleProperties): void;
+};
+
+export declare const Log: {
+  info(message?: any, ...optionalParams: any[]): void;
+  log(message?: any, ...optionalParams: any[]): void;
+  error(message?: any, ...optionalParams: any[]): void;
+  warn(message?: any, ...optionalParams: any[]): void;
+  group(groupTitle?: string, ...optionalParams: any[]): void;
+  groupCollapsed(groupTitle?: string, ...optionalParams: any[]): void;
+  groupEnd(): void;
+  time(timerName?: string): void;
+  timeEnd(timerName?: string): void;
+  timeStamp(timerName?: string): void;
+};

modules/README.md

@@ -1,687 +0,0 @@
-# MagicMirror² Module Development Documentation
-
-This document describes the way to develop your own MagicMirror² modules.
-
-## Module structure
-
-All modules are loaded in the `modules` folder. The default modules are grouped together in the `modules/default` folder. Your module should be placed in a subfolder of `modules`. Note that any file or folder your create in the `modules` folder will be ignored by git, allowing you to upgrade the MagicMirror² without the loss of your files.
-
-A module can be placed in one single folder. Or multiple modules can be grouped in a subfolder. Note that name of the module must be unique. Even when a module with a similar name is placed in a different folder, they can't be loaded at the same time.
-
-### Files
-- **modulename/modulename.js** - This is your core module script.
-- **modulename/node_helper.js** - This is an optional helper that will be loaded by the node script. The node helper and module script can communicate with each other using an intergrated socket system.
-- **modulename/public** - Any files in this folder can be accesed via the browser on `/modulename/filename.ext`.
-- **modulename/anyfileorfolder** Any other file or folder in the module folder can be used by the core module script. For example: *modulename/css/modulename.css* would be a good path for your additional module styles.
-
-## Core module file: modulename.js
-This is the script in which the module will be defined. This script is required in order for the module to be used. In it's most simple form, the core module file must contain:
-````javascript
-Module.register("modulename",{});
-````
-Of course, the above module would not do anything fancy, so it's good to look at one of the simplest modules: **helloworld**:
-
-````javascript
-//helloworld.js:
-
-Module.register("helloworld",{
-	// Default module config.
-	defaults: {
-		text: "Hello World!"
-	},
-
-	// Override dom generator.
-	getDom: function() {
-		var wrapper = document.createElement("div");
-		wrapper.innerHTML = this.config.text;
-		return wrapper;
-	}
-});
-````
-
-As you can see, the `Module.register()` method takes two arguments: the name of the module and an object with the module properties.
-
-### Available module instance properties
-After the module is initialized, the module instance has a few available module properties:
-
-#### `this.name`
-**String**
-
-The name of the module.
-
-#### `this.identifier`
-**String**
-
-This is a unique identifier for the module instance.
-
-#### `this.hidden`
-**Boolean**
-
-This represents if the module is currently hidden (faded away).
-
-#### `this.config`
-**Boolean**
-
-The configuration of the module instance as set in the user's config.js file. This config will also contain the module's defaults if these properties are not over written by the user config.
-
-#### `this.data`
-**Object**
-
-The data object contains additional metadata about the module instance:
-- `data.classes` - The classes which are added to the module dom wrapper.
-- `data.file` - The filename of the core module file.
-- `data.path` - The path of the module folder.
-- `data.header` - The header added to the module.
-- `data.position` - The position in which the instance will be shown.
-
-
-#### `defaults: {}`
-Any properties defined in the defaults object, will be merged with the module config as defined in the user's config.js file. This is the best place to set your modules's configuration defaults. Any of the module configuration properties can be accessed using `this.config.propertyName`, but more about that later.
-
-#### `requiresVersion:`
-
-*Introduced in version: 2.1.0.*
-
-A string that defines the minimum version of the MagicMirror framework. If it is set, the system compares the required version with the users version. If the version of the user is out of date, it won't run the module. Make sure to also set this value in the Node helper.
-
-**Note:** Since this check is introduced in version 2.1.0, this check will not be run in older versions. Keep this in mind if you get issue reports on your module.
-
-Example:
-````javascript
-requiresVersion: "2.1.0",
-````
-
-### Subclassable module methods
-
-#### `init()`
-This method is called when a module gets instantiated. In most cases you do not need to subclass this method.
-
-#### `loaded(callback)`
-
-*Introduced in version: 2.1.1.*
-
-This method is called when a module is loaded. Subsequent modules in the config are not yet loaded. The `callback` function MUST be called when the module is done loading. In most cases you do not need to subclass this method.
-
-**Example:**
-````javascript
-loaded: function(callback) {
-	this.finishLoading();
-	Log.log(this.name + ' is loaded!');
-	callback();
-}
-````
-
-#### `start()`
-This method is called when all modules are loaded an the system is ready to boot up. Keep in mind that the dom object for the module is not yet created. The start method is a perfect place to define any additional module properties:
-
-**Example:**
-````javascript
-start: function() {
-	this.mySpecialProperty = "So much wow!";
-	Log.log(this.name + ' is started!');
-}
-````
-
-#### `getScripts()`
-**Should return: Array**
-
-The getScripts method is called to request any additional scripts that need to be loaded. This method should therefore return an array with strings. If you want to return a full path to a file in the module folder, use the `this.file('filename.js')` method. In all cases the loader will only load a file once. It even checks if the file is available in the default vendor folder.
-
-**Example:**
-````javascript
-getScripts: function() {
-	return [
-		'script.js', // will try to load it from the vendor folder, otherwise it will load is from the module folder.
-		'moment.js', // this file is available in the vendor folder, so it doesn't need to be available in the module folder.
-		this.file('anotherfile.js'), // this file will be loaded straight from the module folder.
-		'https://code.jquery.com/jquery-2.2.3.min.js',  // this file will be loaded from the jquery servers.
-	]
-}
-
-````
-**Note:** If a file can not be loaded, the boot up of the mirror will stall. Therefore it's advised not to use any external urls.
-
-
-#### `getStyles()`
-**Should return: Array**
-
-The getStyles method is called to request any additional stylesheets that need to be loaded. This method should therefore return an array with strings. If you want to return a full path to a file in the module folder, use the `this.file('filename.css')` method. In all cases the loader will only load a file once. It even checks if the file is available in the default vendor folder.
-
-**Example:**
-````javascript
-getStyles: function() {
-	return [
-		'script.css', // will try to load it from the vendor folder, otherwise it will load is from the module folder.
-		'font-awesome.css', // this file is available in the vendor folder, so it doesn't need to be avialable in the module folder.
-		this.file('anotherfile.css'), // this file will be loaded straight from the module folder.
-		'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css',  // this file will be loaded from the bootstrapcdn servers.
-	]
-}
-
-````
-**Note:** If a file can not be loaded, the boot up of the mirror will stall. Therefore it's advised not to use any external urls.
-
-#### `getTranslations()`
-**Should return: Dictionary**
-
-The getTranslations method is called to request translation files that need to be loaded. This method should therefore return a dictionary with the files to load, identified by the country's short name.
-
-If the module does not have any module specific translations, the function can just be omitted or return `false`.
-
-**Example:**
-````javascript
-getTranslations: function() {
-	return {
-			en: "translations/en.json",
-			de: "translations/de.json"
-	}
-}
-
-````
-
-#### `getDom()`
-**Should return:** Dom Object
-
-Whenever the MagicMirror needs to update the information on screen (because it starts, or because your module asked a refresh using `this.updateDom()`), the system calls the getDom method. This method should therefore return a dom object.
-
-**Example:**
-````javascript
-getDom: function() {
-	var wrapper = document.createElement("div");
-	wrapper.innerHTML = 'Hello world!';
-	return wrapper;
-}
-
-````
-
-#### `getHeader()`
-**Should return:** String
-
-Whenever the MagicMirror needs to update the information on screen (because it starts, or because your module asked a refresh using `this.updateDom()`), the system calls the getHeader method to retrieve the module's header. This method should therefor return a string. If this method is not subclassed, this function will return the user's configured header.
-
-If you want to use the original user's configured header, reference `this.data.header`.
-
-**NOTE:** If the user did not configure a default header, no header will be displayed and thus this method will not be called.
-
-**Example:**
-````javascript
-getHeader: function() {
-	return this.data.header + ' Foo Bar';
-}
-
-````
-
-#### `notificationReceived(notification, payload, sender)`
-
-That MagicMirror core has the ability to send notifications to modules. Or even better: the modules have the possibility to send notifications to other modules. When this module is called, it has 3 arguments:
-
-- `notification` - String - The notification identifier.
-- `payload` - AnyType - The payload of a notification.
-- `sender` - Module - The sender of the notification. If this argument is `undefined`, the sender of the notififiction is the core system.
-
-**Example:**
-````javascript
-notificationReceived: function(notification, payload, sender) {
-	if (sender) {
-		Log.log(this.name + " received a module notification: " + notification + " from sender: " + sender.name);
-	} else {
-		Log.log(this.name + " received a system notification: " + notification);
-	}
-}
-````
-
-**Note:** the system sends two notifications when starting up. These notifications could come in handy!
-
-
-- `ALL_MODULES_STARTED` - All modules are started. You can now send notifications to other modules.
-- `DOM_OBJECTS_CREATED` - All dom objects are created. The system is now ready to perform visual changes.
-
-
-#### `socketNotificationReceived: function(notification, payload)`
-When using a node_helper, the node helper can send your module notifications. When this module is called, it has 2 arguments:
-
-- `notification` - String - The notification identifier.
-- `payload` - AnyType - The payload of a notification.
-
-**Note 1:** When a node helper sends a notification, all modules of that module type receive the same notifications. <br>
-**Note 2:** The socket connection is established as soon as the module sends its first message using [sendSocketNotification](thissendsocketnotificationnotification-payload).
-
-**Example:**
-````javascript
-socketNotificationReceived: function(notification, payload) {
-	Log.log(this.name + " received a socket notification: " + notification + " - Payload: " + payload);
-},
-````
-
-#### `suspend()`
-When a module is hidden (using the `module.hide()` method), the `suspend()` method will be called. By subclassing this method you can perform tasks like halting the update timers.
-
-#### `resume()`
-When a module is requested to be shown (using the `module.show()` method), the `resume()` method will be called. By subclassing this method you can perform tasks restarting the update timers.
-
-
-### Module instance methods
-
-Each module instance has some handy methods which can be helpful building your module.
-
-
-#### `this.file(filename)`
-***filename* String** - The name of the file you want to create the path for.<br>
-**Returns String**
-
-If you want to create a path to a file in your module folder, use the `file()` method. It returns the path to the filename given as the attribute. Is method comes in handy when configuring the [getScripts](#getscripts) and [getStyles](#getstyles) methods.
-
-#### `this.updateDom(speed)`
-***speed* Number** - Optional. Animation speed in milliseconds.<br>
-
-Whenever your module need to be updated, call the `updateDom(speed)` method. It requests the MagicMirror core to update its dom object. If you define the speed, the content update will be animated, but only if the content will really change.
-
-As an example: the clock modules calls this method every second:
-
-````javascript
-...
-start: function() {
-	var self = this;
-	setInterval(function() {
-		self.updateDom(); // no speed defined, so it updates instantly.
-	}, 1000); //perform every 1000 milliseconds.
-},
-...
-````
-
-#### `this.sendNotification(notification, payload)`
-***notification* String** - The notification identifier.<br>
-***payload* AnyType** - Optional. A notification payload.<br>
-
-If you want to send a notification to all other modules, use the `sendNotification(notification, payload)`. All other modules will receive the message via the [notificationReceived](#notificationreceivednotification-payload-sender) method. In that case, the sender is automatically set to the instance calling the sendNotification method.
-
-**Example:**
-````javascript
-this.sendNotification('MYMODULE_READY_FOR_ACTION', {foo:bar});
-````
-
-#### `this.sendSocketNotification(notification, payload)`
-***notification* String** - The notification identifier.<br>
-***payload* AnyType** - Optional. A notification payload.<br>
-
-If you want to send a notification to the node_helper, use the `sendSocketNotification(notification, payload)`. Only the node_helper of this module will receive the socket notification.
-
-**Example:**
-````javascript
-this.sendSocketNotification('SET_CONFIG', this.config);
-````
-
-#### `this.hide(speed, callback, options)`
-***speed* Number** - Optional (Required when setting callback or options), The speed of the hide animation in milliseconds.
-***callback* Function** - Optional, The callback after the hide animation is finished.
-***options* Function** - Optional, Object with additional options for the hide action (see below). (*Introduced in version: 2.1.0.*)
-
-To hide a module, you can call the `hide(speed, callback)` method. You can call the hide method on the module instance itself using `this.hide()`, but of course you can also hide another module using `anOtherModule.hide()`.
-
-Possible configurable options:
-
-- `lockString` - String - When setting lock string, the module can not be shown without passing the correct lockstring. This way (multiple) modules can prevent a module from showing. It's considered best practice to use your modules identifier as the locksString: `this.identifier`. See *visibility locking* below.
-
-
-**Note 1:** If the hide animation is canceled, for instance because the show method is called before the hide animation was finished, the callback will not be called.<br>
-**Note 2:** If the hide animation is hijacked (an other method calls hide on the same module), the callback will not be called.<br>
-**Note 3:** If the dom is not yet created, the hide method won't work. Wait for the `DOM_OBJECTS_CREATED` [notification](#notificationreceivednotification-payload-sender).
-
-
-#### `this.show(speed, callback, options)`
-***speed* Number** - Optional (Required when setting callback or options), The speed of the show animation in milliseconds.
-***callback* Function** - Optional, The callback after the show animation is finished.
-***options* Function** - Optional, Object with additional options for the show action (see below). (*Introduced in version: 2.1.0.*)
-
-To show a module, you can call the `show(speed, callback)` method. You can call the show method on the module instance itself using `this.show()`, but of course you can also show another module using `anOtherModule.show()`.
-
-Possible configurable options:
-
-- `lockString` - String - When setting lock string, the module can not be shown without passing the correct lockstring. This way (multiple) modules can prevent a module from showing. See *visibility locking* below.
-- `force` - Boolean - When setting the force tag to `true`, the locking mechanism will be overwritten. Use this option with caution. It's considered best practice to let the usage of the force option be use- configurable. See *visibility locking* below.
-
-**Note 1:** If the show animation is canceled, for instance because the hide method is called before the show animation was finished, the callback will not be called.<br>
-**Note 2:** If the show animation is hijacked (an other method calls show on the same module), the callback will not be called.<br>
-**Note 3:** If the dom is not yet created, the show method won't work. Wait for the `DOM_OBJECTS_CREATED` [notification](#notificationreceivednotification-payload-sender).
-
-#### Visibility locking
-
-(*Introduced in version: 2.1.0.*)
-
-Visiblity locking helps the module system to prevent unwanted hide/show actions. The following scenario explains the concept:
-
-**Module B asks module A to hide:**
-````javascript
-moduleA.hide(0, {lockString: "module_b_identifier"});
-````
-Module A is now hidden, and has an lock array with the following strings:
-````javascript
-moduleA.lockStrings == ["module_b_identifier"]
-moduleA.hidden == true
-````
-**Module C asks module A to hide:**
-````javascript
-moduleA.hide(0, {lockString: "module_c_identifier"});
-````
-Module A is now hidden, and has an lock array with the following strings:
-````javascript
-moduleA.lockStrings == ["module_b_identifier", "module_c_identifier"]
-moduleA.hidden == true
-````
-**Module B asks module A to show:**
-````javascript
-moduleA.show(0, {lockString: "module_b_identifier"});
-````
-The lockString will be removed from moduleA’s locks array, but since there still is an other lock string available, the module remains hidden:
-````javascript
-moduleA.lockStrings == ["module_c_identifier"]
-moduleA.hidden == true
-````
-**Module C asks module A to show:**
-````javascript
-moduleA.show(0, {lockString: "module_c_identifier"});
-````
-The lockString will be removed from moduleA’s locks array, and since this will result in an empty lock array, the module will be visible:
-````javascript
-moduleA.lockStrings == []
-moduleA.hidden == false
-````
-
-**Note:** The locking mechanism can be overwritten by using the force tag:
-````javascript
-moduleA.show(0, {force: true});
-````
-This will reset the lockstring array, and will show the module.
-````javascript
-moduleA.lockStrings == []
-moduleA.hidden == false
-````
-
-Use this `force` method with caution. See `show()` method for more information.
-
-
-
-#### `this.translate(identifier)`
-***identifier* String** - Identifier of the string that should be translated.
-
-The Magic Mirror contains a convenience wrapper for `l18n`. You can use this to automatically serve different translations for your modules based on the user's `language` configuration.
-
-If no translation is found, a fallback will be used. The fallback sequence is as follows:
-- 1. Translation as defined in module translation file of the user's preferred language.
-- 2. Translation as defined in core translation file of the user's preferred language.
-- 3. Translation as defined in module translation file of the fallback language (the first defined module translation file).
-- 4. Translation as defined in core translation file of the fallback language (the first defined core translation file).
-- 5. The key (identifier) of the translation.
-
-When adding translations to your module, it's a good idea to see if an apropriate translation is already available in the [core translation files](https://github.com/MichMich/MagicMirror/tree/master/translations). This way, your module can benefit from the existing translations.
-
-**Example:**
-````javascript
-this.translate("INFO") //Will return a translated string for the identifier INFO
-````
-
-**Example json file:**
-````javascript
-{
-  "INFO": "Really important information!"
-}
-````
-
-**Note:** although comments are officially not supported in JSON files, MagicMirror allows it by stripping the comments before parsing the JSON file. Comments in translation files could help other translators.
-
-##### `this.translate(identifier, variables)`
-***identifier* String** - Identifier of the string that should be translated.
-***variables* Object** - Object of variables to be used in translation.
-
-This improved and backwards compatible way to handle translations behaves like the normal translation function and follows the rules described above. It's recommended to use this new format for translating everywhere. It allows translator to change the word order in the sentence to be translated.
-
-
-**Example:**
-````javascript
-var timeUntilEnd = moment(event.endDate, "x").fromNow(true);
-this.translate("RUNNING", { "timeUntilEnd": timeUntilEnd) }); // Will return a translated string for the identifier RUNNING, replacing `{timeUntilEnd}` with the contents of the variable `timeUntilEnd` in the order that translator intended.
-````
-
-**Example English .json file:**
-````javascript
-{
-	"RUNNING": "Ends in {timeUntilEnd}",
-}
-````
-
-**Example Finnish .json file:**
-````javascript
-{
-	"RUNNING": "Päättyy {timeUntilEnd} päästä",
-}
-````
-
-**Note:** The *variables* Object has an special case called `fallback`. It's used to support old translations in translation files that do not have the variables in them. If you are upgrading an old module that had translations that did not support the word order, it is recommended to have the fallback layout.
-
-**Example:**
-````javascript
-var timeUntilEnd = moment(event.endDate, "x").fromNow(true);
-this.translate("RUNNING", {
-	"fallback": this.translate("RUNNING") + " {timeUntilEnd}"
-	"timeUntilEnd": timeUntilEnd
-)}); // Will return a translated string for the identifier RUNNING, replacing `{timeUntilEnd}` with the contents of the variable `timeUntilEnd` in the order that translator intended. (has a fallback)
-````
-
-**Example swedish .json file that does not have the variable in it:**
-````javascript
-{
-	"RUNNING": "Slutar",
-}
-````
-In this case the `translate`-function will not find any variables in the translation, will look for `fallback` variable and use that if possible to create the translation.
-
-## The Node Helper: node_helper.js
-
-The node helper is a Node.js script that is able to do some backend task to support your module. For every module type, only one node helper instance will be created. For example: if your MagicMirror uses two calendar modules, there will be only one calendar node helper instantiated.
-
-**Note:** Because there is only one node helper per module type, there is no default config available within your module. It's your task to send the desired config from your module to your node helper.
-
-In it's most simple form, the node_helper.js file must contain:
-
-````javascript
-var NodeHelper = require("node_helper");
-module.exports = NodeHelper.create({});
-````
-
-Of course, the above helper would not do anything useful. So with the information above, you should be able to make it a bit more sophisticated.
-
-### Available module instance properties
-
-#### `this.name`
-**String**
-
-The name of the module
-
-#### `this.path`
-**String**
-
-The path of the module
-
-#### `this.expressApp`
-**Express App Instance**
-
-This is a link to the express instance. It will allow you to define extra routes.
-
-**Example:**
-````javascript
-start: function() {
-	this.expressApp.get('/foobar', function (req, res) {
-		res.send('GET request to /foobar');
-	});
-}
-````
-
-**Note:** By default, a public path to your module's public folder will be created:
-````javascript
-this.expressApp.use("/" + this.name, express.static(this.path + "/public"));
-````
-
-#### `this.io`
-**Socket IO Instance**
-
-This is a link to the IO instance. It will allow you to do some Socket.IO magic. In most cases you won't need this, since the Node Helper has a few convenience methods to make this simple.
-
-
-#### `requiresVersion:`
-*Introduced in version: 2.1.0.*
-
-A string that defines the minimum version of the MagicMirror framework. If it is set, the system compares the required version with the users version. If the version of the user is out of date, it won't run the module.
-
-**Note:** Since this check is introduced in version 2.1.0, this check will not be run in older versions. Keep this in mind if you get issue reports on your module.
-
-Example:
-````javascript
-requiresVersion: "2.1.0",
-````
-
-### Subclassable module methods
-
-#### `init()`
-This method is called when a node helper gets instantiated. In most cases you do not need to subclass this method.
-
-#### `start()`
-This method is called when all node helpers are loaded and the system is ready to boot up. The start method is a perfect place to define any additional module properties:
-
-**Example:**
-````javascript
-start: function() {
-	this.mySpecialProperty = "So much wow!";
-	Log.log(this.name + ' is started!');
-}
-````
-
-#### `socketNotificationReceived: function(notification, payload)`
-With this method, your node helper can receive notifications from your modules. When this method is called, it has 2 arguments:
-
-- `notification` - String - The notification identifier.
-- `payload` - AnyType - The payload of a notification.
-
-**Note:** The socket connection is established as soon as the module sends its first message using [sendSocketNotification](thissendsocketnotificationnotification-payload).
-
-**Example:**
-````javascript
-socketNotificationReceived: function(notification, payload) {
-	Log.log(this.name + " received a socket notification: " + notification + " - Payload: " + payload);
-},
-````
-
-### Module instance methods
-
-Each node helper has some handy methods which can be helpful building your module.
-
-#### `this.sendSocketNotification(notification, payload)`
-***notification* String** - The notification identifier.<br>
-***payload* AnyType** - Optional. A notification payload.<br>
-
-If you want to send a notification to all your modules, use the `sendSocketNotification(notification, payload)`. Only the module of your module type will receive the socket notification.
-
-**Note:** Since all instances of your module will receive the notifications, it's your task to make sure the right module responds to your messages.
-
-**Example:**
-````javascript
-this.sendSocketNotification('SET_CONFIG', this.config);
-````
-
-## MagicMirror Helper Methods
-
-The core Magic Mirror object: `MM` has some handy method that will help you in controlling your and other modules. Most of the `MM` methods are available via convenience methods on the Module instance.
-
-### Module selection
-The only additional method available for your module, is the feature to retrieve references to other modules. This can be used to hide and show other modules.
-
-#### `MM.getModules()`
-**Returns Array** - An array with module instances.<br>
-
-To make a selection of all currently loaded module instances, run the `MM.getModules()` method. It will return an array with all currently loaded module instances. The returned array has a lot of filtering methods. See below for more info.
-
-**Note:** This method returns an empty array if not all modules are started yet. Wait for the `ALL_MODULES_STARTED` [notification](#notificationreceivednotification-payload-sender).
-
-
-##### `.withClass(classnames)`
-***classnames* String or Array** - The class names on which you want to filter.
-**Returns Array** - An array with module instances.<br>
-
-If you want to make a selection based on one or more class names, use the withClass method on a result of the `MM.getModules()` method. The argument of the `withClass(classname)` method can be an array, or space separated string.
-
-**Examples:**
-````javascript
-var modules = MM.getModules().withClass('classname');
-var modules = MM.getModules().withClass('classname1 classname2');
-var modules = MM.getModules().withClass(['classname1','classname2']);
-````
-
-##### `.exceptWithClass(classnames)`
-***classnames* String or Array** - The class names of the modules you want to remove from the results.
-**Returns Array** - An array with module instances.<br>
-
-If you to remove some modules from a selection based on a classname, use the exceptWithClass method on a result of the `MM.getModules()` method. The argument of the `exceptWithClass(classname)` method can be an array, or space separated string.
-
-**Examples:**
-````javascript
-var modules = MM.getModules().exceptWithClass('classname');
-var modules = MM.getModules().exceptWithClass('classname1 classname2');
-var modules = MM.getModules().exceptWithClass(['classname1','classname2']);
-````
-
-##### `.exceptModule(module)`
-***module* Module Object** - The reference to a module you want to remove from the results.
-**Returns Array** - An array with module instances.<br>
-
-If you to remove a specific module instance from a selection based on a classname, use the exceptWithClass method on a result of the `MM.getModules()` method. This can be helpful if you want to select all module instances except the instance of your module.
-
-**Examples:**
-````javascript
-var modules = MM.getModules().exceptModule(this);
-````
-
-Of course, you can combine all of the above filters:
-
-**Example:**
-````javascript
-var modules = MM.getModules().withClass('classname1').exceptwithClass('classname2').exceptModule(aModule);
-````
-
-##### `.enumerate(callback)`
-***callback* Function(module)** - The callback run on every instance.
-
-If you want to perform an action on all selected modules, you can use the `enumerate` function:
-
-````javascript
-MM.getModules().enumerate(function(module) {
-    Log.log(module.name);
-});
-````
-
-**Example:**
-To hide all modules except the your module instance, you could write something like:
-````javascript
-Module.register("modulename",{
-	//...
-	notificationReceived: function(notification, payload, sender) {
-		if (notification === 'DOM_OBJECTS_CREATED') {
-			MM.getModules().exceptModule(this).enumerate(function(module) {
-				module.hide(1000, function() {
-					//Module hidden.
-				});
-			});
-		}
-	},
-	//...
-});
-````
-
-## MagicMirror Logger
-
-The Magic Mirror contains a convenience wrapper for logging. Currently, this logger is a simple proxy to the original `console.log` methods. But it might get additional features in the future. The Loggers is currently only available in the core module file (not in the node_helper).
-
-**Examples:**
-````javascript
-Log.info('error');
-Log.log('log');
-Log.error('info');
-````

modules/default/alert/README.md

@@ -1,64 +1,5 @@
 # Module: Alert
-The alert module is one of the default modules of the MagicMirror. This module displays notifications from other modules.
 
-## Usage
-To use this module, add it to the modules array in the config/config.js file:
+The alert module is one of the default modules of the MagicMirror². This module displays notifications from other modules.
 
-```
-modules: [
-	{
-		module: "alert",
-		config: {
-			// The config property is optional.
-			// See 'Configuration options' for more information.
-		}
-	}
-]
-```
-
-## Configuration options
-
-The following properties can be configured:
-
-
-| Option            | Description
-| ----------------- | -----------
-| `effect`          | The animation effect to use for notifications. <br><br> **Possible values:** `scale` `slide` `genie` `jelly` `flip` `exploader` `bouncyflip` <br> **Default value:** `slide`
-| `alert_effect`    | The animation effect to use for alerts. <br><br> **Possible values:** `scale` `slide` `genie` `jelly` `flip` `exploader` `bouncyflip` <br> **Default value:** `jelly`
-| `display_time`    | Time a notification is displayed in milliseconds. <br><br> **Possible values:** `int` <br> **Default value:** `3500`
-| `position`        | Position where the notifications should be displayed. <br><br> **Possible values:** `left` `center` `right` <br> **Default value:** `center`
-| `welcome_message` | Message shown at startup. <br><br> **Possible values:** `string` `false` <br> **Default value:** `false` (no message at startup)
-
-
-## Developer notes
-For notifications use:
-
-```
-self.sendNotification("SHOW_ALERT", {type: "notification"});
-```
-For alerts use:
-
-```
-self.sendNotification("SHOW_ALERT", {});
-```
-
-### Notification params
-| Option    | Description
-| --------- | -----------
-| `title`   | The title of the notification. <br><br> **Possible values:** `text` or `html`
-| `message`	| The message of the notification. <br><br> **Possible values:** `text` or `html`
-
-
-### Alert params
-| Option                                          | Description
-| ----------------------------------------------- | -----------
-| `title`                                         | The title of the alert. <br><br> **Possible values:** `text` or `html`
-| `message`                                       | The message of the alert. <br><br> **Possible values:** `text` or `html`
-| `imageUrl` (optional)                           | Image to show in the alert <br><br> **Possible values:** `url` `path` <br> **Default value:** `none`
-| `imageFA` (optional)                            | Font Awesome icon to show in the alert <br><br> **Possible values:** See [Font Awsome](http://fontawesome.io/icons/) website. <br> **Default value:** `none`
-| `imageHeight` (optional even with imageUrl set) | Height of the image <br><br> **Possible values:** `intpx` <br> **Default value:** `80px`
-| `timer` (optional)                              | How long the alert should stay visible in ms. <br> **Important:** If you do not use the `timer`, it is your duty to hide the alert by using `self.sendNotification("HIDE_ALERT");`! <br><br>**Possible values:** `int` `float` <br> **Default value:** `none`
-
-## Open Source Licenses
-###[NotificationStyles](https://github.com/codrops/NotificationStyles)
-See [ympanus.net](http://tympanus.net/codrops/licensing/) for license.
+For configuration options, please check the [MagicMirror² documentation](https://docs.magicmirror.builders/modules/alert.html).

modules/default/alert/alert.js

@@ -1,154 +1,142 @@
-/* global Module */
+/* global NotificationFx */
 
-/* Magic Mirror
- * Module: alert
- *
- * By Paul-Vincent Roll http://paulvincentroll.com
- * MIT Licensed.
- */
+Module.register("alert", {
+	alerts: {},
 
-Module.register("alert",{
 	defaults: {
-		// scale|slide|genie|jelly|flip|bouncyflip|exploader
-		effect: "slide",
-		// scale|slide|genie|jelly|flip|bouncyflip|exploader
-		alert_effect: "jelly",
-		//time a notification is displayed in seconds
-		display_time: 3500,
-		//Position
+		effect: "slide", // scale|slide|genie|jelly|flip|bouncyflip|exploader
+		alert_effect: "jelly", // scale|slide|genie|jelly|flip|bouncyflip|exploader
+		display_time: 3500, // time a notification is displayed in seconds
 		position: "center",
-		//shown at startup
-		welcome_message: false,
+		welcome_message: false // shown at startup
 	},
-	getScripts: function() {
-		return ["classie.js", "modernizr.custom.js", "notificationFx.js"];
+
+	getScripts () {
+		return ["notificationFx.js"];
 	},
-	getStyles: function() {
-		return ["ns-default.css"];
+
+	getStyles () {
+		return ["font-awesome.css", this.file("./styles/notificationFx.css"), this.file(`./styles/${this.config.position}.css`)];
 	},
-	// Define required translations.
-	getTranslations: function() {
+
+	getTranslations () {
 		return {
-			en: "translations/en.json",
+			bg: "translations/bg.json",
+			da: "translations/da.json",
 			de: "translations/de.json",
+			en: "translations/en.json",
+			eo: "translations/eo.json",
+			es: "translations/es.json",
+			fr: "translations/fr.json",
+			hu: "translations/hu.json",
 			nl: "translations/nl.json",
+			ru: "translations/ru.json",
+			th: "translations/th.json"
 		};
 	},
-	show_notification: function(message) {
-		if (this.config.effect == "slide") {this.config.effect = this.config.effect + "-" + this.config.position;}
-		msg = "";
-		if (message.title) {
-			msg += "<span class='thin' style='line-height: 35px; font-size:24px' color='#4A4A4A'>" + message.title + "</span>";
-		}
-		if (message.message){
-			if (msg != ""){
-				msg+= "<br />";
-			}
-			msg += "<span class='light' style='font-size:28px;line-height: 30px;'>" + message.message + "</span>";
-		}
 
-		new NotificationFx({
-			message: msg,
-			layout: "growl",
-			effect: this.config.effect,
-			ttl: this.config.display_time
-		}).show();
+	getTemplate (type) {
+		return `templates/${type}.njk`;
 	},
-	show_alert: function(params, sender) {
-		var self = this;
-		//Set standard params if not provided by module
-		if (typeof params.timer === "undefined") { params.timer = null; }
-		if (typeof params.imageHeight === "undefined") { params.imageHeight = "80px"; }
-		if (typeof params.imageUrl === "undefined" && typeof params.imageFA === "undefined") {
-			params.imageUrl = null;
-			image = "";
-		} else if (typeof params.imageFA === "undefined"){
-			image = "<img src='" + (params.imageUrl).toString() + "' height=" + (params.imageHeight).toString() + " style='margin-bottom: 10px;'/><br />";
-		} else if (typeof params.imageUrl === "undefined"){
-			image = "<span class='" + "fa fa-" + params.imageFA + "' style='margin-bottom: 10px;color: #fff;font-size:" + (params.imageHeight).toString() + ";'/></span><br />";
-		}
-		//Create overlay
-		var overlay = document.createElement("div");
-		overlay.id = "overlay";
-		overlay.innerHTML += "<div class=\"black_overlay\"></div>";
-		document.body.insertBefore(overlay, document.body.firstChild);
 
-		//If module already has an open alert close it
-		if (this.alerts[sender.name]) {
-			this.hide_alert(sender);
+	async start () {
+		Log.info(`Starting module: ${this.name}`);
+
+		if (this.config.effect === "slide") {
+			this.config.effect = `${this.config.effect}-${this.config.position}`;
 		}
 
-		//Display title and message only if they are provided in notification parameters
-		message ="";
-		if (params.title) {
-			message += "<span class='light' style='line-height: 35px; font-size:30px' color='#4A4A4A'>" + params.title + "</span>"
+		if (this.config.welcome_message) {
+			const message = this.config.welcome_message === true ? this.translate("welcome") : this.config.welcome_message;
+			await this.showNotification({ title: this.translate("sysTitle"), message });
 		}
-		if (params.message) {
-			if (message != ""){
-				message += "<br />";
-			}
-
-			message += "<span class='thin' style='font-size:22px;line-height: 30px;'>" + params.message + "</span>";
-		}
-
-		//Store alert in this.alerts
-		this.alerts[sender.name] = new NotificationFx({
-			message: image + message,
-			effect: this.config.alert_effect,
-			ttl: params.timer,
-			al_no: "ns-alert"
-		});
-		//Show alert
-		this.alerts[sender.name].show();
-		//Add timer to dismiss alert and overlay
-		if (params.timer) {
-			setTimeout(function() {
-				self.hide_alert(sender);
-			}, params.timer);
-		}
-
 	},
-	hide_alert: function(sender) {
-		//Dismiss alert and remove from this.alerts
-		this.alerts[sender.name].dismiss();
-		this.alerts[sender.name] = null;
-		//Remove overlay
-		var overlay = document.getElementById("overlay");
-		overlay.parentNode.removeChild(overlay);
-	},
-	setPosition: function(pos) {
-		//Add css to body depending on the set position for notifications
-		var sheet = document.createElement("style");
-		if (pos == "center") {sheet.innerHTML = ".ns-box {margin-left: auto; margin-right: auto;text-align: center;}";}
-		if (pos == "right") {sheet.innerHTML = ".ns-box {margin-left: auto;text-align: right;}";}
-		if (pos == "left") {sheet.innerHTML = ".ns-box {margin-right: auto;text-align: left;}";}
-		document.body.appendChild(sheet);
 
-	},
-	notificationReceived: function(notification, payload, sender) {
+	notificationReceived (notification, payload, sender) {
 		if (notification === "SHOW_ALERT") {
-			if (typeof payload.type === "undefined") { payload.type = "alert"; }
-			if (payload.type == "alert") {
-				this.show_alert(payload, sender);
-			} else if (payload.type = "notification") {
-				this.show_notification(payload);
+			if (payload.type === "notification") {
+				this.showNotification(payload);
+			} else {
+				this.showAlert(payload, sender);
 			}
 		} else if (notification === "HIDE_ALERT") {
-			this.hide_alert(sender);
+			this.hideAlert(sender);
 		}
 	},
-	start: function() {
-		this.alerts = {};
-		this.setPosition(this.config.position);
-		if (this.config.welcome_message) {
-			if (this.config.welcome_message == true){
-				this.show_notification({title: this.translate("sysTitle"), message: this.translate("welcome")});
-			}
-			else{
-				this.show_notification({title: this.translate("sysTitle"), message: this.config.welcome_message});
+
+	async showNotification (notification) {
+		const message = await this.renderMessage(notification.templateName || "notification", notification);
+
+		new NotificationFx({
+			message,
+			layout: "growl",
+			effect: this.config.effect,
+			ttl: notification.timer || this.config.display_time
+		}).show();
+	},
+
+	async showAlert (alert, sender) {
+		// If module already has an open alert close it
+		if (this.alerts[sender.name]) {
+			this.hideAlert(sender, false);
+		}
+
+		// Add overlay
+		if (!Object.keys(this.alerts).length) {
+			this.toggleBlur(true);
+		}
+
+		const message = await this.renderMessage(alert.templateName || "alert", alert);
+
+		// Store alert in this.alerts
+		this.alerts[sender.name] = new NotificationFx({
+			message,
+			effect: this.config.alert_effect,
+			ttl: alert.timer,
+			onClose: () => this.hideAlert(sender),
+			al_no: "ns-alert"
+		});
+
+		// Show alert
+		this.alerts[sender.name].show();
+
+		// Add timer to dismiss alert and overlay
+		if (alert.timer) {
+			setTimeout(() => {
+				this.hideAlert(sender);
+			}, alert.timer);
+		}
+	},
+
+	hideAlert (sender, close = true) {
+		// Dismiss alert and remove from this.alerts
+		if (this.alerts[sender.name]) {
+			this.alerts[sender.name].dismiss(close);
+			delete this.alerts[sender.name];
+			// Remove overlay
+			if (!Object.keys(this.alerts).length) {
+				this.toggleBlur(false);
 			}
 		}
-		Log.info("Starting module: " + this.name);
-	}
+	},
 
+	renderMessage (type, data) {
+		return new Promise((resolve) => {
+			this.nunjucksEnvironment().render(this.getTemplate(type), data, function (err, res) {
+				if (err) {
+					Log.error("Failed to render alert", err);
+				}
+
+				resolve(res);
+			});
+		});
+	},
+
+	toggleBlur (add = false) {
+		const method = add ? "add" : "remove";
+		const modules = document.querySelectorAll(".module");
+		for (const module of modules) {
+			module.classList[method]("alert-blur");
+		}
+	}
 });

modules/default/alert/classie.js

@@ -1,79 +0,0 @@
-/*!
- * classie - class helper functions
- * from bonzo https://github.com/ded/bonzo
- *
- * classie.has( elem, 'my-class' ) -> true/false
- * classie.add( elem, 'my-new-class' )
- * classie.remove( elem, 'my-unwanted-class' )
- * classie.toggle( elem, 'my-class' )
- */
-// jscs:disable
-/*jshint browser: true, strict: true, undef: true */
-/*global define: false */
-
-(function(window) {
-
-"use strict";
-
-// class helper functions from bonzo https://github.com/ded/bonzo
-
-function classReg(className) {
-	return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
-}
-
-// classList support for class management
-// altho to be fair, the api sucks because it won't accept multiple classes at once
-var hasClass, addClass, removeClass;
-
-if ("classList" in document.documentElement) {
-	hasClass = function(elem, c) {
-		return elem.classList.contains(c);
-	};
-	addClass = function(elem, c) {
-		elem.classList.add(c);
-	};
-	removeClass = function(elem, c) {
-		elem.classList.remove(c);
-	};
-} else {
-	hasClass = function(elem, c) {
-		return classReg(c).test(elem.className);
-	};
-	addClass = function(elem, c) {
-		if (!hasClass(elem, c)) {
-			elem.className = elem.className + " " + c;
-		}
-	};
-	removeClass = function(elem, c) {
-		elem.className = elem.className.replace(classReg(c), " ");
-	};
-}
-
-function toggleClass(elem, c) {
-	var fn = hasClass(elem, c) ? removeClass : addClass;
-	fn(elem, c);
-}
-
-var classie = {
-	// full names
-	hasClass: hasClass,
-	addClass: addClass,
-	removeClass: removeClass,
-	toggleClass: toggleClass,
-	// short names
-	has: hasClass,
-	add: addClass,
-	remove: removeClass,
-	toggle: toggleClass
-};
-
-// transport
-if (typeof define === "function" && define.amd) {
-	// AMD
-	define(classie);
-} else {
-	// browser global
-	window.classie = classie;
-}
-
-})(window);

modules/default/alert/notificationFx.js

@@ -1,34 +1,26 @@
 /**
+ * Based on work by
+ *
  * notificationFx.js v1.0.0
- * http://www.codrops.com
+ * https://tympanus.net/codrops/
  *
  * Licensed under the MIT license.
- * http://www.opensource.org/licenses/mit-license.php
+ * https://opensource.org/licenses/mit-license.php
  *
  * Copyright 2014, Codrops
- * http://www.codrops.com
+ * https://tympanus.net/codrops/
+ * @param {object} window The window object
  */
-// jscs:disable
-;(function(window) {
-
-	"use strict";
-
-	var docElem = window.document.documentElement,
-		support = {animations: Modernizr.cssanimations},
-		animEndEventNames = {
-			"WebkitAnimation": "webkitAnimationEnd",
-			"OAnimation": "oAnimationEnd",
-			"msAnimation": "MSAnimationEnd",
-			"animation": "animationend"
-		},
-		// animation end event name
-		animEndEventName = animEndEventNames[ Modernizr.prefixed("animation") ];
+(function (window) {
 
 	/**
-	 * extend obj function
+	 * Extend one object with another one
+	 * @param {object} a The object to extend
+	 * @param {object} b The object which extends the other, overwrites existing keys
+	 * @returns {object} The merged object
 	 */
-	function extend(a, b) {
-		for (var key in b) {
+	function extend (a, b) {
+		for (let key in b) {
 			if (b.hasOwnProperty(key)) {
 				a[key] = b[key];
 			}
@@ -37,9 +29,11 @@
 	}
 
 	/**
-	 * NotificationFx function
+	 * NotificationFx constructor
+	 * @param {object} options The configuration options
+	 * @class
 	 */
-	function NotificationFx(options) {
+	function NotificationFx (options) {
 		this.options = extend({}, this.options);
 		extend(this.options, options);
 		this._init();
@@ -70,19 +64,22 @@
 		ttl: 6000,
 		al_no: "ns-box",
 		// callbacks
-		onClose: function() { return false; },
-		onOpen: function() { return false; }
+		onClose () {
+			return false;
+		},
+		onOpen () {
+			return false;
+		}
 	};
 
 	/**
-	 * init function
-	 * initialize and cache some vars
+	 * Initialize and cache some vars
 	 */
-	NotificationFx.prototype._init = function() {
+	NotificationFx.prototype._init = function () {
 		// create HTML structure
 		this.ntf = document.createElement("div");
-		this.ntf.className = this.options.al_no +  " ns-" + this.options.layout + " ns-effect-" + this.options.effect + " ns-type-" + this.options.type;
-		var strinner = "<div class=\"ns-box-inner\">";
+		this.ntf.className = `${this.options.al_no} ns-${this.options.layout} ns-effect-${this.options.effect} ns-type-${this.options.type}`;
+		let strinner = "<div class=\"ns-box-inner\">";
 		strinner += this.options.message;
 		strinner += "</div>";
 		this.ntf.innerHTML = strinner;
@@ -91,13 +88,12 @@
 		this.options.wrapper.insertBefore(this.ntf, this.options.wrapper.nextSibling);
 
 		// dismiss after [options.ttl]ms
-		var self = this;
 		if (this.options.ttl) {
-			this.dismissttl = setTimeout(function() {
-			if (self.active) {
-				self.dismiss();
-			}
-		}, this.options.ttl);
+			this.dismissttl = setTimeout(() => {
+				if (this.active) {
+					this.dismiss();
+				}
+			}, this.options.ttl);
 		}
 
 		// init events
@@ -105,61 +101,57 @@
 	};
 
 	/**
-	 * init events
+	 * Init events
 	 */
-	NotificationFx.prototype._initEvents = function() {
-		var self = this;
+	NotificationFx.prototype._initEvents = function () {
 		// dismiss notification by tapping on it if someone has a touchscreen
-		this.ntf.querySelector(".ns-box-inner").addEventListener("click", function() { self.dismiss(); });
+		this.ntf.querySelector(".ns-box-inner").addEventListener("click", () => {
+			this.dismiss();
+		});
 	};
 
 	/**
-	 * show the notification
+	 * Show the notification
 	 */
-	NotificationFx.prototype.show = function() {
+	NotificationFx.prototype.show = function () {
 		this.active = true;
-		classie.remove(this.ntf, "ns-hide");
-		classie.add(this.ntf, "ns-show");
+		this.ntf.classList.remove("ns-hide");
+		this.ntf.classList.add("ns-show");
 		this.options.onOpen();
 	};
 
 	/**
-	 * dismiss the notification
+	 * Dismiss the notification
+	 * @param {boolean} [close] call the onClose callback at the end
 	 */
-	NotificationFx.prototype.dismiss = function() {
-		var self = this;
+	NotificationFx.prototype.dismiss = function (close = true) {
 		this.active = false;
 		clearTimeout(this.dismissttl);
-		classie.remove(this.ntf, "ns-show");
-		setTimeout(function() {
-			classie.add(self.ntf, "ns-hide");
+		this.ntf.classList.remove("ns-show");
+		setTimeout(() => {
+			this.ntf.classList.add("ns-hide");
 
 			// callback
-			self.options.onClose();
+			if (close) this.options.onClose();
 		}, 25);
 
 		// after animation ends remove ntf from the DOM
-		var onEndAnimationFn = function(ev) {
-			if (support.animations) {
-				if (ev.target !== self.ntf) return false;
-				this.removeEventListener(animEndEventName, onEndAnimationFn);
+		const onEndAnimationFn = (ev) => {
+			if (ev.target !== this.ntf) {
+				return false;
 			}
+			this.ntf.removeEventListener("animationend", onEndAnimationFn);
 
-			if (this.parentNode === self.options.wrapper) {
-				self.options.wrapper.removeChild(this);
+			if (ev.target.parentNode === this.options.wrapper) {
+				this.options.wrapper.removeChild(this.ntf);
 			}
 		};
 
-		if (support.animations) {
-			this.ntf.addEventListener(animEndEventName, onEndAnimationFn);
-		} else {
-			onEndAnimationFn();
-		}
+		this.ntf.addEventListener("animationend", onEndAnimationFn);
 	};
 
 	/**
-	 * add to global namespace
+	 * Add to global namespace
 	 */
 	window.NotificationFx = NotificationFx;
-
-})(window);
+}(window));

modules/default/alert/styles/center.css

@@ -0,0 +1,5 @@
+.ns-box {
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}

modules/default/alert/styles/left.css

@@ -0,0 +1,4 @@
+.ns-box {
+  margin-right: auto;
+  text-align: left;
+}

modules/default/alert/styles/notificationFx.css

@@ -0,0 +1,929 @@
+/* Based on work by https://tympanus.net/codrops/licensing/ */
+
+.ns-box {
+  background-color: rgb(0 0 0 / 93%);
+  padding: 17px;
+  line-height: 1.4;
+  margin-bottom: 10px;
+  z-index: 1;
+  font-size: 70%;
+  position: relative;
+  display: table;
+  word-wrap: break-word;
+  max-width: 100%;
+  border-width: 1px;
+  border-radius: 5px;
+  border-style: solid;
+  border-color: var(--color-text-dimmed);
+}
+
+.ns-alert {
+  border-style: solid;
+  border-color: var(--color-text-bright);
+  padding: 17px;
+  line-height: 1.4;
+  margin-bottom: 10px;
+  z-index: 3;
+  color: var(--color-text-bright);
+  font-size: 70%;
+  position: fixed;
+  text-align: center;
+  right: 0;
+  left: 0;
+  margin-right: auto;
+  margin-left: auto;
+  top: 40%;
+  width: 40%;
+  height: auto;
+  word-wrap: break-word;
+  border-radius: 20px;
+}
+
+.alert-blur {
+  filter: blur(2px) brightness(50%);
+}
+
+[class^="ns-effect-"].ns-growl.ns-hide,
+[class*=" ns-effect-"].ns-growl.ns-hide {
+  animation-direction: reverse;
+}
+
+.ns-effect-flip {
+  transform-origin: 50% 100%;
+  backface-visibility: hidden;
+}
+
+.ns-effect-flip.ns-show,
+.ns-effect-flip.ns-hide {
+  animation-name: anim-flip-front;
+  animation-duration: 0.3s;
+}
+
+.ns-effect-flip.ns-hide {
+  animation-name: anim-flip-back;
+}
+
+@keyframes anim-flip-front {
+  0% {
+    transform: perspective(1000px) rotate3d(1, 0, 0, -90deg);
+  }
+
+  100% {
+    transform: perspective(1000px);
+  }
+}
+
+@keyframes anim-flip-back {
+  0% {
+    transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
+  }
+
+  100% {
+    transform: perspective(1000px);
+  }
+}
+
+.ns-effect-bouncyflip.ns-show,
+.ns-effect-bouncyflip.ns-hide {
+  animation-name: flip-in-x;
+  animation-duration: 0.8s;
+}
+
+@keyframes flip-in-x {
+  0% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
+    transition-timing-function: ease-in;
+  }
+
+  40% {
+    transform: perspective(400px) rotate3d(1, 0, 0, 20deg);
+    transition-timing-function: ease-out;
+  }
+
+  60% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -10deg);
+    transition-timing-function: ease-in;
+    opacity: 1;
+  }
+
+  80% {
+    transform: perspective(400px) rotate3d(1, 0, 0, 5deg);
+    transition-timing-function: ease-out;
+  }
+
+  100% {
+    transform: perspective(400px);
+  }
+}
+
+.ns-effect-bouncyflip.ns-hide {
+  animation-name: flip-in-x-simple;
+  animation-duration: 0.3s;
+}
+
+@keyframes flip-in-x-simple {
+  0% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
+    transition-timing-function: ease-in;
+  }
+
+  100% {
+    transform: perspective(400px);
+  }
+}
+
+.ns-effect-exploader {
+  transform-origin: 0 0;
+}
+
+.ns-effect-exploader p {
+  padding: 0.25em 2em 0.25em 3em;
+}
+
+.ns-effect-exploader.ns-show {
+  animation-name: anim-load;
+  animation-duration: 1s;
+}
+
+@keyframes anim-load {
+  0% {
+    opacity: 1;
+    transform: scale3d(0, 0.3, 1);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.ns-effect-exploader.ns-hide {
+  animation-name: anim-fade;
+  animation-duration: 0.3s;
+}
+
+.ns-effect-exploader.ns-show .ns-box-inner,
+.ns-effect-exploader.ns-show .ns-close {
+  animation-fill-mode: both;
+  animation-duration: 0.3s;
+  animation-delay: 0.6s;
+}
+
+.ns-effect-exploader.ns-show .ns-close {
+  animation-name: anim-fade;
+}
+
+.ns-effect-exploader.ns-show .ns-box-inner {
+  animation-name: anim-fade-move;
+  animation-timing-function: ease-out;
+}
+
+@keyframes anim-fade-move {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, 10px, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes anim-fade {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.ns-effect-scale.ns-show,
+.ns-effect-scale.ns-hide {
+  animation-name: anim-scale;
+  animation-duration: 0.25s;
+}
+
+@keyframes anim-scale {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, 40px, 0) scale3d(0.1, 0.6, 1);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
+  }
+}
+
+.ns-effect-jelly.ns-show {
+  animation-name: anim-jelly;
+  animation-duration: 1s;
+  animation-timing-function: linear;
+}
+
+.ns-effect-jelly.ns-hide {
+  animation-name: anim-fade;
+  animation-duration: 0.3s;
+}
+
+@keyframes anim-fade {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes anim-jelly {
+  0% {
+    transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  2.083333% {
+    transform: matrix3d(0.7527, 0, 0, 0, 0, 0.7634, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  4.166667% {
+    transform: matrix3d(0.8107, 0, 0, 0, 0, 0.8454, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  6.25% {
+    transform: matrix3d(0.8681, 0, 0, 0, 0, 0.929, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  8.333333% {
+    transform: matrix3d(0.9204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  10.416667% {
+    transform: matrix3d(0.9648, 0, 0, 0, 0, 1.052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  12.5% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1.082, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  14.583333% {
+    transform: matrix3d(1.0256, 0, 0, 0, 0, 1.0915, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  16.666667% {
+    transform: matrix3d(1.0423, 0, 0, 0, 0, 1.0845, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  18.75% {
+    transform: matrix3d(1.051, 0, 0, 0, 0, 1.0667, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  20.833333% {
+    transform: matrix3d(1.0533, 0, 0, 0, 0, 1.0436, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  22.916667% {
+    transform: matrix3d(1.0508, 0, 0, 0, 0, 1.0201, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  25% {
+    transform: matrix3d(1.0449, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  27.083333% {
+    transform: matrix3d(1.037, 0, 0, 0, 0, 0.9853, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  29.166667% {
+    transform: matrix3d(1.0283, 0, 0, 0, 0, 0.9769, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  31.25% {
+    transform: matrix3d(1.0197, 0, 0, 0, 0, 0.9742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  33.333333% {
+    transform: matrix3d(1.0119, 0, 0, 0, 0, 0.9762, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  35.416667% {
+    transform: matrix3d(1.0053, 0, 0, 0, 0, 0.9812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  37.5% {
+    transform: matrix3d(1, 0, 0, 0, 0, 0.9877, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  39.583333% {
+    transform: matrix3d(0.9962, 0, 0, 0, 0, 0.9943, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  41.666667% {
+    transform: matrix3d(0.9937, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  43.75% {
+    transform: matrix3d(0.9924, 0, 0, 0, 0, 1.0041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  45.833333% {
+    transform: matrix3d(0.992, 0, 0, 0, 0, 1.0065, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  47.916667% {
+    transform: matrix3d(0.9924, 0, 0, 0, 0, 1.0073, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  50% {
+    transform: matrix3d(0.9933, 0, 0, 0, 0, 1.0067, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  52.083333% {
+    transform: matrix3d(0.9945, 0, 0, 0, 0, 1.0053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  54.166667% {
+    transform: matrix3d(0.9958, 0, 0, 0, 0, 1.0035, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  56.25% {
+    transform: matrix3d(0.997, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  58.333333% {
+    transform: matrix3d(0.9982, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  60.416667% {
+    transform: matrix3d(0.9992, 0, 0, 0, 0, 0.9989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  62.5% {
+    transform: matrix3d(1, 0, 0, 0, 0, 0.9982, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  64.583333% {
+    transform: matrix3d(1.0006, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  66.666667% {
+    transform: matrix3d(1.001, 0, 0, 0, 0, 0.9981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  68.75% {
+    transform: matrix3d(1.0011, 0, 0, 0, 0, 0.9985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  70.833333% {
+    transform: matrix3d(1.0012, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  72.916667% {
+    transform: matrix3d(1.0011, 0, 0, 0, 0, 0.9996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  75% {
+    transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  77.083333% {
+    transform: matrix3d(1.0008, 0, 0, 0, 0, 1.0003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  79.166667% {
+    transform: matrix3d(1.0006, 0, 0, 0, 0, 1.0005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  81.25% {
+    transform: matrix3d(1.0004, 0, 0, 0, 0, 1.0006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  83.333333% {
+    transform: matrix3d(1.0003, 0, 0, 0, 0, 1.0005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  85.416667% {
+    transform: matrix3d(1.0001, 0, 0, 0, 0, 1.0004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  87.5% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1.0003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  89.583333% {
+    transform: matrix3d(0.9999, 0, 0, 0, 0, 1.0001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  91.666667% {
+    transform: matrix3d(0.9999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  93.75% {
+    transform: matrix3d(0.9998, 0, 0, 0, 0, 0.9999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  95.833333% {
+    transform: matrix3d(0.9998, 0, 0, 0, 0, 0.9999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  97.916667% {
+    transform: matrix3d(0.9998, 0, 0, 0, 0, 0.9998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  100% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+}
+
+.ns-effect-slide-left.ns-show {
+  animation-name: anim-slide-elastic-left;
+  animation-duration: 1s;
+  animation-timing-function: linear;
+}
+
+@keyframes anim-slide-elastic-left {
+  0% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1000, 0, 0, 1);
+  }
+
+  1.666667% {
+    transform: matrix3d(1.9293, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -739.2681, 0, 0, 1);
+  }
+
+  3.333333% {
+    transform: matrix3d(1.9699, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -521.8255, 0, 0, 1);
+  }
+
+  5% {
+    transform: matrix3d(1.709, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -349.2612, 0, 0, 1);
+  }
+
+  6.666667% {
+    transform: matrix3d(1.424, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -218.324, 0, 0, 1);
+  }
+
+  8.333333% {
+    transform: matrix3d(1.2107, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -123.2985, 0, 0, 1);
+  }
+
+  10% {
+    transform: matrix3d(1.0817, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -57.5927, 0, 0, 1);
+  }
+
+  11.666667% {
+    transform: matrix3d(1.017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -14.7237, 0, 0, 1);
+  }
+
+  13.333333% {
+    transform: matrix3d(0.9906, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 11.1279, 0, 0, 1);
+  }
+
+  15% {
+    transform: matrix3d(0.9848, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 24.8634, 0, 0, 1);
+  }
+
+  16.666667% {
+    transform: matrix3d(0.9872, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30.405, 0, 0, 1);
+  }
+
+  18.333333% {
+    transform: matrix3d(0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30.7528, 0, 0, 1);
+  }
+
+  20% {
+    transform: matrix3d(0.9954, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 28.1014, 0, 0, 1);
+  }
+
+  21.666667% {
+    transform: matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 23.9827, 0, 0, 1);
+  }
+
+  23.333333% {
+    transform: matrix3d(0.9994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 19.4075, 0, 0, 1);
+  }
+
+  25% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 14.9956, 0, 0, 1);
+  }
+
+  26.666667% {
+    transform: matrix3d(1.0002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 11.0858, 0, 0, 1);
+  }
+
+  28.333333% {
+    transform: matrix3d(1.0002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 7.8251, 0, 0, 1);
+  }
+
+  30% {
+    transform: matrix3d(1.0002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.2374, 0, 0, 1);
+  }
+
+  31.666667% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.2739, 0, 0, 1);
+  }
+
+  33.333333% {
+    transform: matrix3d(1.0001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.8489, 0, 0, 1);
+  }
+
+  35% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.8636, 0, 0, 1);
+  }
+
+  36.666667% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.2208, 0, 0, 1);
+  }
+
+  38.333333% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.1669, 0, 0, 1);
+  }
+
+  40% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.3728, 0, 0, 1);
+  }
+
+  41.666667% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.4559, 0, 0, 1);
+  }
+
+  43.333333% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.4612, 0, 0, 1);
+  }
+
+  45% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.421, 0, 0, 1);
+  }
+
+  46.666667% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.3596, 0, 0, 1);
+  }
+
+  48.333333% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.291, 0, 0, 1);
+  }
+
+  50% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.2249, 0, 0, 1);
+  }
+
+  51.666667% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.1662, 0, 0, 1);
+  }
+
+  53.333333% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.1173, 0, 0, 1);
+  }
+
+  55% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0785, 0, 0, 1);
+  }
+
+  56.666667% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0491, 0, 0, 1);
+  }
+
+  58.333333% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0277, 0, 0, 1);
+  }
+
+  60% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.013, 0, 0, 1);
+  }
+
+  61.666667% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0033, 0, 0, 1);
+  }
+
+  63.333333% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0025, 0, 0, 1);
+  }
+
+  65% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0056, 0, 0, 1);
+  }
+
+  66.666667% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0068, 0, 0, 1);
+  }
+
+  68.333333% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0069, 0, 0, 1);
+  }
+
+  70% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0063, 0, 0, 1);
+  }
+
+  71.666667% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0054, 0, 0, 1);
+  }
+
+  73.333333% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0044, 0, 0, 1);
+  }
+
+  75% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0034, 0, 0, 1);
+  }
+
+  76.666667% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0025, 0, 0, 1);
+  }
+
+  78.333333% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0018, 0, 0, 1);
+  }
+
+  80% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0012, 0, 0, 1);
+  }
+
+  81.666667% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0007, 0, 0, 1);
+  }
+
+  83.333333% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0004, 0, 0, 1);
+  }
+
+  85% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0002, 0, 0, 1);
+  }
+
+  86.666667% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0001, 0, 0, 1);
+  }
+
+  88.333333% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1);
+  }
+
+  90% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1);
+  }
+
+  91.666667% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1);
+  }
+
+  93.333333% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1);
+  }
+
+  95% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1);
+  }
+
+  96.666667% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1);
+  }
+
+  98.333333% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1);
+  }
+
+  100% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+}
+
+.ns-effect-slide-left.ns-hide {
+  animation-name: anim-slide-left;
+  animation-duration: 0.25s;
+}
+
+@keyframes anim-slide-left {
+  0% {
+    transform: translate3d(-30px, 0, 0) translate3d(-100%, 0, 0);
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.ns-effect-slide-right.ns-show {
+  animation: anim-slide-elastic-right 2000ms linear both;
+}
+
+@keyframes anim-slide-elastic-right {
+  0% {
+    transform: matrix3d(2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1000, 0, 0, 1);
+  }
+
+  2.15% {
+    transform: matrix3d(1.486, 0, 0, 0, 0, 0.514, 0, 0, 0, 0, 1, 0, 664.594, 0, 0, 1);
+  }
+
+  4.1% {
+    transform: matrix3d(1.147, 0, 0, 0, 0, 0.853, 0, 0, 0, 0, 1, 0, 419.708, 0, 0, 1);
+  }
+
+  4.3% {
+    transform: matrix3d(1.121, 0, 0, 0, 0, 0.879, 0, 0, 0, 0, 1, 0, 398.136, 0, 0, 1);
+  }
+
+  6.46% {
+    transform: matrix3d(0.948, 0, 0, 0, 0, 1.052, 0, 0, 0, 0, 1, 0, 206.714, 0, 0, 1);
+  }
+
+  8.11% {
+    transform: matrix3d(0.908, 0, 0, 0, 0, 1.092, 0, 0, 0, 0, 1, 0, 105.491, 0, 0, 1);
+  }
+
+  8.61% {
+    transform: matrix3d(0.907, 0, 0, 0, 0, 1.093, 0, 0, 0, 0, 1, 0, 81.572, 0, 0, 1);
+  }
+
+  12.11% {
+    transform: matrix3d(0.95, 0, 0, 0, 0, 1.05, 0, 0, 0, 0, 1, 0, -18.434, 0, 0, 1);
+  }
+
+  14.16% {
+    transform: matrix3d(0.979, 0, 0, 0, 0, 1.021, 0, 0, 0, 0, 1, 0, -38.734, 0, 0, 1);
+  }
+
+  16.12% {
+    transform: matrix3d(0.997, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -43.356, 0, 0, 1);
+  }
+
+  19.72% {
+    transform: matrix3d(1.006, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, -34.155, 0, 0, 1);
+  }
+
+  27.23% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -7.839, 0, 0, 1);
+  }
+
+  30.83% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.951, 0, 0, 1);
+  }
+
+  38.34% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.037, 0, 0, 1);
+  }
+
+  41.99% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.812, 0, 0, 1);
+  }
+
+  50% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.159, 0, 0, 1);
+  }
+
+  60.56% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.025, 0, 0, 1);
+  }
+
+  82.78% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.001, 0, 0, 1);
+  }
+
+  100% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+}
+
+.ns-effect-slide-right.ns-hide {
+  animation-name: anim-slide-right;
+  animation-duration: 0.25s;
+}
+
+@keyframes anim-slide-right {
+  0% {
+    transform: translate3d(30px, 0, 0) translate3d(100%, 0, 0);
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.ns-effect-slide-center.ns-show {
+  animation: anim-slide-elastic-center 2000ms linear both;
+}
+
+@keyframes anim-slide-elastic-center {
+  0% {
+    transform: matrix3d(1, 0, 0, 0, 0, 3, 0, 0, 0, 0, 1, 0, 0, -300, 0, 1);
+  }
+
+  2.15% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1.971, 0, 0, 0, 0, 1, 0, 0, -199.378, 0, 1);
+  }
+
+  4.1% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1.294, 0, 0, 0, 0, 1, 0, 0, -125.912, 0, 1);
+  }
+
+  4.3% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1.243, 0, 0, 0, 0, 1, 0, 0, -119.441, 0, 1);
+  }
+
+  6.46% {
+    transform: matrix3d(1, 0, 0, 0, 0, 0.895, 0, 0, 0, 0, 1, 0, 0, -62.014, 0, 1);
+  }
+
+  8.11% {
+    transform: matrix3d(1, 0, 0, 0, 0, 0.817, 0, 0, 0, 0, 1, 0, 0, -31.647, 0, 1);
+  }
+
+  8.61% {
+    transform: matrix3d(1, 0, 0, 0, 0, 0.813, 0, 0, 0, 0, 1, 0, 0, -24.472, 0, 1);
+  }
+
+  12.11% {
+    transform: matrix3d(1, 0, 0, 0, 0, 0.9, 0, 0, 0, 0, 1, 0, 0, 5.53, 0, 1);
+  }
+
+  14.16% {
+    transform: matrix3d(1, 0, 0, 0, 0, 0.959, 0, 0, 0, 0, 1, 0, 0, 11.62, 0, 1);
+  }
+
+  16.12% {
+    transform: matrix3d(1, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, 0, 13.007, 0, 1);
+  }
+
+  19.72% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1.012, 0, 0, 0, 0, 1, 0, 0, 10.247, 0, 1);
+  }
+
+  27.23% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.352, 0, 1);
+  }
+
+  30.83% {
+    transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0.585, 0, 1);
+  }
+
+  38.34% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.311, 0, 1);
+  }
+
+  41.99% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.244, 0, 1);
+  }
+
+  50% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.048, 0, 1);
+  }
+
+  60.56% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.007, 0, 1);
+  }
+
+  82.78% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  100% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+}
+
+.ns-effect-slide-center.ns-hide {
+  animation-name: anim-slide-center;
+  animation-duration: 0.25s;
+}
+
+@keyframes anim-slide-center {
+  0% {
+    transform: translate3d(0, -30px, 0) translate3d(0, -100%, 0);
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.ns-effect-genie.ns-show,
+.ns-effect-genie.ns-hide {
+  animation-name: anim-genie;
+  animation-duration: 0.4s;
+}
+
+@keyframes anim-genie {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, calc(200% + 30px), 0) scale3d(0, 1, 1);
+    animation-timing-function: ease-in;
+  }
+
+  40% {
+    opacity: 0.5;
+    transform: translate3d(0, 0, 0) scale3d(0.02, 1.1, 1);
+    animation-timing-function: ease-out;
+  }
+
+  70% {
+    opacity: 0.6;
+    transform: translate3d(0, -40px, 0) scale3d(0.8, 1.1, 1);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
+  }
+}

modules/default/alert/styles/right.css

@@ -0,0 +1,4 @@
+.ns-box {
+  margin-left: auto;
+  text-align: right;
+}

modules/default/alert/templates/alert.njk

@@ -0,0 +1,20 @@
+{% if imageUrl or imageFA %}
+    {% set imageHeight = imageHeight if imageHeight else "80px" %}
+    {% if imageUrl %}
+        <img src="{{ imageUrl }}"
+             height="{{ imageHeight }}"
+             style="margin-bottom: 10px" />
+    {% else %}
+        <span class="bright fas fa-{{ imageFA }}"
+              style="margin-bottom: 10px;
+                     font-size: {{ imageHeight }}"></span>
+    {% endif %}
+    <br />
+{% endif %}
+{% if title %}
+    <span class="thin dimmed medium">{{ title if titleType == 'text' else title | safe }}</span>
+{% endif %}
+{% if message %}
+    {% if title %}<br />{% endif %}
+    <span class="light bright small">{{ message if messageType == 'text' else message | safe }}</span>
+{% endif %}

modules/default/alert/templates/notification.njk

@@ -0,0 +1,7 @@
+{% if title %}
+    <span class="thin dimmed medium">{{ title if titleType == 'text' else title | safe }}</span>
+{% endif %}
+{% if message %}
+    {% if title %}<br />{% endif %}
+    <span class="light bright small">{{ message if messageType == 'text' else message | safe }}</span>
+{% endif %}

modules/default/alert/translations/bg.json

@@ -0,0 +1,4 @@
+{
+	"sysTitle": "MagicMirror² нотификация",
+	"welcome": "Добре дошли, стартирането беше успешно"
+}

modules/default/alert/translations/da.json

@@ -1,4 +1,4 @@
 {
-  "sysTitle": "MagicMirror Notifikation",
-  "welcome": "Velkommen, modulet er succesfuldt startet!"
+	"sysTitle": "MagicMirror² Notifikation",
+	"welcome": "Velkommen, modulet er succesfuldt startet!"
 }

modules/default/alert/translations/de.json

@@ -1,4 +1,4 @@
 {
-  "sysTitle": "MagicMirror Benachrichtigung",
-  "welcome": "Willkommen, Start war erfolgreich!"
+	"sysTitle": "MagicMirror² Benachrichtigung",
+	"welcome": "Willkommen, Start war erfolgreich!"
 }

modules/default/alert/translations/el.json

@@ -0,0 +1,4 @@
+{
+	"sysTitle": "MagicMirror² Ειδοποίηση",
+	"welcome": "Καλώς ήρθατε, η εκκίνηση ήταν επιτυχής!"
+}

modules/default/alert/translations/en.json

@@ -1,4 +1,4 @@
 {
-  "sysTitle": "MagicMirror Notification",
-  "welcome": "Welcome, start was successful!"
+	"sysTitle": "MagicMirror² Notification",
+	"welcome": "Welcome, start was successful!"
 }

modules/default/alert/translations/eo.json

@@ -0,0 +1,4 @@
+{
+	"sysTitle": "MagicMirror²-sciigo",
+	"welcome": "Bonvenon, lanĉo sukcesis!"
+}

modules/default/alert/translations/es.json

@@ -1,4 +1,4 @@
 {
-  "sysTitle": "MagicMirror Notificaciones",
-  "welcome": "Bienvenido, ¡se iniciado correctamente!"
+	"sysTitle": "MagicMirror² Notificaciones",
+	"welcome": "Bienvenido, ¡se iniciado correctamente!"
 }

modules/default/alert/translations/fr.json

@@ -0,0 +1,4 @@
+{
+	"sysTitle": "MagicMirror² Notification",
+	"welcome": "Bienvenue, le démarrage a été un succès!"
+}

modules/default/alert/translations/hu.json

@@ -1,4 +1,4 @@
 {
-  "sysTitle": "MagicMirror értesítés",
-  "welcome": "Üdvözöljük, indulás sikeres!"
+	"sysTitle": "MagicMirror² értesítés",
+	"welcome": "Üdvözöljük, indulás sikeres!"
 }

modules/default/alert/translations/nl.json

@@ -1,4 +1,4 @@
 {
-  "sysTitle": "MagicMirror Notificatie",
-  "welcome": "Welkom, Succesvol gestart!"
+	"sysTitle": "MagicMirror² Notificatie",
+	"welcome": "Welkom, Succesvol gestart!"
 }

modules/default/alert/translations/ru.json

@@ -1,4 +1,4 @@
 {
-  "sysTitle": "MagicMirror Уведомление",
-  "welcome": "Добро пожаловать, старт был успешным!"
+	"sysTitle": "MagicMirror² Уведомление",
+	"welcome": "Добро пожаловать, старт был успешным!"
 }

modules/default/alert/translations/th.json

@@ -0,0 +1,4 @@
+{
+	"sysTitle": "การแจ้งเตือน MagicMirror²",
+	"welcome": "ยินดีต้อนรับ การเริ่มต้นสำเร็จแล้ว!"
+}

modules/default/calendar/README.md

@@ -1,91 +1,6 @@
 # Module: Calendar
-The `calendar` module is one of the default modules of the MagicMirror.
+
+The `calendar` module is one of the default modules of the MagicMirror².
 This module displays events from a public .ical calendar. It can combine multiple calendars.
 
-## Using the module
-
-To use this module, add it to the modules array in the `config/config.js` file:
-````javascript
-modules: [
-	{
-		module: "calendar",
-		position: "top_left",	// This can be any of the regions. Best results in left or right regions.
-		config: {
-			// The config property is optional.
-			// If no config is set, an example calendar is shown.
-			// See 'Configuration options' for more information.
-		}
-	}
-]
-````
-
-## Configuration options
-
-The following properties can be configured:
-
-
-| Option                       | Description
-| ---------------------------- | -----------
-| `maximumEntries`             | The maximum number of events shown. / **Possible values:** `0` - `100` <br> **Default value:** `10`
-| `maximumNumberOfDays`        | The maximum number of days in the future. <br><br> **Default value:** `365`
-| `displaySymbol`              | Display a symbol in front of an entry. <br><br> **Possible values:** `true` or `false` <br> **Default value:** `true`
-| `defaultSymbol`              | The default symbol. <br><br> **Possible values:** See [Font Awsome](http://fontawesome.io/icons/) website. <br> **Default value:** `calendar`
-| `maxTitleLength`             | The maximum title length. <br><br> **Possible values:** `10` - `50` <br> **Default value:** `25`
-| `wrapEvents`                 | Wrap event titles to multiple lines. Breaks lines at the length defined by `maxTitleLength`. <br><br> **Possible values:** `true` or `false` <br> **Default value:** `false`
-| `fetchInterval`              | How often does the content needs to be fetched? (Milliseconds) <br><br> **Possible values:** `1000` - `86400000` <br> **Default value:** `300000` (5 minutes)
-| `animationSpeed`             | Speed of the update animation. (Milliseconds) <br><br> **Possible values:**`0` - `5000` <br> **Default value:** `2000` (2 seconds)
-| `fade`                       | Fade the future events to black. (Gradient) <br><br> **Possible values:** `true` or `false` <br> **Default value:** `true`
-| `fadePoint`                  | Where to start fade? <br><br> **Possible values:** `0` (top of the list) - `1` (bottom of list) <br> **Default value:** `0.25`
-| `calendars`                  | The list of calendars. <br><br> **Possible values:** An array, see _calendar configuration_ below. <br> **Default value:** _An example calendar._
-| `titleReplace`               | An object of textual replacements applied to the tile of the event. This allow to remove or replace certains words in the title. <br><br> **Example:** `{'Birthday of ' : '', 'foo':'bar'}` <br> **Default value:** `{	"De verjaardag van ": "", "'s birthday": ""	}`
-| `displayRepeatingCountTitle` | Show count title for yearly repeating events (e.g. "X. Birthday", "X. Anniversary") <br><br> **Possible values:** `true` or `false` <br> **Default value:** `false`
-| `dateFormat`                 | Format to use for the date of events (when using absolute dates) <br><br> **Possible values:** See [Moment.js formats](http://momentjs.com/docs/#/parsing/string-format/) <br> **Default value:** `MMM Do` (e.g. Jan 18th)
-| `fullDayEventDateFormat`     | Format to use for the date of full day events (when using absolute dates) <br><br> **Possible values:** See [Moment.js formats](http://momentjs.com/docs/#/parsing/string-format/) <br> **Default value:** `MMM Do` (e.g. Jan 18th)
-| `timeFormat`                 | Display event times as absolute dates, or relative time <br><br> **Possible values:** `absolute` or `relative` <br> **Default value:** `relative`
-| `getRelative`                | How much time (in hours) should be left until calendar events start getting relative? <br><br> **Possible values:** `0` (events stay absolute) - `48` (48 hours before the event starts) <br> **Default value:** `6`
-| `urgency`                    | When using a timeFormat of `absolute`, the `urgency` setting allows you to display events within a specific time frame as `relative`. This allows events within a certain time frame to be displayed as relative (in xx days) while others are displayed as absolute dates <br><br> **Possible values:** a positive integer representing the number of days for which you want a relative date, for example `7` (for 7 days) <br><br> **Default value:** `7`
-| `broadcastEvents`            | If this property is set to true, the calendar will broadcast all the events to all other modules with the notification message: `CALENDAR_EVENTS`. The event objects are stored in an array and contain the following fields: `title`, `startDate`, `endDate`, `fullDayEvent`, `location` and `geo`. <br><br> **Possible values:** `true`, `false` <br><br> **Default value:** `true`
-| `hidePrivate`                | Hides private calendar events. <br><br> **Possible values:** `true` or `false` <br> **Default value:** `false`
-| `excludedEvents`             | An array of words / phrases from event titles that will be excluded from being shown. <br><br> **Example:** `['Birthday', 'Hide This Event']` <br> **Default value:** `[]`
-
-### Calendar configuration
-
-The `calendars` property contains an array of the configured calendars.
-The `colored` property gives the option for an individual color for each calendar.
-
-#### Default value:
-````javascript
-config: {
-	colored: false,
-	calendars: [
-		{
-			url: 'http://www.calendarlabs.com/templates/ical/US-Holidays.ics',
-			symbol: 'calendar',
-			auth: {
-			    user: 'username',
-			    pass: 'superstrongpassword',
-			    method: 'basic'
-			}
-		},
-	],
-}
-````
-
-#### Calendar configuration options:
-| Option                | Description
-| --------------------- | -----------
-| `url`	                | The url of the calendar .ical. This property is required. <br><br> **Possible values:** Any public accessble .ical calendar.
-| `symbol`              | The symbol to show in front of an event. This property is optional. <br><br> **Possible values:** See [Font Awesome](http://fontawesome.io/icons/) website. To have multiple symbols you can define them in an array e.g. `["calendar", "plane"]`
-| `color`              | The font color of an event from this calendar. This property should be set if the config is set to colored: true. <br><br> **Possible values:** HEX, RGB or RGBA values (#efefef, rgb(242,242,242), rgba(242,242,242,0.5)).
-| `repeatingCountTitle`	| The count title for yearly repating events in this calendar.  <br><br> **Example:** `'Birthday'`
-| `maximumEntries`      | The maximum number of events shown.  Overrides global setting. **Possible values:** `0` - `100`
-| `maximumNumberOfDays` | The maximum number of days in the future.  Overrides global setting
-| `auth`                | The object containing options for authentication against the calendar.
-
-
-#### Calendar authentication options:
-| Option                | Description
-| --------------------- | -----------
-| `user`                | The username for HTTP authentication.
-| `pass`                | The password for HTTP authentication. (If you use Bearer authentication, this should be your BearerToken.)
-| `method`              | Which authentication method should be used. HTTP Basic, Digest and Bearer authentication methods are supported. Basic authentication is used by default if this option is omitted. **Possible values:** `digest`, `basic`, `bearer` **Default value:** `basic`
+For configuration options, please check the [MagicMirror² documentation](https://docs.magicmirror.builders/modules/calendar.html).

modules/default/calendar/calendar.css

@@ -1,20 +1,20 @@
 .calendar .symbol {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
   padding-left: 0;
   padding-right: 10px;
-  font-size: 80%;
-  vertical-align: top;
+  font-size: var(--font-size-small);
 }
 
 .calendar .symbol span {
-  display: inline-block;
-  -ms-transform: translate(0, 2px); /* IE 9 */
-  -webkit-transform: translate(0, 2px); /* Safari */
-  transform: translate(0, 2px);
+  padding-top: 4px;
 }
 
 .calendar .title {
   padding-left: 0;
   padding-right: 0;
+  vertical-align: top;
 }
 
 .calendar .time {