Add SVG Support

.github/workflows/build.yaml

@@ -0,0 +1,38 @@
+name: Build and Push Docker Image
+
+on:
+    push:
+        branches:
+        - main
+    pull_request:
+        types: [opened, synchronize, reopened]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Check out code
+      uses: actions/checkout@v4
+
+    - name: Build
+      id: build
+      uses: cloudposse/github-action-docker-build-push@main
+      with:
+        registry: ghcr.io
+        organization: "${{ github.event.repository.owner.login }}"
+        repository: "${{ github.event.repository.name }}"
+        login: "${{ github.actor }}"
+        password: "${{ secrets.GITHUB_TOKEN }}"
+        platforms: linux/amd64,linux/arm64
+
+    - name: Verify Image
+      run: |
+          docker pull ${{ steps.build.outputs.image }}:${{ steps.build.outputs.tag}} 
+
+    - name: Job Summary
+      run: |
+        echo "## Docker Image Summary" >> $GITHUB_STEP_SUMMARY
+        echo '```json' >> $GITHUB_STEP_SUMMARY
+        docker inspect ${{ steps.build.outputs.image }}:${{ steps.build.outputs.tag}}  >> $GITHUB_STEP_SUMMARY
+        echo '```' >> $GITHUB_STEP_SUMMARY

.github/workflows/test.yaml

@@ -4,6 +4,10 @@ on:
   pull_request:
     types: [opened, synchronize, reopened]
 
+permissions:
+  contents: write
+  packages: read
+
 jobs:
   screenshot:
     runs-on: ubuntu-latest
@@ -17,7 +21,7 @@ jobs:
       contents: write
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
 
     - name: Run this composite action
       id: screenshot
@@ -35,8 +39,9 @@ jobs:
           "#name": "${{ github.event.repository.name }} 📷"
         viewportWidth: 2000
         viewportHeight: 800
+        token: ${{ secrets.GITHUB_TOKEN }}
 
-    - uses: stefanzweifel/git-auto-commit-action@v4
+    - uses: stefanzweifel/git-auto-commit-action@v5
       name: Commit artifact
       id: auto-commit
       env:

Dockerfile

@@ -0,0 +1,28 @@
+FROM ghcr.io/puppeteer/puppeteer:21.7.0
+
+USER root
+
+RUN apt-get update && apt-get install -y pdf2svg
+
+# Install Additional Fonts
+ARG TWITTER_COLOR_EMOJI_VERSION="14.0.2"
+ARG GOOGLE_NOTO_COLOR_EMOJI_VERSION="2.042"
+
+RUN mkdir -p /usr/share/fonts 
+
+# Solution found in https://stackoverflow.com/questions/50662388/running-headless-chrome-puppeteer-with-no-sandbox
+
+# Install Noto Color Emoji
+RUN curl --location --silent --show-error -o /usr/share/fonts/NotoColorEmoji.ttf  https://github.com/googlefonts/noto-emoji/blob/v${GOOGLE_NOTO_COLOR_EMOJI_VERSION}/fonts/NotoColorEmoji.ttf?raw=true 
+
+# Install Twitter Emoji Font
+RUN wget https://github.com/13rac1/twemoji-color-font/releases/download/v${TWITTER_COLOR_EMOJI_VERSION}/TwitterColorEmoji-SVGinOT-Linux-${TWITTER_COLOR_EMOJI_VERSION}.tar.gz && \
+    tar -xzvf TwitterColorEmoji-*.tar.gz --wildcards '*.ttf' && \
+    rm -f TwitterColorEmoji-*.tar.gz && \
+    find . -type f -wholename 'TwitterColorEmoji-*/*.ttf' -exec mv {} /usr/share/fonts \;
+
+# Rebuild the font cache
+RUN fc-cache -f -v && \
+    fc-list | grep -i emoji
+
+USER pptruser

action.yml

@@ -1,4 +1,4 @@
-name: 'Example composite GitHub action'
+name: 'Screenshot'
 description: "Generate a browser screenshot using puppeteer of any URL, including local files. Supports custom CSS overrides and Jquery style rewrites of content."
 author: [email protected]
 branding:
@@ -23,7 +23,7 @@ inputs:
     default: png
   omitBackground:
     description: 'Omit the browser default background. Enable to support transparency.'
-    default: true
+    default: 'true'
   viewportWidth:
     description: 'Viewport width in pixels'
     required: true
@@ -34,21 +34,26 @@ inputs:
     description: 'Quality of the output image (1-100, applicable for JPEG)'
     required: false
   consoleOutputEnabled:
