update dependencies incl. electron to v41 (#4058)

- update to electron v41
- update other deps
- add missing `globals` dep, see
https://github.com/MagicMirrorOrg/MagicMirror/pull/4057#issuecomment-4049058107

.eslintignore

@@ -1 +0,0 @@
-modules/default/calendar/vendor/*

.eslintrc.json

@@ -1,31 +0,0 @@
-{
-	"extends": ["eslint:recommended", "plugin:prettier/recommended", "plugin:jsdoc/recommended"],
-	"plugins": ["prettier", "jsdoc", "jest"],
-	"env": {
-		"browser": true,
-		"es6": true,
-		"jest/globals": true,
-		"node": true
-	},
-	"globals": {
-		"config": true,
-		"Log": true,
-		"MM": true,
-		"Module": true,
-		"moment": true
-	},
-	"parserOptions": {
-		"sourceType": "module",
-		"ecmaVersion": 2020,
-		"ecmaFeatures": {
-			"globalReturn": true
-		}
-	},
-	"rules": {
-		"prettier/prettier": "error",
-		"eqeqeq": "error",
-		"no-prototype-builtins": "off",
-		"no-unused-vars": "off",
-		"no-useless-return": "error"
-	}
-}

.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/CODE_OF_CONDUCT.md

@@ -0,0 +1,137 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, caste, color, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the overall
+  community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email address,
+  without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official email address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement:
+Contact [Rejas](https://forum.magicmirror.builders/user/rejas),
+[Karsten](https://forum.magicmirror.builders/user/karsten13),
+[Sam](https://forum.magicmirror.builders/user/sdetweil) or
+[Kristjan](https://forum.magicmirror.builders/user/kristjanesperanto)
+via private message in the forum.
+
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.1, available at
+[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
+
+For answers to common questions about this code of conduct, see the FAQ at
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
+[https://www.contributor-covenant.org/translations][translations].
+
+[homepage]: https://www.contributor-covenant.org
+[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
+[Mozilla CoC]: https://github.com/mozilla/diversity
+[FAQ]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations

.github/CONTRIBUTING.md

@@ -6,54 +6,43 @@ We hold our code to standard, and these standards are documented below.
 
 ## Linters
 
-If you wish to run our linters, use `npm run lint` without any arguments.
+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 `node --run lint:prettier`.
 
 ### JavaScript: Run ESLint
 
-We use [ESLint](https://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 `npm run lint:js`.
+To run ESLint, use `node --run lint:js`.
 
 ### CSS: Run StyleLint
 
-We use [StyleLint](https://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 `stylelint.config.mjs` file.
 
-To run StyleLint, use `npm run lint:css`.
+To run StyleLint, use `node --run lint:css`.
+
+### Markdown: Run markdownlint
+
+We use [markdownlint-cli2](https://github.com/DavidAnson/markdownlint-cli2) to lint our markdown files. The configuration is in our `.markdownlint.json` file.
+
+To run markdownlint, use `node --run lint:markdown`.
 
 ## Testing
 
-We use [Jest](https://jestjs.io) for JavaScript testing.
+We use [Vitest](https://vitest.dev) for JavaScript testing.
 
-To run all tests, use `npm run test`.
+To run all tests, use `node --run test`.
 
-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`.
+The `package.json` scripts expose finer-grained test commands:
 
-## Submitting Issues
+- `test:unit` – run unit tests only
+- `test:e2e` – execute browser-driven end-to-end tests
+- `test:electron` – launch the Electron-based regression suite
+- `test:coverage` – collect coverage while running every suite
+- `test:watch` – keep Vitest in watch mode for fast local feedback
+- `test:ui` – open the Vitest UI dashboard (needs OS file-watch support enabled)
+- `test:calendar` – run the legacy calendar debug helper
+- `test:css`, `test:markdown`, `test:prettier`, `test:spelling`, `test:js` – lint-only scripts that enforce formatting, spelling, markdown style, and ESLint.
 
-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/4, Windows, Mac, Linux, System V UNIX).
-
-**Node Version**: Make sure it's version 14 or later (recommended is 16).
-
-**MagicMirror² Version**: Please let us know which version of MagicMirror² you are running. It can be found in the `package.json` file.
-
-**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.
+You can invoke any script with `node --run <script>` (or `npm run <script>`). Individual files can still be targeted directly, e.g. `npx vitest run tests/e2e/env_spec.js`.

.github/ISSUE_TEMPLATE.md

@@ -1,48 +0,0 @@
-Hello and thank you for opening an issue.
-
-**Please make sure that you have read the following lines before submitting your Issue:**
-
-## I'm not sure if this is a bug
-
-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)
-
-## I'm having troubles installing or configuring MagicMirror
-
-Problems installing or configuring your MagicMirror? Check out: [https://forum.magicmirror.builders/category/10/troubleshooting](https://forum.magicmirror.builders/category/10/troubleshooting)
-
-A common problem is that your config file could be invalid. Please run in your MagicMirror² directory: `npm run config:check` and see if it reports an error.
-
-## I found a bug in the MagicMirror² installer
-
-If you are facing an issue or found a bug while trying to install MagicMirror² via the installer please report it in the respective GitHub repository:
-[https://github.com/sdetweil/MagicMirror_scripts](https://github.com/sdetweil/MagicMirror_scripts)
-
-## I found a bug in the MagicMirror² Docker image
-
-If you are facing an issue or found a bug while running MagicMirror² inside a Docker container please create an issue in the corresponding repository:
-[https://gitlab.com/khassel/magicmirror](https://gitlab.com/khassel/magicmirror)
-
----
-
-## I found a bug in MagicMirror
-
-Please make sure to only submit reproducible issues. You can safely remove everything above the dividing line.
-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/4, Windows, Mac, Linux, System V UNIX).
-
-**Node Version**: Make sure it's version 14 or later (recommended is 16).
-
-**MagicMirror² Version**: Please let us know which version of MagicMirror² you are running. It can be found in the `package.json` file.
-
-**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:
+        - "node --run start"
+        - "node --run start:wayland"
+        - "node --run start:windows"
+        - "node --run start:x11"
+        - "node --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,9 +1,8 @@
-Hello and thank you for wanting to contribute to the MagicMirror² project
+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:**
+**Please make sure that you have followed these 3 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?
@@ -11,11 +10,8 @@ Hello and thank you for wanting to contribute to the MagicMirror² project
 > - 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
+> 3. Please run `node --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

.github/codecov.yaml

@@ -1,6 +0,0 @@
-coverage:
-  status:
-    project:
-      default:
-        # advanced settings
-        informational: true

.github/dependabot.yaml

@@ -4,3 +4,15 @@ updates:
     directory: "/"
     schedule:
       interval: "weekly"
+    target-branch: "develop"
+    labels:
+      - "dependencies"
+
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "monthly"
+    target-branch: "develop"
+    labels:
+      - "dependencies"
+      - "javascript"

.github/stale.yaml

@@ -1,19 +0,0 @@
-# Number of days of inactivity before an issue becomes stale
-daysUntilStale: 60
-# Number of days of inactivity before a stale issue is closed
-daysUntilClose: 7
-# Issues with these labels will never be considered stale
-exemptLabels:
-  - pinned
-  - security
-  - under investigation
-  - pr welcome
-# Label to use when marking an issue as stale
-staleLabel: wontfix
-# Comment to post when marking an issue as stale. Set to `false` to disable
-markComment: >
-  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.
-# Comment to post when closing a stale issue. Set to `false` to disable
-closeComment: false

.github/workflows/automated-tests.yaml

@@ -12,28 +12,65 @@ on:
 permissions:
   contents: read
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
+  code-style-check:
+    runs-on: ubuntu-slim
+    timeout-minutes: 15
+    steps:
+      - name: "Checkout code"
+        uses: actions/checkout@v6
+      - name: "Use Node.js"
+        uses: actions/setup-node@v6
+        with:
+          node-version: lts/*
+          cache: "npm"
+      - name: "Install dependencies"
+        run: |
+          node --run install-mm:dev
+      - name: "Run linter tests"
+        run: |
+          node --run test:prettier
+          node --run test:js
+          node --run test:css
+          node --run test:markdown
   test:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     timeout-minutes: 30
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [22.x, 24.x, 25.x]
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+      - 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@v6
+      - name: "Use Node.js ${{ matrix.node-version }}"
+        uses: actions/setup-node@v6
         with:
           node-version: ${{ matrix.node-version }}
+          check-latest: true
           cache: "npm"
-      - name: Install dependencies and run tests
+      - name: "Install MagicMirror²"
         run: |
-          Xvfb :99 -screen 0 1024x768x16 &
-          export DISPLAY=:99
-          npm run install-mm:dev
-          touch css/custom.css
-          npm run test:prettier
-          npm run test:js
-          npm run test:css
-          npm run test
+          node --run install-mm:dev
+      - name: "Install Playwright browsers"
+        run: |
+          npx playwright install --with-deps chromium
+      - name: "Prepare environment for 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 &
+          touch config/custom.css
+      - name: "Run tests"
+        run: |
+          export WAYLAND_DISPLAY=wayland-0
+          node --run test

.github/workflows/codecov-test-suites.yaml

@@ -1,33 +0,0 @@
-# This workflow runs the automated test and uploads the coverage results to codecov.io
-# For more information see: https://github.com/codecov/codecov-action
-
-name: "Run Codecov Tests"
-
-on:
-  push:
-    branches: [master, develop]
-  pull_request:
-    branches: [master, develop]
-
-permissions:
-  contents: read
-
-jobs:
-  run-and-upload-coverage-report:
-    runs-on: ubuntu-latest
-    timeout-minutes: 30
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-      - name: Install dependencies and run coverage
-        run: |
-          Xvfb :99 -screen 0 1024x768x16 &
-          export DISPLAY=:99
-          npm ci
-          touch css/custom.css
-          npm run test:coverage
-      - name: Upload coverage results to codecov
-        uses: codecov/codecov-action@v3
-        with:
-          files: ./coverage/lcov.info
-          fail_ci_if_error: true

.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-slim
+    steps:
+      - name: "Checkout code"
+        uses: actions/checkout@v6
+      - name: "Dependency Review"
+        uses: actions/dependency-review-action@v4

.github/workflows/depsreview.yaml

@@ -1,14 +0,0 @@
-name: "Dependency Review"
-on: [pull_request]
-
-permissions:
-  contents: read
-
-jobs:
-  dependency-review:
-    runs-on: ubuntu-latest
-    steps:
-      - name: "Checkout Repository"
-        uses: actions/checkout@v3
-      - name: "Dependency Review"
-        uses: actions/dependency-review-action@v2

.github/workflows/electron-rebuild.yaml

@@ -0,0 +1,28 @@
+name: "Electron Rebuild Testing"
+
+on: [pull_request]
+
+jobs:
+  rebuild:
+    name: Run electron-rebuild
+    runs-on: ubuntu-slim
+    strategy:
+      matrix:
+        node-version: [22.x, 24.x, 25.x]
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+      - name: "Use Node.js ${{ matrix.node-version }}"
+        uses: actions/setup-node@v6
+        with:
+          node-version: ${{ matrix.node-version }}
+          check-latest: true
+      - name: Install MagicMirror
+        run: node --run install-mm
+      - name: Install @electron/rebuild
+        run: npm install @electron/rebuild
+      - name: Install test library (serialport) to be rebuilt
+        run: npm install serialport
+      - name: Run electron-rebuild
+        run: npx electron-rebuild
+        continue-on-error: false

.github/workflows/enforce-changelog.yaml

@@ -1,19 +0,0 @@
-# This workflow enforces the update of a changelog file on every pull request
-# For more information see: https://github.com/dangoslen/changelog-enforcer
-
-name: "Enforce Changelog"
-
-on:
-  pull_request:
-    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"

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

@@ -0,0 +1,26 @@
+# This workflow enforces on every pull request that the PR is not based against master,
+# taken from https://github.com/oppia/oppia-android/blob/develop/.github/workflows/static_checks.yml
+
+name: "Enforce Pull-Request Rules"
+
+on:
+  pull_request:
+  push:
+    branches-ignore:
+      - develop
+      - master
+
+jobs:
+  check:
+    runs-on: ubuntu-slim
+    if: github.event_name == 'pull_request'
+    timeout-minutes: 10
+    steps:
+      - name: "Branch is not based on develop"
+        if: ${{ github.base_ref != 'develop' && !contains(github.event.pull_request.labels.*.name, 'mastermerge') }}
+        run: |
+          echo "Current base branch: $BASE_BRANCH"
+          echo "Note: PRs should only ever be merged into develop so please rebase your branch on develop and try again."
+          exit 1
+        env:
+          BASE_BRANCH: ${{ github.base_ref }}

.github/workflows/release-notes.yaml

@@ -0,0 +1,33 @@
+# This workflow writes a draft release on GitHub named `unreleased` after every push on develop
+
+name: "Create Release Notes"
+
+on:
+  push:
+    branches: [develop]
+
+permissions:
+  contents: write
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  release-notes:
+    runs-on: ubuntu-slim
+    timeout-minutes: 15
+    steps:
+      - name: "Checkout code"
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: "0"
+      - name: "Use Node.js"
+        uses: actions/setup-node@v6
+        with:
+          node-version: lts/*
+          cache: "npm"
+      - name: "Create Markdown content"
+        run: |
+          export GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }}
+          node js/releasenotes.js

.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-slim
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+        with:
+          ref: develop
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: lts/*
+          check-latest: true
+          cache: "npm"
+      - name: Install dependencies
+        run: |
+          node --run install-mm:dev
+      - name: Run Spellcheck
+        run: node --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-slim
+    steps:
+      - uses: actions/stale@v10
+        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

@@ -9,10 +9,7 @@ lib-cov
 coverage
 .lock-wscript
 build/Release
-/node_modules/**/*
-fonts/node_modules/**/*
-vendor/node_modules/**/*
-!/tests/node_modules/**/*
+node_modules
 jspm_modules
 .npm
 .node_repl_history
@@ -57,18 +54,13 @@ Temporary Items
 .directory
 .Trash-*
 
-# Ignore all modules except the default modules.
-/modules/**
-!/modules/default
-!/modules/default/**
-!/modules/README.md**
+# Ignore all modules
+/modules/*
 
-# Ignore changes to the custom css files.
-/css/custom.css
-
-# Ignore users config file but keep the sample.
-/config/*
-!/config/config.js.sample
+# Ignore users config file but keep the samples.
+config
+!config/config.js.sample
+!config/custom.css.sample
 
 # Vim
 ## swap
@@ -79,3 +71,13 @@ Temporary Items
 *.orig
 *.rej
 *.bak
+
+# Ignore positions file (#3518)
+js/positions.js
+
+# Ignore lock files other than package-lock.json
+pnpm-lock.yaml
+yarn.lock
+
+# Vitest temporary test files
+tests/**/.tmp/

.husky/pre-commit

@@ -1,7 +1,5 @@
 #!/bin/sh
 
-[ -f "$(dirname "$0")/_/husky.sh" ] && . "$(dirname "$0")/_/husky.sh"
-
-if command -v npm &> /dev/null; then
-  npm run lint:staged
+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

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

.prettierrc.json

@@ -1,3 +0,0 @@
-{
-	"trailingComma": "none"
-}

.stylelintrc.json

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

Collaboration.md

@@ -1,3 +1,5 @@
+# Collaboration
+
 This document describes how collaborators of this repository should work together.
 
 ## Pull Requests
@@ -5,8 +7,79 @@ This document describes how collaborators of this repository should work togethe
 - 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
+- [ ] @KristjanESPERANTO
+
+### 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
+  - [ ] 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`
+- [ ] review the content of the automatically generated draft release named `unreleased`
+  - [ ] check contributor names
+  - [ ] check auto generated min. node version and adjust it for better readability if necessary
+  - [ ] check if all elements are assigned to the correct category
+  - [ ] change release name to `v2.xx.0`
+- [ ] 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 body of the draft release with name `v2.xx.0`
+- [ ] check if new PR has merge conflicts, if so, merge `master` into the new PR and solve the conflicts
+- [ ] after PR tests run without issues, merge PR
+- [ ] edit draft release with name `v2.xx.0`
+  - [ ] set corresponding version tag `v2.xx.0` (with `Select tag` and then `Create new tag`)
+  - [ ] update release link in `Compare to previous Release` by replacing `develop` with new tag `v2.xx.0`
+  - [ ] publish the release (button at the bottom)
+
+### Draft new development release
+
+- [ ] checkout `develop` branch
+- [ ] update `package.json` and `package-lock.json` to reflect correct version number `2.xx.0-develop`
+- [ ] commit and push `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 (use edit release on github to copy the content with markdown syntax)
+- [ ] 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)
+  - [ ] use a clean environment (e.g. container)
+  - [ ] clone this repository with the new `master` branch and `cd` into the local repository directory
+  - [ ] **Method 1 (recommended): With browser and 2FA**
+    - [ ] execute `npm login` which will open a browser window
+    - [ ] log in with your npm credentials and enter your 2FA code
+    - [ ] execute `npm publish`
+  - [ ] **Method 2 (fallback for headless environments): With token (bypasses 2FA)**
+    - [ ] ⚠️ Note: This method bypasses 2FA and should only be used when a browser is not available
+    - [ ] goto `https://www.npmjs.com/settings/<username>/tokens/` and click `generate new token`
+    - [ ] enable `Bypass two-factor authentication (2FA)` and under `Packages and scopes` give `Read and write` permission to the `magicmirror` package, press `Generate token`
+    - [ ] execute:
+
+      ```bash
+      NPM_TOKEN="npm_xxxxxx"
+      npm set "//registry.npmjs.org/:_authToken=$NPM_TOKEN"
+      npm publish
+      ```

LICENSE.md

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

README.md

@@ -1,23 +1,22 @@
-![MagicMirror²: The open source modular smart mirror platform. ](.github/header.png)
+# ![MagicMirror²: The open source modular smart mirror platform.](.github/header.png)
 
 <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/workflow/status/michmich/magicmirror/Run%20Automated%20Tests" alt="GitHub Actions">
