npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@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)
    {{ 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