fix race condition properly and ship less js

README.md

@@ -15,7 +15,7 @@ blazingly fast markdown blog software written in rust memory safe
 - [x] finish writing this document
 - [x] document config
 - [ ] blog thumbnail and favicon
-- [ ] fix webkit dates (what.)
+- [x] fix webkit dates (what.)
 - [ ] sort asc/desc
 - [x] alt text for post icon
 - [ ] extend syntect options

static/date.js

@@ -1,5 +1,7 @@
-for (let el of document.querySelectorAll(".date-rfc3339")) {
-	let date = new Date(Date.parse(el.textContent));
-	el.textContent = date.toLocaleString();
-	el.classList.remove("date-rfc3339");
+function replaceDates() {
+	for (let el of document.querySelectorAll(".date-rfc3339")) {
+		let date = new Date(Date.parse(el.textContent));
+		el.textContent = date.toLocaleString();
+		el.classList.remove("date-rfc3339");
+	}
 }

static/main.js

@@ -1,40 +1,11 @@
+replaceDates();
+
 let form = document.getElementById("sort");
-let posts = document.getElementById("posts");
-
-let postsName = document.createElement("div");
-
-function initialSort(source, target) {
-	let posts = [];
-	for (let post of source.children) {
-		let title = post.firstElementChild.innerText;
-		posts.push([title, post.cloneNode(true)]);
-	}
-	posts.sort(([a, _1], [b, _2]) => a.toLocaleLowerCase().localeCompare(b.toLocaleLowerCase()));
-	for (let [_, post] of posts) {
-		target.appendChild(post);
-	}
+if (form) {
+	let postsByDate = document.getElementById("posts");
+	let postsByName = document.createElement("div");
+	populateByName(postsByDate, postsByName);
+	postsByDate.parentNode.appendChild(postsByName);
+	handleSort(form, postsByDate, postsByName);
+	sort(form.sort.value, postsByDate, postsByName);
 }
-
-function sort(by) {
-	console.log("sorting by", by);
-	switch (by) {
-		case "date":
-			posts.style.display = "block";
-			postsName.style.display = "none";
-			break;
-		case "name":
-			postsName.style.display = "block";
-			posts.style.display = "none";
-			break;
-	}
-}
-
-function handleSort() {
-	if (!form) return;
-	for (let el of form.sort) el.addEventListener("change", () => sort(form.sort.value));
-}
-
-initialSort(posts, postsName);
-posts.parentNode.appendChild(postsName);
-handleSort();
-sort(form.sort.value);

static/sort.js

@@ -0,0 +1,32 @@
+function populateByName(source, target) {
+	let posts = [];
+	for (let post of source.children) {
+		let title = post.firstElementChild.innerText;
+		posts.push([title, post.cloneNode(true)]);
+	}
+	posts.sort(([a, _1], [b, _2]) => a.toLocaleLowerCase().localeCompare(b.toLocaleLowerCase()));
+	for (let [_, post] of posts) {
+		target.appendChild(post);
+	}
+}
+
+function sort(by, dateEl, nameEl) {
+	console.log("sorting by", by);
+	switch (by) {
+		case "date":
+			dateEl.style.display = "block";
+			nameEl.style.display = "none";
+			break;
+		case "name":
+			nameEl.style.display = "block";
+			dateEl.style.display = "none";
+			break;
+	}
+}
+
+function handleSort(form, dateEl, nameEl) {
+	for (let el of form.sort)
+		el.addEventListener("change", () => {
+			if (el.checked) sort(el.value, dateEl, nameEl);
+		});
+}

templates/index.html

@@ -18,6 +18,7 @@
 		<!-- prettier-br -->
 		{% if js %}
 		<script src="/static/date.js" defer></script>
+		<script src="/static/sort.js" defer></script>
 		<script src="/static/main.js" defer></script>
 		{% endif %}
 	</head>

templates/post.html

@@ -32,6 +32,7 @@
 		<link rel="stylesheet" href="/static/style.css" />
 		<link rel="stylesheet" href="/static/post.css" />
 		{% if js %}
+		<script src="/static/date.js" defer></script>
 		<script src="/static/main.js" defer></script>
 		{% endif %}
 	</head>