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

proof-sdk

v0.10.37

Published

> This is _pre-release_ software. Unless you work at Marquee, or are one of its clients or partners, you probably should not do anything important with this yet.

Downloads

16

Readme

This is pre-release software. Unless you work at Marquee, or are one of its clients or partners, you probably should not do anything important with this yet.

Proof SDK

NPM version Build Status

The Proof SDK is framework for compiling web publications and deploying them into static hosting environments. The SDK as a whole is designed to work with the Proof editorial suite and content platform, but parts of it may be used in a standalone fashion.

This package requires node and is distributed through npm. It assumes a willingness to work in a command line environment and a basic familiarity with node and git. Care is taken to keep the learning curve minimal, making projects developed using this SDK accessible to a wide variety of skill sets.

Technical Overview

The SDK provides components and tools for building compilers that compile structured content and code into HTML, JavaScript, and CSS for front-end presentation of a publication. While not required, the SDK facilitates using JSX and Sass. The compiled output can then be deployed to scalable static hosting providers such as Amazon S3 and distributed across a content delivery network.

The SDK includes a React-based framework for declaratively describing the high level structure of the site. This technique allows even large sites with tens of thousands of entries, complex content groupings, and related metadata entities to be deployed in a static fashion. It looks something like this:

<HTMLView
    component   = { CollectionDetail }
    props       = { CollectionDetail.mapDataToProps(collection) }
    path        = { collection.slug }
>
    <Enumerate items={ data.stories } path='stories'>
        <HTMLView
            component   = { StoryDetail }
            props       = { StoryDetail.mapDataToProps }
            path        = { story => story.slug }
        />
    </Enumerate>
</HTMLView>

Included in the SDK is a local development server that automatically compiles changes, and an asset pipeline optimized for a browserify- and Sass-based workflow that provides minification and hashing in production mode. There is also a set of common components using React.js to generate markup as well as necessary client-side JS and structural styles.

For compilation on content-change, Proof runs a service that executes per-publication compilers whenever a publication’s content is released. This service also will run a compiler when it receives a git push, providing a way to centralize publication deployments. The Marquee content platform also has a search endpoint that can be used client-side to provide full text search and facilitate more dynamic effects. Additional custom or third party microservices and backends may be used to create a rich, progressively enhanced reader experience.

Getting Started

Using the Proof content platform with an requires a Publication Token for the corresponding publication. The best way to begin tinkering on a new SDK project is to clone the sample static project which includes a token for reading from a sample publication. By swapping this read-only token with another token issued through Proof, the same SDK project could use another publication's content.

Note: the SDK has not been tested on Windows and very likely will not work properly. If Windows support is required, please create an issue.

  1. Make sure node and git are installed by running these commands:

    $ node --version
    v7.6.0
    $ git --version
    git version 2.10.1

    The Static SDK requires at least node v7.6.x. If you get a command not found error for node, go to nodejs.org to download and install node. Generally any version of git should work. If you do not have git, get it here.

  2. Create a new directory for your publication and extract the latest release of the sample project:

    $ mkdir <project name> && cd <project name>
    $ curl -L https://github.com/marquee/frontend-boilerplate/tarball/master | tar -zx -C . --strip-components 1
  3. Start the development server with the following command:

    $ npm run develop

    Details about the process will scroll down the screen, but when it’s done, you can simply visit localhost:5000 to view the new project in a browser. It should look something like this. View source or poke around in the generated .dist/ folder of the project to see what the compiler generates.

  4. … make changes, etc

  5. Commit changes to the develop branch.

  6. When ready to cut a release

    1. Increment the version number in package.json in its own commit, with the comment matching the new version number, eg: v0.8.0 (you can see the structure of the workflow in the git history)
    2. Merge develop into master using --no-ff: git merge --no-ff develop
    3. Create a tag at this merge commit with the version number
    4. Push develop, master, --tags
    5. Run npm publish
    6. Run npm run deploy:docs (requires a env.json with the right S3 credentials)