fixed linting issues

implemented additional changes
Add custom html code to head
2025-09-11 05:16:55 +08:00 · 2024-06-04 01:23:51 +02:00 · 2024-06-04 01:11:13 +02:00 · 2024-06-04 00:31:47 +02:00
6 changed files with 46 additions and 3 deletions
--- a/db/knex_migrations/2023-10-13-1200-add-custom-html.js
+++ b/db/knex_migrations/2023-10-13-1200-add-custom-html.js
@@ -0,0 +1,14 @@
+exports.up = function (knex) {
+    // Insert column for custom HTML code
+    return knex.schema
+        .alterTable("status_page", function (table) {
+            table.text("custom_html").nullable().defaultTo(null);
+        });
+};
+
+exports.down = function (knex) {
+    return knex.schema
+        .alterTable("status_page", function (table) {
+            table.dropColumn("custom_html");
+        });
+};
--- a/package-lock.json
+++ b/package-lock.json
@@ -74,7 +74,7 @@
                "socket.io": "~4.6.1",
                "socket.io-client": "~4.6.1",
                "socks-proxy-agent": "6.1.1",
-                "sqlite3": "^5.1.7",
+                "sqlite3": "~5.1.7",
                "tar": "~6.2.1",
                "tcp-ping": "~0.1.1",
                "thirty-two": "~1.0.2",
--- a/server/model/status_page.js
+++ b/server/model/status_page.js
@@ -66,6 +66,10 @@ class StatusPage extends BeanModel {
            head.append($(escapedGoogleAnalyticsScript));
        }

+        if (process.env.UPTIME_KUMA_ALLOW_CUSTOM_HTML === "1") {
+            head.append(statusPage.customHtml);
+        }
+
        // OG Meta Tags
        let ogTitle = $("<meta property=\"og:title\" content=\"\" />").attr("content", statusPage.title);
        head.append(ogTitle);
@@ -247,6 +251,7 @@ class StatusPage extends BeanModel {
            showPoweredBy: !!this.show_powered_by,
            googleAnalyticsId: this.google_analytics_tag_id,
            showCertificateExpiry: !!this.show_certificate_expiry,
+            customHtml: this.custom_html
        };
    }

@@ -270,6 +275,7 @@ class StatusPage extends BeanModel {
            showPoweredBy: !!this.show_powered_by,
            googleAnalyticsId: this.google_analytics_tag_id,
            showCertificateExpiry: !!this.show_certificate_expiry,
+            customHtml: this.custom_html
        };
    }

--- a/server/socket-handlers/status-page-socket-handler.js
+++ b/server/socket-handlers/status-page-socket-handler.js
@@ -101,10 +101,11 @@ module.exports.statusPageSocketHandler = (socket) => {
            if (!statusPage) {
                throw new Error("No slug?");
            }
-
+            const config = await statusPage.toJSON();
+            config.allowEditingCustomHtml = import.meta.env.UPTIME_KUMA_ALLOW_CUSTOM_HTML === "1";
            callback({
                ok: true,
-                config: await statusPage.toJSON(),
+                config,
            });
        } catch (error) {
            callback({
@@ -167,6 +168,9 @@ module.exports.statusPageSocketHandler = (socket) => {
            statusPage.show_certificate_expiry = config.showCertificateExpiry;
            statusPage.modified_date = R.isoDateTime();
            statusPage.google_analytics_tag_id = config.googleAnalyticsId;
+            if (process.env.UPTIME_KUMA_ALLOW_CUSTOM_HTML === "1") {
+                statusPage.custom_html = config.customHtml;
+            }

            await R.store(statusPage);

--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -776,6 +776,9 @@
    "wayToGetClickSendSMSToken": "You can get API Username and API Key from {0} .",
    "Custom Monitor Type": "Custom Monitor Type",
    "Google Analytics ID": "Google Analytics ID",
+    "Custom HTML": "Custom HTML",
+    "customHtmlEnvVarDisabled": "environment variable {allow_custom_html} must be set to inject html to the head",
+    "customHtmlEnvVarEnabled": "Because the environment variable {allow_custom_html} is set, arbitrary html can be injected into the head. Make sure to remove the environment variable after use",
    "Edit Tag": "Edit Tag",
    "Server Address": "Server Address",
    "Learn More": "Learn More",
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -104,6 +104,22 @@
                    <prism-editor v-model="config.customCSS" class="css-editor" :highlight="highlighter" line-numbers></prism-editor>
                </div>

+                <!-- Custom HTML -->
+                <div class="my-3">
+                    <div class="mb-1">{{ $t("Custom HTML") }}</div>
+                    <prism-editor v-model="config.customHtml" class="css-editor" :highlight="highlighter" line-numbers :readonly="!config.allowEditingCustomHtml"></prism-editor>
+                    <i18n-t v-if="config.allowEditingCustomHtml" tag="div" class="form-text" keypath="customHtmlEnvVarEnabled">
+                        <template #allow_custom_html>
+                            <code>UPTIME_KUMA_ALLOW_CUSTOM_HTML</code>
+                        </template>
+                    </i18n-t>
+                    <i18n-t v-else tag="div" class="form-text" keypath="customHtmlEnvVarDisabled">
+                        <template #allow_custom_html>
+                            <code>UPTIME_KUMA_ALLOW_CUSTOM_HTML=1</code>
+                        </template>
+                    </i18n-t>
+                </div>
+
                <div class="danger-zone">
                    <button class="btn btn-danger me-2" @click="deleteDialog">
                        <font-awesome-icon icon="trash" />