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

@jlpenny/staticton

v0.0.7

Published

A static site renderer

Downloads

2

Readme

StatiCTON

A javascript static site generator

What is it?

StatiCTON is an easy to use static site generator, similar to Jekyll. Coming in at under 300 lines of code, it's surpringly powerful.

How to use

First steps: objects.yml file

The configuration format is stored in a file called objects.yml in the build directory. The only really 'required' variable is base, which is the directory to output to.

From the command line

You can simply run it from the commandline directly using node ./index.js -d [build_dir], if [build_dir] is not specified, it will just take the current directory.

As a library

If you want, you can include StatiCTON as such:

var staticton = require('staticton'); var test = new staticton('./build_path'); test.all();

This will build the build path.

Using staticton as a library - continued

By default, the staticton library will write out to the specified base directory. However, you can also simply not have it write to a directory, by specifying 'false' as the first parameter of .all. For example:

test.all(false);

This tells staticton not to build to files, but instead write to a variable called 'output' in the class. Output is an object containing all of the rendered pages, the index being the page's relative URL. For instance:

test.output['/index.html']

So simple! This way, you can serve your data right from memory however you want, and even rebuild it on the fly by calling all again. This is useful if you have a frontend site which consits of mixed static and dynamic pages, or if you simply want to serve it straight out of the RAM.

Templating engine

Templates have a simple format.

{{ variable }} displays a variable

{% statement %} performs a statement.

Example statements

{% for x in/of y %} same as JS for ( let x in/of y ) {% foreach x as v, i %} same as JS x.forEach(v, i) {% end/endfor/endif %} is simply replaced with a finishing curly bracket {% endforeach %} closes a foreach statement {% if x == y %} if(x == y), you also have {% else %} and {% elseif x == y %}

API

The renderer class has a member called globals which contains variables which are accessible within templates. You can define your own, too. Built in ones includes:

route(url)

This generates a full URL for the relative url.

where(pages, statement).pages

This queries a pages object with the callback 'statement,' which is passed to Array.filter. This actually returns a 'query' class on which you can perform further sort or where transformations, then .pages contains the current list of available pages.

sort(pages, statement).pages

The same as where but passes the statement to Array.sort.

Example repository

To be honest, there is much more to it than this. But until I write a proper documentation for the site templating system itself, I invite you to head over to the repo of my personal site's source to review how you could set up a build directory.

Go to the repository