Commit 63dbf760 authored by Dom Sekotill's avatar Dom Sekotill
Browse files

Add a 502 (service unavailable) error page w/ self reloading

parent 9c52b703

Dockerfile

+1 −0
Original line number Diff line number Diff line
@@ -4,6 +4,7 @@ ARG nginx_version=latest 
FROM nginx:${nginx_version} as nginx

LABEL uk.org.kodo.maintainer = "Dom Sekotill <dom.sekotill@kodo.org.uk>"

COPY data/nginx.conf /etc/nginx/conf.d/default.conf

COPY data/5*.html /app/html/





FROM php:7.3-fpm-alpine as deps

data/502.html

0 → 100644
+91 −0
Original line number Diff line number Diff line 
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" class="wp-toolbar" lang="en-GB">

	<head>

		<meta charset="utf-8" />

		<meta name="viewport" content="width=device-width, initial-scale=1" />

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" defer="defer"></script>

		<title>Site Unavailable</title>

		<script>

			var check = false;



			$(document).ready(function() {

				$('#checkModal')

					.on('hide.bs.modal', function() {

						check = false;

					})

					.on('shown.bs.modal', async function() {

						check = true;

						while (check) {

							await new Promise((resolve) => setTimeout(resolve, 1000));

							$.ajax('#')

							.done(function() {

								window.location.reload();

							})

							.fail(function(xhr) {

								if (xhr.status != 502) {

									window.location.reload();

								}

							});

						}

					})

					.modal('show');

			});

		</script>

		<style>

			.vertical-center {

				min-height: 100%;

				min-height:100vh;

				display: flex;

				align-items: center;

			}

		</style>

	</head>

	<body>

		<div class="modal fade" tabindex="-1" id="checkModal" role="dialog" aria-labelledby="#checkModalLabel">

			<div class="modal-dialog" role="document">

				<div class="modal-content">



					<!-- header -->

					<div class="modal-header">

						<h4 class="modal-title" id="checkModalLabel">Site Unavailable</h4>

					</div>



					<!-- body -->

					<div class="modal-body">

						<p>The page will reload automatically when the site becomes

							available &#x2026;</p>

					</div>



					<!-- footer -->

					<div class="modal-footer">

						<button type="button" class="btn btn-danger" data-dismiss="modal">

							<span class="spinner-border spinner-border-sm"></span>

							Cancel

						</button>

					</div>



				</div>

			</div>

		</div>



		<div class="vertical-center">

			<div class="container">



				<div class="d-flex justify-content-center align-items-center">

					<div class="p-2">

						<h1>Site Unavailable</h1>

						<p>This site is currently unavailable</p>

						<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#checkModal">

							Check availability

						</button>

					</div>

				</div>



			</div>

		</div>



	</body>

</html>

data/nginx.conf

+7 −0
Original line number Diff line number Diff line
@@ -25,6 +25,13 @@ server { 
	# Add Cache-Control headers for static files, removed in *.php location

	add_header Cache-Control "public, max-age=7776000, stale-while-revalidate=86400, stale-if-error=604800";



	error_page 502 /errors/502.html;



	location /errors {

		alias /app/html;

		internal;

	}



	location ~ \.php$ {

		include fastcgi_params;

		fastcgi_param SCRIPT_FILENAME /app$fastcgi_script_name;