decaporg / decaporg/decap-cms

Use JavaScript from CDN in custom previews

Open
#6,861 5 comments 1 reaction 0 assignees View on GitHub
area: ui/editor/preview-pane
Dominant language
JavaScript
Stars
19.4k
Forks
3.1k
Avg merge
1d 14h
Merged PRs (30d)
9

Description

Hi,

# Overview
I am using Flowbite CSS library, which includes JavaScript. I'm having a tough time with installing their JS given my current setup with Jekyll, however their CDN works for now with my regular HTML components in Jekyll.

I am now creating the previews for each component. I am able to use the CSS library perfectly fine, however the JS from CDN isn't working for me.

# Example
**Preview Component**
```javascript
h('div', { },
h('h2', { id: `${(firstItemData.title).replace(' ', '')}-heading` },
h('button', { class: `flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border border-b-0 border-gray-200 rounded-t-xl hover:bg-gray-100`, 'data-accordion-target': `${(firstItemData.title).replace(' ', '')}-body`, 'aria-expanded': true, 'aria-controls': `${(firstItemData.title).replace(' ', '')}-body` },
h('span', { }, firstItemData.title),
h('svg', { 'data-accordion-icon': true, class: 'w-3 h-3 rotate-180 shrink-0', 'aria-hidden': 'true', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 10 6' },
h('path', { stroke: 'currentColor', 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M9 5 5 1 1 5' }, [])
)
)
),

h('div', { id: `${(firstItemData.title).replace(' ', '')}-body`, class: 'hidden', 'aria-labelledby': `${(firstItemData.title).replace(' ', '')}-heading` },
h('div', { class: 'p-5 border border-b-0 border-gray-200' },
h('div', { class: 'mb-2 text-gray-500 prose' }, '{{ first-item.content | markdownify }}')
)
)

)
```

`data-accordion-target` and similar attributes are required to make the Flowbite JS work, but I've tried with no luck. This is similar for other components with more basic JS functionality.

The `index.html` file looks _roughly_ like this:

```html

CMS.registerPreviewStyle("/assets/css/main.css");

import { AccordionComponent } from './preview-templates/AccordionComponent.js';

```

I've left out some important bits here, but I am able to export and display previews fine - it's just getting the JavaScript via CDN to work.

I'd appreciate any input to this, and I am open to suggestions or alternatives to such an implementation.

Many thanks.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.