zerocms

zeroCMS is a headless/decoupled CMS focused on fast and easy editing, and straightforward integration into your development processes. Find out more at https://zerocms.dev

This library wraps the content serving API for easier consumption in Javascript-based apps and web sites. For documentation on what all the configuration options and doc fields mean see the online docs at https://zerocms.dev/integrations

If you use React or Vue, try one of the framework-specific libraries for better integration with your UI framework.

Note: This library is written in Typescript, and Typescript bindings are included.

Getting started

Install

First, install the package with npm or yarn:

npm i @tamperan/zerocms

The zeroCMS object

To retrieve content, you'll need a zeroCMS object. You can have many of these if you need to pull from multiple repos, but in most cases you'll just need one.

Before you start, you'll need a repo in zeroCMS and you'll need to know its 'slug' - which you will have chosen when creating the Repo and is displayed in the Deploy section in the UI.

import {ZeroCMS, create} from "@tamperan/zerocms";

const options = {
    dev: false, // set to true in dev mode for console log output when content is retrieved
    region: 'us',
    repo: 'my_repo_slug',
    //target: '_',  - set this if you approve/publish to a specific Target for your UI
    locale: 'en', // fetch content in this locale
}

const zerocms = create(options);

Retrieving content

Content is retrieved asynchronously, so the get() method returns a Promise.

If your repo has a doc type with slug pages and a doc with slug about-us then the following can be used to retrieve the document:

zerocms.get('pages', 'about-us').then(res => {
    // the result - res - will be a Doc object
})

Of course you should also catch() as well, in case of connectivity errors or accidentally providing non-existent doc slugs.

Displaying content

Once you have retrieved a Doc object, you can interrogate it for renderable content.

The elements property will contain an ordered array of the structured content elements in the doc; e.g. plaintext, richtext, image or video elements. Iterate through these to render them to your UI.

See https://zerocms.dev/integrations for documentation on all the elements.

Internal links

Note that internal links, i.e. links from one doc to another, will have a data-slug property that references the doc being linked to.

If your repo is configured to allow internal/doc links, then you will need to interpret and handle these references to implement appropriate navigation from doc to doc in your UI.