flare-router
Version:
Blazingly fast SPA-like router for static sites - Pure vanilla JS
50 lines (46 loc) • 1.35 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="favicon.ico" type="image/png" />
<meta name="description" content="The Home Page" />
<title>flare-router</title>
<script defer type="module">
import flare from '/dist/main.js';
flare({ prefetch: 'visible', log: true, pageTransitions: true });
</script>
<style>
#heading {
color: red;
}
#load-bar {
background-color: blue;
position: fixed;
top: 0;
left: 0;
width: 0;
height: 5px;
}
</style>
</head>
<body>
<div id="load-bar"></div>
<h1 id="heading">Home</h1>
<a href="/">Home</a> | <a id="about" href="/about">About</a>
<div id="keep" flare-preserve>
<article>
<p>This text should be preserved when starting from home</p>
</article>
</div>
<script>
// test
window.addEventListener('flare:router:fetch-progress', ({ detail }) => {
const loadBar = document.getElementById('load-bar');
console.log('Fetch Progress:', detail);
loadBar.style.width = detail.progress + '%';
});
</script>
</body>
</html>