Self-Hosted
/
uptime-kuma
mirror of https://github.com/louislam/uptime-kuma
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add custom html code to head

Browse Source 
With this PR a new text field will be added that allows setting custom
html code to the `<head>` of a status page.
The implementation will be similar to
https://github.com/louislam/uptime-kuma/pull/2567/files, but with a
multi-line text field and without escaping any special chars.

For security reasons the env var `UPTIME_KUMA_ALLOW_CUSTOM_HTML` must be set to `1` to enable this feature.

This will allow tracking with most analytic platforms and has been
requested several times.

Closes #2818
pull/3693/head
mueller-ma 3 months ago committed by Matthias Müller
parent 56aa81e337
commit 7bac84642c
5 changed files with 33 additions and 0 deletions
Show Stats Download Patch File Download Diff File

14
db/knex_migrations/2023-10-13-1200-add-custom-html.js
Unescape View File

@ -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");
});
};

6
server/model/status_page.js
Unescape View File

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

1
server/socket-handlers/status-page-socket-handler.js
Unescape View File

@ -166,6 +166,7 @@ module.exports.statusPageSocketHandler = (socket) => {
statusPage.show_certificate_expiry = config.showCertificateExpiry; statusPage.show_certificate_expiry = config.showCertificateExpiry;
statusPage.modified_date = R.isoDateTime(); statusPage.modified_date = R.isoDateTime();
statusPage.google_analytics_tag_id = config.googleAnalyticsId; statusPage.google_analytics_tag_id = config.googleAnalyticsId;
statusPage.custom_html = config.customHtml;
await R.store(statusPage); await R.store(statusPage);

3
src/lang/en.json
Unescape View File

@ -752,6 +752,9 @@
"wayToGetClickSendSMSToken": "You can get API Username and API Key from {0} .", "wayToGetClickSendSMSToken": "You can get API Username and API Key from {0} .",
"Custom Monitor Type": "Custom Monitor Type", "Custom Monitor Type": "Custom Monitor Type",
"Google Analytics ID": "Google Analytics ID", "Google Analytics ID": "Google Analytics ID",
"Custom HTML": "Custom HTML",
"customHtmlEnvVar1": "The environment variable",
"customHtmlEnvVar2": "must be set to",
"Edit Tag": "Edit Tag", "Edit Tag": "Edit Tag",
"Server Address": "Server Address", "Server Address": "Server Address",
"Learn More": "Learn More", "Learn More": "Learn More",

9
src/pages/StatusPage.vue
Unescape View File

@ -96,6 +96,15 @@
<prism-editor v-model="config.customCSS" class="css-editor" :highlight="highlighter" line-numbers></prism-editor> <prism-editor v-model="config.customCSS" class="css-editor" :highlight="highlighter" line-numbers></prism-editor>
</div> </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></prism-editor>
<div class="form-text">
{{ $t("customHtmlEnvVar1") }} <code>UPTIME_KUMA_ALLOW_CUSTOM_HTML</code> {{ $t("customHtmlEnvVar2") }} <code>1</code>.
</div>
</div>
<div class="danger-zone"> <div class="danger-zone">
<button class="btn btn-danger me-2" @click="deleteDialog"> <button class="btn btn-danger me-2" @click="deleteDialog">
<font-awesome-icon icon="trash" /> <font-awesome-icon icon="trash" />

Write Preview
Loading…
Cancel
Save