agneym / og-image-element

Custom Element used for creating Open Graph Image

<og-image-element>

To be used with Open Graph Generator Image Action

This webcomponent follows the open-wc recommendation.

Installation

npm i og-image-element

Usage

<script type="module">
  import 'og-image-element/og-image-element.js';
</script>

<og-image-element>
  <div slot="title">Title of the Post</div>
  <img slot="image" src="url to image" />
</og-image-element>

You can customise styling with CSS variables:

og-image-element {
  --heading-font: 'Aleo', serif;
  --background: #ffffff;
  --font-color: #000000;
  --font-size: 100%;
}

Testing using karma (if applied by author)

npm run test

Demoing using storybook (if applied by author)

npm run storybook

Linting

npm run lint