puppers
v0.0.1
Published
Progressively enhance your site with a psuedo app-shell experience
Downloads
2
Readme
🐶 Puppers
Static websites are ⚡. App-shells are 💯. Why not have both?
Build your static site. Then add a data-attribute to certain elements and the app-shell will kick in.
Those with JS disabled still get a normal static site experience 🙂
How to Use
<script src="/path/to/app-shell.js"></script>Init app shell
const appShell = new AppShell(); appShell.init();Page-specific content needs a
[data-partial]attribute set to:
Page title, meta description, and canonical tag are updated by default.[data-partial="head"]for elements in the<head>[data-partial="content"]for the page content (one element only!)[data-partial="footer"]for elements just before</body>
The rest of the elements will not update on page requests and will become the "app shell".
Scripts marked
[data-partial]are rehydrated on each route change.
For sitewide scripts in the "app shell" that need to run on each route change, use:window.addEventListener('app:routeChanged', e => { console.log(e.detail.route()); // do something });Elements with a
[data-partial]location and[data-partial-persist]attributes will be loaded and kept in DOM on page change. (Note: See the example from number 5 to add an event listener on route change if you would like to remove the element later.)Profit!