Skip to content

marquee/static-sdk

Repository files navigation

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)