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

tt-panini

v1.3.3

Published

A super tiny flat file compiler.

Downloads

7

Readme

Panini

Build Status npm version Coverage Status Dependency Status

A super simple flat file generator for use with Gulp. It compiles a series of HTML pages using a common layout. These pages can also include HTML partials, external Handlebars helpers, or external data as JSON or YAML.

Panini isn't a full-fledged static site generator—rather, it solves the very specific problem of assembling flat files from common elements, using a templating language.

Installation

npm install panini --save-dev

Usage

Feed Panini a stream of HTML files, and get a delicious flattened site out the other end.

var gulp = require('gulp');
var panini = require('panini');

gulp.task('default', function() {
  gulp.src('pages/**/*.html')
    .pipe(panini({
      root: 'pages/'
      layouts: 'layouts/',
      partials: 'partials/',
      helpers: 'helpers/',
      data: 'data/'
    }))
    .pipe(gulp.dest('build'));
});

Note that Panini loads layouts, partials, helpers, and data files once on first run. Whenever these files change, call panini.refresh() to get it up to date. You can easily do this inside a call to gulp.watch():

gulp.watch(['./src/{layouts,partials,helpers,data}/**/*'], [panini.refresh]);

Options

root

Type: String

Path to the root folder all pages live in. This option does not pull in the files themselves for processing—that's what gulp.src() is for. This setting tells Panini what the common root of your site's pages is.

layouts

Type: String

Path to a folder containing layouts. Layout files can have the extension .html, .hbs, or .handlebars. One layout must be named default. To use a layout other than the default on a specific page, override it in the Front Matter on that page.

---
layout: post
---

<!-- Uses layouts/post.html as the template -->

All layouts have a special Handlebars partial called body which contains the contents of the page.

<!-- Header up here -->
{{> body}}
<!-- Footer down here -->

pageLayouts

Type: Object

A list of presets for page layouts, grouped by folder. This allows you to automatically set all pages within a certain folder to have the same layout.

panini({
  root: 'src/pages/',
  layouts: 'src/layouts/',
  pageLayouts: {
    // All pages inside src/pages/blog will use the blog.html layout
    'blog': 'blog'
  }
})

partials

Type: String

Path to a folder containing HTML partials. Partial files can have the extension .html, .hbs, or .handlebars. Each will be registered as a Handlebars partial which can be accessed using the name of the file. (The path to the file doesn't matter—only the name of the file itself is used.)

<!-- Renders partials/header.html -->
{{> header}}

helpers

Type: String

Path to a folder containing Handlebars helpers. Handlebars helpers are .js files which export a function via module.exports. The name used to register the helper is the same as the name of the file.

For example, a file named markdown.js that exports this function would add a Handlebars helper called {{markdown}}.

var marked = require('marked');

module.exports = function(text) {
  return marked(text);
}

data

Type: String

Path to a folder containing external data, which will be passed in to every page. Data can be formatted as JSON (.json) or YAML (.yml). Within a template, the data is stored within a variable with the same name as the file it came from.

Data can also be a .js file with a module.exports. The data returned by the export function will be used.

Data can also be inserted into the page itself with a Front Matter template at the top of the file.

Lastly, the reserved page variable is added to every page template as it renders. It contains the name of the page being rendered, without the extension.

CLI

You can also use panini via the CLI.

Usage: panini --layouts=[layoutdir] --root=[rootdir] --dest=[destdir] [other options] 'pagesglob'

Options:
  --layouts  (required) path to a folder containing layouts
  --root     (required) path to the root folder all pages live in
  --dest     (required) path to the folder compiled pages should get sent to
  --partials            path to root folder for partials
  --helpers             path to folder for additional helpers
  --data                path to folder for additional data

the argument pagesglob should be a glob describing what pages you want to apply panini to.

Example: panini --root=src/pages --layouts=src/layouts --partials=src/partials --data=src/data --output=dist 'src/pages/**/*.html'

Local Development

git clone https://github.com/zurb/panini
cd panini
npm install

Use npm test to run tests.