Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rumkin/pill
Add dynamic content loading to static sites with only 1 KiB of JS
https://github.com/rumkin/pill
dynamic-loading static-sites
Last synced: 16 days ago
JSON representation
Add dynamic content loading to static sites with only 1 KiB of JS
- Host: GitHub
- URL: https://github.com/rumkin/pill
- Owner: rumkin
- License: mit
- Created: 2019-03-29T01:57:12.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-12-12T21:37:26.000Z (almost 4 years ago)
- Last Synced: 2024-05-13T11:04:27.651Z (6 months ago)
- Topics: dynamic-loading, static-sites
- Language: JavaScript
- Homepage: https://rumkin.github.io/pill/
- Size: 197 KB
- Stars: 383
- Watchers: 6
- Forks: 19
- Open Issues: 12
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
Pill adds dynamic content loading to static sites and makes content loading
smooth for users. It's pretty small only _1.45 KiB_ minified and gzipped. It fits perfectly
for static sites with WebComponents.
* 🐥 **Tiny**: `1.45 KiB` gzipped.
* 🥤 **Easy-to-use**: single function call.
* 🎮 **Handful**: hooks and callbacks could modify the default behavior.
> Pill development started with the [tweet](https://twitter.com/sitnikcode/status/1109626507331338240)
by Andrey Sitnik [@ai](https://github.com/ai).
How pill works. It:
1. Intercepts navigation attempts: links clicks and history navigation.
2. Loads requested url using `fetch`.
3. Grabs content from received HTML.
4. Replaces current page content.
Initialize in one line:
```javascript
pill('#content') // Yep, that's it.
```
## Table of Contents
* [Install](#install)
* [Usage](#usage)
* [Corner cases](#corner-cases)
* [API](#api)
* [License](#license)
## Install
* Include script from unpkg.com:
```html
```
> ⚠️ Remember about security! Add [subresource integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) (SRI) checksum
> from [checksum.txt](https://unpkg.com/pill@1/dist/checksum.txt).
* Install via npm:
```
npm i pill
```
## Usage
1. Inject pill's `` into page.
2. Create content root element and give it id.
3. Create loading indicator element.
4. Initialize pill:
```javascript
// Get loading indicator element
const indicator = document.querySelector('#indicator')
// Assign Pill to specified selector
pill('#content', {
onLoading() {
// Show loading indicator
indicator.style.display = 'initial'
},
onReady() {
// Hide loading indicator
indicator.style.display = 'none'
}
})
```
### Complete example
```html
<html>
<head>
<title>Home</title>
<script src="https://unpkg.com/pill@1/dist/pill.min.js">
/* global styles */
#indicator {
position: fixed;
top: 0;
right: 0;
display: none;
}
Loading...
/* page styles */
const indicator = document.querySelector('#indicator')
pill('#content', {
onLoading() {
// Show loading indicator
indicator.style.display = 'initial'
},
onReady() {
// Hide loading indicator
indicator.style.display = 'none'
}
})
pill('#content', {
onMounting(page, url, element) {
// Init page, for example bind event listeners, start timers, etc.
App.initPage(url, element)
},
onUnmounting(page, url, element) {
// Uninitialise page, for example remove event listeners, stop timers, etc.
App.destroyPage(url, element)
},
})
App.initPage(new URL(window.location), document.querySelector('#content'))