add custom spa solution

This commit is contained in:
Jacky Zhao 2023-06-09 19:58:58 -07:00
parent 59109a8c1d
commit 3a29f4c86e
4 changed files with 138 additions and 6 deletions

View File

@ -71,6 +71,10 @@ yargs(hideBin(process.argv))
setup(build) { setup(build) {
build.onLoad({ filter: /\.inline\.(ts|js)$/ }, async (args) => { build.onLoad({ filter: /\.inline\.(ts|js)$/ }, async (args) => {
let text = await promises.readFile(args.path, 'utf8') let text = await promises.readFile(args.path, 'utf8')
// remove default exports that we manually inserted
text = text.replace('export default', '')
text = text.replace('export', '')
const transpiled = await esbuild.build({ const transpiled = await esbuild.build({
stdin: { stdin: {
contents: text, contents: text,

View File

@ -9,7 +9,7 @@ export default function Head({ fileData, externalResources }: QuartzComponentPro
const baseDir = resolveToRoot(slug) const baseDir = resolveToRoot(slug)
const iconPath = baseDir + "/static/icon.png" const iconPath = baseDir + "/static/icon.png"
const ogImagePath = baseDir + "/static/og-image.png" const ogImagePath = baseDir + "/static/og-image.png"
return <head> return <head>
<title>{title}</title> <title>{title}</title>
<meta charSet="utf-8" /> <meta charSet="utf-8" />
@ -24,7 +24,7 @@ export default function Head({ fileData, externalResources }: QuartzComponentPro
<meta name="generator" content="Quartz" /> <meta name="generator" content="Quartz" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" />
{css.map(href => <link key={href} href={href} rel="stylesheet" type="text/css" />)} {css.map(href => <link key={href} href={href} rel="stylesheet" type="text/css" spa-preserve />)}
{js.filter(resource => resource.loadTime === "beforeDOMReady").map(resource => <script key={resource.src} {...resource} />)} {js.filter(resource => resource.loadTime === "beforeDOMReady").map(resource => <script key={resource.src} {...resource} spa-preserve />)}
</head> </head>
} }

View File

@ -1,3 +1,130 @@
import flamethrower from 'flamethrower-router' import micromorph from "micromorph"
const router = flamethrower()
export default "SpaScript" // adapted from `micromorph`
// https://github.com/natemoo-re/micromorph
const NODE_TYPE_ELEMENT = 1
let announcer = document.createElement('route-announcer')
const isElement = (target: EventTarget | null): target is Element => (target as Node)?.nodeType === NODE_TYPE_ELEMENT
const isLocalUrl = (href: string) => {
try {
const url = new URL(href)
if (window.location.origin === url.origin) {
if (url.pathname === window.location.pathname) {
return !url.hash
}
return true
}
} catch (e) { }
return false
}
const getOpts = ({ target }: Event): { url: URL, scroll?: boolean } | undefined => {
if (!isElement(target)) return
const a = target.closest("a")
if (!a) return
if ('routerIgnore' in a.dataset) return
const { href } = a
if (!isLocalUrl(href)) return
return { url: new URL(href), scroll: 'routerNoscroll' in a.dataset ? false : undefined }
}
let p: DOMParser
async function navigate(url: URL, isBack: boolean = false) {
p = p || new DOMParser()
const contents = await fetch(`${url}`)
.then((res) => res.text())
.catch(() => {
window.location.assign(url)
})
if (!contents) return;
if (!isBack) {
history.pushState({}, "", url)
window.scrollTo({ top: 0 })
}
const html = p.parseFromString(contents, "text/html")
let title = html.querySelector("title")?.textContent
if (title) {
document.title = title
} else {
const h1 = document.querySelector('h1')
title = h1?.innerText ?? h1?.textContent ?? url.pathname
}
if (announcer.textContent !== title) {
announcer.textContent = title
}
announcer.dataset.persist = ''
html.body.appendChild(announcer)
micromorph(document.body, html.body)
// now, patch head
const elementsToRemove = document.head.querySelectorAll(':not([spa-preserve])')
elementsToRemove.forEach(el => el.remove())
const elementsToAdd = html.head.querySelectorAll(':not([spa-preserve])')
elementsToAdd.forEach(el => document.head.appendChild(el))
if (!document.activeElement?.closest('[data-persist]')) {
document.body.focus()
}
delete announcer.dataset.persist
}
function createRouter() {
if (typeof window !== "undefined") {
window.addEventListener("click", async (event) => {
const { url } = getOpts(event) ?? {}
if (!url) return
event.preventDefault()
try {
navigate(url, false)
} catch (e) {
window.location.assign(url)
}
})
window.addEventListener("popstate", () => {
if (window.location.hash) return
try {
navigate(new URL(window.location.toString()), true)
} catch (e) {
window.location.reload()
}
return
})
}
return new class Router {
go(pathname: string) {
const url = new URL(pathname, window.location.toString())
return navigate(url, false)
}
back() {
return window.history.back()
}
forward() {
return window.history.forward()
}
}
}
createRouter()
if (!customElements.get('route-announcer')) {
const attrs = {
'aria-live': 'assertive',
'aria-atomic': 'true',
'style': 'position: absolute; left: 0; top: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; width: 1px; height: 1px'
}
customElements.define('route-announcer', class RouteAnnouncer extends HTMLElement {
constructor() {
super()
}
connectedCallback() {
for (const [key, value] of Object.entries(attrs)) {
this.setAttribute(key, value)
}
}
})
}

View File

@ -4,6 +4,7 @@ import { StaticResources } from '../resources'
import { googleFontHref, joinStyles } from '../theme' import { googleFontHref, joinStyles } from '../theme'
import { EmitCallback, PluginTypes } from './types' import { EmitCallback, PluginTypes } from './types'
import styles from '../styles/base.scss' import styles from '../styles/base.scss'
// @ts-ignore
import spaRouterScript from '../components/scripts/spa.inline' import spaRouterScript from '../components/scripts/spa.inline'
export type ComponentResources = { export type ComponentResources = {