screenshot/README.yaml at main · cloudposse-github-actions/screenshot · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
---
#
# This is the canonical configuration for the `README.md`
# Run `make readme` to rebuild the `README.md`
#

# Name of this project
name: screenshot

# Tags of this project
tags:
  - github-action
  - composite
  - screenshot

# Logo for this project
#logo: docs/logo.png

# License of this project
license: "APACHE2"

# Screenshots
screenshots:
  - name: "Demo"
    description: "<br/>Example of a screenshot generated by this action from the [`test/html`](test/html) HTML."
    url: "docs/example.png"

# Canonical GitHub repo
github_repo: cloudposse-github-actions/screenshot

# Badges to display
badges:
  - name: "Latest Release"
    image: "https://img.shields.io/github/release/cloudposse-github-actions/screenshot.svg"
    url: "https://github.com/cloudposse-github-actions/screenshot/releases/latest"
  - name: "Slack Community"
    image: "https://slack.cloudposse.com/badge.svg"
    url: "https://slack.cloudposse.com"

related: []

# Short description of this project
description: This GitHub Action will use Puppeteer to generate screenshots from any URL or even a `file://`. It's great for creating dynamic banners for GitHub projects.

introduction: |-
  This action generates a screenshot of any website (including file://) using Puppeteer.

references:
  - name: "Cloud Posse GitHub Actions"
    description: "A collection of all Cloud Posse managed GitHub Actions"
    url: "https://docs.cloudposse.com/github-actions/"

# How to use this project
usage: |
  For a complete working example that generated the demo image, see the [`.github/workflows/test.yaml`](.github/workflows/test.yaml) workflow.

  ```yaml
  name: Generate Screenshot

  on:
    pull_request:
      types: [opened, synchronize, reopened]

  jobs:
    screenshot:
      runs-on: ubuntu-latest
      concurrency:
      group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
      cancel-in-progress: true

      steps:
      - uses: actions/checkout@v2
      - name: Run this composite action
        id: screenshot
        uses: cloudposse-github-actions/screenshot@v0
        with:
          url: "file://${{github.workspace}}/test/html/index.html"
          output: "docs/example.png"

          # Overwrite any CSS
          css: |
            body {
              background: rgb(2,0,36);
              background: linear-gradient(139deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 56%, rgba(147,0,255,1) 100%);
            }

          # Replace any text using JQuery-style CSS path selectors"
          customizations: |
            "#name": "${{ github.event.repository.name }}"

          # Set the width & height of the viewport
          viewportWidth: 800
          viewportHeight: 600
   ```


include:
- docs/github-action.md

# Contributors to this project
contributors: []