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 nonce="{{.Nonce}}">
|
|
|
|
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");
|
|
|
|
|
|
|
|
boards.forEach(board => {
|
|
|
|
const container = document.querySelector(`#b${board.Key}`);
|
|
|
|
const shadow = container.attachShadow({mode: 'closed'});
|
|
|
|
|
|
|
|
// would like to use SetHTML, which would sanitize the DOM, but it's not
|
|
|
|
// yet available. This HTML can run scripts and XSS on you
|
|
|
|
shadow.innerHTML = board.Board;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="containers">
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|