fix: bump version to 3.2.10 in package.json

fix: update RBAC documentation and improve monitor data retrieval log…

.github/dependabot.yml

@@ -0,0 +1,47 @@
+version: 2
+updates:
+  # Track base image versions via .env.build
+  - package-ecosystem: "docker"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    file-patterns:
+      - ".env.build"
+      - "node:*"  # Ensures Node.js images are correctly detected
+
+  # Monitor OS package versions in Dockerfile (Debian/Alpine)
+  - package-ecosystem: "gitsubmodule"  # Alternative method to track OS packages in Dockerfile
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    labels:
+      - "dependencies"
+      - "os-packages"
+    commit-message:
+      prefix: "os"
+      include: "scope"
+
+  # Monitor Node.js dependencies from package.json
+  # TODO: Uncomment below if we want to begin letting Dependabot monitor & open PRs for Node.js project dependencies
+  # - package-ecosystem: "npm"
+  #   directory: "/"
+  #   schedule:
+  #     interval: "weekly"
+  #   labels:
+  #     - "dependencies"
+  #     - "npm"
+  #   commit-message:
+  #     prefix: "npm"
+  #     include: "scope"
+
+  # Monitor GitHub Actions dependencies
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    labels:
+      - "dependencies"
+      - "github-actions"
+    commit-message:
+      prefix: "actions"
+      include: "scope"

.github/workflows/publish-images.yml

@@ -27,7 +27,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'  # Adjust as needed
+          node-version: '23'  # Adjust as needed
 
       - name: Install dependencies
         run: npm ci
@@ -153,4 +153,4 @@ jobs:
           echo "Setting BUILD_VERSION to $VERSION"
           gh variable set BUILD_VERSION --body "$VERSION"
         env:
-          GH_TOKEN: ${{ secrets.GH_PAT }}  # Needs to be PAT w/ Read access to metadata and secrets & Read and Write access to actions, actions variables, and code
+          GH_TOKEN: ${{ secrets.GH_PAT }}  # Needs to be PAT w/ Read access to metadata and secrets & Read and Write access to actions, actions variables, and code

Dockerfile

@@ -1,15 +1,15 @@
 # syntax=docker/dockerfile:1
 
-# Global build arguments
-ARG ALPINE_VERSION=23.7.0-alpine3.21
-ARG DEBIAN_VERSION=23.7.0-bookworm-slim
+# Global build arguments (defined default values in case `.env.build` isn't loaded)
+ARG ALPINE_VERSION_TAG=23.7.0-alpine3.21
+ARG DEBIAN_VERSION_TAG=23.7.0-bookworm-slim
 ARG VARIANT=debian
 
 #==========================================================#
 #                   STAGE 1: BUILD STAGE                    #
 #==========================================================#
 
-FROM node:${DEBIAN_VERSION} AS builder-debian
+FROM node:${DEBIAN_VERSION_TAG} AS builder-debian
 RUN apt-get update && apt-get install -y \
         build-essential=12.9 \
         python3=3.11.2-1+b1 \
@@ -18,11 +18,11 @@ RUN apt-get update && apt-get install -y \
         make=4.3-4.1 \
         node-gyp=9.3.0-2 \
         g++=4:12.2.0-3 \
