generator-infinitely-static

    2.1.1 • Public • Published

    infinitely-static

    This is a static page generator with basic support for routing. The idea behind this tool is to streamline development of static webpages with the best of Webpack and related tools.

    What is included?

    • Linting tools with sane defaults - stylelint and eslint
    • Hot reloading in development
    • Babel with env preset activated that takes care of polyfills, as well
    • JavaScript minification and dead code removal
    • SASS compilation, prefixing, and minification
    • A library for managing media breakpoints (media-blender)
    • Handlebars as a templating language (with helpers, layouts, and partials)
    • Support for routes (flat and nested build structure)

    Getting started

    Running this is really simple. You'll need this generator and yo installed.

    npm install -g yo generator-infinitely-static
    mkdir my-project
    cd my-project
    git init
    yo infinitely-static

    Note: After the project is initialized run npm install husky --save-dev.

    Development

    When Yeoman finishes you have a working project.

    Running hot reload server

    npm start
    

    Production build

    npm run build
    

    Routes

    Adding routes is also simple. In the root of the project you will find routes.json, containing the initial index route. The route configuration also supports nesting and template data.

    {
      "index": { // points to the template file in app/templates/pages/index.hbs
        "route": "/", // don't forget the trailing slash
        "context": { // data that you can use in the page
          "user": {
            "name": "Super user"
          }
        }
      },
      "contact": {
        "route": "contact/me/" // will generate nested routes
        }
      }
    }

    Afterwards, in your templates you can use the included {{linkTo}} helper like this:

    <a href="{{linkTo 'index'}}">Home</a>

    And for the user data you can use the getDataAsString helper:

    <h1>{{getDataAsString 'user.name'}}</h1>

    If the data is simple (array, string, Number, etc.) it will be shown as usual, but if you reference an object you'll get a stringified JSON. But, remember, the data can be accessed directly by using the htmlWebpackPlugin.options object in the template:

    <h1>{{htmlWebpackPlugin.options.context.user.name}}</h1>

    That way you can iterate thru an array specified in the context using the build-in helpers.

    License

    The MIT License

    © 2016 Infinum Inc.

    Install

    npm i generator-infinitely-static

    DownloadsWeekly Downloads

    0

    Version

    2.1.1

    License

    MIT

    Last publish

    Collaborators

    • buhin
    • fvoska
    • ivicabatinic
    • dkriskov
    • kbambir
    • darkokukovec
    • andreicek
    • infinumco