Use JavaScript from CDN in custom previews
- 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
Assessment
This issue has not been assessed yet.