Add file-size to skooma.js introduction

page/codeblock.js

@@ -13,7 +13,6 @@ class CodeBlock extends HTMLElement {
 		let content = this.innerHTML.replace(/^\s*\n/, "").replace(/\n\s*$/, "")
 		let prefix = new RegExp(`${content.match(/^\t*/)}`, "g")
 		content = content.replace(prefix, "").replace(/&.*;/g, str => escapes[str] ?? str)
-		console.log(template(hljs.highlightAuto(content).value))
 		this.replaceChildren(html.pre(html.code(template(hljs.highlightAuto(content).value))))
 	}
 }

page/filesize.js

@@ -0,0 +1,29 @@
+import {text, html} from '../skooma.js'
+import {Better} from '../better.js'
+
+class FileSize extends Better {
+	static attributes = {file: true}
+
+	constructor() {
+		super()
+		this.attachShadow({mode: "open"})
+		this.connected.then(self => self.update())
+	}
+
+	fileChanged() {
+		this.update()
+	}
+
+	update() {
+		if (this.file) {
+			fetch(this.file)
+				.then(response=>response.arrayBuffer())
+				.then(buffer => buffer.byteLength)
+				.then(length => {
+					this.shadowRoot.replaceChildren(text`(${length} Bytes unminified)`)
+				})
+		}
+	}
+}
+
+FileSize.initialise()

page/skooma.html

@@ -1,6 +1,7 @@
 <link rel="stylesheet" href="style.css">
 
 <script type="module" src="codeblock.js"></script>
+<script type="module" src="filesize.js"></script>
 
 <h1>Skooma.js</h1>
 
@@ -14,9 +15,10 @@
 
 	<h3>What are the benefits of Skooma?</h3>
 	<p>
-		Skooma is only a small ES6 module that uses meta-programming to
+		Skooma is only a small <file-size file="../skooma.js"></file-size> ES6
-		turn JavaScript into a <span title="Domain-Specific Language">DSL</span>
+		module that uses meta-programming to turn JavaScript into a
-		that generates HTML and XML subtrees.
+		<span title="Domain-Specific Language">DSL</span> that generates HTML
+		and XML subtrees.
 		<br>
 		This means you're writing plain JavaScript code that needs no additional
 		transpilation steps and runs directly in the browser.