-    descripion: 'Whether or not to output the browser console log'
-    default: true
+    description: 'Whether or not to output the browser console log'
+    default: 'true'
   deviceScaleFactor:
     description: 'Specifies the device scale factor (pixel ratio) for the web page rendering. It determines how many physical pixels are used to represent a single logical pixel. For example, a device scale factor of 2 means one logical pixel is represented by two physical pixels, commonly used for high-DPI (Retina) displays. A value of 1 uses standard pixel density. This factor affects the resolution and quality of the rendered page or screenshot.'
     default: '2'
     required: false
   fullPage:
     description: 'Screen capture the entire page by scrolling down'
-    default: false
+    default: 'false'
   waitForTimeout:
-    description: 'Number of miliseconds to delay before taking screenshot'
-    default: 500
+    description: 'Number of milliseconds to delay before taking screenshot'
+    default: '500'
   puppeteerImage:
     description: 'Docker image to run puppeteer. See https://github.com/puppeteer/puppeteer/pkgs/container/puppeteer'
-    default: 'ghcr.io/puppeteer/puppeteer:21.7.0'
+    default: 'ghcr.io/cloudposse-github-actions/screenshot:sha-65d10e40b3507a6d752bd0be8a9647f681b46f75'
+  token:
+    description: 'A GitHub token'
+    required: false
+    default: ""
+
 outputs:
   file:
     description: "File containing the generated screenshot"
@@ -104,6 +109,19 @@ runs:
         else
           echo "DOCKER_VOLUMES=-v ${{ github.workspace }}:${{ github.workspace }}:rw -v ${{ github.action_path }}:${{ github.action_path }}:rw" >> "$GITHUB_ENV" 
         fi
+
+    - name: Login to GitHub Container Registry
+      uses: docker/login-action@v3
+      if: inputs.token != ''
+      with:
+        registry: ghcr.io
+        username: ${{ github.actor }}
+        password: ${{ inputs.token }}
+
+    - name: Docker pull
+      shell: bash
+      run: |
+        docker pull ${{ inputs.puppeteerImage }}
 
     - name: Run puppeteer to take screenshot
       id: screenshot
@@ -118,5 +136,4 @@ runs:
     - id: context
       shell: bash
       run: |
-          echo "file=${{ inputs.output }}" >> $GITHUB_OUTPUT
-
+          echo "file=${{ inputs.output }}" >> $GITHUB_OUTPUT

docs/github-action.md

@@ -4,7 +4,7 @@
 
 | Name | Description | Default | Required |
 |------|-------------|---------|----------|
-| consoleOutputEnabled | consoleOutputEnabled | true | false |
+| consoleOutputEnabled | Whether or not to output the browser console log | true | false |
 | css | Custom CSS overrides | N/A | false |
 | customizations | String representation of a YAML or JSON map of CSS paths (key) and replacement (value) | N/A | false |
 | deviceScaleFactor | Specifies the device scale factor (pixel ratio) for the web page rendering. It determines how many physical pixels are used to represent a single logical pixel. For example, a device scale factor of 2 means one logical pixel is represented by two physical pixels, commonly used for high-DPI (Retina) displays. A value of 1 uses standard pixel density. This factor affects the resolution and quality of the rendered page or screenshot. | 2 | false |
@@ -13,10 +13,12 @@
 | omitBackground | Omit the browser default background. Enable to support transparency. | true | false |
 | output | Output image file path | screenshot.png | false |
 | outputType | Output image type | png | false |
+| puppeteerImage | Docker image to run puppeteer. See https://github.com/puppeteer/puppeteer/pkgs/container/puppeteer | ghcr.io/cloudposse-github-actions/screenshot:sha-65d10e40b3507a6d752bd0be8a9647f681b46f75 | false |
+| token | A GitHub token |  | false |
 | url | URL of the HTML content to convert to an image. Use file:// for local files | N/A | true |
 | viewportHeight | Viewport height in pixels | N/A | true |
 | viewportWidth | Viewport width in pixels | N/A | true |
-| waitForTimeout | Number of miliseconds to delay before taking screenshot | 500 | false |
+| waitForTimeout | Number of milliseconds to delay before taking screenshot | 500 | false |
 
 
 ## Outputs

entrypoint.sh

@@ -1,28 +1,8 @@
 #!/bin/bash
 set -ex
 
