Merge pull request #3 from ferdinandkeller/dev

Dev

Author: ferdinandkeller

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true
+}

Dockerfile

@@ -1,9 +1,9 @@
 # start from the official node v18 image
 # we use alpine to keep the image (relatively) small
-FROM node:18-alpine
+FROM node:20-alpine
 
 # install chromium and its dependencies
-RUN apk add --no-cache \
+RUN apk update && apk upgrade && apk add --no-cache \
     msttcorefonts-installer font-noto fontconfig \
     freetype ttf-dejavu ttf-droid ttf-freefont ttf-liberation \
     chromium \

README.md

@@ -4,7 +4,7 @@ This action will automatically render any local webpage into a PDF.
 
 Because it integrates its own web-server, it has no problems importing css, js and fonts (whether available locally or referenced online, including from websites like google fonts), and will wait for everything to render properly before rending the output to a PDF. It means your webpage doesn't have to be a static HTML page, but can also use any javascript framework.
 
-The action internally uses chromium, so the rendered PDF won't have any of the weird problems that exist with Firefox or WebKit, like:
+The action internally uses chromium, so the rendered PDF won't have any of the weird problems that can sometimes exist like:
 - font kerning
 - missing styles or resources
 - javascript not executed before rendering
@@ -14,12 +14,47 @@ Here is an example on how to use the action:
 
 ```yml
 - name: HTML website to PDF converter
-  uses: ferdinandkeller/html-to-pdf-action@v1
+  uses: ferdinandkeller/html-to-pdf-action@v2
   with:
-    - source-path: './dist'
-    - destination-path: './out.pdf'
+    - source-path: "./dist"
+    - destination-path: "./out.pdf"
 ```
 
 The `source-path` parameter specify which directory contains your builded html (your main file must be called `index.html`), while `destination-path` is the path where you want to put your PDF.
 
+With a bit more context:
+
+```yml
+name: Convert HTML to PDF
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch: # allows manual trigger of the action
+
+jobs:
+  convert-html:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Checkout the repository
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      # Run the HTML to PDF converter action
+      - name: HTML website to PDF converter
+        uses: ferdinandkeller/html-to-pdf-action@v2
+        with:
+          source-path: "./dist"
+          destination-path: "./out.pdf"
+
+      # Upload the PDF as an artifact
+      - name: Upload PDF
+        uses: actions/upload-artifact@v4
+        with:
+          name: generated-pdf
+          path: ./out.pdf
+```
+
 Even though puppeteer (which this generator uses) only supports `AMD64`, thanks to some tweeking this Dockerfile and this GitHub action can work on pretty much any architecture supported by chromium, including on `AMD64` and `ARM64`.

generate_pdf.js

@@ -42,7 +42,10 @@ if (!('destination-path' in args)) {
 // 'file:///path/to/root/style.css' to make it work
 // to avoid this, we start a server and serve the files from there, and then we can use the url 'http://127.0.0.1'
 let server = hs.createServer({
-    root: path.join(process.env.GITHUB_WORKSPACE || __dirname, args['source-path']),
+    root: path.join(
+        process.env.GITHUB_WORKSPACE || __dirname,
+        args['source-path']
+    ),
     cache: -1,
 })
 server.listen(8000, '0.0.0.0', generate_pdf)
@@ -52,37 +55,80 @@ async function generate_pdf() {
     // launch the browser
     const browser = await puppeteer.launch({
         args: [
-            // because we are using github action's docker container,
-            // we need to run as root (we can't change that)
-            // chromium throws security warning when running as root, so we need to disable the sandbox
-            '--no-sandbox',
-            // we also need to disable the shared memory, as we are running in a docker container
-            // with a limited amount of memory
-            '--disable-dev-shm-usage',
-            // absolutely needed, else you will see font kerning problems in the pdf
-            '--font-render-hinting=none',
-            // we want to use the srgb color profile, as this is the default color profile for the web
-            // without that, we will see color differences between the website and the pdf
-            '--force-color-profile=srgb',
+            // we are running inside docker, we don't want a window
+            '--headless',
+            // we provide a default (virtual) window size
+            // that way it's consistent across different environments
+            '--window-size=1920,1080',
+            // we want the window at the top left corner of the (virtual) screen
+            '--window-position=0,0',
+
+            // when starting the browser for the first time, we don't want to see a welcome page
+            // we want to directly go to the website
+            '--no-first-run',
+            // we don't want to see scrollbars
+            '--hide-scrollbars',
+            // we don't want popup saying "chromium is being controlled by automated software"
+            '--disable-infobars',
+            // we don't want to see any notifications, there is no one to interact with them
+            '--disable-notifications',
+
             // because we are generating a pdf, we don't need any extensions
+            // there shouldn't be any anyway, but just to be sure
             '--disable-extensions',
-            // we are running inside docker, we don't need a window
-            '--headless',
+
+            // we are inside a docker container, where sandboxing is broken
+            // we (likely) don't need the sandbox anyway
+            '--no-sandbox',
+            // absolutely required with our execution environment, else chromium will not start
+            '--disable-setuid-sandbox',
+
+            // we also need to disable the shared memory
+            // our container has a very limited amount of memory
+            '--disable-dev-shm-usage',
+            // we won't be using the audio, so we can mute it
+            '--mute-audio',
+            // we don't have a GPU in the docker container
+            '--disable-gpu',
+            // we don't have access to hardware acceleration
+            '--disable-accelerated-2d-canvas',
             // we don't want chromium to run any background tasks,
             // we don't need them and it might slow down the process
             '--disable-background-networking',
             '--disable-component-extensions-with-background-pages',
             '--dns-prefetch-disable',
-            // we don't need scrollbars
-            '--hide-scrollbars',
+            // we don't care about certificate errors that could hinder the process
+            '--ignore-certificate-errors',
+            // we want that to also apply to the skip list
+            '--ignore-certificate-errors-skip-list',
+            // chromium can throttle background pages, we don't want that
+            '--disable-background-timer-throttling',
+            // chromium can limit the resources of background pages, we don't want that
+            '--disable-renderer-backgrounding',
+            // chromium can also stop rendering when the page is occluded, we don't want that
+            '--disable-backgrounding-occluded-windows',
+            // in case of crash, we don't want to send a crash report
+            '--disable-breakpad',
+            // no translation is wanted
+            '--disable-features=TranslateUI,BlinkGenPropertyTrees,IsolateOrigins,site-per-process',
+
+            // we want to use the srgb color profile, as this is the default color profile for the web
+            // without that, we will see color differences between the website and the pdf
+            '--force-color-profile=srgb',
+            // we don't want the browser to scale the website
+            '--force-device-scale-factor=1',
+            // absolutely needed, else you will see font kerning problems in the pdf
+            '--font-render-hinting=none',
         ],
     })
 
     // create a page
     const page = await browser.newPage()
 
-    // set a porper user agent to act like a normal browser
-    await page.setUserAgent("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36");
+    // set a proper user agent to act like a normal browser
+    await page.setUserAgent(
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36'
+    )
 
     // go to the website
     await page.goto('http://localhost:8000', {
@@ -92,7 +138,10 @@ async function generate_pdf() {
 
     // render the page to a pdf
     await page.pdf({
-        path: path.join(process.env.GITHUB_WORKSPACE || __dirname, args['destination-path']),
+        path: path.join(
+            process.env.GITHUB_WORKSPACE || __dirname,
+            args['destination-path']
+        ),
         format: 'A4',
         printBackground: true,
     })
@@ -102,4 +151,4 @@ async function generate_pdf() {
 
     // close the server
     server.close()
-}
+}