PRESENTA Lib

// your data
const data = [
    'Hello There!',
    'It\'s PRESENTA Lib here!',
    'I can create presentational documents from data.',
    'Any kind of data 🙂'
]

// remap the dataset with the template' required fields
const frames = data.map((text,index) => ({text, page: index+1}))

// create the final config using @presenta/config-interpolator
const config = await interpolate({frames}, templateConfig)

// create the document within your wrapper
await new Presenta('#wrapper', config)

// have fun!

// your data
const frames = []
for(let i=0; i < 16; ++i){
    if(i % 4 === 0){
        frames.push({
            i1: 'https://source.unsplash.com/random',
            i2: 'https://source.unsplash.com/random',
            i3: 'https://source.unsplash.com/random',
            i4: 'https://source.unsplash.com/random'
        })
    }
}

// create the final config using @presenta/config-interpolator
const config = await interpolate({frames}, templateConfig)

// create the document within your wrapper
await new Presenta('#wrapper', config)

const products = await fetchAirtable // your fetch implementation

// remap the dataset with the template' required fields
const frames = products.map(d => {
    return {
        type: d.fields.Type,
        name: d.fields.Name,
        price: '$' + d.fields['Unit cost'],
        imagebg: d.fields.Images[0].url,
        imagefg: d.fields.Images[0].url
    }
})

const config = await interpolate({frames}, templateConfig)
await new Presenta('#wrapper', config)

// done!