Pages

A page is a component that is rendered when a user visits a specific URL. Pages are defined in the pages folder. The URL of a page is the path to the file relative to the pages folder. For example, the URL of the page defined in pages/index.html is / . The URL of the page defined in pages/docs/pages.html is /docs/pages .

Creating a page

To create a new page, create a new file in the pages folder. The file name will be used as the URL of the page. For example, to create a page with the URL /docs/pages , create a file named pages.html in the pages/docs folder.

Template

The page template is the element that gets injected into the layout template. The page template is defined in the template tag. The template tag must have a layout attribute that specifies the layout template to use. The template tag can also have a title attribute that specifies the title of the page. The page template can contain any number of components and/or elements.

To specify the layout and title of a page, add/modify the following to the top of the page file:

<template layout="main_layout" title="YOUR TITLE GOES HERE">

The page as a component

In every other aspect, a page behaves as a component. The main difference is that styles and scripts are placed inline. This is in order to improve performance.

The page and spa.js

If spa.js is included in the layout (this is done by default), the page will be loaded using partial page loading. This means that when navigating between pages, only the page template will be loaded and injected into the layout template. For this, the page uses partials generated by Sibyl ( partial.html and partial.requirements.json ). This handles all the script and styles required by the page and makes it so navigation between pages is faster and seamless.

While this improves the page, additional steps must be taken to ensure that the page works as expected in case you use JavaScript.

The page-unload event

When navigating out, the styles are automatically removed, but scripts must be cleaned up adequately. For this the page-unload should be listened to and the scripts should be removed. For example:

<script>
    document.addEventListener('page-unload', () => {
        // Cleanup here
    });
</script>

Components can also make use of the page-unload event to execute actions when the page is changed, such as changing the state of a global component, such as the active page in the header.

It isn't necessary to clean up event listeners associated with elements of the page, as they are removed when the respective element is removed.