2024-07-10 16:21:15 +02:00
|
|
|
## About
|
|
|
|
|
|
2024-07-10 16:30:01 +02:00
|
|
|
Postman delivers the assets of a web page. <br>
|
2024-07-10 22:01:06 +02:00
|
|
|
The library is typically paired with a progress
|
|
|
|
|
bar that reports progress to the client.
|
2024-07-10 16:21:15 +02:00
|
|
|
|
|
|
|
|
## Examples
|
|
|
|
|
|
|
|
|
|
### Progress bar
|
|
|
|
|
|
|
|
|
|
The following example delivers fonts, scripts, images
|
|
|
|
|
and stylesheets with the help of a progress bar. The
|
|
|
|
|
progress bar is removed once the delivery is complete:
|
|
|
|
|
|
|
|
|
|
**index.html**
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<!DOCTYPE html>
|
2024-07-10 16:30:01 +02:00
|
|
|
<html>
|
2024-07-10 16:21:15 +02:00
|
|
|
<head>
|
|
|
|
|
<title>Postman</title>
|
2024-07-12 07:26:46 +02:00
|
|
|
<script type="module" src="delivery.js"></script>
|
2024-07-12 08:26:32 +02:00
|
|
|
<style>
|
|
|
|
|
html, html body { height: 100%; }
|
|
|
|
|
main.postman {
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
main.postman progress {
|
|
|
|
|
max-width: 200px;
|
|
|
|
|
}
|
|
|
|
|
main.postman .percent {
|
|
|
|
|
font-family: courier;
|
|
|
|
|
font-size: smaller;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
2024-07-10 16:21:15 +02:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2024-07-12 08:26:32 +02:00
|
|
|
<main class="postman">
|
|
|
|
|
<label>
|
|
|
|
|
<progress id="progress" value="0" max="100"></progress>
|
|
|
|
|
</label>
|
|
|
|
|
</main>
|
2024-07-10 16:21:15 +02:00
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
```
|
|
|
|
|
|
2024-07-12 07:26:46 +02:00
|
|
|
**delivery.js**
|
2024-07-10 16:21:15 +02:00
|
|
|
|
|
|
|
|
```typescript
|
|
|
|
|
import postman, { item } from "postman";
|
2024-07-10 16:30:01 +02:00
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
2024-07-12 08:26:32 +02:00
|
|
|
const postman = document.querySelector("main.postman");
|
|
|
|
|
const bar = postman.querySelector("progress");
|
|
|
|
|
const span = postman.querySelector(".percent");
|
2024-07-10 22:22:17 +02:00
|
|
|
const delivery = postman(
|
2024-07-10 16:30:01 +02:00
|
|
|
item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),
|
|
|
|
|
item.script("/js/app.js"),
|
|
|
|
|
item.image("/images/app.png"),
|
|
|
|
|
item.css("/css/app.css"),
|
|
|
|
|
item.progress((percent) => {
|
2024-07-10 22:22:17 +02:00
|
|
|
bar.value = percent;
|
2024-07-12 08:26:32 +02:00
|
|
|
bar.innerText = span.innerText = `${percent}%`;
|
2024-07-10 16:30:01 +02:00
|
|
|
})
|
2024-07-10 22:22:17 +02:00
|
|
|
).deliver();
|
|
|
|
|
|
|
|
|
|
delivery.then((package) => {
|
|
|
|
|
/* Add page assets */
|
|
|
|
|
package.fonts.forEach((font) => documents.fonts.add(font));
|
|
|
|
|
package.scripts.forEach((script) => document.body.appendChild(script));
|
|
|
|
|
package.css.forEach((css) => document.head.appendChild(css));
|
2024-07-12 08:26:32 +02:00
|
|
|
/* Replace loading screen */
|
|
|
|
|
postman.remove();
|
2024-07-10 22:22:17 +02:00
|
|
|
});
|
2024-07-10 16:42:28 +02:00
|
|
|
});
|
2024-07-10 16:21:15 +02:00
|
|
|
```
|
|
|
|
|
|
2024-07-12 07:07:49 +02:00
|
|
|
## See also
|
|
|
|
|
|
|
|
|
|
* [https://al-quran.reflectslight.io/](https://al-quran.reflectslight.io) <br>
|
2024-07-12 07:30:23 +02:00
|
|
|
Delivers all of its assets with Postman
|
2024-07-12 07:07:49 +02:00
|
|
|
|
2024-07-10 16:44:55 +02:00
|
|
|
## Sources
|
|
|
|
|
|
|
|
|
|
* [GitHub](https://github.com/0x1eef/postman)
|
|
|
|
|
* [GitLab](https://gitlab.com/0x1eef/postman)
|
2024-07-12 07:33:34 +02:00
|
|
|
* [brew.bsd.cafe/@0x1eef](https://brew.bsd.cafe/@0x1eef)
|
2024-07-10 16:44:55 +02:00
|
|
|
|
2024-07-10 16:21:15 +02:00
|
|
|
## License
|
|
|
|
|
|
|
|
|
|
[BSD Zero Clause](https://choosealicense.com/licenses/0bsd/)
|
|
|
|
|
<br>
|
|
|
|
|
See [LICENSE](./LICENSE)
|
|
|
|
|
|
