component/static: Seperate out static file handling

This commit is contained in:
Tom Wiesing 2022-10-06 15:41:46 +02:00
parent 3d4db1744b
commit 88a2ba4297
No known key found for this signature in database
9 changed files with 43 additions and 28 deletions

View file

@ -1,6 +1,6 @@
<!DOCTYPE html>
<link rel="stylesheet" href="/dis/static/dis.css">
<link rel="stylesheet" href="/dis/static/autolink.css">
<link rel="stylesheet" href="/static/control/dis.css">
<link rel="stylesheet" href="/static/control/autolink.css">
<title>Distillery Status Page</title>
<h1 id="top">Distillery Status Page</h1>
@ -77,4 +77,4 @@
Generated at <code>{{ .Time }}</code>
</footer>
<script src="/dis/static/autolink.js"></script>
<script src="/static/control/autolink.js"></script>

View file

@ -1,6 +1,6 @@
<!DOCTYPE html>
<link rel="stylesheet" href="/dis/static/dis.css">
<link rel="stylesheet" href="/dis/static/autolink.css">
<link rel="stylesheet" href="/static/control/dis.css">
<link rel="stylesheet" href="/static/control/autolink.css">
<title>Distillery Status Page - {{ .Info.Slug }}</title>
<h1 id="top">Distillery Status Page - {{ .Info.Slug }}</h1>
@ -70,5 +70,5 @@
Generated at <code>{{ .Time }}</code>
</footer>
<script src="/dis/static/autolink.js"></script>
<script src="/dis/static/instance.js"></script>
<script src="/static/control/autolink.js"></script>
<script src="/static/control/instance.js"></script>

View file

@ -1,20 +0,0 @@
.header-link {
position: relative;
left: 0.5em;
opacity: 0;
font-size: 0.8em;
-webkit-transition: opacity 0.2s ease-in-out 0.1s;
-moz-transition: opacity 0.2s ease-in-out 0.1s;
-ms-transition: opacity 0.2s ease-in-out 0.1s;
text-decoration: none;
}
h2:hover .header-link,
h3:hover .header-link,
h4:hover .header-link,
h5:hover .header-link,
h6:hover .header-link {
opacity: 1;
}

View file

@ -1,19 +0,0 @@
/** Adapted from http://blog.parkermoore.de/2014/08/01/header-anchor-links-in-vanilla-javascript-for-github-pages-and-jekyll/ */
const anchorForId = (id) => {
const anchor = document.createElement("a")
anchor.className = "header-link"
anchor.href = "#" + id
anchor.innerHTML = "#"
return anchor
}
const linkifyAnchors = (level) => {
const headers = document.getElementsByTagName("h" + level);
Array.from(headers).forEach((header) => {
if (typeof header.id === "undefined" || header.id === "") return
header.appendChild(anchorForId(header.id))
})
}
// linkify all the anchors from 1 ... 6
Array(6).forEach((_, i) => linkifyAnchors(i + 1))

View file

@ -1,67 +0,0 @@
html {
line-height: 1.5;
font-family: Roboto;
font-size: 20px;
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 1em;
}
}
h1 {
margin-top: 1.4em;
}
h2,h3 {
margin-top: 1em;
}
code {
font-family: Roboto Mono;
color: blue;
}
p {
margin: 1em 0;
text-align: justify;
}
a, a:visited {
color: #1a1a1a;
}
footer {
border-top: 1px solid #1a1a1a;
font-size: small;
text-align: center;
}
.wisski {
padding-left: 5px;
}
.wisski.running {
background-color: #9ADA07;
}
.wisski.stopped {
background-color: #ff7a7a;
}

View file

@ -1,64 +0,0 @@
const types = {
"date": (element) => {
return (new Date(element.innerText)).toISOString()
},
"path": (element) => {
const text = element.innerText.split("/");
return text[text.length - 1];
},
"pathbuilders": (element) => {
const pathbuilders = window.pathbuilders; // read from context!
const wrapper = document.createElement("span");
let found_one = false
Object.keys(pathbuilders).forEach(name => {
found_one = true
const filename = name + ".xml"
const data = pathbuilders[name]
const mime = "application/xml"
wrapper.append(make_download_link(filename, name, data, mime))
wrapper.append(document.createTextNode(" "))
})
if (!found_one) return '(none)';
const small = document.createElement('small')
small.append(document.createTextNode("(click to download)"))
wrapper.append(small)
return wrapper
}
}
const make_download_link = (filename, title, content, type) => {
const blob = new Blob(
[content],
{
type: type ?? "text/plain"
}
);
const link = document.createElement("a")
link.target = "_blank"
link.download = filename
link.href = URL.createObjectURL(blob)
link.append(document.createTextNode(title))
return link
}
Object.keys(types).forEach(key => {
const f = types[key];
const elements = document.querySelectorAll("code." + key)
elements.forEach(element => {
const newElement = f(element)
if (typeof newElement === 'string') {
element.innerHTML = ""
element.appendChild(document.createTextNode(newElement))
return
}
element.parentNode.replaceChild(newElement, element)
})
})