4141done/index.html

## index.html
  <!doctype html>
  <html class="no-js">

  <head>
    <meta charset="utf-8">
    <title>NGINX</title>
    <meta name="description" content="${description}">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="icon" href="/favicon.ico" sizes="any">
    <link rel="stylesheet" href="/retro.css">
  </head>

  <body>

    <div class="content">
    </div>
  </body>

  </html>

## nginx.conf
# load the njs module to allow us to use js_* directives
load_module modules/ngx_http_js_module.so;

events {}

http {
  upstream backend {
      server localhost:4001;
      server localhost:4002;
      server localhost:4003 backup;
  }

  error_log /tmp/blub.log debug;

  root <YOUR_ROOT>;

  include <PATH_TO_MIME_TYPES_FILE>;
  js_import script from script.mjs;

  server {
    listen 4000;

    location / {
      proxy_pass http://backend;
      js_header_filter script.clearContentLengthHeader;
      js_body_filter script.addBackendInformation;
    }
  }

  server {
    listen 4001;

    location / {
      add_header Server-Name 'Friendly Spouting Whale' always;
      add_header Server-Image 🐳 always;

      index index.html;
    }
  }

  server {
    listen 4002;

    location / {
      add_header Server-Name 'Enlightened Lemon';
      add_header Server-Image 🍋 always;
      index index.html;
    }
  }

  server {
    listen 4003;

    location / {
      add_header Server-Name 'Celebrating the joys of public transport';
      add_header Server-Image 🚏 always;
      index index.html;
    }
  }
}

## retro.css


pre,
code {
  font-family: Menlo, Monaco, "Courier New", monospace;
}

pre {
  padding: .5rem;
  line-height: 1.25;
  overflow-x: scroll;
}

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

a,
a:visited {
  color: #01ff70;
}

a:hover,
a:focus,
a:active {
  color: #2ecc40;
}

.retro-no-decoration {
  text-decoration: none;
}

html {
  font-size: 12px;
}

@media screen and (min-width: 32rem) and (max-width: 48rem) {
  html {
    font-size: 15px;
  }
}

@media screen and (min-width: 48rem) {
  html {
    font-size: 16px;
  }
}

body {
  line-height: 1.85;
}

p,
.retro-p {
  font-size: 1rem;
  margin-bottom: 1.3rem;
}

h1,
.retro-h1,
h2,
.retro-h2,
h3,
.retro-h3,
h4,
.retro-h4 {
  margin: 1.414rem 0 .5rem;
  font-weight: inherit;
  line-height: 1.42;
}

h1,
.retro-h1 {
  margin-top: 0;
  font-size: 3.998rem;
}

h2,
.retro-h2 {
  font-size: 2.827rem;
}

h3,
.retro-h3 {
  font-size: 1.999rem;
}

h4,
.retro-h4 {
  font-size: 1.414rem;
}

h5,
.retro-h5 {
  font-size: 1.121rem;
}

h6,
.retro-h6 {
  font-size: .88rem;
}

small,
.retro-small {
  font-size: .707em;
}

/* https://github.com/mrmrs/fluidity */

img,
canvas,
iframe,
video,
svg,
select,
textarea {
  max-width: 100%;
}

html,
body {
  background-color: #222;
  min-height: 100%;
}

html {
  font-size: 18px;
}

body {
  color: #fafafa;
  font-family: "Courier New";
  line-height: 1.45;
  margin: 6rem auto 1rem;
  max-width: 48rem;
  padding: .25rem;
}

pre {
  background-color: #333;
}

blockquote {
  border-left: 3px solid #01ff70;
  padding-left: 1rem;
}

p.emoji {
  font-size:  12rem;
}

.content {
  text-align: center;
  margin-top:  -10rem;
}

