add mirror

MagicMirror/.editorconfig

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

MagicMirror/.eslintignore

+modules/default/calendar/vendor/*

MagicMirror/.eslintrc.json

+{
+	"extends": ["eslint:recommended", "plugin:prettier/recommended", "plugin:jsdoc/recommended"],
+	"plugins": ["prettier", "import", "jsdoc", "jest"],
+	"env": {
+		"browser": true,
+		"es2022": true,
+		"jest/globals": true,
+		"node": true
+	},
+	"globals": {
+		"config": true,
+		"Log": true,
+		"MM": true,
+		"Module": true,
+		"moment": true
+	},
+	"parserOptions": {
+		"sourceType": "module",
+		"ecmaVersion": 2022,
+		"ecmaFeatures": {
+			"globalReturn": true
+		}
+	},
+	"rules": {
+		"eqeqeq": "error",
+		"import/order": "error",
+		"no-prototype-builtins": "off",
+		"no-throw-literal": "error",
+		"no-unused-vars": "off",
+		"no-useless-return": "error",
+		"prefer-template": "error"
+	}
+}

MagicMirror/.husky/pre-commit

+#!/bin/sh
+
+[ -f "$(dirname "$0")/_/husky.sh" ] && . "$(dirname "$0")/_/husky.sh"
+
+if command -v npm &> /dev/null; then
+  npm run lint:staged
+fi

MagicMirror/.prettierignore

+/config
+/coverage
+package-lock.json

MagicMirror/.prettierrc.json

+{
+	"trailingComma": "none"
+}

MagicMirror/.stylelintrc.json

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

MagicMirror/Collaboration.md

+This document describes how collaborators of this repository should work together.
+
+## Pull Requests
+
+- never merge your own PR's
+- never merge without someone having approved (approving and merging from same person is allowed)
+- wait for all approvals requested (or the author decides something different in the comments)
+- never merge to `master`, except for releases (because of update notification)
+- 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 @MichMich only

MagicMirror/LICENSE.md

+# The MIT License (MIT)
+
+Copyright © 2016-2022 Michael Teeuw
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the “Software”), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+**The software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.**

MagicMirror/README.md

+![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/actions/workflow/status/michmich/magicmirror/automated-tests.yaml" 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>
+</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² 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!
+
+## 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).
+
+## Links
+
+- Website: [https://magicmirror.builders](https://magicmirror.builders)
+- Documentation: [https://docs.magicmirror.builders](https://docs.magicmirror.builders)
+- Forum: [https://forum.magicmirror.builders](https://forum.magicmirror.builders)
+  - Technical discussions: https://forum.magicmirror.builders/category/11/core-system
+- Discord: [https://discord.gg/J5BAtvx](https://discord.gg/J5BAtvx)
+- Blog: [https://michaelteeuw.nl/tagged/magicmirror](https://michaelteeuw.nl/tagged/magicmirror)
+- Donations: [https://magicmirror.builders/#donate](https://magicmirror.builders/#donate)
+
+## Contributing Guidelines
+
+Contributions of all kinds are welcome, not only in the form of code but also with regards to
+
+- bug reports
+- documentation
+- translations
+
+For the full contribution guidelines, check out: [https://docs.magicmirror.builders/about/contributing.html](https://docs.magicmirror.builders/about/contributing.html)
+
+## Enjoying MagicMirror? Consider a donation!
+
+MagicMirror² is opensource and free. That doesn't mean we don't need any money.
+
+Please consider a donation to help us cover the ongoing costs like webservers and email services.
+If we receive enough donations we might even be able to free up some working hours and spend some extra time improving the MagicMirror² core.
+
+To donate, please follow [this](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=G5D8E9MR5DTD2&source=url) link.
+
+<p style="text-align: center">
+	<a href="https://forum.magicmirror.builders/topic/728/magicmirror-is-voted-number-1-in-the-magpi-top-50"><img src="https://magicmirror.builders/img/magpi-best-watermark-custom.png" width="150" alt="MagPi Top 50"></a>
+</p>

MagicMirror/clientonly/index.js

+"use strict";
+
+// Use separate scope to prevent global scope pollution
+(function () {
+	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
+		["address", "port"].forEach((key) => {
+			config[key] = getCommandLineParameter(key, process.env[key.toUpperCase()]);
+		});
+
+		// determine if "--use-tls"-flag was provided
+		config["tls"] = process.argv.indexOf("--use-tls") > 0;
+	}
+
+	/**
+	 * 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 = "";
+
+				// Gather incoming data
+				response.on("data", function (chunk) {
+					configData += chunk;
+				});
+				// Resolve promise at the end of the HTTP/HTTPS stream
+				response.on("end", function () {
+					resolve(JSON.parse(configData));
+				});
+			});
+
+			request.on("error", function (error) {
+				reject(new Error(`Unable to read config from server (${url} (${error.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);
+	}
+
+	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})`);
+			});
+	} else {
+		fail();
+	}
+})();

MagicMirror/config/config.js

+/* Magic Mirror Config Sample
+ *
+ * By Michael Teeuw https://michaelteeuw.nl
+ * MIT Licensed.
+ *
+ * For more information on how you can configure this file
+ * see https://docs.magicmirror.builders/getting-started/configuration.html#general
+ * and https://docs.magicmirror.builders/modules/configuration.html
+ */
+let config = {
+	address: "localhost", 	// Address to listen on, can be:
+							// - "localhost", "127.0.0.1", "::1" to listen on loopback interface
+							// - another specific IPv4/6 to listen on a specific interface
+							// - "0.0.0.0", "::" to listen on any interface
+							// Default, when address config is left out or empty, is "localhost"
+	port: 8081,
+	basePath: "/", 	// The URL path where MagicMirror is hosted. If you are using a Reverse proxy
+					// you must set the sub path here. basePath must end with a /
+	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], 	// Set [] to allow all IP addresses
+															// or add a specific IPv4 of 192.168.1.5 :
+															// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
+															// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
+															// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],
+
+	useHttps: false, 		// Support HTTPS or not, default "false" will use HTTP
+	httpsPrivateKey: "", 	// HTTPS private key path, only require when useHttps is true
+	httpsCertificate: "", 	// HTTPS Certificate path, only require when useHttps is true
+
+	language: "en",
+	locale: "en-US",
+	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
+	electronOptions: {
+		webPreferences: {
+		  webviewTag: true,
+		},
+	},
+
+	modules: [
+		{
+			module: 'MMM-WebView',
+			position: 'top_center',
+			config: {
+			  //url: 'https://www.google.com/',
+			  url: 'http://localhost:8080/',
+			  width: '1024px',
+			  height: '768px',
+			},
+		},
+
+		{
+			module: "calendar",
+			header: 'US Holidays',
+			position: "top_left",
+			config: {
+			  // The config property is optional.
+			  // If no config is set, an example calendar is shown.
+			  // See 'Configuration options' for more information.
+				calendars: [
+					{
+						url: 'https://p24-calendars.icloud.com/holiday/US_en.ics',
+						symbol: 'calendar',
+					}
+				],
+			},
+		},
+		{
+			module: "alert",
+			config: {
+				// The config property is optional.
+				// See 'Configuration options' for more information.
+				welcome_message: 'Please do workout today',
+				display_time: 5000
+			}
+		},
+		{
+			module: "updatenotification",
+			position: "top_bar",
+		},
+		{
+			module: "clock",
+			position: "top_center",
+		},
+		{
+			module: "compliments",
+			position: "middle_center",
+		},
+		{
+			module: "weather",
+			//position: "top_left",
+			position: "bottom_right",
+			config: {
+				weatherProvider: "openweathermap",
+				type: "current",
+				location: "Urbana, IL",
+				locationID: "4914570", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
+				apiKey: "010dcf248e695643b0e7c17a539546cf"
+			}
+		},
+		{
+			module: "weather",
+			position:"top_right",
+			header: "Weather Forecast",
+			config: {
+				weatherProvider: "openweathermap",
+				type: "forecast",
+				location: "Urbana, IL",
+				locationID: "4914570", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
+				apiKey: "010dcf248e695643b0e7c17a539546cf"
+			}
+		},
+		{
+			module: "newsfeed",
+			position: "bottom_bar",
+			config: {
+				feeds: [
+					{
+						title: "New York Times - US",
+						url: "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml"
+					},
+					{
+						title: "BBC",
+						url: "https://feeds.bbci.co.uk/news/video_and_audio/news_front_page/rss.xml?edition=uk",
+					  },
+				],
+				//showAsList: true,
+				/*showSourceTitle: true,
+				showPublishDate: true,
+				broadcastNewsFeeds: true,
+				broadcastNewsUpdates: true*/
+			},
+		},
+		
+		{
+			module: 'MMM-KeyBindings',
+    		config: {
+				evdev: { enabled: false },
+        		enableKeyboard: true
+			},
+		},
+		{
+		module: 'MMM-Carousel',
+		position: 'bottom_bar', // Required only for navigation controls
+		config: {
+			transitionInterval: 100000,
+			//ignoreModules: ['compliments'],
+			mode: 'slides',
+			showPageIndicators: true,
+			showPageControls: true,
+			slides: {
+				//main: ['clock', 'weather','compliments','MMM-Covid19'],
+				//"Slide 2": ['newsfeed'],
+				main: ['clock', 'weather','calendar','compliments', 'newsfeed'],
+				"Slide 2": ['MMM-WebView'],
+
+			},
+			keyBindings: { 
+				enabled: false,
+				enableKeyboard: true,
+				mode: "DEFAULT",
+				map: {
+					NextSlide: "ArrowRight", 
+					PrevSlide: "ArrowLeft", 
+					Slide0:    "Home"
+				},
+				
+			}},
+		},
+		
+	]
+
+
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") {module.exports = config;}
\ No newline at end of file

