From b0889059887bab6f6a949fdbcc1550d58bba6332 Mon Sep 17 00:00:00 2001
From: DarkWiiPlayer <darkwiiplayer@hotmail.com>
Date: Tue, 4 Jan 2022 14:21:38 +0100
Subject: [PATCH] Add file-size to skooma.js introduction

---
 page/codeblock.js |  1 -
 page/filesize.js  | 29 +++++++++++++++++++++++++++++
 page/skooma.html  |  8 +++++---
 3 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 page/filesize.js

diff --git a/page/codeblock.js b/page/codeblock.js
index 59740a3..714082f 100644
--- a/page/codeblock.js
+++ b/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))))
 	}
 }
diff --git a/page/filesize.js b/page/filesize.js
new file mode 100644
index 0000000..07bbb29
--- /dev/null
+++ b/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()
diff --git a/page/skooma.html b/page/skooma.html
index 09dbade..65403ce 100644
--- a/page/skooma.html
+++ b/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
-		turn JavaScript into a <span title="Domain-Specific Language">DSL</span>
-		that generates HTML and XML subtrees.
+		Skooma is only a small <file-size file="../skooma.js"></file-size> ES6
+		module that uses meta-programming to turn JavaScript into a
+		<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.