add custom spa solution
This commit is contained in:
Jacky Zhao
@@ -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,
|
||||||
|
|||||||
@@ -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>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@@ -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 = {
|
||||||
|
|||||||
Reference in New Issue
Block a user