Skip to content

agneym/og-image-element

Repository files navigation

<og-image-element>

To be used with Open Graph Generator Image Action

Screenshot

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

About

Custom Element used for creating Open Graph Image

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published