A quick-and-dirty static templating command line utility
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
src
.gitignore
LICENSE
README.md
cli.js
index.html
index.js
package-lock.json
package.json
yarn.lock

README.md

Swift-Pig

is a quick-and-dirty static templating command line utility.

license

usage

$ swpg <entry_path> <data_path> [--img=<image_path>] [--out=<dist_path>] [-w | --watch]

examples

$ swpg index.js.html dev/data.js --imgs=dev/images --out=build/
$ swpg testpage.js.html dev/data.js --out=test/ -w

data

Data can either be a JSON file or a JS file that exports either an object literal or JSON.

kittens.json

{
  "name": "Samson",
  "description": "long haired Maine coon",
  "about": "Found abandoned in a cardboard box by the freeway"
}

time.js

function getEpoch() {
  return +(new Date());
}
module.exports = {
  get time(){
    return getEpoch()
  }
}

images

If you provide Swift-pig with a path to images it will scan the directory and create an image map.

images/

images/
├── cat-1.jpg
└── cat-2.jpg

image data

{
  "cat-1.jpg" : {
    "src": "rel/path/to/cat-1.jpg",
    "width": "640px",
    "height": "426px"
  },
  "cat-2.jpg" : {
    "src": "rel/path/to/cat-2.jpg",
    "width": "640px",
    "height": "480px"
  }
}

templates

Template files follow the naming convention *.js.* where * is any alphanumeric character. This is just the name, in reality all template files are javascript and should export a function that takes content data and image data parameters and returns a string: module.exports = function(d,i){ return "..."}.

The entry template is the base template file you want to render.

index.js.html

const infoBox = require('./templates/infoBox.js.html');
module.exports = (d,i) => `
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
  <title>${d.title}</title>
</head>
<body>
  ${d.cats.map(info => infoBox(info,i,info.image)).join('')}
</main>
</body>
</html>`

infoBox.js.html

const image = (i,fp) => `<img src="${i[fp].src}" width="${i[fp].width}" height="${i[fp].height}"/>`
module.exports = (d,i,img) => `
<section>
  <h1>${d.name}</h1>
  <p>
    <strong>description:</strong>
    ${d.description}</p>
  <p>
    <strong>about:</strong>
    ${d.about}
  </p>
  ${image(i,img)}
</section>`

As seen above, if a template wants to use another template all it has to do is import it b/c everything is JS.

how to use

I haven't uploaded Swift-pig to a package manager yet so if you want to use it locally run the following in terminal:

$ git clone https://github.com/jzwood/swift-pig.git && cd swift-pig && yarn install && yarn link

can swift-pig be used for server side rendering

Technically, but don't. If you want to do server side templating use an industry standard such as HandlebarsJs. Swift-pig will let you do anything that Javascript can do which means it's super easy to shoot yourself in the foot.

can swift-pig be used as a static site generator?

Totally! I recommend using Swift-Pig in conjunction with Parcel. Point Parcel towards the Swift-Pig output file and make this file link to JS and SASS -- Parcel will automagically bundle everything.

For instance a head template might look like:

module.exports = `
<head>
  <link type="text/css" rel="stylesheet" href="path/to/styles.scss">
  <script type="text/javsascript" src="path/to/main.js" async></script>
</head>`