Pill adds dynamic content loading to static sites and makes content loading smooth for users. It's pretty small only 1 KiB minified and gzipped. It fits perfectly for static sites with WebComponents.
Pill development started with the tweet by Andrey Sitnik @ai.
How pill works. It:
- Intercepts navigation attempts: links clicks and history navigation.
- Loads requested url using
fetch. - Grabs content from received HTML.
- Replaces current page content.
Initialize in one line:
pill('#content') // Yep, that's it.-
Include script from unpkg.com:
<script src="https://unpkg.com/pill@1/dist/pill.min.js"></script>
⚠️ Remember about security! Add subresource integrity (SRI) checksum from checksum.txt. -
Install via npm:
npm i pill
- Inject pill's
<script>into page. - Create content root element and give it id.
- Create loading indicator element.
- Initialize pill:
const loadingIndicator = document.querySelector('#indicator')
pill('#content', {
onLoading() {
// Show loading indicator
loadingIndicator.style.display = 'initial'
},
onReady() {
// Hide loading indicator
loadingIndicator.style.display = 'none'
}
})<html>
<head>
<title>Home</title>
<script src="https://unpkg.com/pill@1/dist/pill.min.js"></script>
<style>
/* global styles */
#indicator {
position: fixed;
top: 0;
right: 0;
display: none;
}
</style>
</head>
<body>
<div id="indicator">Loading...</div>
<div id="content">
<style>/* page styles */</style>
<!-- page content here -->
</div>
<script>
const loadingIndicator = document.querySelector('#indicator')
pill('#content', {
onLoading() {
// Show loading indicator
indicator.style.display = 'initial'
},
onReady() {
// Hide loading indicator
indicator.style.display = 'none'
}
})
</script>
</body>
</html>Each document of the site should surround #content element with the same HTML.
All page-related content should be located inside #content. It could be styles, scripts, etc.
(selector:string, options:Options) -> void
Initialize pill. Start listening for navigation attempts and history state changes. Puts loaded
content into selector element.
(page:Page) -> void
Handle loading start.
(page:Page) -> void
Handle loading finish.
(error:Error) -> {title, content}
Use it to display notification when something went wrong.
If an error was thrown while handling request. You still able
to render content using method fromError
(url) -> boolean
Determine wither URL could be served by Pill. If returns false than link
will be served by browser.
(page) => boolean
Determine wether previuosly loaded page should be loaded from server.
MIT © Rumkin
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent