Project Files

These docs go through the files and folders you’ll find in a typical Moovweb project — describing what they do and how to modify them.

Contents


scripts

The scripts folder contains Tritium scripts that define transformations in your Moovweb project.

main.ts

main.ts is your starting point for every Moovweb project’s transformations — it is the first file that gets run upon every HTTP request. Since Tritium is a linear language, you can trace every script that gets run back to this file.

The main.ts script starts by checking the content type of the incoming file. This is a general best practice for deciding how to handle that content because your transformations will often vary based on whether it is HTML, JavaScript, JSON, or XHR.

html.ts

From main.ts most projects will import html.ts, to be executed on all HTML content that passes through Moovweb.

match($content_type) {
  with(/html/) {
    html() {
      @import html.ts
    }
  }
}

html.ts contains standard functions to operate on HTML content, such as rewrite_links() and absolutize_srcs(). Addition of mobile stylesheets and JavaScript is done here as well.

At the end of html.ts, there is an @import statement for a mappings.ts file.

mappings.ts

Moovweb projects use a mappings.ts script to determine which other Tritium scripts will be run on specific page types. If you are familar with Ruby on Rails or Node.js web applications, these are essentially your “routes”.

The file uses the $path environment variable to match on the page URL, identify the page type and run specific Tritium transformations. You may use any other variable or body class to match page types and specify Tritium transformations to be applied.

Our article on mappings describes how to match and manage page-specific transforms based on URLs or other parameters.

assets

The assets folder is where you place all the images, JavaScript, and CSS that you’d like to add to your project.

Adding Images
How to add images into a Moovweb project — both through stylesheets (spriting) and Tritium.
Adding JavaScript
How to add and remove JavaScript from a project and how your JavaScript is bundled and compresssed automatically.
Adding CSS
Where to write your styles and how each stylesheet should be used.

Learn more about how Moovweb works with your assets in the cloud by reading about Static Asset Delivery.

functions

The functions folder contains Tritium files with custom functions that have been defined for use in your project. It will come pre-packaged with a variety of useful functions, but you can also define your own functions as well.

Organizing Tritium scripts

By convention, we organize scripts into pages and sections folders.

pages

Every page should have:

The Tritium file should be imported only when the page type is loaded. This is done in the mappings.ts file.

At the top of the Tritium file there should be a comment with an example URL for that page type. For example the “product” page type on example.com would have a file called pages/product.ts with this comment at the top:

# URL: http://www.example.com/product/flippers

Every Tritium page file should start by assigning a class to the <body>:

$("./body") {
  add_class("_product")
}

In the pages/product.scss file, you can start by scoping as so:

body._product {

}

Page-specific styling is discussed further in the explanation of the stylesheets folder structure.

sections

The header.ts and footer.ts files (located in the scripts/sections subfolder) are imported at the end of html.ts. Use these files to implement a header and footer area that can appear on every page.

Device-Specific Development

A Moovweb project can have one mode, and each mode can correspond to a single delivery platform, such as mobile, tablet, or desktop. By developing different layers within your project, and assigning them to different modes on different sites, you can support different presentations for different devices. We have an article explaining layers and how to use them to develop different experienced in a DRY manner different devices.

Moovweb projects typically also include a device_detection.ts Tritium script, which uses the environment variable (such as $user_agent and $cookie) to identify mobile, tablet, and other devices. Some older projects may still manage the delivery of device-specific user experiences using this feature, which you can also read about in more detail. We recommend that developers use layers and modes as a more robust approach going forward.