-# Install Additional Fonts
-TWITTER_COLOR_EMOJI_VERSION="14.0.2"
-GOOGLE_NOTO_COLOR_EMOJI_VERSION="2.042"
-
-mkdir -p ~/.fonts
-
-# Solution found in https://stackoverflow.com/questions/50662388/running-headless-chrome-puppeteer-with-no-sandbox
-
-# Install Noto Color Emoji
-curl --location --silent --show-error -o ~/.fonts/NotoColorEmoji.ttf  https://github.com/googlefonts/noto-emoji/blob/v${GOOGLE_NOTO_COLOR_EMOJI_VERSION}/fonts/NotoColorEmoji.ttf?raw=true
-
-# Install Twitter Emoji Font
-wget https://github.com/13rac1/twemoji-color-font/releases/download/v${TWITTER_COLOR_EMOJI_VERSION}/TwitterColorEmoji-SVGinOT-Linux-${TWITTER_COLOR_EMOJI_VERSION}.tar.gz
-tar -xzvf TwitterColorEmoji-*.tar.gz --wildcards '*.ttf'
-find . -type f -wholename 'TwitterColorEmoji-*/*.ttf' -exec mv {} ~/.fonts/ \;
-
-# Rebuild the font cache
-fc-cache -f -v
-fc-list | grep -i emoji
-
 # Install dependencies
 npm install --no-fund option 
 
 # Generate screenshot
-node main.js
+node main.js

main.js

@@ -1,7 +1,10 @@
 const puppeteer = require('puppeteer');
+const path = require('path');
 const fs = require('fs').promises; // Import the fs module
 const fsSync = require('fs');
 const yaml = require('js-yaml');
+const util = require('util');
+const exec = util.promisify(require('child_process').exec);
 
 const GITHUB_WORKSPACE = process.env.GITHUB_WORKSPACE || '.';
 const INPUT_OUTPUT = process.env.INPUT_OUTPUT || 'docs/example.png';
@@ -29,6 +32,17 @@ async function readYamlFile(filePath) {
   }
 }
 
+async function convertPdfToSvg(inputFile, outputFile) {
+  try {
+    const { stdout, stderr } = await exec(`pdf2svg ${inputFile} ${outputFile}`);
+    if(stdout)
+      console.log('stdout:', stdout);
+    if(stderr)
+      console.error('stderr:', stderr);
+  } catch (error) {
+    console.error('exec error:', error);
+  }
+}
 
 (async () => {
   const browser = await puppeteer.launch({headless: 'new', dumpio: false});
@@ -89,11 +103,22 @@ async function readYamlFile(filePath) {
     }, elementPaths);
 
     await page.waitForTimeout(2000);
-
   }
-  if (INPUT_OUTPUT_TYPE == "jpeg") {
+
+  if (INPUT_OUTPUT_TYPE == "svg") {
+    const baseExt = path.extname(INPUT_OUTPUT);
+    const baseName = path.basename(INPUT_OUTPUT, baseExt);
+    const pdfFile = `${baseName}.pdf`;
+    // First generate a PDF
+    await page.pdf({path: pdfFile, width: INPUT_VIEWPORT_WIDTH + 'px', height: INPUT_VIEWPORT_HEIGHT + 'px', printBackground: !INPUT_OMIT_BACKGROUND});
+
+    // Then convert the PDF to SVG
+    convertPdfToSvg(pdfFile, INPUT_OUTPUT);
+  } else if (INPUT_OUTPUT_TYPE == "pdf") {
+      const pdfFile = await page.pdf({path: INPUT_OUTPUT, width: INPUT_VIEWPORT_WIDTH + 'px', height: INPUT_VIEWPORT_HEIGHT + 'px', printBackground: !INPUT_OMIT_BACKGROUND});
+  } else if (INPUT_OUTPUT_TYPE == "jpeg" || INPUT_OUTPUT_TYPE == "jpg") {
     // Quality parameter is only valid for JPEG images
-    await page.screenshot({path: INPUT_OUTPUT, 'quality': INPUT_IMAGE_QUALITY, 'type': INPUT_OUTPUT_TYPE, fullPage: INPUT_FULL_PAGE, omitBackground: INPUT_OMIT_BACKGROUND});
+    await page.screenshot({path: INPUT_OUTPUT, 'quality': INPUT_IMAGE_QUALITY, 'type': 'jpeg', fullPage: INPUT_FULL_PAGE, omitBackground: INPUT_OMIT_BACKGROUND});
   } else {
     await page.screenshot({path: INPUT_OUTPUT, 'type': INPUT_OUTPUT_TYPE, fullPage: INPUT_FULL_PAGE, omitBackground: INPUT_OMIT_BACKGROUND});
   }