-	<img src="https://img.shields.io/github/checks-status/michmich/magicmirror/master" alt="Build Status">
-	<a href="https://codecov.io/gh/MichMich/MagicMirror">
-		<img src="https://codecov.io/gh/MichMich/MagicMirror/branch/master/graph/badge.svg?token=LEG1KitZR6" alt="CodeCov Status"/>
-	</a>
-	<a href="https://github.com/MichMich/MagicMirror">
-		<img src="https://img.shields.io/github/stars/michmich/magicmirror?style=social">
-	</a>
+  <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](https://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](https://www.electronjs.org/) as an application wrapper. So no more web server or browser installs necessary!
 
+![Animated demonstration of MagicMirror²](https://magicmirror.builders/img/demo.gif)
+
 ## Documentation
 
 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).
@@ -27,7 +26,7 @@ For the full documentation including **[installation instructions](https://docs.
 - 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
+  - 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)
@@ -44,7 +43,7 @@ For the full contribution guidelines, check out: [https://docs.magicmirror.build
 
 ## Enjoying MagicMirror? Consider a donation!
 
-MagicMirror² is opensource and free. That doesn't mean we don't need any money.
+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.
@@ -52,5 +51,10 @@ If we receive enough donations we might even be able to free up some working hou
 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>
+  <a href="https://forum.magicmirror.builders/topic/728/magicmirror-is-voted-number-1-in-the-magpi-top-50">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://magicmirror.builders/img/magpi-best-watermark.png">
+      <img src="https://magicmirror.builders/img/magpi-best-watermark-custom.png" width="150" alt="MagPi Top 50">
+    </picture>
+  </a>
 </p>

clientonly/index.js

@@ -1,126 +1,167 @@
 "use strict";
 
-// Use separate scope to prevent global scope pollution
-(function () {
+const http = require("node:http");
+const https = require("node:https");
+
+/**
+ * Get command line parameters
+ * Assumes that a cmdline parameter is defined with `--key [value]`
+ *
+ * example: `node clientonly --address localhost --port 8080 --use-tls`
+ * @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;
+}
+
+/**
+ * Helper function to get server address/hostname from either the commandline or env
+ * @returns {object} config object containing address, port, and tls properties
+ */
+function getServerParameters () {
 	const config = {};
 
-	/**
-	 * 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
+	config.address = getCommandLineParameter("address", process.env.ADDRESS);
+	const portValue = getCommandLineParameter("port", process.env.PORT);
+	config.port = portValue ? parseInt(portValue, 10) : undefined;
 
-		// 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.includes("--use-tls");
 
-		// determine if "--use-tls"-flag was provided
-		config["tls"] = process.argv.indexOf("--use-tls") > 0;
-	}
+	return config;
+}
 
-	/**
-	 * 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 requested url
-			const lib = url.startsWith("https") ? require("https") : require("http");
-			const request = lib.get(url, (response) => {
-				let configData = "";
+/**
+ * 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 requested url
+		const lib = url.startsWith("https") ? https : http;
+		const request = lib.get(url, (response) => {
+			let configData = "";
 
-				// Gather incoming data
-				response.on("data", function (chunk) {
-					configData += chunk;
-				});
-				// Resolve promise at the end of the HTTP/HTTPS stream
-				response.on("end", function () {
+			// Gather incoming data
+			response.on("data", function (chunk) {
+				configData += chunk;
+			});
+			// Resolve promise at the end of the HTTP/HTTPS stream
+			response.on("end", function () {
+				try {
 					resolve(JSON.parse(configData));
-				});
-			});
-
-			request.on("error", function (error) {
-				reject(new Error(`Unable to read config from server (${url} (${error.message}`));
+				} catch (parseError) {
+					reject(new Error(`Failed to parse server response as JSON: ${parseError.message}`));
+				}
 			});
 		});
-	}
 
-	/**
-	 * 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 [--use-tls]'");
-		}
-		process.exit(code);
-	}
+		request.on("error", function (error) {
+			reject(new Error(`Unable to read config from server (${url}) (${error.message})`));
+		});
+	});
+}
 
-	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(`${prefix}${config.address}:${config.port}/config/`)
-			.then(function (configReturn) {
-				// Pass along the server config via an environment variable
-				const env = Object.create(process.env);
-				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);
-
-				// Pipe all child process output to current stdout
-				child.stdout.on("data", function (buf) {
-					process.stdout.write(`Client: ${buf}`);
-				});
-
-				// Pipe all child process errors to current stderr
-				child.stderr.on("data", function (buf) {
-					process.stderr.write(`Client: ${buf}`);
-				});
-
-				child.on("error", function (err) {
-					process.stdout.write(`Client: ${err}`);
-				});
-
-				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})`);
-			});
+/**
+ * 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.error(message);
 	} else {
-		fail();
+		console.error("Usage: 'node clientonly --address 192.168.1.10 --port 8080 [--use-tls]'");
 	}
-})();
+	process.exit(code);
+}
+
+/**
+ * Starts the client by connecting to the server and launching the Electron application
+ * @param {object} config server configuration
+ * @param {string} prefix http or https prefix
+ * @async
+ */
+async function startClient (config, prefix) {
+	try {
+		const serverUrl = `${prefix}${config.address}:${config.port}/config/`;
+		console.log(`Client: Connecting to server at ${serverUrl}`);
+		const configReturn = await getServerConfig(serverUrl);
+		console.log("Client: Successfully retrieved config from server");
+
+		// 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
+		const env = { ...process.env };
+		env.clientonly = true;
+		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("node:child_process").spawn(electron, elecParams, options);
+
+		// Pipe all child process output to current stdout
+		child.stdout.on("data", function (buf) {
+			process.stdout.write(`Client: ${buf}`);
+		});
+
+		// Pipe all child process errors to current stderr
+		child.stderr.on("data", function (buf) {
+			process.stderr.write(`Client: ${buf}`);
+		});
+
+		child.on("error", function (err) {
+			process.stderr.write(`Client: ${err}`);
+		});
+
+		child.on("close", (code) => {
+			if (code !== 0) {
+				fail(`There is something wrong. The clientonly process exited with code ${code}.`);
+			}
+		});
+	} catch (reason) {
+		fail(`Unable to connect to server: (${reason})`);
+	}
+}
+
+// Main execution
+const config = getServerParameters();
+const prefix = config.tls ? "https://" : "http://";
+
+// Validate port
+if (config.port !== undefined && (isNaN(config.port) || config.port < 1 || config.port > 65535)) {
+	fail(`Invalid port number: ${config.port}. Port must be between 1 and 65535.`);
+}
+
+// Only start the client if a non-local server was provided and address/port are set
+const LOCAL_ADDRESSES = ["localhost", "127.0.0.1", "::1", "::ffff:127.0.0.1"];
+if (
+	config.address
+	&& config.port
+	&& !LOCAL_ADDRESSES.includes(config.address)
+) {
+	startClient(config, prefix);
+} else {
+	fail();
+}

config/config.js.sample

@@ -1,41 +1,41 @@
-/* MagicMirror² Config Sample
- *
- * By Michael Teeuw https://michaelteeuw.nl
- * MIT Licensed.
+/* Config Sample
  *
  * 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
  */
 let config = {
-	address: "localhost", 	// Address to listen on, can be:
+	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,
-	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"],
+	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
+	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",
+	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",
-	// serverOnly:  true/false/"local" ,
-	// local for armv6l processors, default
-	//   starts serveronly and then starts chrome browser
-	// false, default for all NON-armv6l devices
-	// true, force serveronly mode, because you want to.. no UI on this device
 
 	modules: [
 		{
@@ -56,8 +56,9 @@ let config = {
 			config: {
 				calendars: [
 					{
+						fetchInterval: 7 * 24 * 60 * 60 * 1000,
 						symbol: "calendar-check",
-						url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics"
+						url: "https://ics.calendarlabs.com/76/mm3137/US_Holidays.ics"
 					}
 				]
 			}
@@ -70,11 +71,10 @@ let config = {
 			module: "weather",
 			position: "top_right",
 			config: {
-				weatherProvider: "openweathermap",
+				weatherProvider: "openmeteo",
 				type: "current",
-				location: "New York",
-				locationID: "5128581", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
-				apiKey: "YOUR_OPENWEATHER_API_KEY"
+				lat: 40.776676,
+				lon: -73.971321
 			}
 		},
 		{
@@ -82,11 +82,10 @@ let config = {
 			position: "top_right",
 			header: "Weather Forecast",
 			config: {
-				weatherProvider: "openweathermap",
+				weatherProvider: "openmeteo",
 				type: "forecast",
-				location: "New York",
-				locationID: "5128581", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
-				apiKey: "YOUR_OPENWEATHER_API_KEY"
+				lat: 40.776676,
+				lon: -73.971321
 			}
 		},
 		{
@@ -109,4 +108,4 @@ let config = {
 };
 
 /*************** DO NOT EDIT THE LINE BELOW ***************/
-if (typeof module !== "undefined") {module.exports = config;}
+if (typeof module !== "undefined") { module.exports = config; }

config/custom.css.sample

@@ -1,10 +1,8 @@
-/* MagicMirror² Custom CSS Sample
+/* 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;'
- *
- * MIT Licensed.
  */
 
 /* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */
@@ -18,7 +16,7 @@
 
   --font-primary: "Roboto Condensed";
   --font-secondary: "Roboto";
-  
+
   --font-size: 20px;
   --font-size-small: 0.75rem;
 
@@ -26,6 +24,6 @@
   --gap-body-right: 60px;
   --gap-body-bottom: 60px;
   --gap-body-left: 60px;
-  
+
   --gap-modules: 30px;
 }

cspell.config.json

@@ -0,0 +1,363 @@
+{
+	"version": "0.2",
+	"language": "en",
+	"words": [
+		"aarch",
+		"Adak",
+		"Alvinger",
+		"Ampio",
+		"andrezibaia",
+		"angeldeejay",
+		"apikey",
+		"apiontek",
+		"armv",
+		"ashishtank",
+		"autoplay",
+		"Autorestart",
+		"beada",
+		"Behaviour",
+		"Binney",
+		"bluemanos",
+		"bnitkin",
+		"bokmål",
+		"bouncyflip",
+		"boxspinner",
+		"Brasileiro",
+		"Brento",
+		"browserwindow",
+		"bryanzzhu",
+		"btoconnor",
+		"bughaver",
+		"bugsounet",
+		"buxxi",
+		"byday",
+		"calcage",
+		"calendarfetcher",
+		"calendarfetcherutils",
+		"calendarutils",
+		"calevents",
+		"chamakura",
+		"Citypage",
+		"cjbrunner",
+		"clearsky",
+		"clientonly",
+		"clockfaces",
+		"cloudcover",
+		"cmdline",
+		"codac",
+		"Codrops",
+		"cornerexpand",
+		"Crazylegstoo",
+		"crazyscot",
+		"Creepin",
+		"currentweather",
+		"CUSTOMCSS",
+		"customregions",
+		"cxmj",
+		"Cymraeg",
+		"dariom",
+		"darksky",
+		"dataheaders",
+		"Datamart",
+		"dateheader",
+		"dateheaders",
+		"datekey",
+		"dathbe",
+		"davide",
+		"DAYAFTERTOMORROW",
+		"DAYBEFOREYESTERDAY",
+		"defaultmodules",
+		"Deificit",
+		"Descr",
+		"dewpoint",
+		"dgoth",
+		"difflink",
+		"dismissttl",
+		"Displayer",
+		"dkallen",
+		"drivelist",
+		"DTEND",
+		"DTSTAMP",
+		"DTSTART",
+		"Duffman",
+		"earlman",
+		"easyas",
+		"eddiehung",
+		"Edgardos",
+		"Ekristoffe",
+		"elec",
+		"elif",
+		"eltociear",
+		"endfor",
+		"endmacro",
+		"envcanada",
+		"envsub",
+		"envsubst",
+		"eouia",
+		"Evapotranspration",
+		"exdate",
+		"exdates",
+		"expectedheaders",
+		"exploader",
+		"ezeholz",
+		"Fadesteps",
+		"Faizan",
+		"feedme",
+		"feelslike",
+		"Fenner",
+		"Feuchte",
+		"fewieden",
+		"fixuppm",
+		"flopp",
+		"fontawesome",
+		"fontface",
+		"forecastweather",
+		"fortawesome",
+		"frameguard",
+		"freezinglevel",
+		"Frysk",
+		"fullarticle",
+		"fulldate",
+		"fullday",
+		"fullscreen",
+		"geraki",
+		"Gevoelstemperatuur",
+		"GHSA",
+		"ghsas",
+		"grenagit",
+		"Halfclear",
+		"heavyrain",
+		"heavyrainandthunder",
+		"heavyrainshowers",
+		"heavyrainshowersandthunder",
+		"heavysleet",
+		"heavysleetshowersandthunder",
+		"heavysnow",
+		"heavysnowandthunder",
+		"Heiko",
+		"Hirschberger",
+		"hourlyweather",
+		"humidex",
+		"Hwind",
+		"ical",
+		"illimarkangur",
+		"Ingan",
+		"ipfilter",
+		"ismarslomic",
+		"jakemulley",
+		"jakobsarwary",
+		"jalibu",
+		"jargordon",
+		"jetson",
+		"jkriegshauser",
+		"jsdocs",
+		"jsonlint",
+		"jupadin",
+		"kaennchenstruggle",
+		"Kalenderwoche",
+		"kenzal",
+		"Keyport",
+		"khassel",
+		"Kingdon",
+		"kioskmode",
+		"klaernie",
+		"kleinmantara",
+		"Kmph",
+		"Knapoc",
+		"Koepke",
+		"kolbyjack",
+		"Komplex",
+		"krekos",
+		"Kristjan",
+		"krukle",
+		"labwc",
+		"Landis",
+		"larryare",
+		"Lastberechnung",
+		"letsencrypt",
+		"libgpiod",
+		"Lightspeed",
+		"loadingcircle",
+		"locationforecast",
+		"logg",
+		"lockstring",
+		"lstrip",
+		"Luciella",
+		"luxon",
+		"lxsession",
+		"magicmirror",
+		"martingron",
+		"marvai",
+		"mastermerge",
+		"matchtype",
+		"maxentries",
+		"Meteo",
+		"michaelteeuw",
+		"michmich",
+		"Midori",
+		"mirontoli",
+		"MISSINGLANG",
+		"mixasgr",
+		"MMPM",
+		"modernizr",
+		"modulename",
+		"multiday",
+		"Mystara",
+		"Ñandú",
+		"nathannaveen",
+		"naveensrinivasan",
+		"nbsp",
+		"ndom",
+		"Nerfzooka",
+		"NEWSFEED",
+		"newsfeedfetcher",
+		"newsfetcher",
+		"newsitems",
+		"nfogal",
+		"njwilliams",
+		"nonrepeating",
+		"Norsk",
+		"nunjuck",
+		"odroid",
+		"oemel",
+		"oldconfig",
+		"onecall",
+		"onevent",
+		"openmeteo",
+		"openmeto",
+		"openweathermap",
+		"oraclesean",
+		"oscarb",
+		"pcat",
+		"philnagel",
+		"pirateweather",
+		"plained",
+		"plebcity",
+		"pmax",
+		"pmean",
+		"pmedian",
+		"pmin",
+		"Português",
+		"PRECIP",
+		"Problema",
+		"psieg",
+		"pubdate",
+		"radokristof",
+		"rajniszp",
+		"rebuilded",
+		"Reis",
+		"rejas",
+		"relativehumidity",
+		"resultstring",
+		"Resig",
+		"roboto",
+		"rohitdharavath",
+		"Rosso",
+		"Rothfusz",
+		"rrule",
+		"savvadam",
+		"sdetweil",
+		"searchstr",
+		"sendheaders",
+		"serveronly",
+		"sexualized",
+		"Sitecode",
+		"skpanagiotis",
+		"SMHI",
+		"Snille",
+		"snowandthunder",
+		"snowshowersandthunder",
+		"socketclient",
+		"socketio",
+		"spectron",
+		"Starinvest",
+		"stationid",
+		"STEADMAN",
+		"sthuber",
+		"Stieber",
+		"strinner",
+		"stylelintrc",
+		"sunaction",
+		"suncalc",
+		"suntimes",
+		"symboltest",
+		"systeminformation",
+		"tada",
+		"taglist",
+		"Teeuw",
+		"Teil",
+		"TESTMODE",
+		"testpass",
+		"testuser",
+		"teststring",
+		"thomasrockhu",
+		"thumbslider",
+		"timeformat",
+		"titlereplacestr",
+		"titlesearchstr",
+		"todaytemp",
+		"tomzt",
+		"trunc",
+		"ttlms",
+		"ukmetoffice",
+		"ukmetofficedatahub",
+		"unitless",
+		"unixtime",
+		"unparseable",
+		"updatenotification",
+		"uxdt",
+		"Vaice",
+		"veeck",
+		"verjaardag",
+		"VEVENT",
+		"vgtu",
+		"Vitest",
+		"VCALENDAR",
+		"Voelt",
+		"Vorberechnung",
+		"vppencilsharpener",
+		"Wallys",
+		"Weatherbit",
+		"weathercode",
+		"WEATHERDATA",
+		"Weatherflow",
+		"weatherforecast",
+		"weathergov",
+		"weathericon",
+		"weathericons",
+		"weatherobject",
+		"weatherprovider",
+		"weatherutils",
+		"webcal",
+		"winddirection",
+		"windgusts",
+		"windspeed",
+		"WKST",
+		"Woolridge",
+		"worktree",
+		"Wsymb",
+		"xlarge",
+		"xmark",
+		"xrandr",
+		"xsmall",
+		"xsorifc",
+		"xwindows",
+		"xxxe",
+		"Ybbet",
+		"yearmatch",
+		"yearmatchgroup"
+	],
+	"ignorePaths": [
+		"css/roboto.css",
+		"node_modules/**",
+		"modules/**",
+		"defaultmodules/**/translations/!(en).json",
+		"defaultmodules/calendar/windowsZones.json",
+		"defaultmodules/clock/faces/*.svg",
+		"defaultmodules/weather/providers/yr.js",
+		"tests/mocks/**",
+		"tests/e2e/modules/clock_es_spec.js",
+		"translations/**"
+	],
+	"dictionaries": ["node"]
+}

css/main.css

@@ -3,22 +3,18 @@
   --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;
 }
 
@@ -175,10 +171,7 @@ sup {
 
 .region.fullscreen {
   position: absolute;
-  top: calc(-1 * var(--gap-body-top));
-  left: calc(-1 * var(--gap-body-left));
-  right: calc(-1 * var(--gap-body-right));
-  bottom: calc(-1 * var(--gap-body-bottom));
+  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;
 }
 
@@ -246,3 +239,28 @@ sup {
   border-spacing: 0;
   border-collapse: separate;
 }
+
+/**
+ * Container Definitions.
+ */
+
+.region .container {
+  display: flex;
+  flex-direction: column;
+}
+
+.region .container.hidden {
+  display: none;
+}
+
+.region.left .flex {
+  justify-content: flex-start;
+}
+
+.region.center .flex {
+  justify-content: center;
+}
+
+.region.right .flex {
+  justify-content: flex-end;
+}

css/roboto.css

@@ -0,0 +1,671 @@
+/* roboto-cyrillic-ext-100-normal */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100;
+  src:
+    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;
+  font-style: normal;
+  font-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: 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: 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: 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: 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: 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: swap;
+  font-weight: 300;
+  src:
+    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-display: swap;
+  font-weight: 300;
+  src:
+    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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: swap;
+  font-weight: 500;
+  src:
+    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: 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: 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: 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: 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: 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: 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: swap;
+  font-weight: 700;
+  src:
+    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: 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: 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: 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: 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: 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: 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: swap;
+  font-weight: 300;
+  src:
+    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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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;
+}

defaultmodules/alert/alert.js

@@ -1,11 +1,5 @@
 /* global NotificationFx */
 
-/* MagicMirror²
- * Module: alert
- *
- * By Paul-Vincent Roll https://paulvincentroll.com/
- * MIT Licensed.
- */
 Module.register("alert", {
 	alerts: {},
 
@@ -17,33 +11,37 @@ Module.register("alert", {
 		welcome_message: false // shown at startup
 	},
 
-	getScripts() {
+	getScripts () {
 		return ["notificationFx.js"];
 	},
 
-	getStyles() {
-		return ["font-awesome.css", this.file(`./styles/notificationFx.css`), this.file(`./styles/${this.config.position}.css`)];
+	getStyles () {
+		return ["font-awesome.css", this.file("./styles/notificationFx.css"), this.file(`./styles/${this.config.position}.css`)];
 	},
 
-	getTranslations() {
+	getTranslations () {
 		return {
 			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"
+			pt: "translations/pt.json",
+			"pt-br": "translations/pt-br.json",
+			ru: "translations/ru.json",
+			th: "translations/th.json"
 		};
 	},
 
-	getTemplate(type) {
+	getTemplate (type) {
 		return `templates/${type}.njk`;
 	},
 
-	start() {
+	async start () {
 		Log.info(`Starting module: ${this.name}`);
 
 		if (this.config.effect === "slide") {
@@ -52,11 +50,11 @@ Module.register("alert", {
 
 		if (this.config.welcome_message) {
 			const message = this.config.welcome_message === true ? this.translate("welcome") : this.config.welcome_message;
-			this.showNotification({ title: this.translate("sysTitle"), message });
+			await this.showNotification({ title: this.translate("sysTitle"), message });
 		}
 	},
 
-	notificationReceived(notification, payload, sender) {
+	notificationReceived (notification, payload, sender) {
 		if (notification === "SHOW_ALERT") {
 			if (payload.type === "notification") {
 				this.showNotification(payload);
@@ -68,8 +66,8 @@ Module.register("alert", {
 		}
 	},
 
-	async showNotification(notification) {
-		const message = await this.renderMessage("notification", notification);
+	async showNotification (notification) {
+		const message = await this.renderMessage(notification.templateName || "notification", notification);
 
 		new NotificationFx({
 			message,
@@ -79,7 +77,7 @@ Module.register("alert", {
 		}).show();
 	},
 
-	async showAlert(alert, sender) {
+	async showAlert (alert, sender) {
 		// If module already has an open alert close it
 		if (this.alerts[sender.name]) {
 			this.hideAlert(sender, false);
@@ -90,7 +88,7 @@ Module.register("alert", {
 			this.toggleBlur(true);
 		}
 
-		const message = await this.renderMessage("alert", alert);
+		const message = await this.renderMessage(alert.templateName || "alert", alert);
 
 		// Store alert in this.alerts
 		this.alerts[sender.name] = new NotificationFx({
@@ -112,7 +110,7 @@ Module.register("alert", {
 		}
 	},
 
-	hideAlert(sender, close = true) {
+	hideAlert (sender, close = true) {
 		// Dismiss alert and remove from this.alerts
 		if (this.alerts[sender.name]) {
 			this.alerts[sender.name].dismiss(close);
@@ -124,11 +122,11 @@ Module.register("alert", {
 		}
 	},
 
-	renderMessage(type, data) {
+	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);
+					Log.error("[alert] Failed to render alert", err);
 				}
 
 				resolve(res);
@@ -136,7 +134,7 @@ Module.register("alert", {
 		});
 	},
 
-	toggleBlur(add = false) {
+	toggleBlur (add = false) {
 		const method = add ? "add" : "remove";
 		const modules = document.querySelectorAll(".module");
 		for (const module of modules) {

defaultmodules/alert/notificationFx.js

@@ -9,18 +9,17 @@
  *
  * Copyright 2014, Codrops
  * https://tympanus.net/codrops/
- *
  * @param {object} window The window object
  */
 (function (window) {
+
 	/**
 	 * 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) {
+	function extend (a, b) {
 		for (let key in b) {
 			if (b.hasOwnProperty(key)) {
 				a[key] = b[key];
@@ -31,11 +30,10 @@
 
 	/**
 	 * 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();
@@ -61,15 +59,15 @@
 		// notice, warning, error, success
 		// will add class ns-type-warning, ns-type-error or ns-type-success
 		type: "notice",
-		// if the user doesn´t close the notification then we remove it
+		// if the user doesn't close the notification then we remove it
 		// after the following time
 		ttl: 6000,
 		al_no: "ns-box",
 		// callbacks
-		onClose: function () {
+		onClose () {
 			return false;
 		},
-		onOpen: function () {
+		onOpen () {
 			return false;
 		}
 	};
@@ -80,8 +78,8 @@
 	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;
-		let 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;
@@ -124,7 +122,6 @@
 
 	/**
 	 * Dismiss the notification
-	 *
 	 * @param {boolean} [close] call the onClose callback at the end
 	 */
 	NotificationFx.prototype.dismiss = function (close = true) {
@@ -157,4 +154,4 @@
 	 * Add to global namespace
 	 */
 	window.NotificationFx = NotificationFx;
-})(window);
+}(window));

defaultmodules/alert/styles/notificationFx.css

@@ -1,7 +1,7 @@
 /* Based on work by https://tympanus.net/codrops/licensing/ */
 
 .ns-box {
-  background-color: rgba(0, 0, 0, 0.93);
+  background-color: rgb(0 0 0 / 93%);
   padding: 17px;
   line-height: 1.4;
   margin-bottom: 10px;
@@ -9,7 +9,7 @@
   font-size: 70%;
   position: relative;
   display: table;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   max-width: 100%;
   border-width: 1px;
   border-radius: 5px;
@@ -35,7 +35,7 @@
   top: 40%;
   width: 40%;
   height: auto;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   border-radius: 20px;
 }
 
@@ -55,15 +55,15 @@
 
 .ns-effect-flip.ns-show,
 .ns-effect-flip.ns-hide {
-  animation-name: animFlipFront;
+  animation-name: anim-flip-front;
   animation-duration: 0.3s;
 }
 
 .ns-effect-flip.ns-hide {
-  animation-name: animFlipBack;
+  animation-name: anim-flip-back;
 }
 
-@keyframes animFlipFront {
+@keyframes anim-flip-front {
   0% {
     transform: perspective(1000px) rotate3d(1, 0, 0, -90deg);
   }
@@ -73,7 +73,7 @@
   }
 }
 
-@keyframes animFlipBack {
+@keyframes anim-flip-back {
   0% {
     transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
   }
@@ -85,11 +85,11 @@
 
 .ns-effect-bouncyflip.ns-show,
 .ns-effect-bouncyflip.ns-hide {
-  animation-name: flipInX;
+  animation-name: flip-in-x;
   animation-duration: 0.8s;
 }
 
-@keyframes flipInX {
+@keyframes flip-in-x {
   0% {
     transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
     transition-timing-function: ease-in;
@@ -117,11 +117,11 @@
 }
 
 .ns-effect-bouncyflip.ns-hide {
-  animation-name: flipInXSimple;
+  animation-name: flip-in-x-simple;
   animation-duration: 0.3s;
 }
 
-@keyframes flipInXSimple {
+@keyframes flip-in-x-simple {
   0% {
     transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
     transition-timing-function: ease-in;
@@ -141,11 +141,11 @@
 }
 
 .ns-effect-exploader.ns-show {
-  animation-name: animLoad;
+  animation-name: anim-load;
   animation-duration: 1s;
 }
 
-@keyframes animLoad {
+@keyframes anim-load {
   0% {
     opacity: 1;
     transform: scale3d(0, 0.3, 1);
@@ -158,7 +158,7 @@
 }
 
 .ns-effect-exploader.ns-hide {
-  animation-name: animFade;
+  animation-name: anim-fade;
   animation-duration: 0.3s;
 }
 
@@ -170,15 +170,15 @@
 }
 
 .ns-effect-exploader.ns-show .ns-close {
-  animation-name: animFade;
+  animation-name: anim-fade;
 }
 
 .ns-effect-exploader.ns-show .ns-box-inner {
-  animation-name: animFadeMove;
+  animation-name: anim-fade-move;
   animation-timing-function: ease-out;
 }
 
-@keyframes animFadeMove {
+@keyframes anim-fade-move {
   0% {
     opacity: 0;
     transform: translate3d(0, 10px, 0);
@@ -190,7 +190,7 @@
   }
 }
 
-@keyframes animFade {
+@keyframes anim-fade {
   0% {
     opacity: 0;
   }
@@ -202,11 +202,11 @@
 
 .ns-effect-scale.ns-show,
 .ns-effect-scale.ns-hide {
-  animation-name: animScale;
+  animation-name: anim-scale;
   animation-duration: 0.25s;
 }
 
-@keyframes animScale {
+@keyframes anim-scale {
   0% {
     opacity: 0;
     transform: translate3d(0, 40px, 0) scale3d(0.1, 0.6, 1);
@@ -219,168 +219,169 @@
 }
 
 .ns-effect-jelly.ns-show {
-  animation-name: animJelly;
+  animation-name: anim-jelly;
   animation-duration: 1s;
   animation-timing-function: linear;
 }
 
 .ns-effect-jelly.ns-hide {
-  animation-name: animFade;
+  animation-name: anim-fade;
   animation-duration: 0.3s;
 }
 
-@keyframes animFade {
+@keyframes anim-fade {
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
 }
 
-@keyframes animJelly {
+@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.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    transform: matrix3d(0.9204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
   }
 
   10.416667% {
-    transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    transform: matrix3d(1, 0, 0, 0, 0, 1.082, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
   }
 
   14.583333% {
-    transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    transform: matrix3d(1.0508, 0, 0, 0, 0, 1.0201, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
   }
 
   25% {
-    transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    transform: matrix3d(1.0449, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
   }
 
   27.083333% {
-    transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    transform: matrix3d(1, 0, 0, 0, 0, 0.9877, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
   }
 
   39.583333% {
-    transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    transform: matrix3d(0.9937, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
   }
 
   43.75% {
-    transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    transform: matrix3d(0.9924, 0, 0, 0, 0, 1.0073, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
   }
 
   50% {
-    transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    transform: matrix3d(0.9982, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
   }
 
   60.416667% {
-    transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    transform: matrix3d(1, 0, 0, 0, 0, 0.9982, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
   }
 
   64.583333% {
-    transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    transform: matrix3d(1.0011, 0, 0, 0, 0, 0.9996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
   }
 
   75% {
@@ -388,47 +389,47 @@
   }
 
   77.083333% {
-    transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    transform: matrix3d(1, 0, 0, 0, 0, 1.0003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
   }
 
   89.583333% {
-    transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    transform: matrix3d(0.9999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
   }
 
   93.75% {
-    transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    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.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    transform: matrix3d(0.9998, 0, 0, 0, 0, 0.9998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
   }
 
   100% {
@@ -437,162 +438,162 @@
 }
 
 .ns-effect-slide-left.ns-show {
-  animation-name: animSlideElasticLeft;
+  animation-name: anim-slide-elastic-left;
   animation-duration: 1s;
   animation-timing-function: linear;
 }
 
-@keyframes animSlideElasticLeft {
+@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.92933, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -739.26805, 0, 0, 1);
+    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.96989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -521.82545, 0, 0, 1);
+    transform: matrix3d(1.9699, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -521.8255, 0, 0, 1);
   }
 
   5% {
-    transform: matrix3d(1.70901, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -349.26115, 0, 0, 1);
+    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.4235, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -218.3238, 0, 0, 1);
+    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.21065, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -123.29848, 0, 0, 1);
+    transform: matrix3d(1.2107, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -123.2985, 0, 0, 1);
   }
 
   10% {
-    transform: matrix3d(1.08167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -57.59273, 0, 0, 1);
+    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.0165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -14.72371, 0, 0, 1);
+    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.99057, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 11.12794, 0, 0, 1);
+    transform: matrix3d(0.9906, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 11.1279, 0, 0, 1);
   }
 
   15% {
-    transform: matrix3d(0.98478, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 24.86339, 0, 0, 1);
+    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.98719, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30.40503, 0, 0, 1);
+    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.9916, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30.75275, 0, 0, 1);
+    transform: matrix3d(0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30.7528, 0, 0, 1);
   }
 
   20% {
-    transform: matrix3d(0.99541, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 28.10141, 0, 0, 1);
+    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.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 23.98271, 0, 0, 1);
+    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.99936, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 19.40752, 0, 0, 1);
+    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.99558, 0, 0, 1);
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 14.9956, 0, 0, 1);
   }
 
   26.666667% {
-    transform: matrix3d(1.00021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 11.08575, 0, 0, 1);
+    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.00022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 7.82507, 0, 0, 1);
+    transform: matrix3d(1.0002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 7.8251, 0, 0, 1);
   }
 
   30% {
-    transform: matrix3d(1.00016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.23737, 0, 0, 1);
+    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.0001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.27389, 0, 0, 1);
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.2739, 0, 0, 1);
   }
 
   33.333333% {
-    transform: matrix3d(1.00005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.84893, 0, 0, 1);
+    transform: matrix3d(1.0001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.8489, 0, 0, 1);
   }
 
   35% {
-    transform: matrix3d(1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.86364, 0, 0, 1);
+    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.22079, 0, 0, 1);
+    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.16687, 0, 0, 1);
+    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.37284, 0, 0, 1);
+    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.45594, 0, 0, 1);
+    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.46116, 0, 0, 1);
+    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.4214, 0, 0, 1);
+    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.35963, 0, 0, 1);
+    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.29103, 0, 0, 1);
+    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.22487, 0, 0, 1);
+    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.16624, 0, 0, 1);
+    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.11734, 0, 0, 1);
+    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.07854, 0, 0, 1);
+    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.04909, 0, 0, 1);
+    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.02773, 0, 0, 1);
+    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.01295, 0, 0, 1);
+    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.00331, 0, 0, 1);
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0033, 0, 0, 1);
   }
 
   63.333333% {
@@ -600,67 +601,67 @@
   }
 
   65% {
-    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00559, 0, 0, 1);
+    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.00684, 0, 0, 1);
+    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.00692, 0, 0, 1);
+    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.00632, 0, 0, 1);
+    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.00539, 0, 0, 1);
+    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.00436, 0, 0, 1);
+    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.00337, 0, 0, 1);
+    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.00249, 0, 0, 1);
+    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.00176, 0, 0, 1);
+    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.00118, 0, 0, 1);
+    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.00074, 0, 0, 1);
+    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.00042, 0, 0, 1);
+    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.00019, 0, 0, 1);
+    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.00005, 0, 0, 1);
+    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.00004, 0, 0, 1);
+    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.00008, 0, 0, 1);
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1);
   }
 
   91.666667% {
@@ -672,15 +673,15 @@
   }
 
   95% {
-    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00009, 0, 0, 1);
+    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.00008, 0, 0, 1);
+    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.00007, 0, 0, 1);
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1);
   }
 
   100% {
@@ -689,11 +690,11 @@
 }
 
 .ns-effect-slide-left.ns-hide {
-  animation-name: animSlideLeft;
+  animation-name: anim-slide-left;
   animation-duration: 0.25s;
 }
 
-@keyframes animSlideLeft {
+@keyframes anim-slide-left {
   0% {
     transform: translate3d(-30px, 0, 0) translate3d(-100%, 0, 0);
   }
@@ -704,10 +705,10 @@
 }
 
 .ns-effect-slide-right.ns-show {
-  animation: animSlideElasticRight 2000ms linear both;
+  animation: anim-slide-elastic-right 2000ms linear both;
 }
 
-@keyframes animSlideElasticRight {
+@keyframes anim-slide-elastic-right {
   0% {
     transform: matrix3d(2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1000, 0, 0, 1);
   }
@@ -786,11 +787,11 @@
 }
 
 .ns-effect-slide-right.ns-hide {
-  animation-name: animSlideRight;
+  animation-name: anim-slide-right;
   animation-duration: 0.25s;
 }
 
-@keyframes animSlideRight {
+@keyframes anim-slide-right {
   0% {
     transform: translate3d(30px, 0, 0) translate3d(100%, 0, 0);
   }
@@ -801,10 +802,10 @@
 }
 
 .ns-effect-slide-center.ns-show {
-  animation: animSlideElasticCenter 2000ms linear both;
+  animation: anim-slide-elastic-center 2000ms linear both;
 }
 
-@keyframes animSlideElasticCenter {
+@keyframes anim-slide-elastic-center {
   0% {
     transform: matrix3d(1, 0, 0, 0, 0, 3, 0, 0, 0, 0, 1, 0, 0, -300, 0, 1);
   }
@@ -883,11 +884,11 @@
 }
 
 .ns-effect-slide-center.ns-hide {
-  animation-name: animSlideCenter;
+  animation-name: anim-slide-center;
   animation-duration: 0.25s;
 }
 
-@keyframes animSlideCenter {
+@keyframes anim-slide-center {
   0% {
     transform: translate3d(0, -30px, 0) translate3d(0, -100%, 0);
   }
@@ -899,11 +900,11 @@
 
 .ns-effect-genie.ns-show,
 .ns-effect-genie.ns-hide {
-  animation-name: animGenie;
+  animation-name: anim-genie;
   animation-duration: 0.4s;
 }
 
-@keyframes animGenie {
+@keyframes anim-genie {
   0% {
     opacity: 0;
     transform: translate3d(0, calc(200% + 30px), 0) scale3d(0, 1, 1);

defaultmodules/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 %}

defaultmodules/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 %}

defaultmodules/alert/translations/el.json

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

defaultmodules/alert/translations/eo.json

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

defaultmodules/alert/translations/pt-br.json

@@ -0,0 +1,4 @@
+{
+	"sysTitle": "Notificação do MagicMirror²",
+	"welcome": "Bem-vindo, o sistema iniciou com sucesso!"
+}

defaultmodules/alert/translations/pt.json

@@ -0,0 +1,4 @@
+{
+	"sysTitle": "Notificação do MagicMirror²",
+	"welcome": "Bem-vindo, o sistema iniciou com sucesso!"
+}

defaultmodules/alert/translations/th.json

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

defaultmodules/calendar/calendar.css

@@ -0,0 +1,15 @@
+.calendar .symbol {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 5px;
+}
+
+.calendar .title {
+  padding: 0 10px;
+}
+
+.calendar .time {
+  padding-left: 20px;
+  text-align: right;
+}

defaultmodules/calendar/calendar.js

@@ -0,0 +1,945 @@
+/* global CalendarUtils */
+
+Module.register("calendar", {
+	// Define module defaults
+	defaults: {
+		maximumEntries: 10, // Total Maximum Entries
+		maximumNumberOfDays: 365,
+		limitDays: 0, // Limit the number of days shown, 0 = no limit
+		pastDaysCount: 0,
+		displaySymbol: true,
+		defaultSymbol: "calendar-days", // Fontawesome Symbol see https://fontawesome.com/search?ic=free&o=r
+		defaultSymbolClassName: "fas fa-fw fa-",
+		showLocation: false,
+		displayRepeatingCountTitle: false,
+		defaultRepeatingCountTitle: "",
+		maxTitleLength: 25,
+		maxLocationTitleLength: 25,
+		wrapEvents: false, // Wrap events to multiple lines breaking at maxTitleLength
+		wrapLocationEvents: false,
+		maxTitleLines: 3,
+		maxEventTitleLines: 3,
+		fetchInterval: 60 * 60 * 1000, // Update every hour
+		animationSpeed: 2000,
+		fade: true,
+		fadePoint: 0.25, // Start on 1/4th of the list.
+		urgency: 7,
+		timeFormat: "relative",
+		dateFormat: "MMM Do",
+		dateEndFormat: "LT",
+		fullDayEventDateFormat: "MMM Do",
+		showEnd: false,
+		showEndsOnlyWithDuration: false,
+		getRelative: 6,
+		hidePrivate: false,
+		hideOngoing: false,
+		hideTime: false,
+		hideDuplicates: true,
+		showTimeToday: false,
+		colored: false,
+		forceUseCurrentTime: false,
+		tableClass: "small",
+		calendars: [
+			{
+				symbol: "calendar-alt",
+				url: "https://www.calendarlabs.com/templates/ical/US-Holidays.ics"
+			}
+		],
+		customEvents: [
+			// Array of {keyword: "", symbol: "", color: "", eventClass: ""} where Keyword is a regexp and symbol/color/eventClass are to be applied for matched
+			{ keyword: ".*", transform: { search: "De verjaardag van ", replace: "" } },
+			{ keyword: ".*", transform: { search: "'s birthday", replace: "" } }
+		],
+		locationTitleReplace: {
+			"street ": ""
+		},
+		broadcastEvents: true,
+		excludedEvents: [],
+		sliceMultiDayEvents: false,
+		broadcastPastEvents: false,
+		nextDaysRelative: false,
+		selfSignedCert: false,
+		coloredText: false,
+		coloredBorder: false,
+		coloredSymbol: false,
+		coloredBackground: false,
+		limitDaysNeverSkip: false,
+		flipDateHeaderTitle: false,
+		updateOnFetch: true
+	},
+
+	// Define required scripts.
+	getStyles () {
+		return ["calendar.css", "font-awesome.css"];
+	},
+
+	// Define required scripts.
+	getScripts () {
+		return ["calendarutils.js", "moment.js", "moment-timezone.js"];
+	},
+
+	// Define required translations.
+	getTranslations () {
+
+		/*
+		 * The translations for the default modules are defined in the core translation files.
+		 * Therefore we can just return false. Otherwise we should have returned a dictionary.
+		 * If you're trying to build your own module including translations, check out the documentation.
+		 */
+		return false;
+	},
+
+	// Override start method.
+	start () {
+		Log.info(`Starting module: ${this.name}`);
+
+		if (this.config.colored) {
+			Log.warn("[calendar] Your are using the deprecated config values 'colored'. Please switch to 'coloredSymbol' & 'coloredText'!");
+			this.config.coloredText = true;
+			this.config.coloredSymbol = true;
+		}
+		if (this.config.coloredSymbolOnly) {
+			Log.warn("[calendar] Your are using the deprecated config values 'coloredSymbolOnly'. Please switch to 'coloredSymbol' & 'coloredText'!");
+			this.config.coloredText = false;
+			this.config.coloredSymbol = true;
+		}
+
+		// Set locale.
+		moment.updateLocale(config.language, CalendarUtils.getLocaleSpecification(config.timeFormat));
+
+		// clear data holder before start
+		this.calendarData = {};
+
+		// indicate no data available yet
+		this.loaded = false;
+
+		// data holder of calendar url. Avoid fade out/in on updateDom (one for each calendar update)
+		this.calendarDisplayer = {};
+
+		this.config.calendars.forEach((calendar) => {
+			calendar.url = calendar.url.replace("webcal://", "http://");
+
+			const calendarConfig = {
+				maximumEntries: calendar.maximumEntries,
+				maximumNumberOfDays: calendar.maximumNumberOfDays,
+				pastDaysCount: calendar.pastDaysCount,
+				broadcastPastEvents: calendar.broadcastPastEvents,
+				selfSignedCert: calendar.selfSignedCert,
+				excludedEvents: calendar.excludedEvents,
+				fetchInterval: calendar.fetchInterval
+			};
+
+			if (typeof calendar.symbolClass === "undefined" || calendar.symbolClass === null) {
+				calendarConfig.symbolClass = "";
+			}
+			if (typeof calendar.titleClass === "undefined" || calendar.titleClass === null) {
+				calendarConfig.titleClass = "";
+			}
+			if (typeof calendar.timeClass === "undefined" || calendar.timeClass === null) {
+				calendarConfig.timeClass = "";
+			}
+
+			// we check user and password here for backwards compatibility with old configs
+			if (calendar.user && calendar.pass) {
+				Log.warn("[calendar] Deprecation warning: Please update your calendar authentication configuration.");
+				Log.warn("https://docs.magicmirror.builders/modules/calendar.html#configuration-options");
+				calendar.auth = {
+					user: calendar.user,
+					pass: calendar.pass
+				};
+			}
+
+			/*
+			 * tell helper to start a fetcher for this calendar
+			 * fetcher till cycle
+			 */
+			this.addCalendar(calendar.url, calendar.auth, calendarConfig);
+		});
+
+		// for backward compatibility titleReplace
+		if (typeof this.config.titleReplace !== "undefined") {
+			Log.warn("[calendar] Deprecation warning: Please consider upgrading your calendar titleReplace configuration to customEvents.");
+			for (const [titlesearchstr, titlereplacestr] of Object.entries(this.config.titleReplace)) {
+				this.config.customEvents.push({ keyword: ".*", transform: { search: titlesearchstr, replace: titlereplacestr } });
+			}
+		}
+
+		this.selfUpdate();
+	},
+
+	notificationReceived (notification, payload, sender) {
+		if (notification === "FETCH_CALENDAR") {
+			this.sendSocketNotification(notification, { url: payload.url, id: this.identifier });
+		}
+	},
+
+	// Override socket notification handler.
+	socketNotificationReceived (notification, payload) {
+
+		if (this.identifier !== payload.id) {
+			return;
+		}
+
+		if (notification === "CALENDAR_EVENTS") {
+			// have we received events for this url
+			if (!this.calendarData[payload.url]) {
+				// no, setup the structure to hold the info
+				this.calendarData[payload.url] = { events: null, checksum: null };
+			}
+			// save the event list
+			this.calendarData[payload.url].events = payload.events;
+
+			this.error = null;
+			this.loaded = true;
+
+			if (this.config.broadcastEvents) {
+				this.broadcastEvents();
+			}
+			// if the checksum is the same
+			if (this.calendarData[payload.url].checksum === payload.checksum) {
+				// then don't update the UI
+				return;
+			}
+			// haven't seen or the checksum is different
+			this.calendarData[payload.url].checksum = payload.checksum;
+
+			if (!this.config.updateOnFetch) {
+				if (this.calendarDisplayer[payload.url] === undefined) {
+					// calendar will never displayed, so display it
+					this.updateDom(this.config.animationSpeed);
+					// set this calendar as displayed
+					this.calendarDisplayer[payload.url] = true;
+				} else {
+					Log.debug("[calendar] DOM not updated waiting self update()");
+				}
+				return;
+			}
+		} else if (notification === "CALENDAR_ERROR") {
+			let error_message = this.translate(payload.error_type);
+			this.error = this.translate("MODULE_CONFIG_ERROR", { MODULE_NAME: this.name, ERROR: error_message });
+			this.loaded = true;
+		}
+
+		this.updateDom(this.config.animationSpeed);
+	},
+
+	// Override dom generator.
+	getDom () {
+		const events = this.createEventList(true);
+		const wrapper = document.createElement("table");
+		wrapper.className = this.config.tableClass;
+
+		if (this.error) {
+			wrapper.innerHTML = this.error;
+			wrapper.className = `${this.config.tableClass} dimmed`;
+			return wrapper;
+		}
+
+		if (events.length === 0) {
+			wrapper.innerHTML = this.loaded ? this.translate("EMPTY") : this.translate("LOADING");
+			wrapper.className = `${this.config.tableClass} dimmed`;
+			return wrapper;
+		}
+
+		let currentFadeStep = 0;
+		let startFade;
+		let fadeSteps;
+
+		if (this.config.fade && this.config.fadePoint < 1) {
+			if (this.config.fadePoint < 0) {
+				this.config.fadePoint = 0;
+			}
+			startFade = events.length * this.config.fadePoint;
+			fadeSteps = events.length - startFade;
+		}
+
+		let lastSeenDate = "";
+
+		events.forEach((event, index) => {
+			const eventStartDateMoment = this.timestampToMoment(event.startDate);
+			const eventEndDateMoment = this.timestampToMoment(event.endDate);
+			const dateAsString = eventStartDateMoment.format(this.config.dateFormat);
+			if (this.config.timeFormat === "dateheaders") {
+				if (lastSeenDate !== dateAsString) {
+					const dateRow = document.createElement("tr");
+					dateRow.className = "dateheader normal";
+					if (event.today) dateRow.className += " today";
+					else if (event.dayBeforeYesterday) dateRow.className += " dayBeforeYesterday";
+					else if (event.yesterday) dateRow.className += " yesterday";
+					else if (event.tomorrow) dateRow.className += " tomorrow";
+					else if (event.dayAfterTomorrow) dateRow.className += " dayAfterTomorrow";
+
+					const dateCell = document.createElement("td");
+					dateCell.colSpan = "3";
+					dateCell.innerHTML = dateAsString;
+					dateCell.style.paddingTop = "10px";
+					dateRow.appendChild(dateCell);
+					wrapper.appendChild(dateRow);
+
+					if (this.config.fade && index >= startFade) {
+						//fading
+						currentFadeStep = index - startFade;
+						dateRow.style.opacity = 1 - (1 / fadeSteps) * currentFadeStep;
+					}
+
+					lastSeenDate = dateAsString;
+				}
+			}
+
+			const eventWrapper = document.createElement("tr");
+
+			if (this.config.coloredText) {
+				eventWrapper.style.cssText = `color:${this.colorForUrl(event.url, false)}`;
+			}
+
+			if (this.config.coloredBackground) {
+				eventWrapper.style.backgroundColor = this.colorForUrl(event.url, true);
+			}
+
+			if (this.config.coloredBorder) {
+				eventWrapper.style.borderColor = this.colorForUrl(event.url, false);
+			}
+
+			eventWrapper.className = "event-wrapper normal event";
+			if (event.today) eventWrapper.className += " today";
+			else if (event.dayBeforeYesterday) eventWrapper.className += " dayBeforeYesterday";
+			else if (event.yesterday) eventWrapper.className += " yesterday";
+			else if (event.tomorrow) eventWrapper.className += " tomorrow";
+			else if (event.dayAfterTomorrow) eventWrapper.className += " dayAfterTomorrow";
+
+			const symbolWrapper = document.createElement("td");
+
+			if (this.config.displaySymbol) {
+				if (this.config.coloredSymbol) {
+					symbolWrapper.style.cssText = `color:${this.colorForUrl(event.url, false)}`;
+				}
+
+				const symbolClass = this.symbolClassForUrl(event.url);
+				symbolWrapper.className = `symbol ${symbolClass}`;
+
+				const symbols = this.symbolsForEvent(event);
+				symbols.forEach((s) => {
+					const symbol = document.createElement("span");
+					symbol.className = s;
+					symbolWrapper.appendChild(symbol);
+				});
+				eventWrapper.appendChild(symbolWrapper);
+			} else if (this.config.timeFormat === "dateheaders") {
+				const blankCell = document.createElement("td");
+				blankCell.innerHTML = "&nbsp;&nbsp;&nbsp;";
+				eventWrapper.appendChild(blankCell);
+			}
+
+			const titleWrapper = document.createElement("td");
+			let repeatingCountTitle = "";
+
+			if (this.config.displayRepeatingCountTitle && event.firstYear !== undefined) {
+				repeatingCountTitle = this.countTitleForUrl(event.url);
+
+				if (repeatingCountTitle !== "") {
+					const thisYear = eventStartDateMoment.year(),
+						yearDiff = thisYear - event.firstYear;
+
+					if (yearDiff > 0) {
+						repeatingCountTitle = `, ${yearDiff} ${repeatingCountTitle}`;
+					}
+				}
+			}
+
+			var transformedTitle = event.title;
+
+			// Color events if custom color or eventClass are specified, transform title if required
+			if (this.config.customEvents.length > 0) {
+				for (let ev in this.config.customEvents) {
+					let needle = new RegExp(this.config.customEvents[ev].keyword, "gi");
+					if (needle.test(event.title)) {
+						if (typeof this.config.customEvents[ev].transform === "object") {
+							transformedTitle = CalendarUtils.titleTransform(transformedTitle, [this.config.customEvents[ev].transform]);
+						}
+						if (typeof this.config.customEvents[ev].color !== "undefined" && this.config.customEvents[ev].color !== "") {
+							// Respect parameter ColoredSymbolOnly also for custom events
+							if (this.config.coloredText) {
+								eventWrapper.style.cssText = `color:${this.config.customEvents[ev].color}`;
+								titleWrapper.style.cssText = `color:${this.config.customEvents[ev].color}`;
+							}
+							if (this.config.displaySymbol && this.config.coloredSymbol) {
+								symbolWrapper.style.cssText = `color:${this.config.customEvents[ev].color}`;
+							}
+						}
+						if (typeof this.config.customEvents[ev].eventClass !== "undefined" && this.config.customEvents[ev].eventClass !== "") {
+							eventWrapper.className += ` ${this.config.customEvents[ev].eventClass}`;
+						}
+					}
+				}
+			}
+
+			titleWrapper.innerHTML = CalendarUtils.shorten(transformedTitle, this.config.maxTitleLength, this.config.wrapEvents, this.config.maxTitleLines) + repeatingCountTitle;
+
+			const titleClass = this.titleClassForUrl(event.url);
+
+			if (!this.config.coloredText) {
+				titleWrapper.className = `title bright ${titleClass}`;
+			} else {
+				titleWrapper.className = `title ${titleClass}`;
+			}
+
+			if (this.config.timeFormat === "dateheaders") {
+				if (this.config.flipDateHeaderTitle) eventWrapper.appendChild(titleWrapper);
+
+				if (event.fullDayEvent) {
+					titleWrapper.colSpan = "2";
+					titleWrapper.classList.add("align-left");
+				} else {
+					const timeWrapper = document.createElement("td");
+					timeWrapper.className = `time light ${this.config.flipDateHeaderTitle ? "align-right " : "align-left "}${this.timeClassForUrl(event.url)}`;
+					timeWrapper.style.paddingLeft = "2px";
+					timeWrapper.style.textAlign = this.config.flipDateHeaderTitle ? "right" : "left";
+					timeWrapper.innerHTML = eventStartDateMoment.format("LT");
+
+					// Add endDate to dataheaders if showEnd is enabled
+					if (this.config.showEnd) {
+						if (this.config.showEndsOnlyWithDuration && event.startDate === event.endDate) {
+							// no duration here, don't display end
+						} else {
+							timeWrapper.innerHTML += ` - ${CalendarUtils.capFirst(eventEndDateMoment.format("LT"))}`;
+						}
+					}
+
+					eventWrapper.appendChild(timeWrapper);
+
+					if (!this.config.flipDateHeaderTitle) titleWrapper.classList.add("align-right");
+				}
+				if (!this.config.flipDateHeaderTitle) eventWrapper.appendChild(titleWrapper);
+			} else {
+				const timeWrapper = document.createElement("td");
+
+				eventWrapper.appendChild(titleWrapper);
+				const now = moment();
+
+				if (this.config.timeFormat === "absolute") {
+					// Use dateFormat
+					timeWrapper.innerHTML = CalendarUtils.capFirst(eventStartDateMoment.format(this.config.dateFormat));
+					// Add end time if showEnd
+					if (this.config.showEnd) {
+						// and has a duration
+						if (event.startDate !== event.endDate) {
+							timeWrapper.innerHTML += "-";
+							timeWrapper.innerHTML += CalendarUtils.capFirst(eventEndDateMoment.format(this.config.dateEndFormat));
+						}
+					}
+
+					// For full day events we use the fullDayEventDateFormat
+					if (event.fullDayEvent) {
+						//subtract one second so that fullDayEvents end at 23:59:59, and not at 0:00:00 one the next day
+						eventEndDateMoment.subtract(1, "second");
+						timeWrapper.innerHTML = CalendarUtils.capFirst(eventStartDateMoment.format(this.config.fullDayEventDateFormat));
+						// only show end if requested and allowed and the dates are different
+						if (this.config.showEnd && !this.config.showEndsOnlyWithDuration && !eventStartDateMoment.isSame(eventEndDateMoment, "d")) {
+							timeWrapper.innerHTML += "-";
+							timeWrapper.innerHTML += CalendarUtils.capFirst(eventEndDateMoment.format(this.config.fullDayEventDateFormat));
+						} else if (!eventStartDateMoment.isSame(eventEndDateMoment, "d") && eventStartDateMoment.isBefore(now)) {
+							timeWrapper.innerHTML = CalendarUtils.capFirst(now.format(this.config.fullDayEventDateFormat));
+						}
+					} else if (this.config.getRelative > 0 && eventStartDateMoment.isBefore(now)) {
+						// Ongoing and getRelative is set
+						timeWrapper.innerHTML = CalendarUtils.capFirst(
+							this.translate("RUNNING", {
+								fallback: `${this.translate("RUNNING")} {timeUntilEnd}`,
+								timeUntilEnd: eventEndDateMoment.fromNow(true)
+							})
+						);
+					} else if (this.config.urgency > 0 && eventStartDateMoment.diff(now, "d") < this.config.urgency) {
+						// Within urgency days
+						timeWrapper.innerHTML = CalendarUtils.capFirst(eventStartDateMoment.fromNow());
+					}
+					if (event.fullDayEvent && this.config.nextDaysRelative) {
+						// Full days events within the next two days
+						if (event.today) {
+							timeWrapper.innerHTML = CalendarUtils.capFirst(this.translate("TODAY"));
+						} else if (event.yesterday) {
+							timeWrapper.innerHTML = CalendarUtils.capFirst(this.translate("YESTERDAY"));
+						} else if (event.tomorrow) {
+							timeWrapper.innerHTML = CalendarUtils.capFirst(this.translate("TOMORROW"));
+						} else if (event.dayAfterTomorrow) {
+							if (this.translate("DAYAFTERTOMORROW") !== "DAYAFTERTOMORROW") {
+								timeWrapper.innerHTML = CalendarUtils.capFirst(this.translate("DAYAFTERTOMORROW"));
+							}
+						}
+					}
+				} else {
+					// Show relative times
+					if (eventStartDateMoment.isSameOrAfter(now) || (event.fullDayEvent && eventEndDateMoment.diff(now, "days") === 0)) {
+						// Use relative time
+						if (!this.config.hideTime && !event.fullDayEvent) {
+							Log.debug("[calendar] event not hidden and not fullday");
+							timeWrapper.innerHTML = `${CalendarUtils.capFirst(eventStartDateMoment.calendar(null, { sameElse: this.config.dateFormat }))}`;
+						} else {
+							Log.debug("[calendar] event full day or hidden");
+							timeWrapper.innerHTML = `${CalendarUtils.capFirst(
+								eventStartDateMoment.calendar(null, {
+									sameDay: this.config.showTimeToday ? "LT" : `[${this.translate("TODAY")}]`,
+									nextDay: `[${this.translate("TOMORROW")}]`,
+									nextWeek: "dddd",
+									sameElse: event.fullDayEvent ? this.config.fullDayEventDateFormat : this.config.dateFormat
+								})
+							)}`;
+						}
+						if (event.fullDayEvent) {
+							// Full days events within the next two days
+							if (event.today || (event.fullDayEvent && eventEndDateMoment.diff(now, "days") === 0)) {
+								timeWrapper.innerHTML = CalendarUtils.capFirst(this.translate("TODAY"));
+							} else if (event.dayBeforeYesterday) {
+								if (this.translate("DAYBEFOREYESTERDAY") !== "DAYBEFOREYESTERDAY") {
+									timeWrapper.innerHTML = CalendarUtils.capFirst(this.translate("DAYBEFOREYESTERDAY"));
+								}
+							} else if (event.yesterday) {
+								timeWrapper.innerHTML = CalendarUtils.capFirst(this.translate("YESTERDAY"));
+							} else if (event.tomorrow) {
+								timeWrapper.innerHTML = CalendarUtils.capFirst(this.translate("TOMORROW"));
+							} else if (event.dayAfterTomorrow) {
+								if (this.translate("DAYAFTERTOMORROW") !== "DAYAFTERTOMORROW") {
+									timeWrapper.innerHTML = CalendarUtils.capFirst(this.translate("DAYAFTERTOMORROW"));
+								}
+							}
+							Log.info("[calendar] event fullday");
+						} else if (eventStartDateMoment.diff(now, "h") < this.config.getRelative) {
+							Log.info("[calendar] not full day but within getRelative size");
+							// If event is within getRelative hours, display 'in xxx' time format or moment.fromNow()
+							timeWrapper.innerHTML = `${CalendarUtils.capFirst(eventStartDateMoment.fromNow())}`;
+						}
+					} else {
+						// Ongoing event
+						timeWrapper.innerHTML = CalendarUtils.capFirst(
+							this.translate("RUNNING", {
+								fallback: `${this.translate("RUNNING")} {timeUntilEnd}`,
+								timeUntilEnd: eventEndDateMoment.fromNow(true)
+							})
+						);
+					}
+				}
+				timeWrapper.className = `time light ${this.timeClassForUrl(event.url)}`;
+				eventWrapper.appendChild(timeWrapper);
+			}
+
+			// Create fade effect.
+			if (index >= startFade) {
+				currentFadeStep = index - startFade;
+				eventWrapper.style.opacity = 1 - (1 / fadeSteps) * currentFadeStep;
+			}
+			wrapper.appendChild(eventWrapper);
+
+			if (this.config.showLocation) {
+				if (event.location !== false) {
+					const locationRow = document.createElement("tr");
+					locationRow.className = "event-wrapper-location normal xsmall light";
+					if (event.today) locationRow.className += " today";
+					else if (event.dayBeforeYesterday) locationRow.className += " dayBeforeYesterday";
+					else if (event.yesterday) locationRow.className += " yesterday";
+					else if (event.tomorrow) locationRow.className += " tomorrow";
+					else if (event.dayAfterTomorrow) locationRow.className += " dayAfterTomorrow";
+
+					if (this.config.displaySymbol) {
+						const symbolCell = document.createElement("td");
+						locationRow.appendChild(symbolCell);
+					}
+
+					if (this.config.coloredText) {
+						locationRow.style.cssText = `color:${this.colorForUrl(event.url, false)}`;
+					}
+
+					if (this.config.coloredBackground) {
+						locationRow.style.backgroundColor = this.colorForUrl(event.url, true);
+					}
+
+					if (this.config.coloredBorder) {
+						locationRow.style.borderColor = this.colorForUrl(event.url, false);
+					}
+
+					const descCell = document.createElement("td");
+					descCell.className = "location";
+					descCell.colSpan = "2";
+
+					const transformedTitle = CalendarUtils.titleTransform(event.location, this.config.locationTitleReplace);
+					descCell.innerHTML = CalendarUtils.shorten(transformedTitle, this.config.maxLocationTitleLength, this.config.wrapLocationEvents, this.config.maxEventTitleLines);
+					locationRow.appendChild(descCell);
+
+					wrapper.appendChild(locationRow);
+
+					if (index >= startFade) {
+						currentFadeStep = index - startFade;
+						locationRow.style.opacity = 1 - (1 / fadeSteps) * currentFadeStep;
+					}
+				}
+			}
+		});
+
+		return wrapper;
+	},
+
+	/**
+	 * converts the given timestamp to a moment with a timezone
+	 * @param {number} timestamp timestamp from an event
+	 * @returns {moment.Moment} moment with a timezone
+	 */
+	timestampToMoment (timestamp) {
+		return moment(timestamp, "x").tz(moment.tz.guess());
+	},
+
+	/**
+	 * Creates the sorted list of all events.
+	 * @param {boolean} limitNumberOfEntries Whether to filter returned events for display.
+	 * @returns {object[]} Array with events.
+	 */
+	createEventList (limitNumberOfEntries) {
+		let now = moment();
+		let future = now.clone().startOf("day").add(this.config.maximumNumberOfDays, "days");
+
+		let events = [];
+
+		for (const calendarUrl in this.calendarData) {
+			const calendar = this.calendarData[calendarUrl].events;
+			let remainingEntries = this.maximumEntriesForUrl(calendarUrl);
+			let maxPastDaysCompare = now.clone().subtract(this.maximumPastDaysForUrl(calendarUrl), "days");
+			let by_url_calevents = [];
+			for (const e in calendar) {
+				const event = JSON.parse(JSON.stringify(calendar[e])); // clone object
+				const eventStartDateMoment = this.timestampToMoment(event.startDate);
+				const eventEndDateMoment = this.timestampToMoment(event.endDate);
+
+				if (this.config.hidePrivate && event.class === "PRIVATE") {
+					// do not add the current event, skip it
+					continue;
+				}
+				if (limitNumberOfEntries) {
+					if (eventEndDateMoment.isBefore(maxPastDaysCompare)) {
+						continue;
+					}
+					if (this.config.hideOngoing && eventStartDateMoment.isBefore(now)) {
+						continue;
+					}
+					if (this.config.hideDuplicates && this.listContainsEvent(events, event)) {
+						continue;
+					}
+				}
+
+				event.url = calendarUrl;
+				event.today = eventStartDateMoment.isSame(now, "d");
+				event.dayBeforeYesterday = eventStartDateMoment.isSame(now.clone().subtract(2, "days"), "d");
+				event.yesterday = eventStartDateMoment.isSame(now.clone().subtract(1, "days"), "d");
+				event.tomorrow = eventStartDateMoment.isSame(now.clone().add(1, "days"), "d");
+				event.dayAfterTomorrow = eventStartDateMoment.isSame(now.clone().add(2, "days"), "d");
+
+				/*
+				 * if sliceMultiDayEvents is set to true, multiday events (events exceeding at least one midnight) are sliced into days,
+				 * otherwise, esp. in dateheaders mode it is not clear how long these events are.
+				 */
+				const maxCount = eventEndDateMoment.diff(eventStartDateMoment, "days");
+				if (this.config.sliceMultiDayEvents && maxCount > 1) {
+					const splitEvents = [];
+					let midnight
+						= eventStartDateMoment
+							.clone()
+							.startOf("day")
+							.add(1, "day")
+							.endOf("day");
+					let count = 1;
+					while (eventEndDateMoment.isAfter(midnight)) {
+						const thisEvent = JSON.parse(JSON.stringify(event)); // clone object
+						thisEvent.today = this.timestampToMoment(thisEvent.startDate).isSame(now, "d");
+						thisEvent.tomorrow = this.timestampToMoment(thisEvent.startDate).isSame(now.clone().add(1, "days"), "d");
+						thisEvent.endDate = midnight.clone().subtract(1, "day").format("x");
+						thisEvent.title += ` (${count}/${maxCount})`;
+						splitEvents.push(thisEvent);
+
+						event.startDate = midnight.format("x");
+						count += 1;
+						midnight = midnight.clone().add(1, "day").endOf("day"); // next day
+					}
+					// Last day
+					event.title += ` (${count}/${maxCount})`;
+					event.today += this.timestampToMoment(event.startDate).isSame(now, "d");
+					event.tomorrow = this.timestampToMoment(event.startDate).isSame(now.clone().add(1, "days"), "d");
+					splitEvents.push(event);
+
+					for (let splitEvent of splitEvents) {
+						if (this.timestampToMoment(splitEvent.endDate).isAfter(now) && this.timestampToMoment(splitEvent.endDate).isSameOrBefore(future)) {
+							by_url_calevents.push(splitEvent);
+						}
+					}
+				} else {
+					by_url_calevents.push(event);
+				}
+			}
+			if (limitNumberOfEntries) {
+				// sort entries before clipping
+				by_url_calevents.sort(function (a, b) {
+					return a.startDate - b.startDate;
+				});
+				Log.debug(`[calendar] pushing ${by_url_calevents.length} events to total with room for ${remainingEntries}`);
+				events = events.concat(by_url_calevents.slice(0, remainingEntries));
+				Log.debug(`[calendar] events for calendar=${events.length}`);
+			} else {
+				events = events.concat(by_url_calevents);
+			}
+		}
+		Log.info(`[calendar] sorting events count=${events.length}`);
+		events.sort(function (a, b) {
+			return a.startDate - b.startDate;
+		});
+
+		if (!limitNumberOfEntries) {
+			return events;
+		}
+
+		/*
+		 * Limit the number of days displayed
+		 * If limitDays is set > 0, limit display to that number of days
+		 */
+		if (this.config.limitDays > 0 && events.length > 0) { // watch out for initial display before events arrive from helper
+			// Group all events by date, events on the same date will be in a list with the key being the date.
+			const eventsByDate = Object.groupBy(events, (ev) => this.timestampToMoment(ev.startDate).format("YYYY-MM-DD"));
+			const newEvents = [];
+			let currentDate = moment();
+			let daysCollected = 0;
+
+			while (daysCollected < this.config.limitDays) {
+				const dateStr = currentDate.format("YYYY-MM-DD");
+				// Check if there are events on the currentDate
+				if (eventsByDate[dateStr] && eventsByDate[dateStr].length > 0) {
+					// If there are any events today then get all those events and select the currently active events and the events that are starting later in the day.
+					newEvents.push(...eventsByDate[dateStr].filter((ev) => this.timestampToMoment(ev.endDate).isAfter(moment())));
+					// Since we found a day with events, increase the daysCollected by 1
+					daysCollected++;
+				}
+				// Search for the next day
+				currentDate.add(1, "day");
+			}
+			events = newEvents;
+		}
+		Log.info(`[calendar] slicing events total maxCount=${this.config.maximumEntries}`);
+		return events.slice(0, this.config.maximumEntries);
+	},
+
+	listContainsEvent (eventList, event) {
+		for (const evt of eventList) {
+			if (evt.title === event.title && parseInt(evt.startDate) === parseInt(event.startDate) && parseInt(evt.endDate) === parseInt(event.endDate)) {
+				return true;
+			}
+		}
+		return false;
+	},
+
+	/**
+	 * Requests node helper to add calendar url.
+	 * @param {string} url The calendar url to add
+	 * @param {object} auth The authentication method and credentials
+	 * @param {object} calendarConfig The config of the specific calendar
+	 */
+	addCalendar (url, auth, calendarConfig) {
+		this.sendSocketNotification("ADD_CALENDAR", {
+			id: this.identifier,
+			url: url,
+			excludedEvents: calendarConfig.excludedEvents || this.config.excludedEvents,
+			maximumEntries: calendarConfig.maximumEntries || this.config.maximumEntries,
+			maximumNumberOfDays: calendarConfig.maximumNumberOfDays || this.config.maximumNumberOfDays,
+			pastDaysCount: calendarConfig.pastDaysCount || this.config.pastDaysCount,
+			fetchInterval: calendarConfig.fetchInterval || this.config.fetchInterval,
+			symbolClass: calendarConfig.symbolClass,
+			titleClass: calendarConfig.titleClass,
+			timeClass: calendarConfig.timeClass,
+			auth: auth,
+			broadcastPastEvents: calendarConfig.broadcastPastEvents || this.config.broadcastPastEvents,
+			selfSignedCert: calendarConfig.selfSignedCert || this.config.selfSignedCert
+		});
+	},
+
+	/**
+	 * Retrieves the symbols for a specific event.
+	 * @param {object} event Event to look for.
+	 * @returns {string[]} The symbols
+	 */
+	symbolsForEvent (event) {
+		let symbols = this.getCalendarPropertyAsArray(event.url, "symbol", this.config.defaultSymbol);
+
+		if (event.recurringEvent === true && this.hasCalendarProperty(event.url, "recurringSymbol")) {
+			symbols = this.mergeUnique(this.getCalendarPropertyAsArray(event.url, "recurringSymbol", this.config.defaultSymbol), symbols);
+		}
+
+		if (event.fullDayEvent === true && this.hasCalendarProperty(event.url, "fullDaySymbol")) {
+			symbols = this.mergeUnique(this.getCalendarPropertyAsArray(event.url, "fullDaySymbol", this.config.defaultSymbol), symbols);
+		}
+
+		// If custom symbol is set, replace event symbol
+		for (let ev of this.config.customEvents) {
+			if (typeof ev.symbol !== "undefined" && ev.symbol !== "") {
+				let needle = new RegExp(ev.keyword, "gi");
+				if (needle.test(event.title)) {
+					// Get the default prefix for this class name and add to the custom symbol provided
+					const className = this.getCalendarProperty(event.url, "symbolClassName", this.config.defaultSymbolClassName);
+					symbols[0] = className + ev.symbol;
+					break;
+				}
+			}
+		}
+
+		return symbols;
+	},
+
+	mergeUnique (arr1, arr2) {
+		return arr1.concat(
+			arr2.filter(function (item) {
+				return arr1.indexOf(item) === -1;
+			})
+		);
+	},
+
+	/**
+	 * Retrieves the symbolClass for a specific calendar url.
+	 * @param {string} url The calendar url
+	 * @returns {string} The class to be used for the symbols of the calendar
+	 */
+	symbolClassForUrl (url) {
+		return this.getCalendarProperty(url, "symbolClass", "");
+	},
+
+	/**
+	 * Retrieves the titleClass for a specific calendar url.
+	 * @param {string} url The calendar url
+	 * @returns {string} The class to be used for the title of the calendar
+	 */
+	titleClassForUrl (url) {
+		return this.getCalendarProperty(url, "titleClass", "");
+	},
+
+	/**
+	 * Retrieves the timeClass for a specific calendar url.
+	 * @param {string} url The calendar url
+	 * @returns {string} The class to be used for the time of the calendar
+	 */
+	timeClassForUrl (url) {
+		return this.getCalendarProperty(url, "timeClass", "");
+	},
+
+	/**
+	 * Retrieves the calendar name for a specific calendar url.
+	 * @param {string} url The calendar url
+	 * @returns {string} The name of the calendar
+	 */
+	calendarNameForUrl (url) {
+		return this.getCalendarProperty(url, "name", "");
+	},
+
+	/**
+	 * Retrieves the color for a specific calendar url.
+	 * @param {string} url The calendar url
+	 * @param {boolean} isBg Determines if we fetch the bgColor or not
+	 * @returns {string} The color
+	 */
+	colorForUrl (url, isBg) {
+		return this.getCalendarProperty(url, isBg ? "bgColor" : "color", "#fff");
+	},
+
+	/**
+	 * Retrieves the count title for a specific calendar url.
+	 * @param {string} url The calendar url
+	 * @returns {string} The title
+	 */
+	countTitleForUrl (url) {
+		return this.getCalendarProperty(url, "repeatingCountTitle", this.config.defaultRepeatingCountTitle);
+	},
+
+	/**
+	 * Retrieves the maximum entry count for a specific calendar url.
+	 * @param {string} url The calendar url
+	 * @returns {number} The maximum entry count
+	 */
+	maximumEntriesForUrl (url) {
+		return this.getCalendarProperty(url, "maximumEntries", this.config.maximumEntries);
+	},
+
+	/**
+	 * Retrieves the maximum count of past days which events of should be displayed for a specific calendar url.
+	 * @param {string} url The calendar url
+	 * @returns {number} The maximum past days count
+	 */
+	maximumPastDaysForUrl (url) {
+		return this.getCalendarProperty(url, "pastDaysCount", this.config.pastDaysCount);
+	},
+
+	/**
+	 * Helper method to retrieve the property for a specific calendar url.
+	 * @param {string} url The calendar url
+	 * @param {string} property The property to look for
+	 * @param {string} defaultValue The value if the property is not found
+	 * @returns {string} The property
+	 */
+	getCalendarProperty (url, property, defaultValue) {
+		for (const calendar of this.config.calendars) {
+			if (calendar.url === url && calendar.hasOwnProperty(property)) {
+				return calendar[property];
+			}
+		}
+
+		return defaultValue;
+	},
+
+	getCalendarPropertyAsArray (url, property, defaultValue) {
+		let p = this.getCalendarProperty(url, property, defaultValue);
+		if (property === "symbol" || property === "recurringSymbol" || property === "fullDaySymbol") {
+			const className = this.getCalendarProperty(url, "symbolClassName", this.config.defaultSymbolClassName);
+			if (p instanceof Array) {
+				let t = [];
+				p.forEach((n) => { t.push(className + n); });
+				p = t;
+			}
+			else p = className + p;
+		}
+		if (!(p instanceof Array)) p = [p];
+		return p;
+	},
+
+	hasCalendarProperty (url, property) {
+		return !!this.getCalendarProperty(url, property, undefined);
+	},
+
+	/**
+	 * Broadcasts the events to all other modules for reuse.
+	 * The all events available in one array, sorted on startDate.
+	 */
+	broadcastEvents () {
+		const eventList = this.createEventList(false);
+		for (const event of eventList) {
+			event.symbol = this.symbolsForEvent(event);
+			event.calendarName = this.calendarNameForUrl(event.url);
+			event.color = this.colorForUrl(event.url, false);
+			delete event.url;
+		}
+
+		this.sendNotification("CALENDAR_EVENTS", eventList);
+	},
+
+	/**
+	 * Refresh the DOM every minute if needed: When using relative date format for events that start
+	 * or end in less than an hour, the date shows minute granularity and we want to keep that accurate.
+	 * --
+	 * When updateOnFetch is not set, it will Avoid fade out/in on updateDom when many calendars are used
+	 * and it's allow to refresh The DOM every minute with animation speed too
+	 * (because updateDom is not set in CALENDAR_EVENTS for this case)
+	 */
+	selfUpdate () {
+		const ONE_MINUTE = 60 * 1000;
+		setTimeout(
+			() => {
+				setInterval(() => {
+					Log.debug("[calendar] self update");
+					if (this.config.updateOnFetch) {
+						this.updateDom(1);
+					} else {
+						this.updateDom(this.config.animationSpeed);
+					}
+				}, ONE_MINUTE);
+			},
+			ONE_MINUTE - (new Date() % ONE_MINUTE)
+		);
+	}
+});

defaultmodules/calendar/calendarfetcher.js

@@ -0,0 +1,129 @@
+const ical = require("node-ical");
+const Log = require("logger");
+const { Agent } = require("undici");
+const CalendarFetcherUtils = require("./calendarfetcherutils");
+const HTTPFetcher = require("#http_fetcher");
+
+/**
+ * CalendarFetcher - Fetches and parses iCal calendar data
+ * Uses HTTPFetcher for HTTP handling with intelligent error handling
+ * @class
+ */
+class CalendarFetcher {
+
+	/**
+	 * Creates a new CalendarFetcher instance
+	 * @param {string} url - The URL of the calendar to fetch
+	 * @param {number} reloadInterval - Time in ms between fetches
+	 * @param {string[]} excludedEvents - Event titles to exclude
+	 * @param {number} maximumEntries - Maximum number of events to return
+	 * @param {number} maximumNumberOfDays - Maximum days in the future to fetch
+	 * @param {object} auth - Authentication options {method: 'basic'|'bearer', user, pass}
+	 * @param {boolean} includePastEvents - Whether to include past events
+	 * @param {boolean} selfSignedCert - Whether to accept self-signed certificates
+	 */
+	constructor (url, reloadInterval, excludedEvents, maximumEntries, maximumNumberOfDays, auth, includePastEvents, selfSignedCert) {
+		this.url = url;
+		this.excludedEvents = excludedEvents;
+		this.maximumEntries = maximumEntries;
+		this.maximumNumberOfDays = maximumNumberOfDays;
+		this.includePastEvents = includePastEvents;
+
+		this.events = [];
+		this.lastFetch = null;
+		this.fetchFailedCallback = () => {};
+		this.eventsReceivedCallback = () => {};
+
+		// Use HTTPFetcher for HTTP handling (Composition)
+		this.httpFetcher = new HTTPFetcher(url, {
+			reloadInterval,
+			auth,
+			selfSignedCert
+		});
+
+		// Wire up HTTPFetcher events
+		this.httpFetcher.on("response", (response) => this.#handleResponse(response));
+		this.httpFetcher.on("error", (errorInfo) => this.fetchFailedCallback(this, errorInfo));
+	}
+
+	/**
+	 * Handles successful HTTP response
+	 * @param {Response} response - The fetch Response object
+	 */
+	async #handleResponse (response) {
+		try {
+			const responseData = await response.text();
+			const parsed = ical.parseICS(responseData);
+
+			Log.debug(`Parsed iCal data from ${this.url} with ${Object.keys(parsed).length} entries.`);
+
+			this.events = CalendarFetcherUtils.filterEvents(parsed, {
+				excludedEvents: this.excludedEvents,
+				includePastEvents: this.includePastEvents,
+				maximumEntries: this.maximumEntries,
+				maximumNumberOfDays: this.maximumNumberOfDays
+			});
+
+			this.lastFetch = Date.now();
+			this.broadcastEvents();
+		} catch (error) {
+			Log.error(`${this.url} - iCal parsing failed: ${error.message}`);
+			this.fetchFailedCallback(this, {
+				message: `iCal parsing failed: ${error.message}`,
+				status: null,
+				errorType: "PARSE_ERROR",
+				translationKey: "MODULE_ERROR_UNSPECIFIED",
+				retryAfter: this.httpFetcher.reloadInterval,
+				retryCount: 0,
+				url: this.url,
+				originalError: error
+			});
+		}
+	}
+
+	/**
+	 * Starts fetching calendar data
+	 */
+	fetchCalendar () {
+		this.httpFetcher.startPeriodicFetch();
+	}
+
+	/**
+	 * Check if enough time has passed since the last fetch to warrant a new one.
+	 * Uses reloadInterval as the threshold to respect user's configured fetchInterval.
+	 * @returns {boolean} True if a new fetch should be performed
+	 */
+	shouldRefetch () {
+		if (!this.lastFetch) {
+			return true;
+		}
+		const timeSinceLastFetch = Date.now() - this.lastFetch;
+		return timeSinceLastFetch >= this.httpFetcher.reloadInterval;
+	}
+
+	/**
+	 * Broadcasts the current events to listeners
+	 */
+	broadcastEvents () {
+		Log.info(`Broadcasting ${this.events.length} events from ${this.url}.`);
+		this.eventsReceivedCallback(this);
+	}
+
+	/**
+	 * Sets the callback for successful event fetches
+	 * @param {(fetcher: CalendarFetcher) => void} callback - Called when events are received
+	 */
+	onReceive (callback) {
+		this.eventsReceivedCallback = callback;
+	}
+
+	/**
+	 * Sets the callback for fetch failures
+	 * @param {(fetcher: CalendarFetcher, error: Error) => void} callback - Called when a fetch fails
+	 */
+	onError (callback) {
+		this.fetchFailedCallback = callback;
+	}
+}
+
+module.exports = CalendarFetcher;

defaultmodules/calendar/calendarfetcherutils.js

@@ -0,0 +1,276 @@
+/**
+ * @external Moment
+ */
+const moment = require("moment-timezone");
+const ical = require("node-ical");
+
+const Log = require("logger");
+
+const CalendarFetcherUtils = {
+
+	/**
+	 * Determine based on the title of an event if it should be excluded from the list of events
+	 * @param {object} config the global config
+	 * @param {string} title the title of the event
+	 * @returns {object} excluded: true if the event should be excluded, false otherwise
+	 * until: the date until the event should be excluded.
+	 */
+	shouldEventBeExcluded (config, title) {
+		for (const filterConfig of config.excludedEvents) {
+			const match = CalendarFetcherUtils.checkEventAgainstFilter(title, filterConfig);
+			if (match) {
+				return {
+					excluded: !match.until,
+					until: match.until
+				};
+			}
+		}
+
+		return {
+			excluded: false,
+			until: null
+		};
+	},
+
+	/**
+	 * Get local timezone.
+	 * This method makes it easier to test if different timezones cause problems by changing this implementation.
+	 * @returns {string} timezone
+	 */
+	getLocalTimezone () {
+		return moment.tz.guess();
+	},
+
+	/**
+	 * Filter the events from ical according to the given config
+	 * @param {object} data the calendar data from ical
+	 * @param {object} config The configuration object
+	 * @returns {object[]} the filtered events
+	 */
+	filterEvents (data, config) {
+		const newEvents = [];
+
+		Log.debug(`There are ${Object.entries(data).length} calendar entries.`);
+
+		const now = moment();
+		const pastLocalMoment = config.includePastEvents ? now.clone().startOf("day").subtract(config.maximumNumberOfDays, "days") : now;
+		const futureLocalMoment
+			= now
+				.clone()
+				.startOf("day")
+				.add(config.maximumNumberOfDays, "days")
+				// Subtract 1 second so that events that start on the middle of the night will not repeat.
+				.subtract(1, "seconds");
+
+		Object.entries(data).forEach(([key, event]) => {
+			if (event.type !== "VEVENT") {
+				return;
+			}
+
+			const title = CalendarFetcherUtils.getTitleFromEvent(event);
+			Log.debug(`title: ${title}`);
+
+			// Return quickly if event should be excluded.
+			const { excluded, until: eventFilterUntil } = CalendarFetcherUtils.shouldEventBeExcluded(config, title);
+			if (excluded) {
+				return;
+			}
+
+			Log.debug(`Event: ${title} | start: ${event.start} | end: ${event.end} | recurring: ${!!event.rrule}`);
+
+			const location = CalendarFetcherUtils.unwrapParameterValue(event.location) || false;
+			const geo = event.geo || false;
+			const description = CalendarFetcherUtils.unwrapParameterValue(event.description) || false;
+
+			let instances;
+			try {
+				instances = CalendarFetcherUtils.expandRecurringEvent(event, pastLocalMoment, futureLocalMoment);
+			} catch (error) {
+				Log.error(`Could not expand event "${title}": ${error.message}`);
+				return;
+			}
+
+			for (const instance of instances) {
+				const { event: instanceEvent, startMoment, endMoment, isRecurring, isFullDay } = instance;
+
+				// Filter logic
+				if (endMoment.isBefore(pastLocalMoment) || startMoment.isAfter(futureLocalMoment)) {
+					continue;
+				}
+
+				if (CalendarFetcherUtils.timeFilterApplies(now, endMoment, eventFilterUntil)) {
+					continue;
+				}
+
+				const instanceTitle = CalendarFetcherUtils.getTitleFromEvent(instanceEvent);
+
+				Log.debug(`saving event: ${instanceTitle}, start: ${startMoment.toDate()}, end: ${endMoment.toDate()}`);
+				newEvents.push({
+					title: instanceTitle,
+					startDate: startMoment.format("x"),
+					endDate: endMoment.format("x"),
+					fullDayEvent: isFullDay,
+					recurringEvent: isRecurring,
+					class: event.class,
+					firstYear: event.start.getFullYear(),
+					location: CalendarFetcherUtils.unwrapParameterValue(instanceEvent.location) || location,
+					geo: instanceEvent.geo || geo,
+					description: CalendarFetcherUtils.unwrapParameterValue(instanceEvent.description) || description
+				});
+			}
+		});
+
+		newEvents.sort(function (a, b) {
+			return a.startDate - b.startDate;
+		});
+
+		return newEvents;
+	},
+
+	/**
+	 * Gets the title from the event.
+	 * @param {object} event The event object to check.
+	 * @returns {string} The title of the event, or "Event" if no title is found.
+	 */
+	getTitleFromEvent (event) {
+		return CalendarFetcherUtils.unwrapParameterValue(event.summary || event.description) || "Event";
+	},
+
+	/**
+	 * Extracts the string value from a node-ical ParameterValue object ({val, params})
+	 * or returns the value as-is if it is already a plain string.
+	 * This handles ICS properties with parameters, e.g. DESCRIPTION;LANGUAGE=de:Text.
+	 * @param {string|object} value The raw value from node-ical
+	 * @returns {string|object} The unwrapped string value, or the original value if not a ParameterValue
+	 */
+	unwrapParameterValue (value) {
+		if (value && typeof value === "object" && typeof value.val !== "undefined") {
+			return value.val;
+		}
+		return value;
+	},
+
+	/**
+	 * Determines if the user defined time filter should apply
+	 * @param {moment.Moment} now Date object using previously created object for consistency
+	 * @param {moment.Moment} endDate Moment object representing the event end date
+	 * @param {string} filter The time to subtract from the end date to determine if an event should be shown
+	 * @returns {boolean} True if the event should be filtered out, false otherwise
+	 */
+	timeFilterApplies (now, endDate, filter) {
+		if (filter) {
+			const until = filter.split(" "),
+				value = parseInt(until[0]),
+				increment = until[1].slice(-1) === "s" ? until[1] : `${until[1]}s`, // Massage the data for moment js
+				filterUntil = moment(endDate.format()).subtract(value, increment);
+
+			return now.isBefore(filterUntil);
+		}
+
+		return false;
+	},
+
+	/**
+	 * Determines if the user defined title filter should apply
+	 * @param {string} title the title of the event
+	 * @param {string} filter the string to look for, can be a regex also
+	 * @param {boolean} useRegex true if a regex should be used, otherwise it just looks for the filter as a string
+	 * @param {string} regexFlags flags that should be applied to the regex
+	 * @returns {boolean} True if the title should be filtered out, false otherwise
+	 */
+	titleFilterApplies (title, filter, useRegex, regexFlags) {
+		if (useRegex) {
+			let regexFilter = filter;
+			// Assume if leading slash, there is also trailing slash
+			if (filter[0] === "/") {
+				// Strip leading and trailing slashes
+				regexFilter = filter.slice(1, -1);
+			}
+			return new RegExp(regexFilter, regexFlags).test(title);
+		} else {
+			return title.includes(filter);
+		}
+	},
+
+	/**
+	 * Expands a recurring event into individual event instances using node-ical.
+	 * Handles RRULE expansion, EXDATE filtering, RECURRENCE-ID overrides, and ongoing events.
+	 * @param {object} event The recurring event object
+	 * @param {moment.Moment} pastLocalMoment The past date limit
+	 * @param {moment.Moment} futureLocalMoment The future date limit
+	 * @returns {object[]} Array of event instances with startMoment/endMoment in the local timezone
+	 */
+	expandRecurringEvent (event, pastLocalMoment, futureLocalMoment) {
+		const localTimezone = CalendarFetcherUtils.getLocalTimezone();
+
+		return ical
+			.expandRecurringEvent(event, {
+				from: pastLocalMoment.toDate(),
+				to: futureLocalMoment.toDate(),
+				includeOverrides: true,
+				excludeExdates: true,
+				expandOngoing: true
+			})
+			.map((inst) => {
+				let startMoment, endMoment;
+				if (inst.isFullDay) {
+					startMoment = moment.tz([inst.start.getFullYear(), inst.start.getMonth(), inst.start.getDate()], localTimezone);
+					endMoment = moment.tz([inst.end.getFullYear(), inst.end.getMonth(), inst.end.getDate()], localTimezone);
+				} else {
+					startMoment = moment(inst.start).tz(localTimezone);
+					endMoment = moment(inst.end).tz(localTimezone);
+				}
+				// Events without DTEND (e.g. reminders) get start === end from node-ical;
+				// extend to end-of-day so they remain visible on the calendar.
+				if (startMoment.valueOf() === endMoment.valueOf()) endMoment = endMoment.endOf("day");
+				return { event: inst.event, startMoment, endMoment, isRecurring: inst.isRecurring, isFullDay: inst.isFullDay };
+			});
+	},
+
+	/**
+	 * Checks if an event title matches a specific filter configuration.
+	 * @param {string} title The event title to check
+	 * @param {string|object} filterConfig The filter configuration (string or object)
+	 * @returns {object|null} Object with {until: string|null} if matched, null otherwise
+	 */
+	checkEventAgainstFilter (title, filterConfig) {
+		let filter = filterConfig;
+		let testTitle = title.toLowerCase();
+		let until = null;
+		let useRegex = false;
+		let regexFlags = "g";
+
+		if (filter instanceof Object) {
+			if (typeof filter.until !== "undefined") {
+				until = filter.until;
+			}
+
+			if (typeof filter.regex !== "undefined") {
+				useRegex = filter.regex;
+			}
+
+			if (filter.caseSensitive) {
+				filter = filter.filterBy;
+				testTitle = title;
+			} else if (useRegex) {
+				filter = filter.filterBy;
+				testTitle = title;
+				regexFlags += "i";
+			} else {
+				filter = filter.filterBy.toLowerCase();
+			}
+		} else {
+			filter = filter.toLowerCase();
+		}
+
+		if (CalendarFetcherUtils.titleFilterApplies(testTitle, filter, useRegex, regexFlags)) {
+			return { until };
+		}
+
+		return null;
+	}
+};
+
+if (typeof module !== "undefined") {
+	module.exports = CalendarFetcherUtils;
+}

defaultmodules/calendar/calendarutils.js

@@ -0,0 +1,128 @@
+const CalendarUtils = {
+
+	/**
+	 * Capitalize the first letter of a string
+	 * @param {string} string The string to capitalize
+	 * @returns {string} The capitalized string
+	 */
+	capFirst (string) {
+		return string.charAt(0).toUpperCase() + string.slice(1);
+	},
+
+	/**
+	 * This function accepts a number (either 12 or 24) and returns a moment.js LocaleSpecification with the
+	 * corresponding time-format to be used in the calendar display. If no number is given (or otherwise invalid input)
+	 * it will a localeSpecification object with the system locale time format.
+	 * @param {number} timeFormat Specifies either 12 or 24-hour time format
+	 * @returns {moment.LocaleSpecification} formatted time
+	 */
+	getLocaleSpecification (timeFormat) {
+		switch (timeFormat) {
+			case 12: {
+				return { longDateFormat: { LT: "h:mm A" } };
+			}
+			case 24: {
+				return { longDateFormat: { LT: "HH:mm" } };
+			}
+			default: {
+				return { longDateFormat: { LT: moment.localeData().longDateFormat("LT") } };
+			}
+		}
+	},
+
+	/**
+	 * Shortens a string if it's longer than maxLength and add an ellipsis to the end
+	 * @param {string} string Text string to shorten
+	 * @param {number} maxLength The max length of the string
+	 * @param {boolean} wrapEvents Wrap the text after the line has reached maxLength
+	 * @param {number} maxTitleLines The max number of vertical lines before cutting event title
+	 * @returns {string} The shortened string
+	 */
+	shorten (string, maxLength, wrapEvents, maxTitleLines) {
+		if (typeof string !== "string") {
+			return "";
+		}
+
+		if (wrapEvents === true) {
+			const words = string.split(" ");
+			let temp = "";
+			let currentLine = "";
+			let line = 0;
+
+			for (let i = 0; i < words.length; i++) {
+				const word = words[i];
+				if (currentLine.length + word.length < (typeof maxLength === "number" ? maxLength : 25) - 1) {
+					// max - 1 to account for a space
+					currentLine += `${word} `;
+				} else {
+					line++;
+					if (line > maxTitleLines - 1) {
+						if (i < words.length) {
+							currentLine += "…";
+						}
+						break;
+					}
+
+					if (currentLine.length > 0) {
+						temp += `${currentLine}<br>${word} `;
+					} else {
+						temp += `${word}<br>`;
+					}
+					currentLine = "";
+				}
+			}
+
+			return (temp + currentLine).trim();
+		} else {
+			if (maxLength && typeof maxLength === "number" && string.length > maxLength) {
+				return `${string.trim().slice(0, maxLength)}…`;
+			} else {
+				return string.trim();
+			}
+		}
+	},
+
+	/**
+	 * Transforms the title of an event for usage.
+	 * Replaces parts of the text as defined in config.titleReplace.
+	 * @param {string} title The title to transform.
+	 * @param {object} titleReplace object definition of parts to be replaced in the title
+	 *                 object definition:
+	 *                    search: {string,required} RegEx in format //x or simple string to be searched. For (birthday) year calculation, the element matching the year must be in a RegEx group
+	 *                    replace: {string,required} Replacement string, may contain match group references (latter is required for year calculation)
+	 *                    yearmatchgroup: {number,optional} match group for year element
+	 * @returns {string} The transformed title.
+	 */
+	titleTransform (title, titleReplace) {
+		let transformedTitle = title;
+		for (let tr in titleReplace) {
+			let transform = titleReplace[tr];
+			if (typeof transform === "object") {
+				if (typeof transform.search !== "undefined" && transform.search !== "" && typeof transform.replace !== "undefined") {
+					let regParts = transform.search.match(/^\/(.+)\/([gim]*)$/);
+					let needle = new RegExp(transform.search, "g");
+					if (regParts) {
+						// the parsed pattern is a regexp with flags.
+						needle = new RegExp(regParts[1], regParts[2]);
+					}
+
+					let replacement = transform.replace;
+					if (typeof transform.yearmatchgroup !== "undefined" && transform.yearmatchgroup !== "") {
+						const yearmatch = [...title.matchAll(needle)];
+						if (yearmatch[0].length >= transform.yearmatchgroup + 1 && yearmatch[0][transform.yearmatchgroup] * 1 >= 1900) {
+							let calcage = new Date().getFullYear() - yearmatch[0][transform.yearmatchgroup] * 1;
+							let searchstr = `$${transform.yearmatchgroup}`;
+							replacement = replacement.replace(searchstr, calcage);
+						}
+					}
+					transformedTitle = transformedTitle.replace(needle, replacement);
+				}
+			}
+		}
+		return transformedTitle;
+	}
+};
+
+if (typeof module !== "undefined") {
+	module.exports = CalendarUtils;
+}

defaultmodules/calendar/debug.js

@@ -1,14 +1,13 @@
-/* CalendarFetcher Tester
+/*
+ * CalendarFetcher Tester
  * use this script with `node debug.js` to test the fetcher without the need
  * of starting the MagicMirror² core. Adjust the values below to your desire.
- *
- * By Michael Teeuw https://michaelteeuw.nl
- * MIT Licensed.
  */
-// Alias modules mentioned in package.js under _moduleAliases.
-require("module-alias/register");
+// Load internal alias resolver
+require("../../js/alias-resolver");
+const Log = require("logger");
 
-const CalendarFetcher = require("./calendarfetcher.js");
+const CalendarFetcher = require("./calendarfetcher");
 
 const url = "https://calendar.google.com/calendar/ical/pkm1t2uedjbp0uvq1o7oj1jouo%40group.calendar.google.com/private-08ba559f89eec70dd74bbd887d0a3598/basic.ics"; // Standard test URL
 //const url = "https://www.googleapis.com/calendar/v3/calendars/primary/events/"; // URL for Bearer auth (must be configured  in Google OAuth2 first)
@@ -22,22 +21,20 @@ const auth = {
 	pass: pass
 };
 
-console.log("Create fetcher ...");
+Log.log("Create fetcher ...");
 
 const fetcher = new CalendarFetcher(url, fetchInterval, [], maximumEntries, maximumNumberOfDays, auth);
 
 fetcher.onReceive(function (fetcher) {
-	console.log(fetcher.events());
-	console.log("------------------------------------------------------------");
+	Log.log(fetcher.events);
 	process.exit(0);
 });
 
 fetcher.onError(function (fetcher, error) {
-	console.log("Fetcher error:");
-	console.log(error);
+	Log.log("Fetcher error:", error);
 	process.exit(1);
 });
 
 fetcher.startFetch();
 
-console.log("Create fetcher done! ");
+Log.log("Create fetcher done! ");

defaultmodules/calendar/node_helper.js

@@ -1,39 +1,33 @@
-/* MagicMirror²
- * Node Helper: Calendar
- *
- * By Michael Teeuw https://michaelteeuw.nl
- * MIT Licensed.
- */
+const zlib = require("node:zlib");
 const NodeHelper = require("node_helper");
-const CalendarFetcher = require("./calendarfetcher.js");
 const Log = require("logger");
+const CalendarFetcher = require("./calendarfetcher");
 
 module.exports = NodeHelper.create({
 	// Override start method.
-	start: function () {
-		Log.log("Starting node helper for: " + this.name);
+	start () {
+		Log.log(`Starting node helper for: ${this.name}`);
 		this.fetchers = [];
 	},
 
 	// Override socketNotificationReceived method.
-	socketNotificationReceived: function (notification, payload) {
+	socketNotificationReceived (notification, payload) {
 		if (notification === "ADD_CALENDAR") {
 			this.createFetcher(payload.url, payload.fetchInterval, payload.excludedEvents, payload.maximumEntries, payload.maximumNumberOfDays, payload.auth, payload.broadcastPastEvents, payload.selfSignedCert, payload.id);
 		} else if (notification === "FETCH_CALENDAR") {
 			const key = payload.id + payload.url;
 			if (typeof this.fetchers[key] === "undefined") {
-				Log.error("Calendar Error. No fetcher exists with key: ", key);
+				Log.error("No fetcher exists with key: ", key);
 				this.sendSocketNotification("CALENDAR_ERROR", { error_type: "MODULE_ERROR_UNSPECIFIED" });
 				return;
 			}
-			this.fetchers[key].startFetch();
+			this.fetchers[key].fetchCalendar();
 		}
 	},
 
 	/**
 	 * Creates a fetcher for a new url if it doesn't exist yet.
 	 * Otherwise it reuses the existing one.
-	 *
 	 * @param {string} url The url of the calendar
 	 * @param {number} fetchInterval How often does the calendar needs to be fetched in ms
 	 * @param {string[]} excludedEvents An array of words / phrases from event titles that will be excluded from being shown.
@@ -44,41 +38,50 @@ module.exports = NodeHelper.create({
 	 * @param {boolean} selfSignedCert If true, the server certificate is not verified against the list of supplied CAs.
 	 * @param {string} identifier ID of the module
 	 */
-	createFetcher: function (url, fetchInterval, excludedEvents, maximumEntries, maximumNumberOfDays, auth, broadcastPastEvents, selfSignedCert, identifier) {
+	createFetcher (url, fetchInterval, excludedEvents, maximumEntries, maximumNumberOfDays, auth, broadcastPastEvents, selfSignedCert, identifier) {
 		try {
 			new URL(url);
 		} catch (error) {
-			Log.error("Calendar Error. Malformed calendar url: ", url, error);
+			Log.error("Malformed calendar url: ", url, error);
 			this.sendSocketNotification("CALENDAR_ERROR", { error_type: "MODULE_ERROR_MALFORMED_URL" });
 			return;
 		}
 
 		let fetcher;
+		let fetchIntervalCorrected;
 		if (typeof this.fetchers[identifier + url] === "undefined") {
-			Log.log("Create new calendarfetcher for url: " + url + " - Interval: " + fetchInterval);
-			fetcher = new CalendarFetcher(url, fetchInterval, excludedEvents, maximumEntries, maximumNumberOfDays, auth, broadcastPastEvents, selfSignedCert);
+			if (fetchInterval < 60000) {
+				Log.warn(`fetchInterval for url ${url} must be >= 60000`);
+				fetchIntervalCorrected = 60000;
+			}
+			Log.log(`Create new calendarfetcher for url: ${url} - Interval: ${fetchIntervalCorrected || fetchInterval}`);
+			fetcher = new CalendarFetcher(url, fetchIntervalCorrected || fetchInterval, excludedEvents, maximumEntries, maximumNumberOfDays, auth, broadcastPastEvents, selfSignedCert);
 
 			fetcher.onReceive((fetcher) => {
 				this.broadcastEvents(fetcher, identifier);
 			});
 
-			fetcher.onError((fetcher, error) => {
-				Log.error("Calendar Error. Could not fetch calendar: ", fetcher.url(), error);
-				let error_type = NodeHelper.checkFetchError(error);
+			fetcher.onError((fetcher, errorInfo) => {
+				Log.error("Calendar Error. Could not fetch calendar: ", fetcher.url, errorInfo.message || errorInfo);
 				this.sendSocketNotification("CALENDAR_ERROR", {
 					id: identifier,
-					error_type
+					error_type: errorInfo.translationKey
 				});
 			});
 
 			this.fetchers[identifier + url] = fetcher;
+			fetcher.fetchCalendar();
 		} else {
-			Log.log("Use existing calendarfetcher for url: " + url);
+			Log.log(`Use existing calendarfetcher for url: ${url}`);
 			fetcher = this.fetchers[identifier + url];
-			fetcher.broadcastEvents();
+			// Check if calendar data is stale and needs refresh
+			if (fetcher.shouldRefetch()) {
+				Log.log(`Calendar data is stale, fetching fresh data for url: ${url}`);
+				fetcher.fetchCalendar();
+			} else {
+				fetcher.broadcastEvents();
+			}
 		}
-
-		fetcher.startFetch();
 	},
 
 	/**
@@ -86,11 +89,13 @@ module.exports = NodeHelper.create({
 	 * @param {object} fetcher the fetcher associated with the calendar
 	 * @param {string} identifier the identifier of the calendar
 	 */
-	broadcastEvents: function (fetcher, identifier) {
+	broadcastEvents (fetcher, identifier) {
+		const checksum = zlib.crc32(Buffer.from(JSON.stringify(fetcher.events), "utf8"));
 		this.sendSocketNotification("CALENDAR_EVENTS", {
 			id: identifier,
-			url: fetcher.url(),
-			events: fetcher.events()
+			url: fetcher.url,
+			events: fetcher.events,
+			checksum: checksum
 		});
 	}
 });

defaultmodules/clock/clock.js

@@ -1,11 +1,5 @@
-/* global SunCalc */
+/* global SunCalc, formatTime */
 
-/* MagicMirror²
- * Module: Clock
- *
- * By Michael Teeuw https://michaelteeuw.nl
- * MIT Licensed.
- */
 Module.register("clock", {
 	// Module config defaults.
 	defaults: {
@@ -20,32 +14,33 @@ Module.register("clock", {
 		clockBold: false,
 		showDate: true,
 		showTime: true,
-		showWeek: false,
+		showWeek: false, // options: true, false, 'short'
 		dateFormat: "dddd, LL",
+		sendNotifications: false,
 
 		/* specific to the analog clock */
 		analogSize: "200px",
 		analogFace: "simple", // options: 'none', 'simple', 'face-###' (where ### is 001 to 012 inclusive)
 		analogPlacement: "bottom", // options: 'top', 'bottom', 'left', 'right'
 		analogShowDate: "top", // OBSOLETE, can be replaced with analogPlacement and showTime, options: false, 'top', or 'bottom'
-		secondsColor: "#888888",
+		secondsColor: "#888888", // DEPRECATED, use CSS instead. Class "clock-second-digital" for digital clock, "clock-second" for analog clock.
 
-		showSunTimes: false,
-		showMoonTimes: false,
+		showSunTimes: false, // options: true, false, 'disableNextEvent'
+		showMoonTimes: false, // options: false, 'times' (rise/set), 'percent' (lit percent), 'phase' (current phase), or 'both' (percent & phase)
 		lat: 47.630539,
 		lon: -122.344147
 	},
 	// Define required scripts.
-	getScripts: function () {
+	getScripts () {
 		return ["moment.js", "moment-timezone.js", "suncalc.js"];
 	},
 	// Define styles.
-	getStyles: function () {
-		return ["clock_styles.css"];
+	getStyles () {
+		return ["clock_styles.css", "font-awesome.css"];
 	},
 	// Define start sequence.
-	start: function () {
-		Log.info("Starting module: " + this.name);
+	start () {
+		Log.info(`Starting module: ${this.name}`);
 
 		// Schedule update interval.
 		this.second = moment().second();
@@ -66,47 +61,52 @@ Module.register("clock", {
 		const notificationTimer = () => {
 			this.updateDom();
 
-			// If seconds is displayed CLOCK_SECOND-notification should be sent (but not when CLOCK_MINUTE-notification is sent)
-			if (this.config.displaySeconds) {
-				this.second = moment().second();
-				if (this.second !== 0) {
-					this.sendNotification("CLOCK_SECOND", this.second);
-					setTimeout(notificationTimer, delayCalculator(0));
-					return;
+			if (this.config.sendNotifications) {
+				// If seconds is displayed CLOCK_SECOND-notification should be sent (but not when CLOCK_MINUTE-notification is sent)
+				if (this.config.displaySeconds) {
+					this.second = moment().second();
+					if (this.second !== 0) {
+						this.sendNotification("CLOCK_SECOND", this.second);
+						setTimeout(notificationTimer, delayCalculator(0));
+						return;
+					}
 				}
+
+				// If minute changed or seconds isn't displayed send CLOCK_MINUTE-notification
+				this.minute = moment().minute();
+				this.sendNotification("CLOCK_MINUTE", this.minute);
 			}
 
-			// If minute changed or seconds isn't displayed send CLOCK_MINUTE-notification
-			this.minute = moment().minute();
-			this.sendNotification("CLOCK_MINUTE", this.minute);
 			setTimeout(notificationTimer, delayCalculator(0));
 		};
 
-		// Set the initial timeout with the amount of seconds elapsed as reducedSeconds so it will trigger when the minute changes
+		// Set the initial timeout with the amount of seconds elapsed as
+		// reducedSeconds, so it will trigger when the minute changes
 		setTimeout(notificationTimer, delayCalculator(this.second));
 
 		// Set locale.
 		moment.locale(config.language);
 	},
 	// Override dom generator.
-	getDom: function () {
+	getDom () {
 		const wrapper = document.createElement("div");
-		wrapper.classList.add("clockGrid");
+		wrapper.classList.add("clock-grid");
 
 		/************************************
 		 * Create wrappers for analog and digital clock
 		 */
 		const analogWrapper = document.createElement("div");
-		analogWrapper.className = "clockCircle";
+		analogWrapper.className = "clock-circle";
 		const digitalWrapper = document.createElement("div");
 		digitalWrapper.className = "digital";
-		digitalWrapper.style.gridArea = "center";
 
 		/************************************
 		 * Create wrappers for DIGITAL clock
 		 */
 		const dateWrapper = document.createElement("div");
 		const timeWrapper = document.createElement("div");
+		const hoursWrapper = document.createElement("span");
+		const minutesWrapper = document.createElement("span");
 		const secondsWrapper = document.createElement("sup");
 		const periodWrapper = document.createElement("span");
 		const sunWrapper = document.createElement("div");
@@ -116,39 +116,40 @@ Module.register("clock", {
 		// Style Wrappers
 		dateWrapper.className = "date normal medium";
 		timeWrapper.className = "time bright large light";
-		secondsWrapper.className = "seconds dimmed";
+		hoursWrapper.className = "clock-hour-digital";
+		minutesWrapper.className = "clock-minute-digital";
+		secondsWrapper.className = "clock-second-digital dimmed";
 		sunWrapper.className = "sun dimmed small";
 		moonWrapper.className = "moon dimmed small";
 		weekWrapper.className = "week dimmed medium";
 
 		// Set content of wrappers.
-		// The moment().format("h") method has a bug on the Raspberry Pi.
-		// So we need to generate the timestring manually.
-		// See issue: https://github.com/MichMich/MagicMirror/issues/181
-		let timeString;
 		const now = moment();
 		if (this.config.timezone) {
 			now.tz(this.config.timezone);
 		}
 
-		let hourSymbol = "HH";
-		if (this.config.timeFormat !== 24) {
-			hourSymbol = "h";
-		}
-
-		if (this.config.clockBold) {
-			timeString = now.format(hourSymbol + '[<span class="bold">]mm[</span>]');
-		} else {
-			timeString = now.format(hourSymbol + ":mm");
-		}
-
 		if (this.config.showDate) {
 			dateWrapper.innerHTML = now.format(this.config.dateFormat);
 			digitalWrapper.appendChild(dateWrapper);
 		}
 
 		if (this.config.displayType !== "analog" && this.config.showTime) {
-			timeWrapper.innerHTML = timeString;
+			let hourSymbol = "HH";
+			if (this.config.timeFormat !== 24) {
+				hourSymbol = "h";
+			}
+
+			hoursWrapper.innerHTML = now.format(hourSymbol);
+			minutesWrapper.innerHTML = now.format("mm");
+
+			timeWrapper.appendChild(hoursWrapper);
+			if (this.config.clockBold) {
+				minutesWrapper.classList.add("bold");
+			} else {
+				timeWrapper.innerHTML += ":";
+			}
+			timeWrapper.appendChild(minutesWrapper);
 			secondsWrapper.innerHTML = now.format("ss");
 			if (this.config.showPeriodUpper) {
 				periodWrapper.innerHTML = now.format("A");
@@ -164,50 +165,34 @@ Module.register("clock", {
 			digitalWrapper.appendChild(timeWrapper);
 		}
 
-		/**
-		 * Format the time according to the config
-		 *
-		 * @param {object} config The config of the module
-		 * @param {object} time time to format
-		 * @returns {string} The formatted time string
-		 */
-		function formatTime(config, time) {
-			let formatString = hourSymbol + ":mm";
-			if (config.showPeriod && config.timeFormat !== 24) {
-				formatString += config.showPeriodUpper ? "A" : "a";
-			}
-			return moment(time).format(formatString);
-		}
-
 		/****************************************************************
 		 * Create wrappers for Sun Times, only if specified in config
 		 */
 		if (this.config.showSunTimes) {
 			const sunTimes = SunCalc.getTimes(now, this.config.lat, this.config.lon);
 			const isVisible = now.isBetween(sunTimes.sunrise, sunTimes.sunset);
-			let nextEvent;
-			if (now.isBefore(sunTimes.sunrise)) {
-				nextEvent = sunTimes.sunrise;
-			} else if (now.isBefore(sunTimes.sunset)) {
-				nextEvent = sunTimes.sunset;
-			} else {
-				const tomorrowSunTimes = SunCalc.getTimes(now.clone().add(1, "day"), this.config.lat, this.config.lon);
-				nextEvent = tomorrowSunTimes.sunrise;
+			let sunWrapperInnerHTML = "";
+
+			if (this.config.showSunTimes !== "disableNextEvent") {
+				let nextEvent;
+				if (now.isBefore(sunTimes.sunrise)) {
+					nextEvent = sunTimes.sunrise;
+				} else if (now.isBefore(sunTimes.sunset)) {
+					nextEvent = sunTimes.sunset;
+				} else {
+					const tomorrowSunTimes = SunCalc.getTimes(now.clone().add(1, "day"), this.config.lat, this.config.lon);
+					nextEvent = tomorrowSunTimes.sunrise;
+				}
+				const untilNextEvent = moment.duration(moment(nextEvent).diff(now));
+				const untilNextEventString = `${untilNextEvent.hours()}h ${untilNextEvent.minutes()}m`;
+
+				sunWrapperInnerHTML = `<span class="${isVisible ? "bright" : ""}"><i class="fas fa-sun" aria-hidden="true"></i> ${untilNextEventString}</span>`;
 			}
-			const untilNextEvent = moment.duration(moment(nextEvent).diff(now));
-			const untilNextEventString = untilNextEvent.hours() + "h " + untilNextEvent.minutes() + "m";
-			sunWrapper.innerHTML =
-				'<span class="' +
-				(isVisible ? "bright" : "") +
-				'"><i class="fas fa-sun" aria-hidden="true"></i> ' +
-				untilNextEventString +
-				"</span>" +
-				'<span><i class="fas fa-arrow-up" aria-hidden="true"></i> ' +
-				formatTime(this.config, sunTimes.sunrise) +
-				"</span>" +
-				'<span><i class="fas fa-arrow-down" aria-hidden="true"></i> ' +
-				formatTime(this.config, sunTimes.sunset) +
-				"</span>";
+
+			sunWrapperInnerHTML += `<span><i class="fas fa-arrow-up" aria-hidden="true"></i> ${formatTime(this.config, sunTimes.sunrise)}</span>`
+			  + `<span><i class="fas fa-arrow-down" aria-hidden="true"></i> ${formatTime(this.config, sunTimes.sunset)}</span>`;
+
+			sunWrapper.innerHTML = sunWrapperInnerHTML;
 			digitalWrapper.appendChild(sunWrapper);
 		}
 
@@ -226,24 +211,25 @@ Module.register("clock", {
 				moonSet = nextMoonTimes.set;
 			}
 			const isVisible = now.isBetween(moonRise, moonSet) || moonTimes.alwaysUp === true;
-			const illuminatedFractionString = Math.round(moonIllumination.fraction * 100) + "%";
-			moonWrapper.innerHTML =
-				'<span class="' +
-				(isVisible ? "bright" : "") +
-				'"><i class="fas fa-moon" aria-hidden="true"></i> ' +
-				illuminatedFractionString +
-				"</span>" +
-				'<span><i class="fas fa-arrow-up" aria-hidden="true"></i> ' +
-				(moonRise ? formatTime(this.config, moonRise) : "...") +
-				"</span>" +
-				'<span><i class="fas fa-arrow-down" aria-hidden="true"></i> ' +
-				(moonSet ? formatTime(this.config, moonSet) : "...") +
-				"</span>";
+			const showFraction = ["both", "percent"].includes(this.config.showMoonTimes);
+			const showUnicode = ["both", "phase"].includes(this.config.showMoonTimes);
+			const illuminatedFractionString = `${Math.round(moonIllumination.fraction * 100)}%`;
+			const image = showUnicode ? [..."🌑🌒🌓🌔🌕🌖🌗🌘"][Math.floor(moonIllumination.phase * 8)] : "<i class=\"fas fa-moon\" aria-hidden=\"true\"></i>";
+
+			moonWrapper.innerHTML
+				= `<span class="${isVisible ? "bright" : ""}">${image} ${showFraction ? illuminatedFractionString : ""}</span>`
+				  + `<span><i class="fas fa-arrow-up" aria-hidden="true"></i> ${moonRise ? formatTime(this.config, moonRise) : "..."}</span>`
+				  + `<span><i class="fas fa-arrow-down" aria-hidden="true"></i> ${moonSet ? formatTime(this.config, moonSet) : "..."}</span>`;
 			digitalWrapper.appendChild(moonWrapper);
 		}
 
 		if (this.config.showWeek) {
-			weekWrapper.innerHTML = this.translate("WEEK", { weekNumber: now.week() });
+			if (this.config.showWeek === "short") {
+				weekWrapper.innerHTML = this.translate("WEEK_SHORT", { weekNumber: now.week() });
+			} else {
+				weekWrapper.innerHTML = this.translate("WEEK", { weekNumber: now.week() });
+			}
+
 			digitalWrapper.appendChild(weekWrapper);
 		}
 
@@ -266,26 +252,26 @@ Module.register("clock", {
 			analogWrapper.style.height = this.config.analogSize;
 
 			if (this.config.analogFace !== "" && this.config.analogFace !== "simple" && this.config.analogFace !== "none") {
-				analogWrapper.style.background = "url(" + this.data.path + "faces/" + this.config.analogFace + ".svg)";
+				analogWrapper.style.background = `url(${this.data.path}faces/${this.config.analogFace}.svg)`;
 				analogWrapper.style.backgroundSize = "100%";
 
-				// The following line solves issue: https://github.com/MichMich/MagicMirror/issues/611
+				// The following line solves issue: https://github.com/MagicMirrorOrg/MagicMirror/issues/611
 				// analogWrapper.style.border = "1px solid black";
 				analogWrapper.style.border = "rgba(0, 0, 0, 0.1)"; //Updated fix for Issue 611 where non-black backgrounds are used
 			} else if (this.config.analogFace !== "none") {
 				analogWrapper.style.border = "2px solid white";
 			}
 			const clockFace = document.createElement("div");
-			clockFace.className = "clockFace";
+			clockFace.className = "clock-face";
 
 			const clockHour = document.createElement("div");
-			clockHour.id = "clockHour";
-			clockHour.style.transform = "rotate(" + hour + "deg)";
-			clockHour.className = "clockHour";
+			clockHour.id = "clock-hour";
+			clockHour.style.transform = `rotate(${hour}deg)`;
+			clockHour.className = "clock-hour";
 			const clockMinute = document.createElement("div");
-			clockMinute.id = "clockMinute";
-			clockMinute.style.transform = "rotate(" + minute + "deg)";
-			clockMinute.className = "clockMinute";
+			clockMinute.id = "clock-minute";
+			clockMinute.style.transform = `rotate(${minute}deg)`;
+			clockMinute.className = "clock-minute";
 
 			// Combine analog wrappers
 			clockFace.appendChild(clockHour);
@@ -293,10 +279,10 @@ Module.register("clock", {
 
 			if (this.config.displaySeconds) {
 				const clockSecond = document.createElement("div");
-				clockSecond.id = "clockSecond";
-				clockSecond.style.transform = "rotate(" + second + "deg)";
-				clockSecond.className = "clockSecond";
-				clockSecond.style.backgroundColor = this.config.secondsColor;
+				clockSecond.id = "clock-second";
+				clockSecond.style.transform = `rotate(${second}deg)`;
+				clockSecond.className = "clock-second";
+				clockSecond.style.backgroundColor = this.config.secondsColor; /* DEPRECATED, to be removed in a future version , use CSS instead */
 				clockFace.appendChild(clockSecond);
 			}
 			analogWrapper.appendChild(clockFace);
@@ -307,16 +293,21 @@ Module.register("clock", {
 		 */
 		if (this.config.displayType === "analog") {
 			// Display only an analog clock
-			if (this.config.analogShowDate === "top") {
-				wrapper.classList.add("clockGrid--bottom");
-			} else if (this.config.analogShowDate === "bottom") {
-				wrapper.classList.add("clockGrid--top");
+			if (this.config.showDate) {
+				// Add date to the analog clock
+				dateWrapper.innerHTML = now.format(this.config.dateFormat);
+				wrapper.appendChild(dateWrapper);
+			}
+			if (this.config.analogShowDate === "bottom") {
+				wrapper.classList.add("clock-grid-bottom");
+			} else if (this.config.analogShowDate === "top") {
+				wrapper.classList.add("clock-grid-top");
 			}
 			wrapper.appendChild(analogWrapper);
 		} else if (this.config.displayType === "digital") {
 			wrapper.appendChild(digitalWrapper);
 		} else if (this.config.displayType === "both") {
-			wrapper.classList.add("clockGrid--" + this.config.analogPlacement);
+			wrapper.classList.add(`clock-grid-${this.config.analogPlacement}`);
 			wrapper.appendChild(analogWrapper);
 			wrapper.appendChild(digitalWrapper);
 		}

defaultmodules/clock/clock_styles.css

@@ -1,37 +1,37 @@
-.clockGrid {
+.clock-grid {
   display: inline-flex;
   gap: 15px;
 }
 
-.clockGrid--left {
+.clock-grid-left {
   flex-direction: row;
 }
 
-.clockGrid--right {
+.clock-grid-right {
   flex-direction: row-reverse;
 }
 
-.clockGrid--top {
+.clock-grid-top {
   flex-direction: column;
 }
 
-.clockGrid--bottom {
+.clock-grid-bottom {
   flex-direction: column-reverse;
 }
 
-.clockCircle {
+.clock-circle {
   place-self: center;
   position: relative;
   border-radius: 50%;
   background-size: 100%;
 }
 
-.clockFace {
+.clock-face {
   width: 100%;
   height: 100%;
 }
 
-.clockFace::after {
+.clock-face::after {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -44,7 +44,7 @@
   display: block;
 }
 
-.clockHour {
+.clock-hour {
   width: 0;
   height: 0;
   position: absolute;
@@ -57,7 +57,7 @@
   border-radius: 3px 0 0 3px;
 }
 
-.clockMinute {
+.clock-minute {
   width: 0;
   height: 0;
   position: absolute;
@@ -70,7 +70,7 @@
   border-radius: 3px 0 0 3px;
 }
 
-.clockSecond {
+.clock-second {
   width: 0;
   height: 0;
   position: absolute;
@@ -78,16 +78,41 @@
   left: 50%;
   margin: -38% -1px 0 0; /* numbers must match negative length & thickness */
   padding: 38% 1px 0 0; /* indicator length & thickness */
-  background: var(--color-text);
+
+  /* background: #888888 !important; */
+
+  /* use this instead of secondsColor */
+
+  /* have to use !important, because the code explicitly sets the color currently */
   transform-origin: 50% 100%;
 }
 
+.module.clock .digital {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
 .module.clock .sun,
 .module.clock .moon {
   display: flex;
+  white-space: nowrap;
+  gap: 10px;
 }
 
 .module.clock .sun > *,
 .module.clock .moon > * {
   flex: 1;
 }
+
+.module.clock .clock-hour-digital {
+  color: var(--color-text-bright);
+}
+
+.module.clock .clock-minute-digital {
+  color: var(--color-text-bright);
+}
+
+.module.clock .clock-second-digital {
+  color: var(--color-text-dimmed);
+}

defaultmodules/compliments/compliments.js

@@ -0,0 +1,316 @@
+/* global Cron */
+
+Module.register("compliments", {
+	// Module config defaults.
+	defaults: {
+		compliments: {
+			anytime: ["Hey there sexy!"],
+			morning: ["Good morning, handsome!", "Enjoy your day!", "How was your sleep?"],
+			afternoon: ["Hello, beauty!", "You look sexy!", "Looking good today!"],
+			evening: ["Wow, you look hot!", "You look nice!", "Hi, sexy!"],
+			"....-01-01": ["Happy new year!"]
+		},
+		updateInterval: 30000,
+		remoteFile: null,
+		remoteFileRefreshInterval: 0,
+		fadeSpeed: 4000,
+		morningStartTime: 3,
+		morningEndTime: 12,
+		afternoonStartTime: 12,
+		afternoonEndTime: 17,
+		random: true,
+		specialDayUnique: false
+	},
+	compliments_new: null,
+	refreshMinimumDelay: 15 * 60 * 1000, // 15 minutes
+	lastIndexUsed: -1,
+	// Set currentweather from module
+	currentWeatherType: "",
+	cron_regex: /^(((\d+,)+\d+|((\d+|[*])[/]\d+|((JAN|FEB|APR|MA[RY]|JU[LN]|AUG|SEP|OCT|NOV|DEC)(-(JAN|FEB|APR|MA[RY]|JU[LN]|AUG|SEP|OCT|NOV|DEC))?))|(\d+-\d+)|\d+(-\d+)?[/]\d+(-\d+)?|\d+|[*]|(MON|TUE|WED|THU|FRI|SAT|SUN)(-(MON|TUE|WED|THU|FRI|SAT|SUN))?) ?){5}$/i,
+	date_regex: "[1-9.][0-9.][0-9.]{2}-([0][1-9]|[1][0-2])-([1-2][0-9]|[0][1-9]|[3][0-1])",
+	pre_defined_types: ["anytime", "morning", "afternoon", "evening"],
+	// Define required scripts.
+	getScripts () {
+		return ["croner.js", "moment.js"];
+	},
+
+	// Define start sequence.
+	async start () {
+		Log.info(`Starting module: ${this.name}`);
+
+		this.lastComplimentIndex = -1;
+
+		if (this.config.remoteFile !== null) {
+			const response = await this.loadComplimentFile();
+			this.config.compliments = JSON.parse(response);
+			this.updateDom();
+			if (this.config.remoteFileRefreshInterval !== 0) {
+				if ((this.config.remoteFileRefreshInterval >= this.refreshMinimumDelay) || window.mmTestMode === "true") {
+					setInterval(async () => {
+						const response = await this.loadComplimentFile();
+						if (response) {
+							this.compliments_new = JSON.parse(response);
+						}
+						else {
+							Log.error(`[compliments] ${this.name} remoteFile refresh failed`);
+						}
+					},
+					this.config.remoteFileRefreshInterval);
+				} else {
+					Log.error(`[compliments] ${this.name} remoteFileRefreshInterval less than minimum`);
+				}
+			}
+		}
+		let minute_sync_delay = 1;
+		// loop thru all the configured when events
+		for (let m of Object.keys(this.config.compliments)) {
+			// if it is a cron entry
+			if (this.isCronEntry(m)) {
+				// we need to synch our interval cycle to the minute
+				minute_sync_delay = (60 - (moment().second())) * 1000;
+				break;
+			}
+		}
+		// Schedule update timer. sync to the minute start (if needed), so minute based events happen on the minute start
+		setTimeout(() => {
+			setInterval(() => {
+				this.updateDom(this.config.fadeSpeed);
+			}, this.config.updateInterval);
+		},
+		minute_sync_delay);
+	},
+
+	// check to see if this entry could be a cron entry which contains spaces
+	isCronEntry (entry) {
+		return entry.includes(" ");
+	},
+
+	/**
+	 * @param {string} cronExpression The cron expression. See https://croner.56k.guru/usage/pattern/
+	 * @param {Date} [timestamp] The timestamp to check. Defaults to the current time.
+	 * @returns {number} The number of seconds until the next cron run.
+	 */
+	getSecondsUntilNextCronRun (cronExpression, timestamp = new Date()) {
+		// Required for seconds precision
+		const adjustedTimestamp = new Date(timestamp.getTime() - 1000);
+
+		// https://www.npmjs.com/package/croner
+		const cronJob = new Cron(cronExpression);
+		const nextRunTime = cronJob.nextRun(adjustedTimestamp);
+
+		const secondsDelta = (nextRunTime - adjustedTimestamp) / 1000;
+		return secondsDelta;
+	},
+
+	/**
+	 * Generate a random index for a list of compliments.
+	 * @param {string[]} compliments Array with compliments.
+	 * @returns {number} a random index of given array
+	 */
+	randomIndex (compliments) {
+		if (compliments.length <= 1) {
+			return 0;
+		}
+
+		const generate = function () {
+			return Math.floor(Math.random() * compliments.length);
+		};
+
+		let complimentIndex = generate();
+
+		while (complimentIndex === this.lastComplimentIndex) {
+			complimentIndex = generate();
+		}
+
+		this.lastComplimentIndex = complimentIndex;
+
+		return complimentIndex;
+	},
+
+	/**
+	 * Retrieve an array of compliments for the time of the day.
+	 * @returns {string[]} array with compliments for the time of the day.
+	 */
+	complimentArray () {
+		const now = moment();
+		const hour = now.hour();
+		const date = now.format("YYYY-MM-DD");
+		let compliments = [];
+
+		// Add time of day compliments
+		let timeOfDay;
+		if (hour >= this.config.morningStartTime && hour < this.config.morningEndTime) {
+			timeOfDay = "morning";
+		} else if (hour >= this.config.afternoonStartTime && hour < this.config.afternoonEndTime) {
+			timeOfDay = "afternoon";
+		} else {
+			timeOfDay = "evening";
+		}
+
+		if (timeOfDay && this.config.compliments.hasOwnProperty(timeOfDay)) {
+			compliments = [...this.config.compliments[timeOfDay]];
+		}
+
+		// Add compliments based on weather
+		if (this.currentWeatherType in this.config.compliments) {
+			Array.prototype.push.apply(compliments, this.config.compliments[this.currentWeatherType]);
+			// if the predefine list doesn't include it (yet)
+			if (!this.pre_defined_types.includes(this.currentWeatherType)) {
+				// add it
+				this.pre_defined_types.push(this.currentWeatherType);
+			}
+		}
+
+		// Add compliments for anytime
+		Array.prototype.push.apply(compliments, this.config.compliments.anytime);
+
+		// get the list of just date entry keys
+		let temp_list = Object.keys(this.config.compliments).filter((k) => {
+			if (this.pre_defined_types.includes(k)) return false;
+			else return true;
+		});
+
+		let date_compliments = [];
+		// Add compliments for special day/times
+		for (let entry of temp_list) {
+			// check if this could be a cron type entry
+			if (this.isCronEntry(entry)) {
+				// make sure the regex is valid
+				if (new RegExp(this.cron_regex).test(entry)) {
+					// check if we are in the time range for the cron entry
+					if (this.getSecondsUntilNextCronRun(entry, now.set("seconds", 0).toDate()) <= 1) {
+						// if so, use its notice entries
+						Array.prototype.push.apply(date_compliments, this.config.compliments[entry]);
+					}
+				} else Log.error(`[compliments] cron syntax invalid=${JSON.stringify(entry)}`);
+			} else if (new RegExp(entry).test(date)) {
+				Array.prototype.push.apply(date_compliments, this.config.compliments[entry]);
+			}
+		}
+
+		// if we found any date compliments
+		if (date_compliments.length) {
+			// and the special flag is true
+			if (this.config.specialDayUnique) {
+				// clear the non-date compliments if any
+				compliments.length = 0;
+			}
+			// put the date based compliments on the list
+			Array.prototype.push.apply(compliments, date_compliments);
+		}
+
+		return compliments;
+	},
+
+	/**
+	 * Retrieve a file from the local filesystem
+	 * @returns {Promise<string|null>} Resolved with file content or null on error
+	 */
+	async loadComplimentFile () {
+		const { remoteFile, remoteFileRefreshInterval } = this.config;
+		const isRemote = remoteFile.startsWith("http://") || remoteFile.startsWith("https://");
+		let url = isRemote ? remoteFile : this.file(remoteFile);
+
+		try {
+			// Validate URL
+			const urlObj = new URL(url);
+			// Add cache-busting parameter to remote URLs to prevent cached responses
+			if (isRemote && remoteFileRefreshInterval !== 0) {
+				urlObj.searchParams.set("dummy", Date.now());
+			}
+			url = urlObj.toString();
+		} catch {
+			Log.warn(`[compliments] Invalid URL: ${url}`);
+		}
+
+		try {
+			const response = await fetch(url);
+			if (!response.ok) {
+				Log.error(`[compliments] HTTP error: ${response.status} ${response.statusText}`);
+				return null;
+			}
+			return await response.text();
+		} catch (error) {
+			Log.info("[compliments] fetch failed:", error.message);
+			return null;
+		}
+	},
+
+	/**
+	 * Retrieve a random compliment.
+	 * @returns {string} a compliment
+	 */
+	getRandomCompliment () {
+		// get the current time of day compliments list
+		const compliments = this.complimentArray();
+		// variable for index to next message to display
+		let index;
+		// are we randomizing
+		if (this.config.random) {
+			// yes
+			index = this.randomIndex(compliments);
+		} else {
+			// no, sequential
+			// if doing sequential, don't fall off the end
+			index = this.lastIndexUsed >= compliments.length - 1 ? 0 : ++this.lastIndexUsed;
+		}
+
+		return compliments[index] || "";
+	},
+
+	// Override dom generator.
+	getDom () {
+		const wrapper = document.createElement("div");
+		wrapper.className = this.config.classes ? this.config.classes : "thin xlarge bright pre-line";
+		// get the compliment text
+		const complimentText = this.getRandomCompliment();
+		// split it into parts on newline text
+		const parts = complimentText.split("\n");
+		// create a span to hold the compliment
+		const compliment = document.createElement("span");
+		// process all the parts of the compliment text
+		for (const part of parts) {
+			if (part !== "") {
+				// create a text element for each part
+				compliment.appendChild(document.createTextNode(part));
+				// add a break
+				compliment.appendChild(document.createElement("BR"));
+			}
+		}
+		// only add compliment to wrapper if there is actual text in there
+		if (compliment.children.length > 0) {
+			// remove the last break
+			compliment.lastElementChild.remove();
+			wrapper.appendChild(compliment);
+		}
+		// if a new set of compliments was loaded from the refresh task
+		// we do this here to make sure no other function is using the compliments list
+		if (this.compliments_new) {
+			// use them
+			if (JSON.stringify(this.config.compliments) !== JSON.stringify(this.compliments_new)) {
+				// only reset if the contents changes
+				this.config.compliments = this.compliments_new;
+				// reset the index
+				this.lastIndexUsed = -1;
+			}
+			// clear new file list so we don't waste cycles comparing between refreshes
+			this.compliments_new = null;
+		}
+		// only in test mode
+		if (window.mmTestMode === "true") {
+			// check for (undocumented) remoteFile2 to test new file load
+			if (this.config.remoteFile2 !== null && this.config.remoteFileRefreshInterval !== 0) {
+				// switch the file so that next time it will be loaded from a changed file
+				this.config.remoteFile = this.config.remoteFile2;
+			}
+		}
+		return wrapper;
+	},
+
+	// Override notification handler.
+	notificationReceived (notification, payload, sender) {
+		if (notification === "CURRENTWEATHER_TYPE") {
+			this.currentWeatherType = payload.type;
+		}
+	}
+});

defaultmodules/defaultmodules.js

@@ -1,8 +1,6 @@
-/* MagicMirror² Default Modules List
+/*
+ * Default Modules List
  * Modules listed below can be loaded without the 'default/' prefix. Omitting the default folder name.
- *
- * By Michael Teeuw https://michaelteeuw.nl
- * MIT Licensed.
  */
 const defaultModules = ["alert", "calendar", "clock", "compliments", "helloworld", "newsfeed", "updatenotification", "weather"];
 

defaultmodules/helloworld/helloworld.js

@@ -0,0 +1,14 @@
+Module.register("helloworld", {
+	// Default module config.
+	defaults: {
+		text: "Hello World!"
+	},
+
+	getTemplate () {
+		return "helloworld.njk";
+	},
+
+	getTemplateData () {
+		return this.config;
+	}
+});

defaultmodules/helloworld/helloworld.njk

@@ -0,0 +1,5 @@
+<!--
+	Use ` | safe` to allow html tags within the text string.
+	https://mozilla.github.io/nunjucks/templating.html#autoescaping
+-->
+<div>{{ text | safe }}</div>

defaultmodules/newsfeed/newsfeed.css

@@ -0,0 +1,36 @@
+.newsfeed-fullarticle-container {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  overflow-y: auto;
+  scrollbar-width: none;
+  z-index: 1000;
+  background: black;
+}
+
+.newsfeed-fullarticle-container::-webkit-scrollbar {
+  display: none;
+}
+
+iframe.newsfeed-fullarticle {
+  display: block;
+  width: 100%;
+  height: 5000px;
+  border: none;
+}
+
+.region.bottom.bar.newsfeed-fullarticle {
+  bottom: inherit;
+  top: -90px;
+}
+
+.newsfeed-list {
+  list-style: none;
+}
+
+.newsfeed-list li {
+  text-align: justify;
+  margin-bottom: 0.5em;
+}

defaultmodules/newsfeed/newsfeed.js

@@ -1,9 +1,3 @@
-/* MagicMirror²
- * Module: NewsFeed
- *
- * By Michael Teeuw https://michaelteeuw.nl
- * MIT Licensed.
- */
 Module.register("newsfeed", {
 	// Default module config.
 	defaults: {
@@ -42,35 +36,35 @@ Module.register("newsfeed", {
 		dangerouslyDisableAutoEscaping: false
 	},
 
-	getUrlPrefix: function (item) {
+	getUrlPrefix (item) {
 		if (item.useCorsProxy) {
-			return location.protocol + "//" + location.host + "/cors?url=";
+			return `${location.protocol}//${location.host}${config.basePath}cors?url=`;
 		} else {
 			return "";
 		}
 	},
 
 	// Define required scripts.
-	getScripts: function () {
+	getScripts () {
 		return ["moment.js"];
 	},
 
 	//Define required styles.
-	getStyles: function () {
+	getStyles () {
 		return ["newsfeed.css"];
 	},
 
 	// Define required translations.
-	getTranslations: function () {
+	getTranslations () {
 		// The translations for the default modules are defined in the core translation files.
-		// Therefor we can just return false. Otherwise we should have returned a dictionary.
+		// Therefore we can just return false. Otherwise we should have returned a dictionary.
 		// If you're trying to build your own module including translations, check out the documentation.
 		return false;
 	},
 
 	// Define start sequence.
-	start: function () {
-		Log.info("Starting module: " + this.name);
+	start () {
+		Log.info(`Starting module: ${this.name}`);
 
 		// Set locale.
 		moment.locale(config.language);
@@ -80,6 +74,10 @@ Module.register("newsfeed", {
 		this.error = null;
 		this.activeItem = 0;
 		this.scrollPosition = 0;
+		this.articleIframe = null;
+		this.articleContainer = null;
+		this.articleFrameCheckPending = false;
+		this.articleUnavailable = false;
 
 		this.registerFeeds();
 
@@ -87,7 +85,7 @@ Module.register("newsfeed", {
 	},
 
 	// Override socket notification handler.
-	socketNotificationReceived: function (notification, payload) {
+	socketNotificationReceived (notification, payload) {
 		if (notification === "NEWS_ITEMS") {
 			this.generateFeed(payload);
 
@@ -103,42 +101,86 @@ Module.register("newsfeed", {
 		} else if (notification === "NEWSFEED_ERROR") {
 			this.error = this.translate(payload.error_type);
 			this.scheduleUpdateInterval();
+		} else if (notification === "ARTICLE_URL_STATUS") {
+			if (this.config.showFullArticle) {
+				this.articleFrameCheckPending = false;
+				this.articleUnavailable = !payload.canFrame;
+				if (!this.articleUnavailable) {
+					// Article can be framed — now shift the bottom bar to allow scrolling
+					document.getElementsByClassName("region bottom bar")[0].classList.add("newsfeed-fullarticle");
+				}
+				this.updateDom(100);
+				if (this.articleUnavailable) {
+					// Briefly show the unavailable message, then return to normal newsfeed view
+					setTimeout(() => {
+						this.resetDescrOrFullArticleAndTimer();
+						this.updateDom(500);
+					}, 3000);
+				}
+			}
 		}
 	},
 
+	//Override getDom to handle the full article case with error handling
+	getDom () {
+		if (this.config.showFullArticle) {
+			this.activeItemHash = this.newsItems[this.activeItem]?.hash;
+			const wrapper = document.createElement("div");
+			if (this.articleFrameCheckPending) {
+				// Still waiting for the server-side framing check
+				wrapper.innerHTML = `<div class="small dimmed">${this.translate("LOADING")}</div>`;
+			} else if (this.articleUnavailable) {
+				wrapper.innerHTML = `<div class="small dimmed">${this.translate("NEWSFEED_ARTICLE_UNAVAILABLE")}</div>`;
+			} else {
+				const container = document.createElement("div");
+				container.className = "newsfeed-fullarticle-container";
+				container.scrollTop = this.scrollPosition;
+				const iframe = document.createElement("iframe");
+				iframe.className = "newsfeed-fullarticle";
+				// Always use the direct article URL — the CORS proxy is for server-side
+				// RSS feed fetching, not for browser iframes.
+				const item = this.newsItems[this.activeItem];
+				iframe.src = item ? (typeof item.url === "string" ? item.url : item.url.href) : "";
+				this.articleIframe = iframe;
+				this.articleContainer = container;
+				container.appendChild(iframe);
+				wrapper.appendChild(container);
+			}
+			return Promise.resolve(wrapper);
+		}
+		return this._super();
+	},
+
 	//Override fetching of template name
-	getTemplate: function () {
+	getTemplate () {
 		if (this.config.feedUrl) {
 			return "oldconfig.njk";
-		} else if (this.config.showFullArticle) {
-			return "fullarticle.njk";
 		}
 		return "newsfeed.njk";
 	},
 
 	//Override template data and return whats used for the current template
-	getTemplateData: function () {
-		// this.config.showFullArticle is a run-time configuration, triggered by optional notifications
-		if (this.config.showFullArticle) {
-			return {
-				url: this.getActiveItemURL()
-			};
+	getTemplateData () {
+		if (this.activeItem >= this.newsItems.length) {
+			this.activeItem = 0;
 		}
+		this.activeItemCount = this.newsItems.length;
 		if (this.error) {
+			this.activeItemHash = undefined;
 			return {
 				error: this.error
 			};
 		}
 		if (this.newsItems.length === 0) {
+			this.activeItemHash = undefined;
 			return {
 				empty: true
 			};
 		}
-		if (this.activeItem >= this.newsItems.length) {
-			this.activeItem = 0;
-		}
 
 		const item = this.newsItems[this.activeItem];
+		this.activeItemHash = item.hash;
+
 		const items = this.newsItems.map(function (item) {
 			item.publishDate = moment(new Date(item.pubdate)).fromNow();
 			return item;
@@ -150,13 +192,13 @@ Module.register("newsfeed", {
 			sourceTitle: item.sourceTitle,
 			publishDate: moment(new Date(item.pubdate)).fromNow(),
 			title: item.title,
-			url: this.getUrlPrefix(item) + item.url,
+			url: this.getActiveItemURL(),
 			description: item.description,
 			items: items
 		};
 	},
 
-	getActiveItemURL: function () {
+	getActiveItemURL () {
 		const item = this.newsItems[this.activeItem];
 		if (item) {
 			return typeof item.url === "string" ? this.getUrlPrefix(item) + item.url : this.getUrlPrefix(item) + item.url.href;
@@ -168,7 +210,7 @@ Module.register("newsfeed", {
 	/**
 	 * Registers the feeds to be used by the backend.
 	 */
-	registerFeeds: function () {
+	registerFeeds () {
 		for (let feed of this.config.feeds) {
 			this.sendSocketNotification("ADD_FEED", {
 				feed: feed,
@@ -177,19 +219,31 @@ Module.register("newsfeed", {
 		}
 	},
 
+	/**
+	 * Gets a feed property by name
+	 * @param {object} feed A feed object.
+	 * @param {string} property The name of the property.
+	 * @returns {string} The value of the specified property for the feed.
+	 */
+	getFeedProperty (feed, property) {
+		let res = this.config[property];
+		const f = this.config.feeds.find((feedItem) => feedItem.url === feed);
+		if (f && f[property]) res = f[property];
+		return res;
+	},
+
 	/**
 	 * Generate an ordered list of items for this configured module.
-	 *
 	 * @param {object} feeds An object with feeds returned by the node helper.
 	 */
-	generateFeed: function (feeds) {
+	generateFeed (feeds) {
 		let newsItems = [];
 		for (let feed in feeds) {
 			const feedItems = feeds[feed];
 			if (this.subscribedToFeed(feed)) {
 				for (let item of feedItems) {
 					item.sourceTitle = this.titleForFeed(feed);
-					if (!(this.config.ignoreOldItems && Date.now() - new Date(item.pubdate) > this.config.ignoreOlderThan)) {
+					if (!(this.getFeedProperty(feed, "ignoreOldItems") && Date.now() - new Date(item.pubdate) > this.getFeedProperty(feed, "ignoreOlderThan"))) {
 						newsItems.push(item);
 					}
 				}
@@ -272,11 +326,10 @@ Module.register("newsfeed", {
 
 	/**
 	 * Check if this module is configured to show this feed.
-	 *
 	 * @param {string} feedUrl Url of the feed to check.
 	 * @returns {boolean} True if it is subscribed, false otherwise
 	 */
-	subscribedToFeed: function (feedUrl) {
+	subscribedToFeed (feedUrl) {
 		for (let feed of this.config.feeds) {
 			if (feed.url === feedUrl) {
 				return true;
@@ -287,11 +340,10 @@ Module.register("newsfeed", {
 
 	/**
 	 * Returns title for the specific feed url.
-	 *
 	 * @param {string} feedUrl Url of the feed
 	 * @returns {string} The title of the feed
 	 */
-	titleForFeed: function (feedUrl) {
+	titleForFeed (feedUrl) {
 		for (let feed of this.config.feeds) {
 			if (feed.url === feedUrl) {
 				return feed.title || "";
@@ -303,7 +355,7 @@ Module.register("newsfeed", {
 	/**
 	 * Schedule visual update.
 	 */
-	scheduleUpdateInterval: function () {
+	scheduleUpdateInterval () {
 		this.updateDom(this.config.animationSpeed);
 
 		// Broadcast NewsFeed if needed
@@ -315,8 +367,27 @@ Module.register("newsfeed", {
 		if (this.timer) clearInterval(this.timer);
 
 		this.timer = setInterval(() => {
-			this.activeItem++;
-			this.updateDom(this.config.animationSpeed);
+
+			/*
+			 * When animations are enabled, don't update the DOM unless we are actually changing what we are displaying.
+			 * (Animating from a headline to itself is unsightly.)
+			 * Cases:
+			 *
+			 * Number of items | Number of items | Display
+			 * at last update  |   right now     | Behaviour
+			 * ----------------------------------------------------
+			 *     0           |      0          | do not update
+			 *     0           |     >0          | update
+			 *     1           |   0 or >1       | update
+			 *     1           |      1          | update only if item details (hash value) changed
+			 *    >1           |    any          | update
+			 *
+			 * (N.B. We set activeItemCount and activeItemHash in getTemplateData().)
+			 */
+			if (this.newsItems.length > 1 || this.newsItems.length !== this.activeItemCount || this.activeItemHash !== this.newsItems[0]?.hash) {
+				this.activeItem++; // this is OK if newsItems.Length==1; getTemplateData will wrap it around
+				this.updateDom(this.config.animationSpeed);
+			}
 
 			// Broadcast NewsFeed if needed
 			if (this.config.broadcastNewsFeeds) {
@@ -325,10 +396,14 @@ Module.register("newsfeed", {
 		}, this.config.updateInterval);
 	},
 
-	resetDescrOrFullArticleAndTimer: function () {
+	resetDescrOrFullArticleAndTimer () {
 		this.isShowingDescription = this.config.showDescription;
 		this.config.showFullArticle = false;
 		this.scrollPosition = 0;
+		this.articleIframe = null;
+		this.articleContainer = null;
+		this.articleFrameCheckPending = false;
+		this.articleUnavailable = false;
 		// reset bottom bar alignment
 		document.getElementsByClassName("region bottom bar")[0].classList.remove("newsfeed-fullarticle");
 		if (!this.timer) {
@@ -336,7 +411,7 @@ Module.register("newsfeed", {
 		}
 	},
 
-	notificationReceived: function (notification, payload, sender) {
+	notificationReceived (notification, payload, sender) {
 		const before = this.activeItem;
 		if (notification === "MODULE_DOM_CREATED" && this.config.hideLoading) {
 			this.hide();
@@ -346,7 +421,7 @@ Module.register("newsfeed", {
 				this.activeItem = 0;
 			}
 			this.resetDescrOrFullArticleAndTimer();
-			Log.debug(this.name + " - going from article #" + before + " to #" + this.activeItem + " (of " + this.newsItems.length + ")");
+			Log.debug(`[newsfeed] going from article #${before} to #${this.activeItem} (of ${this.newsItems.length})`);
 			this.updateDom(100);
 		} else if (notification === "ARTICLE_PREVIOUS") {
 			this.activeItem--;
@@ -354,30 +429,33 @@ Module.register("newsfeed", {
 				this.activeItem = this.newsItems.length - 1;
 			}
 			this.resetDescrOrFullArticleAndTimer();
-			Log.debug(this.name + " - going from article #" + before + " to #" + this.activeItem + " (of " + this.newsItems.length + ")");
+			Log.debug(`[newsfeed] going from article #${before} to #${this.activeItem} (of ${this.newsItems.length})`);
 			this.updateDom(100);
 		}
-		// if "more details" is received the first time: show article summary, on second time show full article
 		else if (notification === "ARTICLE_MORE_DETAILS") {
-			// full article is already showing, so scrolling down
 			if (this.config.showFullArticle === true) {
+				// iframe already showing — scroll down
 				this.scrollPosition += this.config.scrollLength;
-				window.scrollTo(0, this.scrollPosition);
-				Log.debug(this.name + " - scrolling down");
-				Log.debug(this.name + " - ARTICLE_MORE_DETAILS, scroll position: " + this.config.scrollLength);
-			} else {
+				if (this.articleContainer) this.articleContainer.scrollTop = this.scrollPosition;
+				Log.debug(`[newsfeed] scrolling down, offset: ${this.scrollPosition}`);
+			} else if (this.isShowingDescription) {
+				// description visible — step up to full article
 				this.showFullArticle();
+			} else {
+				// only title visible — show description first
+				this.isShowingDescription = true;
+				Log.debug("[newsfeed] showing article description");
+				this.updateDom(100);
 			}
 		} else if (notification === "ARTICLE_SCROLL_UP") {
 			if (this.config.showFullArticle === true) {
-				this.scrollPosition -= this.config.scrollLength;
-				window.scrollTo(0, this.scrollPosition);
-				Log.debug(this.name + " - scrolling up");
-				Log.debug(this.name + " - ARTICLE_SCROLL_UP, scroll position: " + this.config.scrollLength);
+				this.scrollPosition = Math.max(0, this.scrollPosition - this.config.scrollLength);
+				if (this.articleContainer) this.articleContainer.scrollTop = this.scrollPosition;
+				Log.debug(`[newsfeed] scrolling up, offset: ${this.scrollPosition}`);
 			}
 		} else if (notification === "ARTICLE_LESS_DETAILS") {
 			this.resetDescrOrFullArticleAndTimer();
-			Log.debug(this.name + " - showing only article titles again");
+			Log.debug("[newsfeed] showing only article titles again");
 			this.updateDom(100);
 		} else if (notification === "ARTICLE_TOGGLE_FULL") {
 			if (this.config.showFullArticle) {
@@ -387,26 +465,37 @@ Module.register("newsfeed", {
 				this.showFullArticle();
 			}
 		} else if (notification === "ARTICLE_INFO_REQUEST") {
-			this.sendNotification("ARTICLE_INFO_RESPONSE", {
-				title: this.newsItems[this.activeItem].title,
-				source: this.newsItems[this.activeItem].sourceTitle,
-				date: this.newsItems[this.activeItem].pubdate,
-				desc: this.newsItems[this.activeItem].description,
-				url: this.getActiveItemURL()
-			});
+			const infoItem = this.newsItems[this.activeItem];
+			if (infoItem) {
+				this.sendNotification("ARTICLE_INFO_RESPONSE", {
+					title: infoItem.title,
+					source: infoItem.sourceTitle,
+					date: infoItem.pubdate,
+					desc: infoItem.description,
+					url: typeof infoItem.url === "string" ? infoItem.url : infoItem.url.href
+				});
+			}
 		}
 	},
 
-	showFullArticle: function () {
-		this.isShowingDescription = !this.isShowingDescription;
-		this.config.showFullArticle = !this.isShowingDescription;
-		// make bottom bar align to top to allow scrolling
-		if (this.config.showFullArticle === true) {
-			document.getElementsByClassName("region bottom bar")[0].classList.add("newsfeed-fullarticle");
+	showFullArticle () {
+		const item = this.newsItems[this.activeItem];
+		const hasUrl = item && item.url && (typeof item.url === "string" ? item.url : item.url.href);
+		if (!hasUrl) {
+			Log.debug("[newsfeed] no article URL available, skipping full article view");
+			return;
 		}
+		this.isShowingDescription = false;
+		this.config.showFullArticle = true;
+		// Check server-side whether the article URL allows framing.
+		// The bottom bar CSS class is only added once we know the iframe will be shown.
+		this.articleFrameCheckPending = true;
+		this.articleUnavailable = false;
+		const rawUrl = typeof item.url === "string" ? item.url : item.url.href;
+		this.sendSocketNotification("CHECK_ARTICLE_URL", { url: rawUrl });
 		clearInterval(this.timer);
 		this.timer = null;
-		Log.debug(this.name + " - showing " + this.isShowingDescription ? "article description" : "full article");
+		Log.debug("[newsfeed] showing full article");
 		this.updateDom(100);
 	}
 });

defaultmodules/newsfeed/newsfeed.njk

@@ -0,0 +1,89 @@
+{% macro escapeText(text, dangerouslyDisableAutoEscaping=false) %}
+  {% if dangerouslyDisableAutoEscaping -%}
+    {{ text | safe }}
+  {%- else -%}
+    {{ text }}
+  {%- endif %}
+{% endmacro %}
+{% macro escapeTitle(title, url, dangerouslyDisableAutoEscaping=false, showTitleAsUrl=false) %}
+  {% if dangerouslyDisableAutoEscaping %}
+    {% if showTitleAsUrl %}
+      <a
+        href="{{ url }}"
+        style="text-decoration:none;
+                      color:#ffffff"
+        target="_blank"
+        >{{ title | safe }}</a
+      >
+    {% else %}
+      {{ title | safe }}
+    {% endif %}
+  {% else %}
+    {% if showTitleAsUrl %}
+      <a
+        href="{{ url }}"
+        style="text-decoration:none;
+                      color:#ffffff"
+        target="_blank"
+        >{{ title }}</a
+      >
+    {% else %}
+      {{ title }}
+    {% endif %}
+  {% endif %}
+{% endmacro %}
+{% if loaded %}
+  {% if config.showAsList %}
+    <ul class="newsfeed-list">
+      {% for item in items %}
+        <li>
+          {% if (config.showSourceTitle and item.sourceTitle) or config.showPublishDate %}
+            <div class="newsfeed-source light small dimmed">
+              {% if item.sourceTitle and config.showSourceTitle %}
+                {{ item.sourceTitle }}{% if config.showPublishDate %},&nbsp;{% else %}:{% endif %}
+              {% endif %}
+              {% if config.showPublishDate %}{{ item.publishDate }}:{% endif %}
+            </div>
+          {% endif %}
+          <div class="newsfeed-title bright medium light{{ ' no-wrap' if not config.wrapTitle }}">{{ escapeTitle(item.title, item.url, config.dangerouslyDisableAutoEscaping, config.showTitleAsUrl) }}</div>
+          {% if config.showDescription %}
+            <div class="newsfeed-desc small light{{ ' no-wrap' if not config.wrapDescription }}">
+              {% if config.truncDescription %}
+                {{ escapeText(item.description | truncate(config.lengthDescription) , config.dangerouslyDisableAutoEscaping) }}
+              {% else %}
+                {{ escapeText(item.description, config.dangerouslyDisableAutoEscaping) }}
+              {% endif %}
+            </div>
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ul>
+  {% else %}
+    <div>
+      {% if (config.showSourceTitle and sourceTitle) or config.showPublishDate %}
+        <div class="newsfeed-source light small dimmed">
+          {% if sourceTitle and config.showSourceTitle %}
+            {{ escapeText(sourceTitle, config.dangerouslyDisableAutoEscaping) }}{% if config.showPublishDate %},&nbsp;{% else %}:{% endif %}
+          {% endif %}
+          {% if config.showPublishDate %}{{ publishDate }}:{% endif %}
+        </div>
+      {% endif %}
+      <div class="newsfeed-title bright medium light{{ ' no-wrap' if not config.wrapTitle }}">{{ escapeTitle(title, url, config.dangerouslyDisableAutoEscaping, config.showTitleAsUrl) }}</div>
+      {% if config.showDescription %}
+        <div class="newsfeed-desc small light{{ ' no-wrap' if not config.wrapDescription }}">
+          {% if config.truncDescription %}
+            {{ escapeText(description | truncate(config.lengthDescription) , config.dangerouslyDisableAutoEscaping) }}
+          {% else %}
+            {{ escapeText(description, config.dangerouslyDisableAutoEscaping) }}
+          {% endif %}
+        </div>
+      {% endif %}
+    </div>
+  {% endif %}
+  {% elseif empty %}
+  <div class="small dimmed">{{ "NEWSFEED_NO_ITEMS" | translate | safe }}</div>
+  {% elseif error %}
+  <div class="small dimmed">{{ "MODULE_CONFIG_ERROR" | translate({MODULE_NAME: "Newsfeed", ERROR: error}) | safe }}</div>
+{% else %}
+  <div class="small dimmed">{{ "LOADING" | translate | safe }}</div>
+{% endif %}

defaultmodules/newsfeed/newsfeedfetcher.js

@@ -0,0 +1,167 @@
+const crypto = require("node:crypto");
+const stream = require("node:stream");
+const FeedMe = require("feedme");
+const iconv = require("iconv-lite");
+const { htmlToText } = require("html-to-text");
+const Log = require("logger");
+const HTTPFetcher = require("#http_fetcher");
+
+/**
+ * NewsfeedFetcher - Fetches and parses RSS/Atom feed data
+ * Uses HTTPFetcher for HTTP handling with intelligent error handling
+ * @class
+ */
+class NewsfeedFetcher {
+
+	/**
+	 * Creates a new NewsfeedFetcher instance
+	 * @param {string} url - The URL of the news feed to fetch
+	 * @param {number} reloadInterval - Time in ms between fetches
+	 * @param {string} encoding - Encoding of the feed (e.g., 'UTF-8')
+	 * @param {boolean} logFeedWarnings - If true log warnings when there is an error parsing a news article
+	 * @param {boolean} useCorsProxy - If true cors proxy is used for article url's
+	 */
+	constructor (url, reloadInterval, encoding, logFeedWarnings, useCorsProxy) {
+		this.url = url;
+		this.encoding = encoding;
+		this.logFeedWarnings = logFeedWarnings;
+		this.useCorsProxy = useCorsProxy;
+		this.items = [];
+		this.fetchFailedCallback = () => {};
+		this.itemsReceivedCallback = () => {};
+
+		// Use HTTPFetcher for HTTP handling (Composition)
+		this.httpFetcher = new HTTPFetcher(url, {
+			reloadInterval: Math.max(reloadInterval, 1000),
+			headers: {
+				"Cache-Control": "max-age=0, no-cache, no-store, must-revalidate",
+				Pragma: "no-cache"
+			}
+		});
+
+		// Wire up HTTPFetcher events
+		this.httpFetcher.on("response", (response) => this.#handleResponse(response));
+		this.httpFetcher.on("error", (errorInfo) => this.fetchFailedCallback(this, errorInfo));
+	}
+
+	/**
+	 * Creates a parse error info object
+	 * @param {string} message - Error message
+	 * @param {Error} error - Original error
+	 * @returns {object} Error info object
+	 */
+	#createParseError (message, error) {
+		return {
+			message,
+			status: null,
+			errorType: "PARSE_ERROR",
+			translationKey: "MODULE_ERROR_UNSPECIFIED",
+			retryAfter: this.httpFetcher.reloadInterval,
+			retryCount: 0,
+			url: this.url,
+			originalError: error
+		};
+	}
+
+	/**
+	 * Handles successful HTTP response
+	 * @param {Response} response - The fetch Response object
+	 */
+	#handleResponse (response) {
+		this.items = [];
+		const parser = new FeedMe();
+
+		parser.on("item", (item) => {
+			const title = item.title;
+			let description = item.description || item.summary || item.content || "";
+			const pubdate = item.pubdate || item.published || item.updated || item["dc:date"] || item["a10:updated"];
+			const url = item.url || item.link || "";
+
+			if (title && pubdate) {
+				// Convert HTML entities, codes and tag
+				description = htmlToText(description, {
+					wordwrap: false,
+					selectors: [
+						{ selector: "a", options: { ignoreHref: true, noAnchorUrl: true } },
+						{ selector: "br", format: "inlineSurround", options: { prefix: " " } },
+						{ selector: "img", format: "skip" }
+					]
+				});
+
+				this.items.push({
+					title,
+					description,
+					pubdate,
+					url,
+					useCorsProxy: this.useCorsProxy,
+					hash: crypto.createHash("sha256").update(`${pubdate} :: ${title} :: ${url}`).digest("hex")
+				});
+			} else if (this.logFeedWarnings) {
+				Log.warn("Can't parse feed item:", item);
+				Log.warn(`Title: ${title}`);
+				Log.warn(`Description: ${description}`);
+				Log.warn(`Pubdate: ${pubdate}`);
+			}
+		});
+
+		parser.on("end", () => this.broadcastItems());
+
+		parser.on("error", (error) => {
+			Log.error(`${this.url} - Feed parsing failed: ${error.message}`);
+			this.fetchFailedCallback(this, this.#createParseError(`Feed parsing failed: ${error.message}`, error));
+		});
+
+		parser.on("ttl", (minutes) => {
+			const ttlms = Math.min(minutes * 60 * 1000, 86400000);
+			if (ttlms > this.httpFetcher.reloadInterval) {
+				this.httpFetcher.reloadInterval = ttlms;
+				Log.info(`reloadInterval set to ttl=${ttlms} for url ${this.url}`);
+			}
+		});
+
+		try {
+			const nodeStream = response.body instanceof stream.Readable
+				? response.body
+				: stream.Readable.fromWeb(response.body);
+			nodeStream.pipe(iconv.decodeStream(this.encoding)).pipe(parser);
+		} catch (error) {
+			Log.error(`${this.url} - Stream processing failed: ${error.message}`);
+			this.fetchFailedCallback(this, this.#createParseError(`Stream processing failed: ${error.message}`, error));
+		}
+	}
+
+	/**
+	 * Update the reload interval, but only if we need to increase the speed.
+	 * @param {number} interval - Interval for the update in milliseconds.
+	 */
+	setReloadInterval (interval) {
+		if (interval > 1000 && interval < this.httpFetcher.reloadInterval) {
+			this.httpFetcher.reloadInterval = interval;
+		}
+	}
+
+	startFetch () {
+		this.httpFetcher.startPeriodicFetch();
+	}
+
+	broadcastItems () {
+		if (this.items.length <= 0) {
+			Log.info("No items to broadcast yet.");
+			return;
+		}
+		Log.info(`Broadcasting ${this.items.length} items.`);
+		this.itemsReceivedCallback(this);
+	}
+
+	/** @param {function(NewsfeedFetcher): void} callback - Called when items are received */
+	onReceive (callback) {
+		this.itemsReceivedCallback = callback;
+	}
+
+	/** @param {function(NewsfeedFetcher, object): void} callback - Called on fetch error */
+	onError (callback) {
+		this.fetchFailedCallback = callback;
+	}
+}
+
+module.exports = NewsfeedFetcher;