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

buildspace

v0.1.8

Published

A tool to pipe around templates, data, and documents.

Downloads

2

Readme

Buildspace

Buildspace is a tiny tool meant to replace all the boilerplate code I keep writing to build my static sites.

It's not necessarily a static site generator, but a small build tool to help build static site generators. It's extremely simple in functionality, effectively only able to compile templates and copy files.

Buildspace was made for myself first, it's probably doing a bunch of stuff incorrectly, but this isn't meant for mass consumption, so oh well.

Basic Usage

Install with npm.

npm i buildspace

Then some basic boilerplating (sorry can't get rid of all of it)

const { BuildSpace } = require('buildspace');
const Template = require('./src/template');
const Page = require('./src/pages');

const bs = new BuildSpace();
bs.register(Page, Template);
bs.build();

To explain:

You create a new instance of Buildspace, register pages to it, along with the Template it will use. Then you simply tell buildspace to run using .build().

Templates are very basic classes, all they are required to have is a function called build which optionally takes in data of some kind and outputs a string.

// Basic Template Example
module.exports = class Template {
	build = (data) => '';
}

Pages are a bit more complicated, but are also simple classes. They are required to have the properties path and data. Path is the relative path where buildspace will store the compiled html file and data is the data the page provides the template.

// Basic Page Example
module.exports = class Page {
	path = 'index';
	data = {
		hello: 'world'
	};
}

[Slightly More] Advanced Setup

Advanced Functions

Since the intent of any library is to minimize code reuse, I've added a few functions to aid in that.

.setDefaultTemplate(TemplateConstructor)

This function takes a template class and sets buildspace to auto assign it to any page registration without a template specified.

.bulkRegister(pageArray, template?)

The function will loop through the provided page array and register all of them using the default template. Optionally you may pass a Template class into this function to be used instead of the default.

Options

Buildspace also has a few options that can be passed into it's constructor to modify its behavior.

const bs = new Buildspace({
	inputDir: 'src',
	outputDir: 'out',
	copyDirs: ['media']
});

source

Default: src Input Directory where the source code of your site lives. This isn't actually used for anything besides in conjunction with the copy directories property by default.

output

Default: out Output directory where buildspace will write all of its output to.

copy

Default: [] Copy directories is an array of strings which list all the directories which you would like buildspace to copy to the output without any further modification. I typically add things like my fonts or css files to this list.