9
0
mirror of https://github.com/donlon/cloudflare-error-page.git synced 2025-12-19 14:59:28 +00:00

editor/ui: support modifying 'visit ... for more information' text

This commit is contained in:
Anthony Donlon
2025-11-22 13:55:37 +08:00
parent 48525f7a51
commit 43d2ca3e32
5 changed files with 39 additions and 24 deletions

View File

@@ -81,6 +81,9 @@ A demo server using Flask is also available in [flask_demo.py](examples/flask_de
``` JavaScript ``` JavaScript
params = { params = {
"title": "Catastrophic infrastructure failure", "title": "Catastrophic infrastructure failure",
"more_information": {
"for": "no information",
},
"browser_status": { "browser_status": {
"status": "error", "status": "error",
"status_text": "Out of Memory", "status_text": "Out of Memory",
@@ -151,6 +154,7 @@ params = {
"hidden": false, "hidden": false,
"text": "cloudflare.com", "text": "cloudflare.com",
"link": "https://www.cloudflare.com/", "link": "https://www.cloudflare.com/",
"for": "more information",
}, },
// Configuration for the Browser/Cloudflare/Host status // Configuration for the Browser/Cloudflare/Host status

View File

@@ -29,7 +29,7 @@
{% set more_info = params.more_information or {} %} {% set more_info = params.more_information or {} %}
{% if not more_info.hidden or false %}{# default: shown #} {% if not more_info.hidden or false %}{# default: shown #}
<div> <div>
Visit <a href="{{more_info.link or 'https://www.cloudflare.com/'}}" target="_blank" rel="noopener noreferrer">{{more_info.text or 'cloudflare.com'}}</a> for more information. Visit <a href="{{more_info.link or 'https://www.cloudflare.com/'}}" target="_blank" rel="noopener noreferrer">{{more_info.text or 'cloudflare.com'}}</a> for {{more_info.for or 'more information'}}.
</div> </div>
{% endif %} {% endif %}
<div class="mt-3">{{ params.time }}</div> <div class="mt-3">{{ params.time }}</div>

View File

@@ -64,6 +64,7 @@
"more_information": { "more_information": {
"hidden": false, "hidden": false,
"text": "cloudflare.com", "text": "cloudflare.com",
"for": "more information",
}, },
"browser_status": { "browser_status": {
"status": "ok", "status": "ok",
@@ -97,6 +98,9 @@
"catastrophic": { "catastrophic": {
"title": "Catastrophic infrastructure failure", "title": "Catastrophic infrastructure failure",
"error_code": '500', "error_code": '500',
"more_information": {
"for": "no information",
},
"browser_status": { "browser_status": {
"status": "error", "status": "error",
"status_text": "Out of Memory" "status_text": "Out of Memory"
@@ -215,6 +219,7 @@
$('more_hidden').checked = !!(cfg.more_information && cfg.more_information.hidden); $('more_hidden').checked = !!(cfg.more_information && cfg.more_information.hidden);
$('more_text').value = cfg.more_information?.text ?? ''; $('more_text').value = cfg.more_information?.text ?? '';
$('more_link').value = cfg.more_information?.link ?? ''; $('more_link').value = cfg.more_information?.link ?? '';
$('more_for').value = cfg.more_information?.for ?? '';
$('browser_status').value = cfg.browser_status?.status ?? 'ok'; $('browser_status').value = cfg.browser_status?.status ?? 'ok';
$('browser_location').value = cfg.browser_status?.location ?? ''; $('browser_location').value = cfg.browser_status?.location ?? '';
@@ -250,7 +255,8 @@
more_information: { more_information: {
hidden: !!$('more_hidden').checked, hidden: !!$('more_hidden').checked,
text: $('more_text').value, text: $('more_text').value,
link: $('more_link').value link: $('more_link').value,
for: $('more_for').value
}, },
browser_status: { browser_status: {
status: $('browser_status').value, status: $('browser_status').value,
@@ -738,31 +744,33 @@
</div> </div>
</div> </div>
<div class="mt-3 mb-3"> <div class="status-block mt-3 mb-3">
<h6 class="mb-2">Visit ... for more information</h6> <div class="d-flex justify-content-between align-items-start mb-2">
<strong>Visit ...</strong>
<div class="status-block"> <div>
<div class="form-row"> <input id="more_hidden" class="form-check-input" type="checkbox" />
<label>Hidden</label> <label for="more_hidden" class="ms-1 small">Hidden</label>
<div class="control d-flex align-items-center gap-2">
<input id="more_hidden" class="form-check-input" type="checkbox" />
<!-- <small class="text-muted">If checked, the "visit ..." line is hidden</small> -->
</div>
</div> </div>
</div>
<div class="form-row"> <div class="form-row">
<label for="more_text">Text</label> <label for="more_text">Text</label>
<div class="control"> <div class="control">
<input id="more_text" class="form-control form-control-sm" placeholder="cloudflare.com" /> <input id="more_text" class="form-control form-control-sm" placeholder="cloudflare.com" />
</div>
</div> </div>
</div>
<div class="form-row"> <div class="form-row">
<label for="more_link">Link</label> <label for="more_link">Link</label>
<div class="control"> <div class="control">
<input id="more_link" class="form-control form-control-sm" <input id="more_link" class="form-control form-control-sm" placeholder="https://www.cloudflare.com/" />
placeholder="https://www.cloudflare.com/" /> </div>
</div> </div>
<div class="form-row">
<label for="more_for">For</label>
<div class="control">
<input id="more_for" class="form-control form-control-sm" placeholder="more information" />
</div> </div>
</div> </div>
</div> </div>

View File

@@ -31,7 +31,7 @@ let html_title_output = params.html_title || (error_code + ': ' + title);
<% let more_info = params.more_information || {}; %> <% let more_info = params.more_information || {}; %>
<% if (!more_info.hidden) { %> <% if (!more_info.hidden) { %>
<div> <div>
Visit <a href="<%= more_info.link || 'https://www.cloudflare.com/' %>" target="_blank" rel="noopener noreferrer"><%= more_info.text || 'cloudflare.com' %></a> for more information. Visit <a href="<%= more_info.link || 'https://www.cloudflare.com/' %>" target="_blank" rel="noopener noreferrer"><%= more_info.text || 'cloudflare.com' %></a> for <%= more_info.for || "more information" %>.
</div> </div>
<% } %> <% } %>
<div class="<%= more_info.hidden ? '' : 'mt-3' %>"><%= params.time %></div> <div class="<%= more_info.hidden ? '' : 'mt-3' %>"><%= params.time %></div>

View File

@@ -1,5 +1,8 @@
{ {
"title": "Catastrophic infrastructure failure", "title": "Catastrophic infrastructure failure",
"more_information": {
"for": "no information"
},
"browser_status": { "browser_status": {
"status": "error", "status": "error",
"status_text": "Out of Memory" "status_text": "Out of Memory"