https://github.com/htmlcsstoimage/action

Automate image generation with HTML/CSS to Image API + GitHub Actions
https://github.com/htmlcsstoimage/action

Last synced: about 2 months ago
JSON representation

Automate image generation with HTML/CSS to Image API + GitHub Actions

• Host: GitHub
• URL: https://github.com/htmlcsstoimage/action
• Owner: htmlcsstoimage
• License: mit
• Created: 2019-11-25T14:26:02.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T13:24:45.000Z (over 1 year ago)
• Last Synced: 2024-07-18T05:39:26.543Z (2 months ago)
• Language: JavaScript
• Homepage: https://htmlcsstoimage.com
• Size: 358 KB
• Stars: 26
• Watchers: 4
• Forks: 3
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# HTML/CSS to Image Action

Convert HTML/CSS to an image (png, jpg or webp) using GitHub Actions.

## Set your secrets

Sign up for an API key at https://htmlcsstoimage.com. Then set the following secrets in your repository. The values for each are available on your [dashboard](https://htmlcsstoimage.com/dashboard).

- `HCTI_USER_ID`

- `HCTI_API_KEY`

## Add to your workflow

```yml

- name: Create image

  id: create_image

  uses: htmlcsstoimage/action@v1

  with:

    hcti_user_id: ${{ secrets.HCTI_USER_ID }}

    hcti_api_key: ${{ secrets.HCTI_API_KEY }}

    html: "
Hello, world
"

    css: ".box { width: 200px; height: 200px; font-family: 'Roboto' }"

    google_fonts: "Roboto"

```


Here's a full example in a workflow.

```yml

on:

  push

name: Generate image

jobs:

  image:

    name: Cowsays

    runs-on: ubuntu-latest

    steps:

    - name Create image

      uses: htmlcsstoimage/action@v1

      id: create_image

      with:

       hcti_user_id: ${{ secrets.HCTI_USER_ID }}

       hcti_api_key: ${{ secrets.HCTI_API_KEY }}

       html: "
Hello, world
"

       css: ".box { width: 200px; height: 200px; font-family: 'Roboto' }"

       google_fonts: "Roboto"

    - name: Print url

      uses: mscoutermarsh/cowsays-action@master

      with:

        text: ${{ steps.create_image.outputs.url }} 

        color: "green"

```




## Output

The API will return a URL with your created image.

```

  with:

    hcti_user_id: ***

    hcti_api_key: ***

    html: 
Hello, world

    css: .box { width: 400px }

{

  url: 'https://hcti.io/v1/image/8bfe53b8-fcd3-4cd9-9aa5-2fe67046d59c'

}

```


You can then access it via the `outputs` in your next steps to pass it to another Action. `${{ steps.create_image.outputs.url }}`. The `create_image` comes from the `id` set in your step using this Action.