Scripting
tinyfeed allows you to inject javascript by linking to an javascript file with the -S
or --script
flag:
Using a direct link:
tinyfeed -S "https://feed.lovergne.dev/scripts/top.js" -o index.html https://lovergne.dev/rss
# add <script type="module" src="https://feed.lovergne.dev/scripts/top.js" nonce="..."></script> to the webpage
Or a relative link:
tinyfeed -S "/scripts/top.js" -o index.html https://lovergne.dev/rss
# add <script type="module" src="/scripts/top.js" nonce="..."></script> to the webpage
Adding a script is ideal if you want to extend tinyfeed with with more interactive features.
Example: Back to Top button
Adding a button with a callback is the kind of lightweight customization you can easily achieve with JavaScript.
Add the following top.js
file to the directory where you output your index.html
:
function onScroll() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
button.style.display = "block";
} else {
button.style.display = "none";
}
}
function GoToTop() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
// Create and stylize the button
const button = document.createElement('button');
button.title = "Go to the top of the page";
button.onclick = GoToTop;
button.style.display = 'none';
button.style.position = 'fixed';
button.style.bottom = '30px';
button.style.right = '30px';
button.style.zIndex = '99';
button.style.cursor = 'pointer';
button.style.width = '3em';
button.style.height = '3em';
button.style.backgroundColor = 'current';
button.style.mask = 'size: 100 % 100 %';
button.style.maskRepeat = 'no';
button.style.maskImage = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M22 12a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2a10 10 0 0 1 10 10M7.4 15.4l4.6-4.6l4.6 4.6L18 14l-6-6l-6 6z'/%3E%3C/svg%3E")`;
button.style.webkitMask = 'size: 100 % 100 %';
button.style.webkitMaskRepeat = 'no';
button.style.webkitMaskImage = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M22 12a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2a10 10 0 0 1 10 10M7.4 15.4l4.6-4.6l4.6 4.6L18 14l-6-6l-6 6z'/%3E%3C/svg%3E")`;
// Add it to the body
document.body.appendChild(button);
window.onscroll = onScroll;
Then generate your index.html
with tinyfeed -S "top.js" -o index.html https://lovergne.dev/rss
. The resulting page should have "Back To Top" button appear on the botton right when you start scrolling.
Check out the demo with that exact script: feed.lovergne.dev/demo/back-to-top