tdpeuter/down-message
tdpeuter/down-message
1
Fork 0
Code Issues 2 Pull requests Releases Activity

Merge pull request 'simpleButton' (#1) from simpleButton into main

Browse source 
Reviewed-on: #1
This commit is contained in:
Tibo De Peuter 2023-08-04 17:11:30 +02:00
commit 09b2de6e94
6 changed files with 2555 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
README.md
View file

@ -3,3 +3,31 @@
[![Netlify Status](https://api.netlify.com/api/v1/badges/7821f152-5b28-4dec-9d98-035a18e8a57a/deploy-status)](https://app.netlify.com/sites/tdpeuter-down/deploys) [![Netlify Status](https://api.netlify.com/api/v1/badges/7821f152-5b28-4dec-9d98-035a18e8a57a/deploy-status)](https://app.netlify.com/sites/tdpeuter-down/deploys)
Ultra simple website to tell people a service is down Ultra simple website to tell people a service is down
## Starting the website
```shell
npm run start
```
## Setup networking
### Using [Cloudflare](https://dash.cloudflare.com)
If you want to use Cloudflare to handle redirection to the website, you can use [Page Rules](https://developers.cloudflare.com/support/page-rules/).
First, make sure the DNS records for the (sub-) domains you want to redirect are [being proxied through Cloudflare](https://developers.cloudflare.com/dns/manage-dns-records/reference/proxied-dns-records). Then, head over to [Redirect Rules](https://developers.cloudflare.com/rules/url-forwarding/) (Page Rules are harder to configure, and it seems like [Cloudflare itself is more keen of Redirect Rules too](https://developers.cloudflare.com/support/page-rules/recommended-page-rules-to-consider/)).
Create a Single Redirect rule that looks similar to:
```
# When incoming requests match...
(http.host in {"example.com" "another.example.com"})
# Then URL redirect
Dynamic
concat("https://your.host.tdl/?destination=", http.request.full_uri)
302
```
Enable the rule and everything should be set!

31
index.html
View file

@ -1,16 +1,33 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>Service unavailable</title> <meta charset="UTF-8"/>
<link rel="shortcut icon" type="image/png" href="assets/icon.jpg"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<meta name="robots" content="noindex"> <meta name="robots" content="noindex">
<title>Service unavailable</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="image/png" href="assets/icon.jpg">
</head> </head>
<body> <body>
<h1>Oh no!</h1> <main>
<p>The website you are trying to reach is currently down. Your URL works, but the system is in maintenance and powered off temporarily.</p> <h1>Oh, no!</h1>
<p>The website you are trying to reach is currently down. Your URL works, but the system is in maintenance and/or powered off temporarily.</p>
<p>Please come back later!</p> <p>Please come back later!</p>
<p>Kind regards, <a href="https://tibo.depeuter.dev">Tibo De Peuter</a></p> <p>Kind regards, <a href="https://tibo.depeuter.dev">Tibo De Peuter</a></p>
<div id="checkContainer"></div>
<img src="/assets/oh-no-kitten.jpg" alt="kitten holding paw to forehead"/> <img src="/assets/oh-no-kitten.jpg" alt="kitten holding paw to forehead"/>
</main>
<footer>
<p>
Made with <span class="heart">&hearts;</span>.
<a href="https://git.depeuter.dev/tdpeuter/down-website" about="source code of this webpage" class="hidden">Source code</a>
</p>
</footer>
<script src="script.js"></script>
</body> </body>
</html> </html>

2332
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

19
package.json Normal file
View file

@ -0,0 +1,19 @@
{
"name": "down-message",
"version": "1.1.0",
"description": "Ultra simple website to tell people a service is down",
"main": "index.html",
"scripts": {
"start": "live-server --port=3000 .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://git.depeuter.dev/tdpeuter/down-message.git"
},
"author": "Tibo De Peuter <tibo@depeuter.dev>",
"license": "GPL-3.0-only",
"devDependencies": {
"live-server": "^1.2.2"
}
}

71
script.js Normal file
View file

@ -0,0 +1,71 @@
async function websiteUp(url) {
// TODO Fix CORS
try {
const response = await fetch(url, { method: 'options' });
return response.ok;
} catch (error) {
console.error(`An error occurred while checking the URL '${url}': ${error.message}`);
}
}
async function check(destination, container, dot, message, button) {
dot.className = 'dot orange';
message.textContent = 'Checking availability...';
button.style.visibility = 'hidden';
const destinationUp = await websiteUp(destination);
if (destinationUp) {
console.log('Destination is back up');
dot.className = 'dot green';
message.textContent = 'URL is back online.';
button.textContent = "Go to URL.";
button.onclick = function () {
window.location.href = destination;
};
} else {
dot.className = 'dot red';
message.textContent = 'URL is still down.';
button.textContent = "Check again.";
button.onclick = function () {
check(destination, container, dot, message, button);
};
}
button.style.visibility = 'visible';
}
function createCheckButton(destination) {
const dot = document.createElement('span');
const message = document.createElement('span');
const button = document.createElement('button');
const container = document.getElementById('checkContainer');
container.appendChild(dot);
container.appendChild(message);
container.appendChild(button);
check(destination, container, dot, message, button);
}
function createTryAgainButton(destination) {
const button = document.createElement('button');
button.textContent = 'Try Again';
button.onclick = function () {
window.location.href = destination;
}
document.getElementById('checkContainer').appendChild(button);
}
function checkDestination() {
const url = window.location.search;
const searchParams = new URLSearchParams(url);
const destination = searchParams.get('destination');
if (destination) {
createTryAgainButton(destination);
}
}
checkDestination();

81
style.css Normal file
View file

@ -0,0 +1,81 @@
:root {
/* Support dark mode */
color-scheme: light dark;
}
body {
margin: 20px;
padding: 10px;
}
footer {
opacity: 0.6;
font-size: small;
display: flex;
width: 100%;
justify-content: center;
}
.dot {
width: 15px;
height: 15px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.dot.green {
background-color: green;
}
.dot.orange {
background-color: orange;
}
.dot.red {
background-color: red;
}
.heart {
color: #CD001A; /* Cherry red */
}
/* Don't let media go offscreen */
img,
picture,
video {
max-width: 100%;
padding: 2% 0;
}
/* Display the button in the center of small screens such as phones */
@media screen and (max-device-width: 1000px) {
#checkContainer {
display: flex;
justify-content: center;
}
}
/* Hover animation for URLs */
a {
text-decoration: none;
color: inherit; /* Reset to default text color */
position: relative;
}
a::before {
content: '';
position: absolute;
/* Height of the line */
bottom: -2px;
height: 2px;
left: 0;
width: 0;
background-color: orange;
transition: width 0.3s ease;
}
a:hover::before {
width: 100%;
}