Content Sequence Builder

An API-based Vue component for planning radio episodes. Visit the demo page!

Installation

The content sequence builder is available on NPM and can be installed with your favorite package manager.

# npm
npm install --save vue @lohro/content-sequence-builder

# yarn
yarn add vue @lohro/content-sequence-builder

vue is required as peer dependency to avoid bundling it as part of the content sequence builder package.

Usage

Component instantiation

The content sequence builder is instantiated through the ContentSequenceBuilder vue component.

import { ContentSequenceBuilder, de, fixturesAPI } from '@lohro/content-sequence-builder'
import { createApp } from 'vue'

// This only works if you use a bundler that supports loading CSS files
// from JavaScript/TypeScript. Most bundlers do that automatically but if
// you do not use one our yours does not, you need to figure something out :).
import '@lohro/content-sequence-builder/dist/style.css'

// Creates a new Vue App and mounts the ContentSequenceBuilder at its root.
// Somewhere in your HTML you should have a little `<div id="app"></div>`.
const app = createApp(ContentSequenceBuilder, {
  api: fixturesAPI,
  contentSequenceId: 1,
  language: de,
})
app.mount('#app')

Some APIs like the Lohrothek API require some configuration. This is done through the configuration interface of the individual APIs.

API configuration

import { lohrothekAPI } from '@lohro/content-sequence-builder'

// The useAPIConfiguration returns an object which is different for
// each API. The lohrothek API only provides the `apiBaseURL` property.
const { apiBaseUrl } = lohrothekAPI.useAPIConfiguration()

// Most exported configuration parameters will be vue refs so be sure
// to always use `something.value =` for assignments and not just `something =`.
apiBaseUrl.value = `${location.origin}/api`

Bring your own API

The content sequence builder package comes with its own API implementations, but you’re free to bring your own. All that is required is for it to implement the API type found in src/types.ts.

Development

Start working with the fixtures by running:

npm run dev -- --open

You may switch to one of the integrated APIs by selecting it from the API dropdown menu. If you use an external API available through HTTP, make sure that it has proper CORS configuration and will allow requests from your origin (likely something like http://localhost:5173).

If you’re using the lohrothek API with docker compose you can add the following lines to your local .env file:

LOHROTHEK_CORS_ALLOWED_ORIGINS=http://localhost:5173
LOHROTHEK_CORS_ALLOW_CREDENTIALS=True