Project Files: Mappings

The mappings.ts file in the scripts folder is used to match particular pages on a site. It’s just a Tritium script which checks which page is being processed and then imports another appropriate Tritium script file.


Matchers

A simple match() statement will look as follows:

match($path) {
  with(/home/) {
    log("--> Importing pages/homes.ts in mappings.ts")
    @import pages/home.ts
  }
  with(/product/) {
    log("--> importing pages/product.ts in mappings.ts")
    @import pages/product.ts
  }
  else() {
    log("--> Importing pages/not_homes.ts in mappings.ts")
    @import pages/not_home.ts
  }
}

For every new page styled, a new with() rule should be applied.

  1. Match the URL path with a string or a regular expression
  2. Add a log line with a descriptive message
  3. Import the new file

Matching on HTML Attributes

While matching on URLs is often the most convenient way to identify page types, you can match on any HTML attribute or HTTP header available on the page.

For example, the code snippet below looks for a class associated with the <body> and routes based on that.

$body_class = fetch(".//body/@class")

match($body_class) {
  with(/homepage/) {
    log("--> Import home page")
    @import pages/home.ts
  }
}

Regex

Often times, you may need to set up more complicated matches. In such cases, you should use regular expressions.

The regex /^\/index\.jsp$/ below looks for the exact path “/index.jsp”. Even if the path just had a query parameter such “/index.jsp?param=1”, it would not match and @import would not run.

match($path) {
  with(/^\/index\.jsp$/) {
    log("--> Importing pages/homes.ts in mappings.ts")
    @import pages/home.ts
  }
}