MagicMirror/config/config.js.sample

+/* MagicMirror² Config Sample
+ *
+ * By Michael Teeuw https://michaelteeuw.nl
+ * MIT Licensed.
+ *
+ * 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:
+							// - "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"],
+
+	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",
+	logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
+	timeFormat: 24,
+	units: "metric",
+
+	modules: [
+		{
+			module: "alert",
+		},
+		{
+			module: "updatenotification",
+			position: "top_bar"
+		},
+		{
+			module: "clock",
+			position: "top_left"
+		},
+		{
+			module: "calendar",
+			header: "US Holidays",
+			position: "top_left",
+			config: {
+				calendars: [
+					{
+						symbol: "calendar-check",
+						url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics"
+					}
+				]
+			}
+		},
+		{
+			module: "compliments",
+			position: "lower_third"
+		},
+		{
+			module: "weather",
+			position: "top_right",
+			config: {
+				weatherProvider: "openweathermap",
+				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"
+			}
+		},
+		{
+			module: "weather",
+			position: "top_right",
+			header: "Weather Forecast",
+			config: {
+				weatherProvider: "openweathermap",
+				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"
+			}
+		},
+		{
+			module: "newsfeed",
+			position: "bottom_bar",
+			config: {
+				feeds: [
+					{
+						title: "New York Times",
+						url: "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml"
+					}
+				],
+				showSourceTitle: true,
+				showPublishDate: true,
+				broadcastNewsFeeds: true,
+				broadcastNewsUpdates: true
+			}
+		},
+	]
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") {module.exports = config;}

MagicMirror/css/custom.css.sample

+/* MagicMirror² 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: */
+/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */
+
+:root {
+  --color-text: #999;
+  --color-text-dimmed: #666;
+  --color-text-bright: #fff;
+  --color-background: black;
+
+  --font-primary: "Roboto Condensed";
+  --font-secondary: "Roboto";
+  
+  --font-size: 20px;
+  --font-size-small: 0.75rem;
+
+  --gap-body-top: 60px;
+  --gap-body-right: 60px;
+  --gap-body-bottom: 60px;
+  --gap-body-left: 60px;
+  
+  --gap-modules: 30px;
+}

