@keditor/components/README.md

A library of generic web components that are accessible, framework agnostic, possible to style, and easy to use with data provided by Contentful

# Generic Keditor Web Components

Our project aims to create a library of generic web components that are accessible, framework agnostic, possible to style, and easy to use with data provided by [Contentful](https://www.contentful.com/).

A demo of the current components can be found at: IN PROGRESS (DEMO VIDEO).

## Usage

### Via NPM
Components can be installed via NPM

```bash
npm i @keditor/components
```

And imported in your code via ES imports:

```js
import '@keditor/components/socialmedia';
import '@keditor/components/card';
import '@keditor/components/slider';
import '@keditor/components/heromedia';
```

### Via CDN
Alternatively you can load the components from a CDN and drop them in your HTML file as a script tag. 

```html
<script type="module">
  import keditorContentfulComponent from 'https://cdn.skypack.dev/@keditor/components';
</script>
```

```html
<social-media id="contentful (entry.sys.id)" space="contentful (Space ID)" accessToken="contentful (Content Delivery API - access token)" environment="contentful (environment)"></social-media>
<card-component id="{entry.sys.id}" space="contentful (Space ID)" accessToken="contentful (Content Delivery API - access token)" environment="contentful (environment)"></card-component>
<slider-component id="{entry.sys.id}" space="contentful (Space ID)" accessToken="contentful (Content Delivery API - access token)" environment="contentful (environment)"></slider-component>
<hero-media id="{entry.sys.id}" space="contentful (Space ID)" accessToken="contentful (Content Delivery API - access token)" environment="contentful (environment)"></hero-media>
```


## Guiding Principles
* It should be easy to use these web components in decoupled projects.
* While additional components may be contributed, this project will primarily focus on creating components following along with [EzContent - A Publisher and Marketer Friendly Drupal Distribution](https://www.drupal.org/project/ezcontent).