lytedev/site.lyte.dev
1
0
Fork 0
Code Issues Pull requests 1 Releases Wiki Activity

Preloader

Browse source
This commit is contained in:
Daniel Flanagan 2023-07-06 17:02:38 -05:00
parent e99434ed3d
commit e0f35f5b53
Signed by: lytedev
GPG key ID: 5B2020A0F9921EF4
9 changed files with 116 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
config.yaml
View file

@ -29,17 +29,17 @@ menu:
main: main:
- identifier: about - identifier: about
name: about name: about
url: /about url: /about/
weight: 10 weight: 10
- identifier: blog - identifier: blog
name: blog name: blog
url: /blog url: /blog/
weight: 20 weight: 20
- identifier: tips - identifier: tips
name: tips name: tips
url: /tips url: /tips/
weight: 30 weight: 30
- identifier: contact - identifier: contact
name: contact name: contact
url: /contact url: /contact/
weight: 40 weight: 40

6
content/blog/my-uses.md
View file

@ -1,10 +1,12 @@
--- ---
date: "2023-07-06T14:32:00-06:00" date: "2023-07-06T14:32:00-05:00"
title: "Things I Use" title: "Things I Use"
draft: false draft: false
toc: 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--> <!--more-->
Enjoy!

1
content/privacy.md
View file

@ -1,5 +1,6 @@
--- ---
title: Privacy Policy title: Privacy Policy
toc: false
--- ---
I collect basic analytics to a system I run and control for insight into how I collect basic analytics to a system I run and control for insight into how

10
layouts/_default/baseof.html
View file

@ -6,7 +6,6 @@
<link rel="preload" href="/styles.css" as="style"> <link rel="preload" href="/styles.css" as="style">
<link rel="modulepreload" href="/theme.mjs"> <link rel="modulepreload" href="/theme.mjs">
<link rel="modulepreload" href="/global.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="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{ if .Params.summary }}{{ .Params.summary }}{{ else }}{{ .Site.Params.Description }}{{ end }}"> <meta name="description" content="{{ if .Params.summary }}{{ .Params.summary }}{{ else }}{{ .Site.Params.Description }}{{ end }}">
<title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title> <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
@ -15,7 +14,12 @@
<script defer type="module" src="/global.mjs"></script> <script defer type="module" src="/global.mjs"></script>
<script async defer data-domain="lyte.dev" src="https://a.lyte.dev/js/plausible.js"></script> <script async defer data-domain="lyte.dev" src="https://a.lyte.dev/js/plausible.js"></script>
</head> </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> <header>
<a href="#start-of-content" class="hide-unless-focused">Skip to Content</a> <a href="#start-of-content" class="hide-unless-focused">Skip to Content</a>
<section> <section>
@ -98,6 +102,8 @@
</a> </a>
</li> </li>
</ul> </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> </footer>
</body> </body>
</html> </html>

8
makefile
View file

@ -12,6 +12,11 @@ build: static/font.css static/styles.css ; @${HUGO}
.PHONY: public .PHONY: public
public: build public: build
.PHONY: serve
serve:
@stylus -w src/stylus/styles.styl --sourcemap -o static/styles.css &
@${HUGO} serve
.PHONY: dev .PHONY: dev
dev: dev:
@stylus -w src/stylus/styles.styl --sourcemap -o static/styles.css & @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 .PHONY: publish-prod
publish-prod: clean-css public ; @netlify ${NETLIFY_DEPLOY} --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") static/styles.css: src/stylus/styles.styl $(shell find src/stylus -regex ".*\.styl")
stylus --compress $< -o $@ stylus --compress $< -o $@

5
src/stylus/core.styl
View file

@ -3,6 +3,11 @@ code, pre
ul, ol { padding-left: 2em } 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 a
cursor pointer cursor pointer
text-decoration-skip-ink auto text-decoration-skip-ink auto

14
static/global.mjs
View file

@ -1,4 +1,5 @@
import { Theme } from "./theme.mjs"; import { Theme } from "./theme.mjs";
import "./preload.mjs";
document.querySelectorAll(".js-only").forEach((a) => document.querySelectorAll(".js-only").forEach((a) =>
a.classList.remove("js-only") a.classList.remove("js-only")
@ -21,8 +22,6 @@ if (localStorage.getItem("align") === null) {
localStorage.setItem("align", "center"); localStorage.setItem("align", "center");
} }
initAlign();
const toggleAlign = (ev) => { const toggleAlign = (ev) => {
localStorage.setItem( localStorage.setItem(
"align", "align",
@ -82,6 +81,11 @@ function initCodeCopyButtons() {
}); });
} }
window.addEventListener("load", (_ev) => { window.addEventListener("load", initAlign);
initCodeCopyButtons(); window.addEventListener("load", initCodeCopyButtons);
}); window.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll(".nojs").forEach(e => {
e.classList.remove("nojs")
})
})

80
static/preload.mjs Normal file
View 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);

1
static/theme.mjs
View file

@ -53,7 +53,6 @@ export class Theme {
document.body.classList.remove(`light-theme`) document.body.classList.remove(`light-theme`)
document.body.classList.remove(`dark-theme`) document.body.classList.remove(`dark-theme`)
document.body.classList.remove(`system-theme`) document.body.classList.remove(`system-theme`)
console.log(this, this.getNext())
document.body.classList.add(`${this.#theme}-theme`) document.body.classList.add(`${this.#theme}-theme`)
} }