-        tzdata=2024b-0+deb12u1 \
+        tzdata \
         iputils-ping=3:20221126-1+deb12u1 && \
     rm -rf /var/lib/apt/lists/*
 
-FROM node:${ALPINE_VERSION} AS builder-alpine
+FROM node:${ALPINE_VERSION_TAG} AS builder-alpine
 RUN apk add --no-cache --update \
         build-base=0.5-r3 \
         python3=3.12.9-r0 \
@@ -58,10 +58,9 @@ COPY . .
 # TODO: Reevaluate permissions (possibly reduce?)...
 # Remove docs directory and ensure required directories exist
 RUN rm -rf src/routes/\(docs\) \
-    static/documentation \
-    static/fonts/lato/full && \
-  mkdir -p uploads database && \
-  # TODO: Consider changing below to `chmod -R u-rwX,g=rX,o= uploads database`
+        static/documentation \
+        static/fonts/lato/full && \
+    mkdir -p uploads database && \
     chmod -R 750 uploads database
 
 # Build the application and remove `devDependencies`
@@ -72,21 +71,21 @@ RUN npm run build && \
 #             STAGE 2: PRODUCTION/FINAL STAGE              #
 #==========================================================#
 
-FROM node:${DEBIAN_VERSION} AS final-debian
+FROM node:${DEBIAN_VERSION_TAG} AS final-debian
 # TODO: Consider adding `--no-install-recommends`, but will need testing (may further help reduce final build size)
 RUN apt-get update && apt-get install -y \
         iputils-ping=3:20221126-1+deb12u1 \
         sqlite3=3.40.1-2+deb12u1 \
-        tzdata=2024b-0+deb12u1 \
+        tzdata \
     # TODO: Is it ok to change to `curl` here so that we don't have to maintain `wget` version mismatch between Debian architectures? (`curl` is only used for the container healthcheck and because there is an Alpine variant (best!) we probably don't care if the Debian image ends up building bigger due to `curl`.)
-    curl=7.88.1-10+deb12u8 && \
+    curl && \
     rm -rf /var/lib/apt/lists/*
 
-FROM node:${ALPINE_VERSION} AS final-alpine
+FROM node:${ALPINE_VERSION_TAG} AS final-alpine
 RUN apk add --no-cache --update \
-  iputils=20240905-r0 \
-  sqlite=3.48.0-r0 \
-  tzdata
+	iputils=20240905-r0 \
+	sqlite=3.48.0-r0 \
+	tzdata
 
 FROM final-${VARIANT} AS final
 

README.md

@@ -79,7 +79,7 @@ npm run dev
 
 Official Docker images for **Kener** are available on [Docker Hub](https://hub.docker.com/r/rajnandan1/kener). Multiple versions are maintained to support different use cases.
 
-<a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=3.2.4"><img src="https://img.shields.io/badge/Latest_Stable_Release-3.2.4-blue" alt="Kener latest stable version: 3.2.4" /></a>
+<a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=3.2.9"><img src="https://img.shields.io/badge/Latest_Stable_Release-3.2.9-blue" alt="Kener latest stable version: 3.2.9" /></a>
 
 #### Available Tags
 
@@ -93,38 +93,38 @@ Official Docker images for **Kener** are available on [Docker Hub](https://hub.d
 	</tr>
 	<tr>
 		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=latest" target="_blank"><code>latest</code></td>
-		<td>Latest stable release (aka 3.2.4)</td>
+		<td>Latest stable release (aka 3.2.9)</td>
 	</tr>
 	<tr>
-		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=3.2.4" target="_blank"><code>3.2.4</code></a></td>
+		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=3.2.9" target="_blank"><code>3.2.9</code></a></td>
 		<td>Specific release version</td>
 	</tr>
 	<tr>
 		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=3.2" target="_blank"><code>3.2</code></a></td>
-		<td>Major-minor version tag pointing to the latest patch (3.2.4) release within that minor version (3.2.x)</td>
+		<td>Major-minor version tag pointing to the latest patch (3.2.9) release within that minor version (3.2.x)</td>
 	</tr>
 	<tr>
 		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=3" target="_blank"><code>3</code></a></td>
-		<td>Major version tag pointing to the latest stable (3.2.4) release within that major version (3.x.x)</td>
+		<td>Major version tag pointing to the latest stable (3.2.9) release within that major version (3.x.x)</td>
 	</tr>
 	<tr>
 		<td align="left" colspan="2" style="color:#0D597F;text-align:left;">Alpine Linux 3.21 w/ Node.js v23.7.0 &nbsp;<strong><em>(smallest image size)</em></strong></td>
 	</tr>
 	<tr>
 		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=alpine" target="_blank"><code>alpine</code></td>
-		<td>Latest stable release (aka 3.2.4)</td>
+		<td>Latest stable release (aka 3.2.9)</td>
 	</tr>
 	<tr>
-		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=3.2.4-alpine" target="_blank"><code>3.2.4-alpine</code></a></td>
+		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=3.2.9-alpine" target="_blank"><code>3.2.9-alpine</code></a></td>
 		<td>Specific release version</td>
 	</tr>
 	<tr>
 		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=3.2-alpine" target="_blank"><code>3.2-alpine</code></a></td>
-		<td>Major-minor version tag pointing to the latest patch (3.2.4) release within that minor version (3.2.x)</td>
+		<td>Major-minor version tag pointing to the latest patch (3.2.9) release within that minor version (3.2.x)</td>
 	</tr>
 	<tr>
 		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=3-alpine" target="_blank"><code>3-alpine</code></a></td>
-		<td>Major version tag pointing to the latest stable (3.2.4) release within that major version (3.x.x)</td>
+		<td>Major version tag pointing to the latest stable (3.2.9) release within that major version (3.x.x)</td>
 	</tr>
 </table>
 

docs/rbac.md

@@ -119,7 +119,7 @@ Admins can manage user accounts through the user settings page:
 
 ## Role Limitations
 
-- The Admin role can only be assigned during initial setup or by existing Admins
+- The Admin role can only be assigned during initial setup
 - Members cannot create or modify content
 - Users cannot modify their own role (only an Admin can change roles)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kener",
-  "version": "3.2.5",
+  "version": "3.2.10",
   "private": false,
   "license": "MIT",
   "description": "Kener: An open-source Node.js status page application for real-time service monitoring, incident management, and customizable reporting. Simplify service outage tracking, enhance incident communication, and ensure a seamless user experience.",

src/lib/components/manage/monitorSheet.svelte

@@ -188,6 +188,12 @@
             invalidFormMessage = `Host ${hosts[i].host} is not of type ${hosts[i].type}`;
             return;
           }
+          //validating timeout for ping
+          if (!!hosts[i].timeout && isNaN(hosts[i].timeout)) {
+            invalidFormMessage = "Timeout should be a number";
+            return;
+          }
+          hosts[i].timeout = Number(hosts[i].timeout);
           //validating timeout
           if (hosts[i].timeout < 1) {
             invalidFormMessage = "Timeout should be greater than 0";
@@ -222,6 +228,12 @@
             invalidFormMessage = `Host ${hosts[i].host} is not of type ${hosts[i].type}`;
             return;
           }
+          //validating timeout for tcp
+          if (!!hosts[i].timeout && isNaN(hosts[i].timeout)) {
+            invalidFormMessage = "Timeout should be a number";
+            return;
+          }
+          hosts[i].timeout = Number(hosts[i].timeout);
           //validating timeout
           if (hosts[i].timeout < 1) {
             invalidFormMessage = "Timeout should be greater than 0";
@@ -943,7 +955,7 @@
                     ];
                   }}
                 >
-                  <Plus class="h-5 w-5" /> Add New
+                  <Plus class="mr-1 h-5 w-5" /> Add New
                 </Button>
               </div>
             </div>

src/lib/components/manage/monitorsAdd.svelte

@@ -229,28 +229,33 @@
   });
   let shareMenusToggle = false;
 
-  let monitorTriggers = {
-    down_trigger: {
-      failureThreshold: 1,
-      trigger_type: "DOWN",
-      successThreshold: 1,
-      description: "The monitor is down",
-      createIncident: "NO",
-      active: false,
-      triggers: [],
-      severity: "critical"
-    },
-    degraded_trigger: {
-      failureThreshold: 1,
-      trigger_type: "DEGRADED",
-      successThreshold: 1,
-      active: false,
-      description: "The monitor is degraded",
-      createIncident: "NO",
-      triggers: [],
-      severity: "warning"
-    }
-  };
+  function initMonitorTriggers() {
+    monitorTriggers = {
+      down_trigger: {
+        failureThreshold: 1,
+        trigger_type: "DOWN",
+        successThreshold: 1,
+        description: "The monitor is down",
+        createIncident: "NO",
+        active: false,
+        triggers: [],
+        severity: "critical"
+      },
+      degraded_trigger: {
+        failureThreshold: 1,
+        trigger_type: "DEGRADED",
+        successThreshold: 1,
+        active: false,
+        description: "The monitor is degraded",
+        createIncident: "NO",
+        triggers: [],
+        severity: "warning"
+      }
+    };
+  }
+
+  let monitorTriggers;
+  initMonitorTriggers();
 
   let saveTriggerError = "";
   async function saveTriggers() {
@@ -286,6 +291,7 @@
   }
   let currentAlertMonitor;
   function openAlertMenu(m) {
+    initMonitorTriggers();
     currentAlertMonitor = m;
     if (m.down_trigger) {
       monitorTriggers.down_trigger = m.down_trigger;
@@ -503,7 +509,7 @@
                       <div class="text-red-500">
                         {monitor.testResult.error}
                       </div>
-                    {:else if !!monitor.testResult.status && !!monitor.testResult.latency}
+                    {:else if monitor.testResult.status != undefined && monitor.testResult.latency != undefined}
                       <p class="text-muted-foreground">
                         Status: <span class="text-api-{monitor.testResult.status.toLowerCase()}"
                           >{monitor.testResult.status}</span

src/lib/server/db/dbimpl.js

@@ -138,9 +138,9 @@ class DbImpl {
     return data;
   }
 
-  async getLastStatusBeforeCombined(monitor_tags_arr, timestamp) {
+  async getLastStatusBeforeCombined(monitor_tags_arr, timestamp, minTimestamp) {
     //monitor_tag_arr is an array of string
-    return await this.knex("monitoring_data")
+    let query = this.knex("monitoring_data")
       .select(
         "timestamp",
         this.knex.raw("COUNT(*) as total_entries"),
@@ -153,8 +153,15 @@ class DbImpl {
 				END as status
 			`),
       )
-      .whereIn("monitor_tag", monitor_tags_arr)
-      .where("timestamp", "=", timestamp)
+      .whereIn("monitor_tag", monitor_tags_arr);
+
+    if (!!minTimestamp) {
+      query = query.whereBetween("timestamp", [minTimestamp, timestamp]);
+    } else {
+      query = query.where("timestamp", "=", timestamp);
+    }
+
+    return await query
       .groupBy("timestamp")
       .havingRaw("COUNT(*) = ?", [monitor_tags_arr.length])
       .orderBy("timestamp", "desc")

src/lib/server/ping.js

@@ -3,85 +3,86 @@ import net from "net"; // Use import instead of require
 import ping from "ping";
 
 const TCP = function (type, host, port, timeout) {
-	port = parseInt(port, 10);
-	return new Promise((resolve) => {
-		const socket = new net.Socket();
-		const start = process.hrtime.bigint(); // High-precision timestamp
-		let resolved = false;
+  timeout = Number(timeout);
+  port = parseInt(port, 10);
+  return new Promise((resolve) => {
+    const socket = new net.Socket();
+    const start = process.hrtime.bigint(); // High-precision timestamp
+    let resolved = false;
 
-		const onFinish = (status) => {
-			if (!resolved) {
-				resolved = true;
-				const end = process.hrtime.bigint();
-				const latency = Number(end - start) / 1e6; // Convert nanoseconds to milliseconds
-				socket.destroy();
-				resolve({ status, latency, host, port, type });
-			}
-		};
+    const onFinish = (status) => {
+      if (!resolved) {
+        resolved = true;
+        const end = process.hrtime.bigint();
+        const latency = Number(end - start) / 1e6; // Convert nanoseconds to milliseconds
+        socket.destroy();
+        resolve({ status, latency, host, port, type });
+      }
+    };
 
-		socket.setTimeout(timeout);
-		socket.once("connect", () => onFinish("open"));
-		socket.once("timeout", () => onFinish("timeout"));
-		socket.once("error", () => onFinish("error"));
+    socket.setTimeout(timeout);
+    socket.once("connect", () => onFinish("open"));
+    socket.once("timeout", () => onFinish("timeout"));
+    socket.once("error", () => onFinish("error"));
 
-		// Check if it's an IPv6 address (contains ':')
-		const options = {
-			host,
-			port,
-			family: type === "IP6" ? 6 : 4
-		}; //host.includes(":") ? { host, port, family: 6 } : { host, port };
-		socket.connect(options);
-	});
+    // Check if it's an IPv6 address (contains ':')
+    const options = {
+      host,
+      port,
+      family: type === "IP6" ? 6 : 4,
+    }; //host.includes(":") ? { host, port, family: 6 } : { host, port };
+    socket.connect(options);
+  });
 };
 
 const Ping = async function (type, host, timeout, count) {
-	let output = {
-		alive: false,
-		min: null,
-		max: null,
-		avg: null,
-		latencies: [],
-		latency: null,
-		host: host,
-		type: type
-	};
+  let output = {
+    alive: false,
+    min: null,
+    max: null,
+    avg: null,
+    latencies: [],
+    latency: null,
+    host: host,
+    type: type,
+  };
 
-	try {
-		let res = await ping.promise.probe(host, {
-			v6: type === "IP6",
-			timeout: type === "IP6" ? false : Math.floor(timeout / 1000),
-			min_reply: count
-		});
-		output.alive = res.alive;
-		output.min = res.min;
-		output.max = res.max;
-		output.avg = res.avg;
-		output.latencies = res.times;
-		output.latency = res.time;
-	} catch (error) {
-		console.log(`Error in pingCall IP4 for ${host}`, error);
-	}
-	return output;
+  try {
+    let res = await ping.promise.probe(host, {
+      v6: type === "IP6",
+      timeout: type === "IP6" ? false : Math.floor(timeout / 1000),
+      min_reply: count,
+    });
+    output.alive = res.alive;
+    output.min = res.min;
+    output.max = res.max;
+    output.avg = res.avg;
+    output.latencies = res.times;
+    output.latency = res.time;
+  } catch (error) {
+    console.log(`Error in pingCall IP4 for ${host}`, error);
+  }
+  return output;
 };
 
 /**
  * @param {string} input
  */
 function ExtractIPv6HostAndPort(input) {
-	const parts = input.split(":"); // Split by colons
+  const parts = input.split(":"); // Split by colons
 
-	// If there's a valid port at the end, extract it
-	const lastPart = parts[parts.length - 1];
-	const port = /^\d+$/.test(lastPart) ? parseInt(parts.pop(), 10) : null; // Check if last part is a number
+  // If there's a valid port at the end, extract it
+  const lastPart = parts[parts.length - 1];
+  const port = /^\d+$/.test(lastPart) ? parseInt(parts.pop(), 10) : null; // Check if last part is a number
 
-	// Reconstruct the IPv6 address
-	const host = parts.join(":");
+  // Reconstruct the IPv6 address
+  const host = parts.join(":");
 
-	// Ensure it's a valid IPv6 format
-	if (host.includes(":")) {
-		return { host, port }; // Port may be null if not present
-	}
-	return null; // Return null if the format is incorrect
+  // Ensure it's a valid IPv6 format
+  if (host.includes(":")) {
+    return { host, port }; // Port may be null if not present
+  }
+  return null; // Return null if the format is incorrect
 }
 
 export { TCP, ExtractIPv6HostAndPort, Ping };

