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

pagemaki

v1.0.0

Published

Simple static page generator with a bias towards Sass, Browserify, gulp, and lodash templates.

Downloads

5

Readme

Sushi image by Benjamin Ang and Threadless
Illustration credit: Benjamin Ang/Threadless

pagemaki

Pagemaki is a very basic static page generation library, meant to convert a combination of static content files with meta data (very much like basic Jekyll) and templated layout files into static HTML files that work for GitHub Pages hosting and other static HTML web servers.

Note: If you use gulp, be sure to checkout the gulp-pagemaki plugin

Jump right to the method API »

More of this shit? Why?

I built pagemaki because I needed to get quick little sites up on GitHub Pages but I still wanted to use CommonJS and Browserify, Sass for CSS, and let gulp do my builds so that I don't have to repeat template boilerplate.

This library doesn't do much out of the box--you have to set it up to do what you want.

Quick Start

Assume you have a file structure something like this:

gulpfile.js
package.json
public/
src/
  sass/
  js/
  pages/
    index.html
    dir/
      subpage.html

You can easily write a gulp task to stream your sass and js to be compiled and dropped into some 'assets' folder in your public folder, but if you want to manage those pages easily, tough.

With pagemaki, you can tell your build system to take everything in the src/pages directory and copy it over to your public folder, too, keeping the folder structure intact. You can also use layout templates and jekyll-like YAML variables in your page files, like so:

# src/pages/index.html

---
title: Homepage
layout: default
---
# My Homepage

Create a new pagemaki and parse this file (currently, by default content is unparsed but you can pass in a content parser function to convert Markdown, for instance, as seen below):

var maker = new Pagemaki({
  contentParse: function (string) {
    return myFavoriteMarkdownParser.parse(string);
  }
});

maker.parse(fs.readFileSync("src/pages/index.html"), function (err, parsed) {
  console.log(parsed);
});

Would print the following:

{
  options: {
    title: "Homepage",
    layout: "default"
  },
  content: "<h1>My Homepage</h1>"
}

Whereas you can also tell pagemaki to "make" a page, too, which parses and then attempts to drop the content into the layout described in the options. So if you had a layouts/default.html file like this:

<html>
  <head>
    <title><%= page.title || "Untitled" %></title>
  </head>
  <body>
    <%= content %>
  </body>
</html>

Then when you ran the make function:

var maker = new Pagemaki({
  contentParse: function (string) {
    return myFavoriteMarkdownParser.parse(string);
  }
});

maker.make(fs.readFileSync("src/pages/index.html"), function (err, made) {
  console.log(made);
});

Results:

<html>
  <head>
    <title>Homepage</title>
  </head>
  <body>
    <h1>My Homepage</h1>
  </body>
</html>

API

Visit the method API »