# @lohro/content-sequence-builder

> An API-based Vue component for planning radio episodes. Visit the [demo page](https://content-sequence-builder.dev.lohro.de/)!

Latest version **1.2.1** (published 2022-09-14) · AGPL-3.0-or-later license · 0 weekly downloads

## Install

```sh
npm install @lohro/content-sequence-builder
pnpm add @lohro/content-sequence-builder
yarn add @lohro/content-sequence-builder
bun add @lohro/content-sequence-builder
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2022-09-14 |
| First published | 2022-08-22 |
| Weekly downloads | 0 |
| License | AGPL-3.0-or-later |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 1.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | kmohrf |

## Links

- npm: https://www.npmjs.com/package/@lohro/content-sequence-builder
- Repository: https://git.hack-hro.de/lohro/lohrothek/content-sequence-builder
- npm.io page: https://npm.io/package/@lohro/content-sequence-builder

## Dependencies (5)

- [snarkdown](https://npm.io/package/snarkdown.md) ^2.0.0
- [sortablejs](https://npm.io/package/sortablejs.md) ^1.15.0
- [@vueuse/core](https://npm.io/package/@vueuse/core.md) ^9.1.0
- [@headlessui/vue](https://npm.io/package/@headlessui/vue.md) ^1.6.7
- [sortablejs-vue3](https://npm.io/package/sortablejs-vue3.md) ^1.2.0

## Recent versions

- 1.2.1 (latest) — 2022-09-14
- 1.2.0 — 2022-09-13
- 1.1.0 — 2022-08-25
- 1.0.0 — 2022-08-22

## README

# Content Sequence Builder

An API-based Vue component for planning radio episodes.
Visit the [demo page](https://content-sequence-builder.dev.lohro.de/)!

## Installation

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

```shell
# 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.

```typescript
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

```typescript
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:

```shell
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](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) 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:

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

---
_Source: https://npm.io/package/@lohro/content-sequence-builder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._