Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@croutonn/og-image-element

croutonn2MIT0.2.4

Webcomponent og-image-element for generating Open Graph Images

readme

<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