diff options
| author | Martin Ashby <martin@ashbysoft.com> | 2022-10-14 22:57:09 +0100 |
|---|---|---|
| committer | Martin Ashby <martin@ashbysoft.com> | 2022-10-14 22:57:09 +0100 |
| commit | f9c72b3d8f047b107449a7c6db8a602fd5535438 (patch) | |
| tree | a5d32ab6a993411203ddd77abb865a70b2e2fb6c /index.html | |
| download | blogsite-main.tar.gz blogsite-main.tar.bz2 blogsite-main.tar.xz blogsite-main.zip | |
Initial commitmain
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 87 |
1 files changed, 87 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..eba968c --- /dev/null +++ b/index.html @@ -0,0 +1,87 @@ +<!doctype HTML> +<html> +<head> + <style> + /* CSS taken from https://perfectmotherfuckingwebsite.com/ */ + body{ + max-width:650px; + margin:40px auto; + padding:0 10px; + font:18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + color:#444 + } + h1,h2,h3{ + line-height:1.2 + } + @media (prefers-color-scheme: dark){ + body{ + color:#c9d1d9; + background:#0d1117 + } + a:link{ + color:#58a6ff + } + a:visited{ + color:#8e96f0 + } + } + </style> + <script type="text/javascript"> + let routes = {}; + async function loadNav() { + let resp = await fetch("/routes.json"); + routes = await resp.json(); + let lis = Object.entries(routes).map(([key,route]) => { + let li = document.createElement("li"); + let a = document.createElement("a"); + let tn = document.createTextNode(route.title); + a.replaceChildren(tn); + a.href = "/"+key; + a.onclick = function(e) { + goto(key).then(() => {}); + e.preventDefault(); + }; + li.replaceChildren(a); + return li; + }) + let nav = document.getElementsByTagName("nav")[0]; + nav.children[0].replaceChildren(...lis); + } + async function goto(key) { + let nextURL = new URL(window.location); + nextURL.pathname = "/"+key; + const nextTitle = routes[key].title; + const nextState = { additionalInformation: 'Updated the URL with JS' }; + window.history.pushState(nextState, nextTitle, nextURL); + // Manually fire popstate :shrug: + // https://stackoverflow.com/questions/10940837/history-pushstate-does-not-trigger-popstate-event + let popStateEvent = new PopStateEvent('popstate', { state: nextState, title: nextTitle, location: nextURL }); + dispatchEvent(popStateEvent); + } + async function loadContent() { + let key = window.location.pathname.substring(1); + let contentElem = document.getElementsByTagName("content")[0]; + let head = document.getElementsByTagName("h1")[0]; + let route = routes[key] ?? routes[""]; + let contentFile = route.content; + head.innerHTML = route.title; + let resp = await fetch(contentFile); + let content = await resp.text(); + contentElem.innerHTML = content; + } + window.addEventListener('popstate', async (event) => { + await loadContent(); + }); + window.addEventListener('load', async (event) => { + await loadNav(); + await loadContent(); + }); + </script> + <title>Martin's Blog!</title> +</head> +<body> + <h1></h1> + <nav><ol></ol></nav> + <content></content> +</body> +</html>
\ No newline at end of file |