Preloader
This commit is contained in:
parent
e99434ed3d
commit
e0f35f5b53
GPG key ID:
5B2020A0F9921EF4
9 changed files with 116 additions and 17 deletions
|
|
@ -29,17 +29,17 @@ menu:
|
|||
main:
|
||||
- identifier: about
|
||||
name: about
|
||||
url: /about
|
||||
url: /about/
|
||||
weight: 10
|
||||
- identifier: blog
|
||||
name: blog
|
||||
url: /blog
|
||||
url: /blog/
|
||||
weight: 20
|
||||
- identifier: tips
|
||||
name: tips
|
||||
url: /tips
|
||||
url: /tips/
|
||||
weight: 30
|
||||
- identifier: contact
|
||||
name: contact
|
||||
url: /contact
|
||||
url: /contact/
|
||||
weight: 40
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
---
|
||||
date: "2023-07-06T14:32:00-06:00"
|
||||
date: "2023-07-06T14:32:00-05:00"
|
||||
title: "Things I Use"
|
||||
draft: false
|
||||
toc: false
|
||||
---
|
||||
|
||||
I saw a post recently on ye ole fediverse that linked [this post](https://dev.to/nickytonline/do-you-have-a-uses-page-5b82) and I was inspired to create mine! So I did! <a href="/uses">You can view it here</a>! Enjoy!
|
||||
I saw a post recently on ye ole fediverse that linked [this post](https://dev.to/nickytonline/do-you-have-a-uses-page-5b82) and I was inspired to create mine! So I did! <a href="/uses">You can view it here</a>!
|
||||
|
||||
<!--more-->
|
||||
|
||||
Enjoy!
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: Privacy Policy
|
||||
toc: false
|
||||
---
|
||||
|
||||
I collect basic analytics to a system I run and control for insight into how
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<link rel="preload" href="/styles.css" as="style">
|
||||
<link rel="modulepreload" href="/theme.mjs">
|
||||
<link rel="modulepreload" href="/global.mjs">
|
||||
<link rel="modulepreload" href="//instant.page/5.2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="{{ if .Params.summary }}{{ .Params.summary }}{{ else }}{{ .Site.Params.Description }}{{ end }}">
|
||||
<title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
|
||||
|
|
@ -15,7 +14,12 @@
|
|||
<script defer type="module" src="/global.mjs"></script>
|
||||
<script async defer data-domain="lyte.dev" src="https://a.lyte.dev/js/plausible.js"></script>
|
||||
</head>
|
||||
<body class="system-theme">
|
||||
<body class="system-theme nojs">
|
||||
<noscript>
|
||||
<style type="text/css">
|
||||
html > body.nojs > main, html > body.nojs > footer { visibility: inherit; }
|
||||
</style>
|
||||
</noscript>
|
||||
<header>
|
||||
<a href="#start-of-content" class="hide-unless-focused">Skip to Content</a>
|
||||
<section>
|
||||
|
|
@ -98,6 +102,8 @@
|
|||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p style="text-align: center;">Thanks for visiting and reading! You probably want to go <a href="javascript:history.go(-1)">back</a> or to <a href="/">the index</a> now.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
8
makefile
8
makefile
|
|
@ -12,6 +12,11 @@ build: static/font.css static/styles.css ; @${HUGO}
|
|||
.PHONY: public
|
||||
public: build
|
||||
|
||||
.PHONY: serve
|
||||
serve:
|
||||
@stylus -w src/stylus/styles.styl --sourcemap -o static/styles.css &
|
||||
@${HUGO} serve
|
||||
|
||||
.PHONY: dev
|
||||
dev:
|
||||
@stylus -w src/stylus/styles.styl --sourcemap -o static/styles.css &
|
||||
|
|
@ -31,9 +36,6 @@ publish: clean-css public ; @netlify ${NETLIFY_DEPLOY} && echo "Run \`make publi
|
|||
.PHONY: publish-prod
|
||||
publish-prod: clean-css public ; @netlify ${NETLIFY_DEPLOY} --prod
|
||||
|
||||
static/font.css: src/stylus/font.styl
|
||||
stylus --compress $< -o $@
|
||||
|
||||
static/styles.css: src/stylus/styles.styl $(shell find src/stylus -regex ".*\.styl")
|
||||
stylus --compress $< -o $@
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,11 @@ code, pre
|
|||
|
||||
ul, ol { padding-left: 2em }
|
||||
|
||||
// hide main content until js runs
|
||||
// a noscript tag contains a stylesheet that counters this
|
||||
body.nojs > main, body.nojs > footer
|
||||
visibility hidden
|
||||
|
||||
a
|
||||
cursor pointer
|
||||
text-decoration-skip-ink auto
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { Theme } from "./theme.mjs";
|
||||
import "./preload.mjs";
|
||||
|
||||
document.querySelectorAll(".js-only").forEach((a) =>
|
||||
a.classList.remove("js-only")
|
||||
|
|
@ -21,8 +22,6 @@ if (localStorage.getItem("align") === null) {
|
|||
localStorage.setItem("align", "center");
|
||||
}
|
||||
|
||||
initAlign();
|
||||
|
||||
const toggleAlign = (ev) => {
|
||||
localStorage.setItem(
|
||||
"align",
|
||||
|
|
@ -82,6 +81,11 @@ function initCodeCopyButtons() {
|
|||
});
|
||||
}
|
||||
|
||||
window.addEventListener("load", (_ev) => {
|
||||
initCodeCopyButtons();
|
||||
});
|
||||
window.addEventListener("load", initAlign);
|
||||
window.addEventListener("load", initCodeCopyButtons);
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
document.querySelectorAll(".nojs").forEach(e => {
|
||||
e.classList.remove("nojs")
|
||||
})
|
||||
})
|
||||
|
||||
|
|
|
|||
80
static/preload.mjs
Normal file
80
static/preload.mjs
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
const cache = {}
|
||||
const main = document.querySelector("html > body > main")
|
||||
const originalMain = main.innerHTML
|
||||
cache[window.location.href] = [originalMain, document.title]
|
||||
history.replaceState([window.location.href, 0, 0], "")
|
||||
|
||||
const MINUTE_MS = 1000 * 60
|
||||
|
||||
async function putCache(href) {
|
||||
if (cache[href] === undefined && href != window.location.href) {
|
||||
cache[href] = ["", ""]
|
||||
console.debug(`Preloading ${href}...`)
|
||||
const html = await (await fetch(href)).text()
|
||||
const doc = new DOMParser().parseFromString(html, "text/html")
|
||||
cache[href] = [doc.querySelector("html > body > main").innerHTML, doc.title]
|
||||
console.debug(`Preloaded ${href}`)
|
||||
setTimeout(() => {
|
||||
delete cache[href]
|
||||
console.debug(`Cleared cached page: ${href}`)
|
||||
}, 5 * MINUTE_MS)
|
||||
}
|
||||
}
|
||||
|
||||
function loadCache(href) {
|
||||
if (cache[href]) {
|
||||
const [html, title] = cache[href]
|
||||
if (html != "" || title != "") {
|
||||
main.innerHTML = html
|
||||
document.title = title
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
function preloadinate() {
|
||||
// TODO: some kind of expiration?
|
||||
document.querySelectorAll("a").forEach(el => {
|
||||
// TODO: this would ideally happen in the background (service worker)?
|
||||
if (el.href.indexOf("#") == -1 && el.href.indexOf(".") == -1 && (el.href.startsWith("https://lyte.dev") || el.href.startsWith("http://localhost:1313"))) {
|
||||
el.addEventListener("mouseover", (_ev) => putCache(el.href))
|
||||
el.addEventListener("click", ev => {
|
||||
if (el.href == window.location.href) {
|
||||
ev.preventDefault()
|
||||
return false
|
||||
}
|
||||
if (cache[el.href] && cache[el.href][0] != "") {
|
||||
const rep = [window.location.href, window.scrollX, window.scrollY]
|
||||
history.replaceState(rep, "")
|
||||
console.log("replaceState: ", rep)
|
||||
if (!loadCache(el.href)) {
|
||||
return true
|
||||
}
|
||||
window.scrollTo(0, 0)
|
||||
history.pushState([el.href, 0, 0], "", el.href)
|
||||
preloadinate()
|
||||
ev.preventDefault()
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
window.addEventListener("popstate", ev => {
|
||||
if (ev.state) {
|
||||
const [href, x, y] = ev.state
|
||||
if (!loadCache(href)) {
|
||||
window.location.reload()
|
||||
}
|
||||
requestAnimationFrame(() => {
|
||||
console.log(`Scrolling to ${x}, ${y}`)
|
||||
window.scrollTo(x, y)
|
||||
})
|
||||
preloadinate()
|
||||
} else {
|
||||
}
|
||||
})
|
||||
|
||||
window.addEventListener("load", preloadinate);
|
||||
|
|
@ -53,7 +53,6 @@ export class Theme {
|
|||
document.body.classList.remove(`light-theme`)
|
||||
document.body.classList.remove(`dark-theme`)
|
||||
document.body.classList.remove(`system-theme`)
|
||||
console.log(this, this.getNext())
|
||||
document.body.classList.add(`${this.#theme}-theme`)
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue