# KreditoJS
[](https://www.jsdelivr.com/package/npm/kreditojs)
## The idea
KreditoJS ("Kreditoj" means "credits" in [esperanto](https://en.wikipedia.org/wiki/Esperanto)) is a really simple lib to create a credits page with team development and publish in easy way. Is like a credits in a final of the movie.
You can see an example at final of this readme.
## Usage
This lib was created using Vue in version 3. You can just import the vue lib, the KreditoJS lib and use. See an example bellow:
```html
Credits | Powered by KreditoJS
```
You must set the variable `window.screenplay` with credits configuration to Kreditojs render with your data.
## Creating the variable `screenplay`
The Kreditojs uses this variable to create components. There are some types of components:
1. TitleWithSub - A component that appear with a title and a subtitle
2. Credits - Credits as a slider rolling to up.
### Creating scenes
You must add an attribute to `window.screenplay` called `scenes` as an array.
```js
window.screenplay = {
scenes: [
{ ... }
],
};
```
Each scene must have two attributes:
1. componentName: A string with name of the component
2. props: Object with props to component
Example:
```js
window.screenplay = {
scenes: [
{
componentName: 'TitleWithSub',
props: {
title: 'Directed by',
subtitle: 'Kevin Feige',
},
},
],
};
```
This code will generate the image bellow:
### Example of component `Credits`
The component `Credits` has an attribute to add in props called `components`. This attributes works like `scenes`, because you must add multiple components inside.
The child components to `Credits` is:
1. Title
2. SideBySide
3. SimpleList
The component `Title` has just a prop attribute called `title`.
Ex:
```js
window.screenplay = {
scenes: [
{
componentName: 'Credits',
props: {
components: [
{
componentName: 'Title',
props: {
title: 'Cast',
},
},
// ......
```
The component `SideBySide` has a prop called `values` with an array of arrays.
The first value of each array will be place in left size. The second value will be placed in the right side.
If the second attribute is an array, will be place a list instead of a unique text.
Ex:
```js
window.screenplay = {
scenes: [
{
componentName: 'Credits',
props: {
components: [
{
componentName: 'SideBySide',
props: {
values: [
['Design', ['Roth Wigfall', 'Gledstane Shirlee']],
['Development', ['Kaitlynn Saleway', 'Higgan Lincoln', 'Marshall Willcott', 'Shepperd Caltera']],
['P.M.', 'Winnifred Tackle'],
['P.O.', 'Tandy Huggons'],
['S.M.', 'Manya Alti'],
['Big data', 'Godfry Orae'],
['Dess Code Reference', 'Cassandry Donson'],
],
},
},
},
// ....
```
Another component is the `SimpleList`. Has a prop called `lines` with an array of string.
Ex:
```js
window.screenplay = {
scenes: [
{
componentName: 'Credits',
props: {
components: [
{
componentName: 'SimpleList',
props: {
lines: [
'Jovani Jerde',
'Raheem Hoeger',
'Alec Runte',
'Wolf Raynor',
'Edgardo Lang',
'Garnett Marquis',
'Maverick Fay',
'Murray Mossie Route',
'Demond Schimmel',
],
},
},
},
// ....
```
You can see theese three examples in gif bellow:
# Running project using Vue
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn serve
```
### Compiles and minifies for production
```
yarn build
```
### Run your unit tests
```
yarn test:unit
```
### Lints and fixes files
```
yarn lint
```
### Full example result
### Example of component `Credits`
The component `Credits` has an attribute to add in props called `components`. This attributes works like `scenes`, because you must add multiple components inside.
The child components to `Credits` is:
1. Title
2. SideBySide
3. SimpleList
The component `Title` has just a prop attribute called `title`.
Ex:
```js
window.screenplay = {
scenes: [
{
componentName: 'Credits',
props: {
components: [
{
componentName: 'Title',
props: {
title: 'Cast',
},
},
// ......
```
The component `SideBySide` has a prop called `values` with an array of arrays.
The first value of each array will be place in left size. The second value will be placed in the right side.
If the second attribute is an array, will be place a list instead of a unique text.
Ex:
```js
window.screenplay = {
scenes: [
{
componentName: 'Credits',
props: {
components: [
{
componentName: 'SideBySide',
props: {
values: [
['Design', ['Roth Wigfall', 'Gledstane Shirlee']],
['Development', ['Kaitlynn Saleway', 'Higgan Lincoln', 'Marshall Willcott', 'Shepperd Caltera']],
['P.M.', 'Winnifred Tackle'],
['P.O.', 'Tandy Huggons'],
['S.M.', 'Manya Alti'],
['Big data', 'Godfry Orae'],
['Dess Code Reference', 'Cassandry Donson'],
],
},
},
},
// ....
```
Another component is the `SimpleList`. Has a prop called `lines` with an array of string.
Ex:
```js
window.screenplay = {
scenes: [
{
componentName: 'Credits',
props: {
components: [
{
componentName: 'SimpleList',
props: {
lines: [
'Jovani Jerde',
'Raheem Hoeger',
'Alec Runte',
'Wolf Raynor',
'Edgardo Lang',
'Garnett Marquis',
'Maverick Fay',
'Murray Mossie Route',
'Demond Schimmel',
],
},
},
},
// ....
```
You can see theese three examples in gif bellow:
# Running project using Vue
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn serve
```
### Compiles and minifies for production
```
yarn build
```
### Run your unit tests
```
yarn test:unit
```
### Lints and fixes files
```
yarn lint
```
### Full example result
