This tutorial is based on this repo and demonstrates how to integrate the bundling of your site's JavaScript runtime into Trio's build and release work flows. While this tutorial uses the bundler Parcel to create the JavaScript runtime you are free to use your JavaScript bundler of choice.
This tutorial is based on this repo and demonstrates how to integrate the bundling of your site's JavaScript runtime into Trio's build and release work flows. While this tutorial uses the bundler Parcel to create the JavaScript runtime you are free to use your JavaScript bundler of choice.
The process of assembling your site's web pages with Trio is referred to as composition.
Trio's use of project assets, namely templates, fragments, includes, JSON data files, and metadata, all of which are exposed to tag-based callbacks, allow Trio to excel as a web page composition tool. This is perhaps best demonstrated by the following abstract:
Therefore, as developers of static websites, we need to understand how to effectively use Trio's project assets in our own static site projects. Having this understanding will often reveal that there is more than one way to compose our pages, allowing us to pick the best approach for the task.
The tutorials in this series will teach you how to use Trio's project assets to compose your site's web pages. Each tutorial will introduce new concepts and provide concrete examples that you can read, code, and run for yourselves. Tutorials may also provide you with additional links to content, such as video content, as well as links to Trio's own technical documentation, that will serve to further demonstrate and reinforce what you have read and learned in the tutorials and finally, most of the tutorials in this series will provide you with a list of takeaways, which are a summarized list of the core concepts presented in the tutorial.
If you don't already have Trio and Node installed then please follow the instructions at Getting Started to install them.
Please follow @gettriossg on Twitter to get notified when new articles in this series become available!
It is almost impossible to imagine a website today that doesn't require additional content beyond its basic HTML to provide the context needed for its web pages.
Lets consider the Bio pages on a portfolio website that showcases the works of numerous artists. As artists come and go their Bio pages are either added, updated or removed from the site. If the site isn't very popular with artists then perhaps maintenance of these pages will be infrequent and could be done manually. But if the site is very popular then these pages might in fact require daily or even more frequent updates and thus a more automated approach to maintaining these pages would be beneficial.
A preferable automated approach would be to provide a mechanism that would generate the artist bios whenever their information, which is maintained in separate files or in individual items within a file, are changed, added and deleted. In fact, such mechanisms already exist in the form of static site generators which, among other things, can easily be programmed to insert data found, for instance, in a JSON file into a document that will eventually be saved to your file system as an HTML file.
As such it shouldn't come as a surprise to you that Trio provides a mechanism to do just that, and to take full advantage of Trio's site generation capabilities you need to understand how Trio composes your site's pages using metadata, collection filter functions and tag-based callbacks.
To that end I am very pleased to announce that a series of tutorials will be posted here over the course of the next few weeks which will teach you how to compose your site's pages with dynamic content.
If you would like to be notified when these tutorials are posted here then please consider following @gettriossg on Twitter.