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
#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
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