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

parcel-plugin-ssg

v0.1.25

Published

A parcel plugin for adding basic static site generator features

Downloads

3

Readme

parcel-plugin-ssg

Adds basic static site generator functionality to Parcel

Tries to supports any consolidate.js template engine on top of the built-in PostHTML functionality. See official support for guaranteed support.

Usage

Add the plugin to your project as a dependency:

npm install parcel-plugin-ssg posthtml-expressions --save

Update or add a posthtml.config.js to the root of your project with the following contents:

module.exports = (ctx) => {
    return {
        plugins: {
            'posthtml-expressions': {locals: ctx.locals}
        }
    }
}

Now you can start using the following features:

Output files

This plugin modifies Parcel's output behaviour for supported assets that output HTML files, in order to generate valid file structures for websites.

For example, while example.html would be output to example.html normally, in this case it is output as example/index.html to enable proper URL structures for a website.

Consolidate.js Template Engines

To use a consolidate.js compatible template engine, simply create a new asset with a valid file extension for that engine.

View the extension map for more details.

Front matter

Front matter is structured data at the top of a valid asset type that will output HTML.

It allows you to define data to be used inside of your asset to dynamically generate markup, keep your content DRY, and setup custom display logic.

Front matter is defined as YAML at the top of the asset, with an opening and closing delimiter ---. E.g:

example.njk

---
title: My example page
description: This is my example page
list:
 - item 1
 - item 2
 - item 3
---
<h1>{{ title }}</h1>
<p>{{ descroption }}</h2>
<ul>
{% for item in list %}
    <li>{{ item }}</li>
{% endfor %}

Becomes:

example/index.html

<h1>My example page</h1>
<p>This is my example page</p>
<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

Global data through data files

Global data can also be made available to all supported asset types using data files.

Data files are any asset found in the root directory of your Parcel project matching the following asset types:

  • CSV
  • JSON/JSON5
  • YAML
  • TOML
  • JavaScript (only if the file exports an object).

Data files are made available through a globals variable in your HTML-output assets, and are accessible by their file path, relative from the Parcel project root.

Some examples:

If you had a JSON file accessible from the root at example.json:

example.json

{
    "exampleVal": true
}

exampleVal can be accessed in your views using globals.example.exampleVal.


If you had a JSON file accessible from the root at data/example.json:

data/example.json

{
    "exampleVal": true
}

exampleVal can be accessed in your views using globals.data.example.exampleVal.


If you had a JSON file accessible from the root at admin/public/example.json:

admin/public/example.json

{
    "exampleVal": true
}

exampleVal can be accessed in your views using globals.admin.public.example.exampleVal.

Caveats

Please be aware that if you have two sibling assets with the same name, their data will be combined in the order that Parcel finds them.

For example, if you had a JSON and YAML file accessible from the root at example.json and example.yaml, they will be combined. Any identical keys will be overwritten.

Configuring engines

Each consolidate engine can be configured by adding a valid configuration file for that engine to the root of your project, following the conventions:

  • .{{ engine }}rc
    • Must be a valid JSON object of the engine's standard config
  • .{{ engine }}.js
    • Must export:
      • a JavaScript object of the engine's standard config
      • a function that rteurns a JavaScript object of the engine's standard config

E.g, for nunjucks you can add a .nunjucksrc or .nunjucks.js to the root of your project to configure the engine.

.nunjucksrc:

{
    "autoescape": true,
    "throwOnUndefined": false,
    "trimBlocks": false,
    "lstripBlocks": false,
    "tags": {
        "blockStart": '<%',
        "blockEnd": '%>',
        "variableStart": '<$',
        "variableEnd": '$>',
        "commentStart": '<#',
        "commentEnd": '#>'
    }
}

.nunjucks.js:

module.exports = () => {
    return {
        autoescape: true,
        throwOnUndefined: false,
        trimBlocks: false,
        lstripBlocks: false,
        tags: {
            blockStart: '<%',
            blockEnd: '%>',
            variableStart" '<$',
            variableEnd: '$>',
            commentStart: '<#',
            commentEnd: '#>'
        }
    }
}

Official support

Currently the following consolidate.js template engines are officially supported: