@takeshape/ssg
v11.10.0
Published
Static Site Generator
Downloads
2,582
Readme
Summary
This is the TakeShape static site generator.
tsg.yml
Configuration Options
templatePath: src/templates #Sets the path to look for templates
staticPath: static #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.
buildPath: build #Temporary build directory
locale: en-us #default
dates:
tz: America/New_York #default
format: LLL #default
context: #Global context available to all routes.
assets: ../../static/assets/manifest.json
[KEY]: [VALUE]
...
routes: #Routes tell TS which template to join with which context (graphql query) and the format of the resulting directory structure to generate
homepage:
path: /
template: pages/homepage.html
context: data/homepage.graphql
...
htmlCompression: #Settings for compressing/minifying the generated html
enabled: false #default
options: #Refer to Html Compression section of readme to see options
Templating
TS uses the Nunjucks templating language. You can find detailed documentation on the Nunjucks site: (https://mozilla.github.io/nunjucks/templating.html
TS specific Nunjucks Filters
route(routeName: String)
Returns a relative path to a piece of content as defined by the routes in{{ post | route('posts') }}
tsg.yml
. The input Object must have the necessary fields specified in the route path in order to construct the path properly.md
Markdown to safe HTML using the CommonMark spec http://commonmark.org/{{ markdown | md }}
numberFormat(format: String)
Returns a number formatted according to the the format specifier string https://github.com/d3/d3-format{{ numberField | numberformat(',.2r') }} # grouped thousands with two significant digits, 4200 -> "4,200"
code(language: String)
Uses prism.js to return an HTML representation of the highlighted code. Takes an optional language string. You will need to manually include the corresponding CSS in your project.{{ codeField | code('javascript') }}
image(params: Object)
Returns an imgix ready url. Takes an object of keys and values for any imgix filter https://docs.imgix.com/apis/url{{ imageField | image({w: 320, h: 240, q: 90, crop: 'faces'}) }}
date(format: String|Object)
Formats dates using moment.js.{{ date | date('MMM Do YYYY') }} {{ date | date({format: 'MMM Do YYYY', tz: 'America/Los_Angeles') }} {{ date | date({format: 'LLL', tz: 'America/Los_Angeles', locale: 'fr') }}
format
can be either a format string or an object where you can specify a format and override the default timezone and locale (configured intsg.yml
).
Configuring Block Canvas imgix settings via tsg.yml
Similarly to how the Nunjucks image filter allows you to apply imgix settings by specifying an object of keys and
values, TS also allows you to apply these same settings to images within block canvas
elements using the tsg.yml
configuration.
Imgix settings are applied per route using the following syntax:
---
routes:
homepage:
path: /
template: pages/homepage.html
context: #Context is defined as an object with a query and variables
query: data/homepage.graphql
variables:
imageConfig: #Imgix settings must be specified in a variable named imageConfig
w: 500
h: 500
Then, wherever you make your GraphQL query, ensure that the imageConfig variable is passed to the block canvas Html
query:
query($imageConfig: JSON){
home {
blockCanvasHtml(imageConfig: $imageConfig)
}
}
Imgix settings objects may be defined once and reused in multiple routes in tsg.yml
using YAML anchors
:
---
smallImageConfig: &smallImageConfig
w: 25
h: 25
largeImageConfig: &largeImageConfig
w: 500
h: 500
routes:
homepage:
path: /
template: pages/homepage.html
context:
query: data/homepage.graphql
variables:
imageConfig:
<<: *smallImageConfig
about:
path: /
template: pages/about.html
context:
query: data/about.graphql
variables:
imageConfig:
<<: *smallImageConfig
gallery:
path: /
template: pages/gallery.html
context:
query: data/gallery.graphql
variables:
imageConfig:
<<: *largeImageConfig
Html Compression
TS uses Minimize, a highly configurable, well-tested, JavaScript-based HTML minifier. You can find detailed documentation on the Minimize site.
Options
All options listed in the Options section of the Minimize site may be set:
Example
in tsg.yml
:
htmlCompression:
enabled: true
options:
empty: true
comments: true