You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
<!DOCTYPE html>
|
|
|
|
<html><head><title>Spring83</title>
|
|
|
|
<style>
|
|
|
|
.board {
|
|
|
|
border: 1px solid black;
|
|
|
|
margin: 10px;
|
|
|
|
padding: 10px;
|
|
|
|
display: inline-flex;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
|
|
window.addEventListener("DOMContentLoaded", (_evt) => {
|
|
|
|
const boards = {{.Boards}}
|
|
|
|
const divs = boards.map(board => {
|
|
|
|
return `<div id="b${board.Key}" class="board"></div>\n`
|
|
|
|
});
|
|
|
|
document.querySelector("#containers").innerHTML = divs.join("\n");
|
|
|
|
|
|
|
|
// maybe use: https://developer.mozilla.org/en-US/docs/Web/API/Sanitizer/sanitize
|
|
|
|
// to try and strip XSS/scripts?
|
|
|
|
boards.forEach(board => {
|
|
|
|
const container = document.querySelector(`#b${board.Key}`);
|
|
|
|
const shadow = container.attachShadow({mode: 'closed'});
|
|
|
|
shadow.innerHTML = board.Board;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="containers">
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|