## script.mjs
export default {
  addBackendInformation: function addBackendInformation(r, chunk, flags) {
    const MAIN_DIV_REGEX = /\<div class\=\"content\"\>/ig;
    let modifiedBody = chunk;

    if (chunk.match(MAIN_DIV_REGEX).length) {
      modifiedBody = modifiedBody.replace(MAIN_DIV_REGEX, `
    <div class="content">
      <p class="emoji">${r.headersOut['Server-Image']}</p>
      <h1>${r.headersOut['Server-Name']}</h1>`);
    }

    r.sendBuffer(modifiedBody, flags);
  },
  clearContentLengthHeader: function clearContentLengthHeader(r) {
    delete r.headersOut['Content-Length'];
  }
}
	<!doctype html>
	<html class="no-js">

	<head>
	<meta charset="utf-8">
	<title>NGINX</title>
	<meta name="description" content="${description}">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="icon" href="/favicon.ico" sizes="any">
	<link rel="stylesheet" href="/retro.css">
	</head>

	<body>

	<div class="content">
	</div>
	</body>

	</html>
	# load the njs module to allow us to use js_* directives
	load_module modules/ngx_http_js_module.so;

	events {}

	http {
	upstream backend {
	server localhost:4001;
	server localhost:4002;
	server localhost:4003 backup;
	}

	error_log /tmp/blub.log debug;

	root <YOUR_ROOT>;

	include <PATH_TO_MIME_TYPES_FILE>;
	js_import script from script.mjs;

	server {
	listen 4000;

	location / {
	proxy_pass http://backend;
	js_header_filter script.clearContentLengthHeader;
	js_body_filter script.addBackendInformation;
	}
	}

	server {
	listen 4001;

	location / {
	add_header Server-Name 'Friendly Spouting Whale' always;
	add_header Server-Image 🐳 always;

	index index.html;
	}
	}

	server {
	listen 4002;

	location / {
	add_header Server-Name 'Enlightened Lemon';
	add_header Server-Image 🍋 always;
	index index.html;
	}
	}

	server {
	listen 4003;

	location / {
	add_header Server-Name 'Celebrating the joys of public transport';
	add_header Server-Image 🚏 always;
	index index.html;
	}
	}
	}


	pre,
	code {
	font-family: Menlo, Monaco, "Courier New", monospace;
	}

	pre {
	padding: .5rem;
	line-height: 1.25;
	overflow-x: scroll;
	}

	@media print {
	*,
	*:before,
	*:after {
	background: transparent !important;
	color: #000 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	}

	a,
	a:visited {
	text-decoration: underline;
	}

	a[href]:after {
	content: " (" attr(href) ")";
	}

	abbr[title]:after {
	content: " (" attr(title) ")";
	}

	a[href^="#"]:after,
	a[href^="javascript:"]:after {
	content: "";
	}

	pre,
	blockquote {
	border: 1px solid #999;
	page-break-inside: avoid;
	}

	thead {
	display: table-header-group;
	}

	tr,
	img {
	page-break-inside: avoid;
	}

	img {
	max-width: 100% !important;
	}

	p,
	h2,
	h3 {
	orphans: 3;
	widows: 3;
	}

	h2,
	h3 {
	page-break-after: avoid;
	}
	}

	a,
	a:visited {
	color: #01ff70;
	}

	a:hover,
	a:focus,
	a:active {
	color: #2ecc40;
	}

	.retro-no-decoration {
	text-decoration: none;
	}

	html {
	font-size: 12px;
	}

	@media screen and (min-width: 32rem) and (max-width: 48rem) {
	html {
	font-size: 15px;
	}
	}

	@media screen and (min-width: 48rem) {
	html {
	font-size: 16px;
	}
	}

	body {
	line-height: 1.85;
	}

	p,
	.retro-p {
	font-size: 1rem;
	margin-bottom: 1.3rem;
	}

	h1,
	.retro-h1,
	h2,
	.retro-h2,
	h3,
	.retro-h3,
	h4,
	.retro-h4 {
	margin: 1.414rem 0 .5rem;
	font-weight: inherit;
	line-height: 1.42;
	}

	h1,
	.retro-h1 {
	margin-top: 0;
	font-size: 3.998rem;
	}

	h2,
	.retro-h2 {
	font-size: 2.827rem;
	}

	h3,
	.retro-h3 {
	font-size: 1.999rem;
	}

	h4,
	.retro-h4 {
	font-size: 1.414rem;
	}

	h5,
	.retro-h5 {
	font-size: 1.121rem;
	}

	h6,
	.retro-h6 {
	font-size: .88rem;
	}

	small,
	.retro-small {
	font-size: .707em;
	}

	/* https://github.com/mrmrs/fluidity */

	img,
	canvas,
	iframe,
	video,
	svg,
	select,
	textarea {
	max-width: 100%;
	}

	html,
	body {
	background-color: #222;
	min-height: 100%;
	}

	html {
	font-size: 18px;
	}

	body {
	color: #fafafa;
	font-family: "Courier New";
	line-height: 1.45;
	margin: 6rem auto 1rem;
	max-width: 48rem;
	padding: .25rem;
	}

	pre {
	background-color: #333;
	}

	blockquote {
	border-left: 3px solid #01ff70;
	padding-left: 1rem;
	}

	p.emoji {
	font-size: 12rem;
	}

	.content {
	text-align: center;
	margin-top: -10rem;
	}
	export default {
	addBackendInformation: function addBackendInformation(r, chunk, flags) {
	const MAIN_DIV_REGEX = /\<div class\=\"content\"\>/ig;
	let modifiedBody = chunk;

	if (chunk.match(MAIN_DIV_REGEX).length) {
	modifiedBody = modifiedBody.replace(MAIN_DIV_REGEX, `
	<div class="content">
	<p class="emoji">${r.headersOut['Server-Image']}</p>
	<h1>${r.headersOut['Server-Name']}</h1>`);
	}

	r.sendBuffer(modifiedBody, flags);
	},
	clearContentLengthHeader: function clearContentLengthHeader(r) {
	delete r.headersOut['Content-Length'];
	}
	}