MagicMirror/css/main.css

+:root {
+  --color-text: #999;
+  --color-text-dimmed: #666;
+  --color-text-bright: #fff;
+  --color-background: #000;
+  --font-primary: "Roboto Condensed";
+  --font-secondary: "Roboto";
+  --font-size: 20px;
+  --font-size-xsmall: 0.75rem;
+  --font-size-small: 1rem;
+  --font-size-medium: 1.5rem;
+  --font-size-large: 3.25rem;
+  --font-size-xlarge: 3.75rem;
+  --gap-body-top: 60px;
+  --gap-body-right: 60px;
+  --gap-body-bottom: 60px;
+  --gap-body-left: 60px;
+  --gap-modules: 30px;
+}
+
+html {
+  cursor: none;
+  overflow: hidden;
+  background: var(--color-background);
+  user-select: none;
+  font-size: var(--font-size);
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+body {
+  margin: var(--gap-body-top) var(--gap-body-right) var(--gap-body-bottom) var(--gap-body-left);
+  position: absolute;
+  height: calc(100% - var(--gap-body-top) - var(--gap-body-bottom));
+  width: calc(100% - var(--gap-body-right) - var(--gap-body-left));
+  background: var(--color-background);
+  color: var(--color-text);
+  font-family: var(--font-primary), sans-serif;
+  font-weight: 400;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+/**
+ * Default styles.
+ */
+
+.dimmed {
+  color: var(--color-text-dimmed);
+}
+
+.normal {
+  color: var(--color-text);
+}
+
+.bright {
+  color: var(--color-text-bright);
+}
+
+.xsmall {
+  font-size: var(--font-size-xsmall);
+  line-height: 1.275;
+}
+
+.small {
+  font-size: var(--font-size-small);
+  line-height: 1.25;
+}
+
+.medium {
+  font-size: var(--font-size-medium);
+  line-height: 1.225;
+}
+
+.large {
+  font-size: var(--font-size-large);
+  line-height: 1;
+}
+
+.xlarge {
+  font-size: var(--font-size-xlarge);
+  line-height: 1;
+  letter-spacing: -3px;
+}
+
+.thin {
+  font-family: var(--font-secondary), sans-serif;
+  font-weight: 100;
+}
+
+.light {
+  font-family: var(--font-primary), sans-serif;
+  font-weight: 300;
+}
+
+.regular {
+  font-family: var(--font-primary), sans-serif;
+  font-weight: 400;
+}
+
+.bold {
+  font-family: var(--font-primary), sans-serif;
+  font-weight: 700;
+}
+
+.align-right {
+  text-align: right;
+}
+
+.align-left {
+  text-align: left;
+}
+
+header {
+  text-transform: uppercase;
+  font-size: var(--font-size-xsmall);
+  font-family: var(--font-primary), Arial, Helvetica, sans-serif;
+  font-weight: 400;
+  border-bottom: 1px solid var(--color-text-dimmed);
+  line-height: 15px;
+  padding-bottom: 5px;
+  margin-bottom: 10px;
+  color: var(--color-text);
+}
+
+sup {
+  font-size: 50%;
+  line-height: 50%;
+}
+
+/**
+ * Module styles.
+ */
+
+.module {
+  margin-bottom: var(--gap-modules);
+}
+
+.module.hidden {
+  pointer-events: none;
+}
+
+.module:not(.hidden) {
+  pointer-events: auto;
+}
+
+.region.bottom .module {
+  margin-top: var(--gap-modules);
+  margin-bottom: 0;
+}
+
+.no-wrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pre-line {
+  white-space: pre-line;
+}
+
+/**
+ * Region Definitions.
+ */
+
+.region {
+  position: absolute;
+}
+
+.region.fullscreen {
+  position: absolute;
+  inset: calc(-1 * var(--gap-body-top)) calc(-1 * var(--gap-body-right)) calc(-1 * var(--gap-body-bottom)) calc(-1 * var(--gap-body-left));
+  pointer-events: none;
+}
+
+.region.right {
+  right: 0;
+  text-align: right;
+}
+
+.region.top {
+  top: 0;
+}
+
+.region.top.center,
+.region.bottom.center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.region.top.right,
+.region.top.left,
+.region.top.center {
+  top: 100%;
+}
+
+.region.bottom {
+  bottom: 0;
+}
+
+.region.bottom.right,
+.region.bottom.center,
+.region.bottom.left {
+  bottom: 100%;
+}
+
+.region.bar {
+  width: 100%;
+  text-align: center;
+}
+
+.region.third,
+.region.middle.center {
+  width: 100%;
+  text-align: center;
+  transform: translateY(-50%);
+}
+
+.region.upper.third {
+  top: 33%;
+}
+
+.region.middle.center {
+  top: 50%;
+}
+
+.region.lower.third {
+  top: 66%;
+}
+
+.region.left {
+  text-align: left;
+}
+
+.region table {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: separate;
+}

MagicMirror/fonts/package-lock.json

+{
+	"name": "magicmirror-fonts",
+	"lockfileVersion": 2,
+	"requires": true,
+	"packages": {
+		"": {
+			"name": "magicmirror-fonts",
+			"license": "MIT",
+			"dependencies": {
+				"@fontsource/roboto": "^4.5.8",
+				"@fontsource/roboto-condensed": "^4.5.9"
+			}
+		},
+		"node_modules/@fontsource/roboto": {
+			"version": "4.5.8",
+			"resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-4.5.8.tgz",
+			"integrity": "sha512-CnD7zLItIzt86q4Sj3kZUiLcBk1dSk81qcqgMGaZe7SQ1P8hFNxhMl5AZthK1zrDM5m74VVhaOpuMGIL4gagaA=="
+		},
+		"node_modules/@fontsource/roboto-condensed": {
+			"version": "4.5.9",
+			"resolved": "https://registry.npmjs.org/@fontsource/roboto-condensed/-/roboto-condensed-4.5.9.tgz",
+			"integrity": "sha512-ql4sQq+h8puBVildZ5ssjYf8DWDONYDe3PD3Bu/p1ZW9GnRETRNPPcCTs/q62HIl3QimwwkiKWynn6wZhQaetg=="
+		}
+	},
+	"dependencies": {
+		"@fontsource/roboto": {
+			"version": "4.5.8",
+			"resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-4.5.8.tgz",
+			"integrity": "sha512-CnD7zLItIzt86q4Sj3kZUiLcBk1dSk81qcqgMGaZe7SQ1P8hFNxhMl5AZthK1zrDM5m74VVhaOpuMGIL4gagaA=="
+		},
+		"@fontsource/roboto-condensed": {
+			"version": "4.5.9",
+			"resolved": "https://registry.npmjs.org/@fontsource/roboto-condensed/-/roboto-condensed-4.5.9.tgz",
+			"integrity": "sha512-ql4sQq+h8puBVildZ5ssjYf8DWDONYDe3PD3Bu/p1ZW9GnRETRNPPcCTs/q62HIl3QimwwkiKWynn6wZhQaetg=="
+		}
+	}
+}

MagicMirror/fonts/package.json

+{
+	"name": "magicmirror-fonts",
+	"description": "Package for fonts use by MagicMirror² Core.",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/MichMich/MagicMirror.git"
+	},
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/MichMich/MagicMirror/issues"
+	},
+	"dependencies": {
+		"@fontsource/roboto": "^4.5.8",
+		"@fontsource/roboto-condensed": "^4.5.9"
+	}
+}

