@johannes-lindgren/storyblok-js v0.0.1-development

@johannes-lindgren/storyblok-js

@johannes-lindgren/storyblok-js is an alternative to @storyblok/js that features

• Full typescript coverage
• Content Delivery API
• Content Management API

Content Delivery Client

While the storyblok-js-client provides a lot of great functionality, it lacks support for types. @johannes-lindgren/storyblok-js solves this issue.

:information_source: The types will be useful even if you don't use typescript.

Create a new client:

const client = new ContentDeliveryClient(myToken)

Fetch content with

await client.getStory(slugs)

Choose language:

await client.getStory(slugs, { language: 'en' })

Fetch draft:

await client.getStory(slugs, { version: 'draft' })

Get links:

await client.getLinks({ starts_with: '/dir/subdir/my-content' })

Content Management Client

Typescript

Content types

Define your content types with the Block utility type:

import {Block} from "@johannes-lindgren/storyblok-js";

type Article = Block<{
    title: string
    text: string
}>

The Block utility type ensures that your type properly descibes a Storyblok component. It makes all properties optional, and adds the three properties component, _uid, and _editable. The above example is equivalent with:

type Article = {
    _uid: string
    component: string
    _editable?: string
    title?: string
    text?: string
}

Content Fields

A storyblok component has several fields. These fields can have different types. Some of these types are trivial; such as text areas (string). But other types are more complex; such as links, options, rich text, etc. Use the types in this package for your convenience:

Rich Text

import {RichText} from "@johannes-lindgren/storyblok-js";

type Article = Block<{
    richText: RichText
}>

Links

import {LinkField} from "@johannes-lindgren/storyblok-js";

type Article = Block<{
    link: LinkField
}>

Blocks

import {Block} from "@johannes-lindgren/storyblok-js";

type Article = Block<{
    blocks: Block[]
}>

Stories

import {StoryOption, StoryOptions} from "@johannes-lindgren/storyblok-js";

type Article = Block<{
    storiesSingleOption: StoryOption
    storiesMultiOptions: StoryOptions
}>

Options

import {SelfOption} from "@johannes-lindgren/storyblok-js";

type Article = Block<{
    selfSingleOption: SelfOption
    languageSingleOption: LanguageOption
    datasourceSingleOption: DatasourceOption
}>