fix race condition properly and ship less js

This commit is contained in:
slonkazoid 2024-08-01 13:46:03 +03:00
parent 96922f2483
commit 5dcaf85984
Signed by: slonk
SSH key fingerprint: SHA256:tbZfJX4IOvZ0LGWOWu5Ijo8jfMPi78TU7x1VoEeCIjM
6 changed files with 50 additions and 43 deletions

View file

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

View file

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

View file

@ -1,40 +1,11 @@
replaceDates();
let form = document.getElementById("sort"); let form = document.getElementById("sort");
let posts = document.getElementById("posts"); if (form) {
let postsByDate = document.getElementById("posts");
let postsName = document.createElement("div"); let postsByName = document.createElement("div");
populateByName(postsByDate, postsByName);
function initialSort(source, target) { postsByDate.parentNode.appendChild(postsByName);
let posts = []; handleSort(form, postsByDate, postsByName);
for (let post of source.children) { sort(form.sort.value, postsByDate, postsByName);
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) {
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);

32
static/sort.js Normal file
View file

@ -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);
});
}

View file

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

View file

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