MagicMirror/fonts/roboto.css

+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 100;
+  src: local("Roboto Thin"), local("Roboto-Thin"), url("node_modules/@fontsource/roboto/files/roboto-all-100-normal.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Roboto Condensed Light"), local("RobotoCondensed-Light"), url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-all-300-normal.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Roboto Condensed"), local("RobotoCondensed-Regular"), url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-all-400-normal.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Roboto Condensed";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Roboto Condensed Bold"), local("RobotoCondensed-Bold"), url("node_modules/@fontsource/roboto-condensed/files/roboto-condensed-all-700-normal.woff") format("woff");
+}
+
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 400;
+  src: local("Roboto"), local("Roboto-Regular"), url("node_modules/@fontsource/roboto/files/roboto-all-400-normal.woff") format("woff");
+}
+
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 500;
+  src: local("Roboto Medium"), local("Roboto-Medium"), url("node_modules/@fontsource/roboto/files/roboto-all-500-normal.woff") format("woff");
+}
+
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 700;
+  src: local("Roboto Bold"), local("Roboto-Bold"), url("node_modules/@fontsource/roboto/files/roboto-all-700-normal.woff") format("woff");
+}
+
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 300;
+  src: local("Roboto Light"), local("Roboto-Light"), url("node_modules/@fontsource/roboto/files/roboto-all-300-normal.woff") format("woff");
+}