secst
Version:
SECST is a semantic, extensible, computational, styleable tagged markup language. You can use it to joyfully create compelling, interactive documents backed by HTML.
48 lines (44 loc) • 1.81 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SECST - Semantic, Extensible, Computational, Tagged Markup</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/npm/@anywhichway/quick-component@0.0.15"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pegjs/0.9.0/peg.min.js"></script>
<script src="./src/parser.js"></script>
<script src="./index.js"></script>
</head>
<body>
<script type="module">
import {transform} from "./src/transform.js";
document.addEventListener("DOMContentLoaded",async ()=> {
autohelm.engage(".toc");
let markup;
const render = async () => {
const newmarkup = await fetch("./index.sct").then((response) => response.text());
if(markup!==newmarkup) {
const {dom,errors} = await transform(await parser(),markup=newmarkup,{styleAllowed:true});
console.log(errors);
await SECST.resolve(dom.body);
document.body.innerHTML = "";
// only add the body since preview already has the head todo: replace preview head?
while(dom.body.firstChild) {
document.body.appendChild(dom.body.firstChild);
}
}
SECST.updateValueWidths();
}
await render();
Object.entries(SECST.listeners).forEach(([key,value]) => {
window.addEventListener(key,value);
});
patchAutohelm();
window.addEventListener("hashchange",() => {
const header = document.getElementById("secst-header");
header.scrollIntoView()
})
})
</script>
</body>
</html>