Trio Icon
Trio v6.1.0
Documentation is evolving and is a WIP

Additional Resources

On this page are additional resources that you may find beneficial.

Add JavaScript Bundling To Your Trio Projects

Trio v6.0.1+ makes it easier to integrate external processes, such as those for bundling your site's Javascript, into your projects. To help you get started a demo project that uses Parcel to bundle JavaScript can be found here.

ESLint Support For Your JavaScript

A shareable ESLint configuration package is available for you to install and use in your Trio projects, which will install ESLint and all its dependencies. This package extends eslint-config-standard, so out of the box it comes with sensible default rules which, of course, you are able to override and extend.

To install this package in your projects, please follow the instructions below:

  • If your project doesn't already have a package.json file, create one by opening a terminal, navigating to your project's root folder, and running the following command:
    npm init -y
  • Now run the following command in your terminal to install the shareable ESLint configuration package:
    npm i --save-dev @4awpawz/eslint-config-4awpawzconfig
  • In your project's root folder create a new file and name it .eslintrc.json. Now copy the following
    {
        "extends": "@4awpawz/eslint-config-4awpawzconfig"
    }
    into this new file and save this file.

An NPM Package For Importing Uncached Modules

When your tag-based callbacks and filter functions have their own internal module dependencies, you should import those dependencies using import-fresh (or some similar package) to guarantee that you are always importing fresh, uncached copies of them and they reflect your most recent changes.

To install import-fresh in your projects, please follow the instructions below:

  • If your project doesn't already have a package.json file, create one by opening a terminal, navigating to your project's root folder, and running the following command:
    npm init -y
  • Now run the following command in your terminal to install the import-fresh package:
    npm i --save-dev import-fresh

Use import-fresh in your tag-based callbacks and your filter functions just as you would use Node's built-in global require:

const importFresh = require("import-fresh");
const someDependency = importFresh("./lib/someModule");

Visual Studio Code Snippets

Trio specific code snippets are available here, and include support for the following:

  • fragment, include and tag-based callback front-matter blocks
  • data-trio-* tag attributes

HTML Syntax Highlighting Support For ES6 Multiline Strings

You can easily add HTML syntax highlighting to your JavaScript's multi line strings by installing this Visual Studio Code es6-string-html plugin.

Your Financial Support Of This Project Is Greatly Appreciated

Trio is an open source project and is therefore free of charge to use both for noncommercial and commercial use, but when you use Trio to create a new website, please consider donating a few bucks. It doesn't take very long, the process is secure, and it will allow us to continue to support the community and to maintain and enhance Trio going forward.

Show your ❤️, add your ★ to the Github repo.