commit 747589f8bbdaa079a72db5611af69f2c59eb2fb8
parent b539583379609cb27f18959078c3fd2bd1758e0b
Author: gracefu <81774659+gracefuu@users.noreply.github.com>
Date: Sat, 12 Apr 2025 08:30:49 +0800
Super fast loading
Diffstat:
5 files changed, 78 insertions(+), 14 deletions(-)
diff --git a/layouts/index.shtml b/layouts/index.shtml
@@ -1,12 +1,10 @@
<extend template="base.shtml">
-<head id="head">
+<div id="content">
<style>
#post-header {
margin-block-end: 1.2em;
}
</style>
-</head>
-<div id="content">
<main>
<article class="hierarchical">
<header id="post-header" class="non-hierarchical limit-children">
diff --git a/layouts/page.shtml b/layouts/page.shtml
@@ -1,5 +1,5 @@
<extend template="base.shtml">
-<head id="head">
+<div id="content">
<style>
#prev-next {
display: flex;
@@ -16,8 +16,6 @@
font-size: 0.8em;
}
</style>
-</head>
-<div id="content">
<main>
<article class="hierarchical">
<header id="post-header" class="non-hierarchical limit-children">
diff --git a/layouts/post.shtml b/layouts/post.shtml
@@ -1,5 +1,5 @@
<extend template="base.shtml">
-<head id="head">
+<div id="content">
<style>
#prev-next {
padding-block: 15px;
@@ -17,8 +17,6 @@
font-size: 0.8em;
}
</style>
-</head>
-<div id="content">
<main>
<article class="hierarchical">
<header id="post-header" class="non-hierarchical limit-children">
diff --git a/layouts/posts.shtml b/layouts/posts.shtml
@@ -1,5 +1,5 @@
<extend template="base.shtml">
-<head id="head">
+<div id="content">
<style>
.date, .author {
font-size: 0.8em;
@@ -9,8 +9,6 @@
margin-block: 1.6em;
}
</style>
-</head>
-<div id="content">
<main>
<h1 class="limit-self" :text="$page.title"></h1>
<div class="limit-children" :html="$page.content()"></div>
diff --git a/layouts/templates/base.shtml b/layouts/templates/base.shtml
@@ -247,8 +247,6 @@ blockquote {
color: brown;
}
</style>
-
- <super>
</head>
<body id="body">
<span style="position: absolute; color: #fdf9ee; left: 0; top: 0; font-family: 'Atkinson Hyperlegible Next'">.</span>
@@ -295,5 +293,79 @@ font.load().then(function () {
console.log("Failed.");
});
</script>
+
+ <script>
+const promises = {};
+const results = {};
+
+function mouseEnterListener() {
+ const href = this.href;
+ console.log('enter', this, href, promises[href]);
+ if (promises[href] === undefined) {
+ promises[href] = new Promise((resolve) => {
+ const req = new XMLHttpRequest();
+ req.addEventListener("load", function() {
+ results[href] = new DOMParser().parseFromString(this.response, "text/html").querySelector('#content');
+ console.log('ho', results[href]);
+ resolve(results[href]);
+ });
+ req.open("GET", href);
+ req.send();
+ });
+ }
+}
+
+function clickListener(event) {
+ const href = this.href;
+ console.log('click', this, href, promises[href]);
+ if (promises[href] !== undefined) {
+ event.preventDefault();
+ promises[href].then((content) => {
+ document.querySelector('#content').innerHTML = content.innerHTML;
+ history.pushState(null, '', href + '#body');
+ history.replaceState(null, '', href);
+ refreshLinks();
+ });
+ }
+}
+
+function refreshLinks() {
+ for (let a of document.querySelectorAll('a')) {
+ if (!a.href.endsWith('/') || a.href.match('.*//[^/]*/')[0] !== location.href.match('.*//[^/]*/')[0]) { continue; }
+ console.log(a);
+ a.onmouseenter = mouseEnterListener;
+ a.onclick = clickListener;
+ }
+}
+refreshLinks();
+
+function popStateListener(event) {
+ console.log('popstate');
+ const href = location.href;
+ if (results[location.href] === undefined) {
+ if (promises[href] === undefined) {
+ promises[href] = new Promise((resolve) => {
+ const req = new XMLHttpRequest();
+ req.addEventListener("load", function() {
+ results[href] = new DOMParser().parseFromString(this.response, "text/html").querySelector('#content');
+ console.log('ho', results[href]);
+ resolve(results[href]);
+ });
+ req.open("GET", href);
+ req.send();
+ });
+ }
+ promises[href].then((content) => {
+ document.querySelector('#content').innerHTML = content.innerHTML;
+ refreshLinks();
+ });
+ } else {
+ document.querySelector('#content').innerHTML = results[location.href].innerHTML;
+ refreshLinks();
+ }
+}
+
+window.onpopstate = popStateListener;
+ </script>
</body>
</html>