https://github.com/agneym/og-image-element

Custom Element used for creating Open Graph Image
https://github.com/agneym/og-image-element

component open-wc web

Last synced: about 2 months ago
JSON representation

Custom Element used for creating Open Graph Image

• Host: GitHub
• URL: https://github.com/agneym/og-image-element
• Owner: agneym
• License: mit
• Created: 2019-09-15T10:19:49.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-09-23T23:04:54.000Z (3 months ago)
• Last Synced: 2024-10-22T23:59:33.829Z (2 months ago)
• Topics: component, open-wc, web
• Language: JavaScript
• Size: 1.37 MB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# \

To be used with [Open Graph Generator Image Action](https://github.com/BoyWithSilverWings/generate-og-image)

![Screenshot](/demo/shot.png?raw=true "Element Output Generated")

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash

npm i og-image-element

```

## Usage

```html

  import 'og-image-element/og-image-element.js';

  
Title of the Post

  


```

You can customise styling with CSS variables:

```css

og-image-element {

  --heading-font: 'Aleo', serif;

  --background: #ffffff;

  --font-color: #000000;

  --font-size: 100%;

}

```

## Testing using karma (if applied by author)

```bash

npm run test

```

## Demoing using storybook (if applied by author)

```bash

npm run storybook

```

## Linting

```bash

npm run lint

```