Skip to content

Latest commit

 

History

History
156 lines (119 loc) · 3.49 KB

README.md

File metadata and controls

156 lines (119 loc) · 3.49 KB
Raw

fiamma 🔥

A fork of flamethrower, with some tweaks!

License: MIT Size Stable version

Note

This library is meant to be used on statically generated websites only. It does not work in React/Wordpress.

Installation & Usage

Install via npm:

npm i fiamma

Add a script tag in the headsection:

<html>
    <head>
        <script type="module">
            import { Router } from "dist/fiamma.esm.js";

            Router();
        </script>
    </head>
    ...
</html>

Events

Available events:

  • fiamma:fetch page fetch started
  • fiamma:end page fetch ended

Example:

window.addEventListener('fiamma:fetch', ()=> {
    // page fetch started
});

window.addEventListener('fiamma:end', ()=> {
    // page fetch ended
});

Prefetch links

You can prefetch links via EnablePrefetchHover or EnablePrefetchVisible.

import { Router, EnablePrefetchVisible } from "dist/fiamma.esm.js";

EnablePrefetchVisible();
Router();

fiamma- attributes

fiamma-reload

By default script tags in the head section are executed once. Specify this attribute to re-execute them after each page load event.

<head>
    <!-- ... -->

    <script fiamma-reload>
        console.log("hello world")
    </script>
</head>

fiamma-persist

Dynamically injected tags in the head section can persist across multiple page loads.

E.g. load the analytics script after consent:

const script = document.createElement('script');
script.src="path-to-analytics.js";
script.setAttribute('fiamma-persist', '');
document.head.appendChild(script);

fiamma-preserve

By default the body element is replaced with the new fetched body. You can however preserve any html element in the body section across multiple pages. The element(s) must:

  • exist in the new page
  • have a unique id

E.g.: given the following 2 pages, then everything inside the div with id="shared-div" will be carried over to the other page.

<!--- index.html -->
<html>
    <head></head>
    <body>
        <div fiamma-preserve id="shared-div"></div>
    </body>
</html>
<!--- about.html -->
<html>
    <head></head>
    <body>
        <div fiamma-preserve id="shared-div"></div>
    </body>
</html>

You can also dynamically inject markup inside shared-div.

fiamma-off

Anchor tags (a) with this attribute are skipped by fiamma and will cause a full page reload when visited.

E.g.: disable fiamma when visiting a :subdomain

<a href="https://subdomain.mydomain.com" fiamma-off>Subdomain</a>

Progress bar

  1. Add stylesheet

    #fiamma-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    transform: scaleX(0);
    background-color: #f3754a;
    transition: transform .3s ease, opacity .3s ease;
    transform-origin: left;
    z-index: 2147483647;
}

  2. Import EnableProgressBar function:

    import { Router, EnableProgressBar } from 'fiamma.esm.js';

EnableProgressBar();
Router();

License

Distributed under the MIT License. See LICENSE for more information.