Dynamically generate badges, add security status (bbd7c500) · Commits · Fachschaft / Status

index.html

+99 −47

Original line number	Diff line number	Diff line
		@@ -14,6 +14,14 @@
		.linked-badge {
		border: none;
		}

		article .security {
		display: none;
		}

		article.security-shown .security {
		display: initial;
		}
		</style>
		</head>
		<body>
		@@ -30,65 +38,109 @@
		<h1>Technik-Status</h1>
		</header>
		<div class="content">
		<label>
		<input type="checkbox" id="show-security-status"/>
		Sicherheits-Status anzeigen
		</label>
		<script>
		const securityCheckbox = document.getElementById("show-security-status")

		function updateSecurityShown() {
		const article = document.querySelector("article")
		if(securityCheckbox.checked) {
		article.classList.add("security-shown")
		} else {
		article.classList.remove("security-shown")
		}
		}
		securityCheckbox.oninput = updateSecurityShown
		updateSecurityShown()
		</script>

		<h2>Öffentliche Dienste</h2>
		<p>
		<a class="linked-badge" href="https://fachschaft.cl.uni-heidelberg.de" target="_blank">
		<img src="https://img.shields.io/website?style=for-the-badge&url=https%3A%2F%2Ffachschaft.cl.uni-heidelberg.de" />
		</a>
		</p>
		<p>
		<a class="linked-badge" href="https://tickets.fachschaft.cl.uni-heidelberg.de" target="_blank">
		<img src="https://img.shields.io/website?style=for-the-badge&url=https%3A%2F%2Ftickets.fachschaft.cl.uni-heidelberg.de&label=tickets" />
		</a>
		</p>
		<p>
		<a class="linked-badge" href="https://finanzen.fachschaft.cl.uni-heidelberg.de" target="_blank">
		<img src="https://img.shields.io/website?style=for-the-badge&url=https%3A%2F%2Ffinanzen.fachschaft.cl.uni-heidelberg.de&label=finanzen" />
		</a>
		</p>
		<p>
		<a class="linked-badge" href="https://todo.fachschaft.cl.uni-heidelberg.de" target="_blank">
		<img src="https://img.shields.io/website?style=for-the-badge&url=https%3A%2F%2Ftodo.fachschaft.cl.uni-heidelberg.de&label=todo" />
		</a>
		</p>
		<p>
		<a class="linked-badge" href="https://automation.fachschaft.cl.uni-heidelberg.de" target="_blank">
		<img src="https://img.shields.io/website?style=for-the-badge&url=https%3A%2F%2Fframadate.fachschaft.cl.uni-heidelberg.de&label=framadate" />
		</a>
		</p>
		<section id="public"></section>

		<h2>Dienste hinter Basic-Auth</h2>
		<p>
		Diese erscheinen immer als „Down“, da sie, selbst wenn sie an sind, mit einem HTTP 401-Fehlercode antworten („Unauthorized“).
		</p>
		<p>
		<a class="linked-badge" href="https://automation.fachschaft.cl.uni-heidelberg.de" target="_blank">
		<img src="https://img.shields.io/website?style=for-the-badge&url=https%3A%2F%2Fautomation.fachschaft.cl.uni-heidelberg.de&label=automation" />
		</a>
		</p>
		<p>
		<a class="linked-badge" href="https://traefik.fachschaft.cl.uni-heidelberg.de" target="_blank">
		<img src="https://img.shields.io/website?style=for-the-badge&url=https%3A%2F%2Ftraefik.fachschaft.cl.uni-heidelberg.de&label=traefik" />
		</a>
		</p>
		<section id="auth"></section>

		<h2>Abgeschaltete Dienste</h2>
		<p>
		<a class="linked-badge" href="https://grafana.fachschaft.cl.uni-heidelberg.de" target="_blank">
		<img src="https://img.shields.io/website?style=for-the-badge&url=https%3A%2F%2Fgrafana.fachschaft.cl.uni-heidelberg.de&label=grafana" />
		</a>
		</p>
		<p>
		<a class="linked-badge" href="https://planet.fachschaft.cl.uni-heidelberg.de" target="_blank">
		<img src="https://img.shields.io/website?style=for-the-badge&url=https%3A%2F%2Fplanet.fachschaft.cl.uni-heidelberg.de&label=planet" />
		</a>
		</p>
		<section id="down"></section>
		</div>
		<footer>
		</footer>
		</article>
		<script>
		const services = [
		{prefix: "", category: "public"},
		{prefix: "tickets", category: "public"},
		{prefix: "finanzen", category: "public"},
		{prefix: "todo", category: "public"},
		{prefix: "framadate", category: "public"},
		{prefix: "automation", category: "auth"},
		{prefix: "traefik", category: "auth"},
		{prefix: "grafana", category: "down"},
		{prefix: "planet", category: "down"}
		]

		function createBadge(href, imgSrc, additionalClass) {
		const a = document.createElement("a")
		a.href = href
		a.target = "_blank"
		a.classList.add("linked-badge")
		if(additionalClass !== undefined) {
		a.classList.add(additionalClass)
		}

		const img = document.createElement("img")
		img.src = imgSrc

		a.appendChild(img)

		return a
		}

		function getServiceUrl(servicePrefix) {
		return `https://${getServiceHost(servicePrefix)}`
		}

		function getServiceHost(servicePrefix) {
		const hostPrefix = servicePrefix !== "" ? `${servicePrefix}.` : ""
		return `${hostPrefix}fachschaft.cl.uni-heidelberg.de`
		}

		function createStatusBadge(servicePrefix) {
		const serviceUrl = getServiceUrl(servicePrefix)
		const encodedServiceUrl = encodeURIComponent(serviceUrl)
		const label = servicePrefix !== "" ? `&label=${servicePrefix}` : ""

		const badgeUrl = `https://img.shields.io/website?style=for-the-badge&url=${encodedServiceUrl}${label}`
		return createBadge(serviceUrl, badgeUrl)
		}

		function createSecurityHeadersBadge(servicePrefix) {
		const serviceHost = getServiceHost(servicePrefix)
		const serviceUrl = getServiceUrl(servicePrefix)
		const encodedServiceUrl = encodeURIComponent(serviceUrl)

		const badgeUrl = `https://img.shields.io/security-headers?style=for-the-badge&url=${encodedServiceUrl}`

		return createBadge(`https://securityheaders.com/?followRedirects=on&hide=on&q=${serviceHost}`, badgeUrl, "security")
		}

		services.forEach(service => {
		const p = document.createElement("p")
		p.appendChild(createStatusBadge(service.prefix))
		p.append(" ")
		p.appendChild(createSecurityHeadersBadge(service.prefix))
		document.getElementById(service.category).appendChild(p)
		})
		</script>
		</article>
		</main>
		<footer>
		<a href="https://fachschaft.cl.uni-heidelberg.de/legal#impressum">Impressum</a> \| <a href="https://fachschaft.cl.uni-heidelberg.de/legal#rechtliches">Rechtliches</a> \| <a href="https://fachschaft.cl.uni-heidelberg.de/legal#datenschutz">Datenschutz</a>
		<a href="https://fachschaft.cl.uni-heidelberg.de/legal#impressum">Impressum</a> \| <a href="https://fachschaft.cl.uni-heidelberg.de/legal#rechtliches">Rechtliches</a> \| <a href="https://fachschaft.cl.uni-heidelberg.de/legal#datenschutz">Datenschutz</a> \| Gebaut mit <a href="https://shields.io" target="blank">shields.io</a>
		<span class="copyright">© Fachschaft Computerlinguistik, Universität Heidelberg</span>
		</footer>
		</body>