Ziptied

Modernizing static sites the easy way.

This is still a WIP and should not be used for anything critical. Watch out for a 1.0 release.

What is ziptied?

Zipitied is a simplified system of hydrated reactive components, ready to zip-tie to existing SSG templated webpages.

Why ziptied?

There are a lot of reactive web frameworks in the wild, and most of them are concerned with the creation of dynamism and interactivity from the outset; you need to use their concepts from the start, and trying to bolt on pieces of functionality later is a nightmare. You ether would need to create a new website and serve only the routes that actually are finished or mix a bloated system with your existing code.

This library allows you to make minimal modifications to your existing markup, add only the functionality you need on new code, and bolt on the desired interactivity only to the parts you need.

Therefore, you could grab a regular Hugo or Jekyll site and add new functionality with minimal effort and minimal disruption of legacy code, and without the need to extend the generator with custom, cumbersome plugins.

In fact, this library was born from that usecase, when a Jekyll site got so crufty and fragile that we got locked to an obsolete version of Ruby, and adding any new functionality to it was impossible without rewriting a lot of third-party code.

How it works

Ziptied is built on top of RxJS and Web Components.

To use it, you add this library to your existing JS code, define the components you need (or use some of the builtin ones), and then mark existing elements with custom classes and data attributes to indicate with elements will be replaced by the interactive components, and if there is some initial state to be passed.

This rather inelegant implementation allows you to only modify the existing markup by appending easily modifiable attributes to the elements; no matter if you are using a site builder or a premade template, you only need to be able to add a new class (and load the script) to transform any existing element into a reactive component.

Check out the docs for more info.

Installation

Using NPM:

npm install --save ziptied

Using CDN:

<script src="https://unpkg.com/ziptied@latest/umd/ziptied.js"></script>

Contributors

• Code, design, and documentation: @aordano