MagicMirrorOrg · KristjanESPERANTO · Dec 21, 2025
diff --git a/.github/workflows/pages.yaml b/.github/workflows/pages.yaml
@@ -0,0 +1,69 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: ["master"]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Create redirect index.html
+        run: |
+          cat > index.html << 'EOF'
+          <!DOCTYPE html>
+          <html lang="en">
+          <head>
+              <meta charset="UTF-8">
+              <meta http-equiv="refresh" content="0; url=docs/demo/">
+              <meta name="viewport" content="width=device-width, initial-scale=1.0">
+              <title>MagicMirror² Demo</title>
+              <script>
+                  window.location.href = 'docs/demo/';
+              </script>
+              <style>
+                  body {
+                      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                      height: 100vh;
+                      margin: 0;
+                      background: #000;
+                      color: #fff;
+                  }
+              </style>
+          </head>
+          <body>
+              <p>Redirecting to <a href="docs/demo/">MagicMirror² Demo</a>...</p>
+          </body>
+          </html>
+          EOF
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "."
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/docs/demo/README.md b/docs/demo/README.md
@@ -0,0 +1,128 @@
+# MagicMirror² Browser Demo
+
+A browser-based demo version of [MagicMirror²](https://github.com/MagicMirrorOrg/MagicMirror).
+
+## Live Demo
+
+**Try it now:** [https://magicmirrororg.github.io/MagicMirror/docs/demo/](https://magicmirrororg.github.io/MagicMirror/docs/demo/)
+
+## What makes this special?
+
+This demo runs **real MagicMirror² code** from the `master` branch in your browser. It's not a simplified recreation - it uses the actual:
+
+- Core architecture (`Module.register()`, `Class.extend()`)
+- Original default modules (clock, weather, compliments, calendar, newsfeed)
+- Real CSS styling
+- Authentic module system and lifecycle
+
+**The only difference:** Server components are mocked with demo data instead of making real API calls.
+
+This means you're seeing the real MagicMirror² experience, just without needing a server or API keys!
+
+## Running locally
+
+```bash
+# IMPORTANT: Server must run from the MagicMirror root directory!
+cd /path/to/MagicMirror
+
+# With Python 3
+python -m http.server 8080
+
+# Or with Node.js
+npx http-server -p 8080
+
+# Open in browser
+open http://localhost:8080/docs/demo/
+```
+
+**Why from root?** The demo uses real files with relative paths (`../../js/`, `../../modules/`) - the server must run from the repository root.
+
+## Structure
+
+```
+demo/
+├── index.html             # Loads real modules
+├── config.js              # Demo configuration
+├── css/
+│   └── demo.css           # Demo banner styling only
+└── js/
+    ├── demo-mocks.js      # Mocks for Log, Translator, Socket.io
+    ├── demo-loader.js     # Overrides API calls with mock data
+    └── demo-main.js       # Initializes MM like the original
+```
+
+## How it works
+
+1. **index.html** loads the real MagicMirror core files:
+   - `js/class.js` - Base class system
+   - `js/module.js` - Module architecture
+   - Original modules from `modules/default/`
+
+2. **demo-mocks.js** creates replacements for server components:
+   - `window.Log` for logging
+   - `window.Translator` for translations
+   - `window.MM` for module manager
+   - Mock data for weather, calendar, news
+
+3. **demo-loader.js** extends modules during registration:
+   - Intercepts `Module.register()`
+   - Overrides `start()` methods
+   - Replaces API calls with mock data
+
+4. **demo-main.js** starts the system:
+   - Reads `config.modules`
+   - Creates module instances
+   - Inserts DOM like the original
+
+## Customization
+
+### Change configuration
+
+Edit [config.js](config.js):
+
+```javascript
+modules: [
+  {
+    module: "clock",
+    position: "top_left",
+    config: {
+      /* ... */
+    }
+  }
+  // More modules...
+];
+```
+
+### Change mock data
+
+Edit [js/demo-mocks.js](js/demo-mocks.js):
+
+```javascript
+const mockWeatherData = {
+  current: {
+    temperature: 8
+    // ...
+  }
+};
+```
+
+## Limitations
+
+As a pure browser demo:
+
+- ❌ No real API calls (CORS, API keys)
+- ❌ No node_helper.js modules
+- ❌ No third-party modules (but easy to add!)
+- ❌ No Electron features
+
+## Adding new modules
+
+1. Add script tag in [index.html](index.html):
+
+```html
+<script src="../../modules/default/MODULENAME/MODULENAME.js"></script>
+```
+
+2. Add module to config in [config.js](config.js)
+
+3. If API calls needed: Add mock function in [demo-loader.js](js/demo-loader.js)
diff --git a/docs/demo/config.js b/docs/demo/config.js
@@ -0,0 +1,68 @@
+/* MagicMirror² Demo Configuration */
+let config = {
+	language: "en",
+	timeFormat: 12,
+	units: "metric",
+	basePath: "/",
+
+	modules: [
+		{
+			module: "clock",
+			position: "top_left",
+			config: {
+				displaySeconds: true,
+				showDate: true,
+				showWeek: true,
+				dateFormat: "dddd, MMMM Do, YYYY"
+			}
+		},
+		{
+			module: "compliments",
+			position: "lower_third",
+			config: {
+				compliments: {
+					morning: ["Good morning!", "Enjoy your day!", "Nice to see you!"],
+					afternoon: ["Hello!", "Looking good!", "Beautiful afternoon!"],
+					evening: ["Good evening!", "Have a nice evening!", "Time to relax!"]
+				}
+			}
+		},
+		{
+			module: "weather",
+			position: "top_right",
+			config: {
+				weatherProvider: "openweathermap",
+				type: "current",
+				location: "Berlin",
+				locationID: "2950159",
+				apiKey: "DEMO_KEY"
+			}
+		},
+		{
+			module: "calendar",
+			position: "top_left",
+			header: "Calendar",
+			config: {
+				maximumEntries: 5,
+				calendars: []
+			}
+		},
+		{
+			module: "newsfeed",
+			position: "bottom_bar",
+			config: {
+				feeds: [
+					{
+						title: "Demo News",
+						url: "about:blank"
+					}
+				],
+				showSourceTitle: true,
+				showPublishDate: false
+			}
+		}
+	]
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") { module.exports = config; }
diff --git a/docs/demo/css/demo.css b/docs/demo/css/demo.css
@@ -0,0 +1,47 @@
+/* Demo Banner */
+#demo-banner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  color: #fff;
+  padding: 8px 20px;
+  text-align: center;
+  z-index: 10000;
+  font-size: 14px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-bottom: 1px solid #333;
+}
+
+#demo-banner a {
+  color: #4fc3f7;
+  text-decoration: none;
+}
+
+#demo-banner a:hover {
+  text-decoration: underline;
+}
+
+#demo-banner button {
+  background: none;
+  border: none;
+  color: #fff;
+  font-size: 20px;
+  cursor: pointer;
+  padding: 0 5px;
+  margin-left: 10px;
+  opacity: 0.7;
+}
+
+#demo-banner button:hover {
+  opacity: 1;
+}
+
+/* Adjust body margin for banner */
+body {
+  margin-top: calc(var(--gap-body-top) + 40px);
+}