Nonprofit Pizza Maker

    This package has been deprecated

    Author message:

    Please use @takeshape/ssg instead

    takeshape-ssg
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.7 • Public • Published

    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)
      {{ post | route('posts') }}
      
      Returns a relative path to a piece of content as defined by the routes in tsg.yml. The input Object must have the necessary fields specified in the route path in order to construct the path properly.
    • md
      {{ markdown | md }}
      
      Markdown to safe HTML using the CommonMark spec http://commonmark.org/
    • numberFormat(format: String)
      {{ numberField | numberformat(',.2r') }}
      # grouped thousands with two significant digits, 4200 -> "4,200"
      
      Returns a number formatted according to the the format specifier string https://github.com/d3/d3-format
    • code(language: String)
      {{ codeField | code('javascript') }}
      
      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.
    • image(params: Object)
      {{ imageField | image({w: 320, h: 240, q: 90, crop: 'faces'}) }}
      
      Returns an imgix ready url. Takes an object of keys and values for any imgix filter https://docs.imgix.com/apis/url
    • date(format: String|Object)
      {{ 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') }}
      
      Formats dates using moment.js. format can be either a format string or an object where you can specify a format and override the default timezone and locale (configured in tsg.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

    Keywords

    none

    Install

    npm i takeshape-ssg

    DownloadsWeekly Downloads

    153

    Version

    5.0.7

    License

    MIT

    Unpacked Size

    169 kB

    Total Files

    142

    Last publish

    Collaborators

    • asprouse