src/lib/server/services/groupCall.js

@@ -6,11 +6,16 @@ import db from "../db/db.js";
 
 async function waitForDataAndReturn(arr, ts, d, maxTime) {
   await Wait(d);
+
   let data = await db.getLastStatusBeforeCombined(arr, ts);
   if (data) {
     data.type = REALTIME;
     return data;
   } else if (d > maxTime) {
+    data = await db.getLastStatusBeforeCombined(arr, ts, ts - 86400);
+    if (data) {
+      return data;
+    }
     return {
       status: DOWN,
       latency: 0,

src/lib/snippets/embed/angular/howto.txt

@@ -1 +1 @@
-<app-embed-monitor monitor="http://localhost:3000/embed/monitor-{selectedMonitor.value}" theme="{embedTheme}" bgc="{embedBgc.substr(1)}" locale="{embedLocale.value}"></app-embed-monitor>
+<app-embed-monitor monitor="{siteURL}{base}/embed/monitor-{selectedMonitor.value}" theme="{embedTheme}" bgc="{embedBgc.substr(1)}" locale="{embedLocale.value}"></app-embed-monitor>

src/lib/snippets/embed/html/howto.txt

@@ -1,5 +1,5 @@
 <iframe 
-	src="http://localhost:3000/embed/monitor-{selectedMonitor.value}?bgc={embedBgc.substr(1)}&locale={embedLocale.value}&theme={embedTheme}" 
+	src="{siteURL}{base}/embed/monitor-{selectedMonitor.value}?bgc={embedBgc.substr(1)}&locale={embedLocale.value}&theme={embedTheme}" 
 	width="100%" 
 	height="200" 
 	allowfullscreen="allowfullscreen" 

src/lib/snippets/embed/js/howto.txt

@@ -1 +1 @@
-<script async src="http://localhost:3000/embed/monitor-{selectedMonitor.value}/js?bgc={embedBgc.substr(1)}&locale={embedLocale.value}&theme={embedTheme}&monitor=http://localhost:3000/embed/monitor-{selectedMonitor.value}"></script>
+<script async src="{siteURL}{base}/embed/monitor-{selectedMonitor.value}/js?bgc={embedBgc.substr(1)}&locale={embedLocale.value}&theme={embedTheme}&monitor={siteURL}{base}/embed/monitor-{selectedMonitor.value}"></script>

src/lib/snippets/embed/react/howto.txt

@@ -4,7 +4,7 @@ function App() {
   return (
     <div>
       <h2>React Embed</h2>
-      <EmbedMonitor monitor="http://localhost:3000/embed/monitor-{selectedMonitor.value}" theme="{embedTheme}" bgc="{embedBgc.substr(1)}" locale="{embedLocale.value}"/>
+      <EmbedMonitor monitor="{siteURL}{base}/embed/monitor-{selectedMonitor.value}" theme="{embedTheme}" bgc="{embedBgc.substr(1)}" locale="{embedLocale.value}"/>
     </div>
   );
 }

src/lib/snippets/embed/svelte/howto.txt

@@ -2,4 +2,4 @@
 	import EmbedMonitor from "./EmbedMonitor.svelte";
 </script>
 
-<EmbedMonitor monitor="http://localhost:3000/embed/monitor-{selectedMonitor.value}" theme="{embedTheme}" bgc="{embedBgc.substr(1)}" locale="{embedLocale.value}"/>
+<EmbedMonitor monitor="{siteURL}{base}/embed/monitor-{selectedMonitor.value}" theme="{embedTheme}" bgc="{embedBgc.substr(1)}" locale="{embedLocale.value}"/>

src/lib/snippets/embed/vue/howto.txt

@@ -1,7 +1,7 @@
 <template>
   <div>
     <h2>Vue Embed</h2>
-    <EmbedMonitor monitor="http://localhost:3000/embed/monitor-{selectedMonitor.value}" theme="{embedTheme}" bgc="{embedBgc.substr(1)}" locale="{embedLocale.value}"/>
+    <EmbedMonitor monitor="{siteURL}{base}/embed/monitor-{selectedMonitor.value}" theme="{embedTheme}" bgc="{embedBgc.substr(1)}" locale="{embedLocale.value}"/>
   </div>
 </template>
 

src/routes/(manage)/manage/(app)/app/badges/+page.svelte

@@ -172,6 +172,8 @@
     selectedDoc.howto = selectedDoc.howto.replaceAll("{embedBgc.substr(1)}", embedBgc.substr(1));
     selectedDoc.howto = selectedDoc.howto.replaceAll("{embedLocale.value}", embedLocale.value);
     selectedDoc.howto = selectedDoc.howto.replaceAll("{selectedMonitor.value}", selectedMonitor.value);
+    selectedDoc.howto = selectedDoc.howto.replaceAll("{siteURL}", data.siteURL);
+    selectedDoc.howto = selectedDoc.howto.replaceAll("{base}", base);
   }
 
   function embedUpdated() {
@@ -505,7 +507,7 @@
                 </div>
                 <div class="my-2">
                   <Embed
-                    monitor="http://localhost:3000/embed/monitor-{selectedMonitor.value}"
+                    monitor="{siteURL}{base}/embed/monitor-{selectedMonitor.value}"
                     theme={embedTheme}
                     bgc={embedBgc.substr(1)}
                     locale={embedLocale.value}