tsg.yml

...
#Sets the path to look for templates
templatePath: src/templates

#TS deploys this directory.
#All of your JS, CSS need to end up here.
#Files like robots.txt, humans.txt and other 
#files that do not need processing should live here.
staticPath: static

#Temporary build directory
buildPath: build

locale: en-us #defaut
dates:
  tz: America/New_York #default
  format: LLL #default

imageDefaults:
  auto: compress  

#Global context available to all routes.
context:
  assets: ../../static/assets/manifest.json
  [KEY]: [VALUE]
  ...

#Routes tell TS which template to join with which context (graphql query)
#and the format of the resulting directory structure to generate
routes:
  homepage:
    path: /
    template: pages/homepage.html
    context: data/homepage.graphql
...

Context

Context configuration is the way you provide variables to your templates. Context supports .graphql, .json, .yml files as well as inline values. Consider the homepage route from above:

path: /
template: pages/homepage.html
context: data/homepage.graphql

If you're homepage.graphql looks like this:

query {
  page: getHomepage {
    title
    featuredBook {
      title
      author {
        name
      }
      genre {
        title
      }
      coverImage {
        path
      }
    }
  }
  posts: getPostList {
    total
    items {
      title
      _enabledAt
      deck
      featureImage {
        path
      }
    }
  }
}

You are able to use the page and posts variables in homepage.html.  Context objects can also compose multiple sources of data.

path: /
template: pages/homepage.html
context: 
  backgroundColor: hotpink 
  meta: metadata.json
  content: data/homepage.graphql

In this example the template context will have three variables:

• backgroundColor - string value "hotpink"
• meta - contents of metadata.json 
• content - result of homepage.graphql query

Using Variables in GraphQL

Sometimes it's desirable to use variables in GraphQL queries. context supports this by setting a query object:

path: /
template: pages/homepage.html
context: 
  query: data/homepage.graphql
  variables:
    imageConfig:
      w: 500
      h: 500

In this example we are passing the variable imageConfig.

Global Context

You can configure context at the top level of tsg.yml this context will be provide to the templates of all the configured routes. If there is a variable with the same name in the route context and in the global context the value provided by the route will take precedence. The global context is always available using the global variable.

Using Environment Variables

Environment variables can be used inside of tsg.yml using the env object and ${} notation. For example if we want to use a different template for the homepage depending on the stage environment variable configured in our static site:

path: /
template: pages/homepage-${env.stage}.html
context: data/homepage.graphql

Image Filter Defaults

The imageDefaults property allows you to customize the default parameters passed to the image filter. Omitting this property is equivalent to the following configuration:

imageDefaults
  auto: compress,format

See the Imgix URL API docs for a full set of options. To clear all parameters use an empty object:

imageDefaults: {}

HTML Compression

TS uses Minimize, a highly configurable, well-tested, JavaScript-based HTML minifier. All options listed in the Options section of the Minimize documentation may be used.

Example

in tsg.yml

htmlCompression:
  enabled: true
  options:
    empty: true
    comments: true