-

Author: GrumpTech

.prettierignore

@@ -1,4 +1 @@
-tests/email.html
-tests/image.html
-tests/pagedjs.html
-tests/pagedjs/paged.polyfill.min.js
+tests/*

Dockerfile

@@ -1,14 +1,17 @@
-FROM node:18
+FROM node:20
+
+# Configure default locale (important for chrome-headless-shell).
+ENV LANG=en_US.UTF-8
 
 # Install latest chrome dev package and fonts to support major charsets (Chinese, Japanese, Arabic, Hebrew, Thai and a few others)
 # Note: this installs the necessary libs to make the bundled version of Chrome that Puppeteer
 # installs, work.
 RUN apt-get update \
     && apt-get install -y wget gnupg \
     && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | gpg --dearmor -o /usr/share/keyrings/googlechrome-linux-keyring.gpg \
-    && sh -c 'echo "deb [arch=amd64 signed-by=/usr/share/keyrings/googlechrome-linux-keyring.gpg] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
+    && sh -c 'echo "deb [arch=amd64 signed-by=/usr/share/keyrings/googlechrome-linux-keyring.gpg] https://dl-ssl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
     && apt-get update \
-    && apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-khmeros fonts-kacst fonts-freefont-ttf libxss1 \
+    && apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-khmeros fonts-kacst fonts-freefont-ttf libxss1 dbus dbus-x11 \
       --no-install-recommends \
     && rm -rf /var/lib/apt/lists/* \
     && groupadd -r pptruser && useradd -rm -g pptruser -G audio,video pptruser
@@ -17,6 +20,8 @@ USER pptruser
 
 WORKDIR /home/pptruser
 
+ENV DBUS_SESSION_BUS_ADDRESS=autolaunch:
+
 COPY package.json .
 COPY package-lock.json .
 
@@ -27,4 +32,4 @@ COPY keys/jwt-public.key keys/jwt-public.key
 
 EXPOSE 5000
 
-CMD node template-renderer.js
+CMD ["node", "template-renderer.js"]

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 GrumpSolutions
+Copyright (c) 2023 GrumpTech
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,77 +1,48 @@
-# Template renderer
+# template-renderer
 
-Creating PDF documents is a common task in software development. This repository shows how to create PDF's from HTML templates using three remarkable open source projects. It shows a free and open source alternative to commercial software like Aspose.Pdf or Exstream.
-
-## General information
-
-### Puppeteer
-
-An open source Node.js library providing control to Chrome or Chromium used for automated testing and creating PDF's. Puppeteer is maintained by the Chrome DevTools team.\
-<https://pptr.dev>\
-<https://github.com/puppeteer/puppeteer>\
-License: See project, Apache License 2.0 at time of writing
-
-### mustache.js
-
-An open source javascript library to render mustache templates. The [mustache template syntax](https://github.com/janl/mustache.js#templates) is explained in the [mustache.js github repository](https://github.com/janl/mustache.js#templates). The mustache template engine is [widely available](https://mustache.github.io).\
-License: See project, MIT License at time of writing
-
-### Paged.js
-
-An open source library to paginate HTML content for printing to PDF. This library is used to design books with HTML and CSS.\
-<https://pagedjs.org>\
-<https://github.com/pagedjs/pagedjs>\
-<https://ashok-khanna.medium.com/beautiful-pdfs-from-html-9a7a3c565404>\
-<https://www.adamhyde.net/some-pagedjs-info>\
-License: See project, MIT license at time of writing
-
-### Source code
-
-- [template-renderer.js](/template-renderer.js) - Combines Puppeteer and mustache.js with just a few lines of code in order to create PDF's from mustache HTML templates.
-- [tests/pagedjs/pagedjs.html](/tests/pagedjs/pagedjs.html) - Uses Paged.js to create a document with a table of contents and page numbers.
-
-### Typesetting with CSS
-
-Browsers provide some interesting options for typesetting. For example the following CSS styles.
-
-- **orphans** - minimum number of lines at the bottom of a page
-- **widows** - minimum number of lines at the top of a page
-- **break-before: avoid-page** - avoid page break before a HTML element
-- **break-after: avoid-page** - avoid page break after a HTML element
-- **text-align: justify** - align text to the left and right edges of lines, except at the last line
-- **hyphens: auto** - words are hyphenated according to language-specific hyphenation rules, where the language should be specified with a lang attribute
-
-**Note:** It seems that Puppeteer does not yet handle hyphens correctly. Two possible workarounds are [hyphen](https://www.npmjs.com/package/hyphen) (node) and [Hyphenopoly](https://github.com/mnater/Hyphenopoly) (browser).
+This small demo project generates PDFs from HTML templates.
 
 ## Security
 
-Some remarks concerning security.
+Some remarks concerning security:
 
 - Ensure user input is validated.
 - Ensure the npm packages and docker image are up to date.
-- Only allow access from trusted services. This is often achieved using json web tokens. Thanks to the package [jsonwebtoken](https://github.com/auth0/node-jsonwebtoken) this was easily implemented in template-renderer.js.
+- Only allow access from trusted services. This is often achieved using json web tokens. Thanks to the package [jsonwebtoken](https://github.com/auth0/node-jsonwebtoken) this was easily implemented in [template-renderer.js](/template-renderer.js).
 - For serving over https see <https://expressjs.com/en/5x/api.html#app.listen> and <https://nodejs.org/api/https.html#httpscreateserveroptions-requestlistener>.
 
 ## Getting started
 
 ### Npm commands
 
-See package.json for scripts to run, build and test template-renderer.js and some example templates.
+See [package.json](/package.json) for scripts to run, build and test [template-renderer.js](/template-renderer.js). It provides scripts to build some example templates as well.
 
-- Run `npm run generate-keys jwt` to create a private and public key. The public key is used by template-renderer.js for validating JWT's.
-- Run `npm run start:test` to serve template-renderer.js on port 5000 and a HTML test page on port 5021. See tests directory for some templates which can be used for testing.
+- Run `npm run generate-keys jwt` to create a private and public key. The public key is used by [template-renderer.js](/template-renderer.js) for validating JWT's.
+- Run `npm run start:test` to serve [template-renderer.js](/template-renderer.js) on port 5000 and a HTML test page on port 5021. The [examples directory](/examples) contains templates which can be used for testing.
+- Run `npm run start:image` to serve [template-renderer.js](/template-renderer.js) on port 5000 and run `start:test-page` to run a HTML test page on port 5021. The [examples directory](/examples) contains templates which can be used for testing.
+- Run `npx prettier . --check` or `npx prettier . --write` to format code using prettier (an opinionated formatter).
 
 ### Docker image
 
-A Dockerfile is included in this is repository. See <https://pptr.dev/guides/docker> and <https://github.com/puppeteer/puppeteer/tree/main/docker> for more information.
+A [Dockerfile](/Dockerfile) is included in this repository. See <https://pptr.dev/guides/docker> and <https://github.com/puppeteer/puppeteer/blob/main/docker/Dockerfile> for more information.
+
+### Source code
+
+- [template-renderer.js](/template-renderer.js) - Combines Puppeteer and mustache.js with a few lines of code in order to create PDFs from mustache HTML templates.\
+The service waits until `window.readyForPdf != false`. This way the template can run JavaScript before it's rendered.
+- [generate-keys.js](/utils/generate-keys.js) - Generates a private and public key.
+- [test-page.js](/utils/test-page.js) - Serves a test page for testing [template-renderer.js](/template-renderer.js).
 
 ### Some example templates
 
-- tests/a4-pages.html
-- tests/email
-- tests/image
-- tests/mustache.html
-- tests/pagedjs
+- [a4](/examples/a4.html)
+- [email](/examples/email.html)
+- [image](/examples/image.html)
+- [mustache](/examples/mustache.html)
+- [pagedjs](/examples/pagedjs.html)
+- [pagedjs-toc](/examples/pagedjs.html)
+- [partial-lorem-ipsum](/examples/partial-lorem-ipsum.html)
+- [partial-mustache](/examples/partial-mustache.html)
 
 ### Validating JWKS tokens
 
@@ -108,26 +79,3 @@ function createTokenValidationFunction(url, requiredScope) {
 ```
 
 _For local testing -_ Extra self-signed certificate(s) can be provided with a node environment variable: [NODE_EXTRA_CA_CERTS](https://nodejs.org/api/cli.html#node_extra_ca_certsfile).
-
-## Packages
-
-- Puppeteer - library providing control to Chrome or Chromium
-- mustache.js - library to render mustache templates
-- Paged.js - library to paginate HTML content for printing to PDF
-- winston - a simple logging library with support for multiple transports
-- jsonwebtoken - an implementation of JSON Web Tokens used for signing and verifying JWT's
-- jwks-rsa - a library to retrieve signing keys from a JWKS endpoint
-
-### Packages for testing
-
-- axios - node package for http requests
-- http-server - serve files locally for testing
-- json5 - for parsing json written by hand
-- juice - inline web resources (styles, scripts, images)
-- nodemon - run script and restart when changed
-- npm-run-all - run multiple npm scripts with one command
-- web-resource-inliner - inline web resources without any changes (preserves all Paged.js styles)
-
-### Package for formatting
-
-- prettier - opinionated code formatter (run with `npx prettier . --check` or `npx prettier . --write`)

examples/a4.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>{{htmlTitleTag}}</title>
+    <style>
+@page {
+  margin: 1in;
+  size: A4;
+}
+p {
+  text-align: justify;
+  hyphens: auto;
+}
+h1,
+h2 {
+  break-before: page;
+}
+h3,
+h4 {
+  break-before: avoid-page;
+}
+
+</style>
+  </head>
+  <body>
+    {{> template}}
+  </body>
+</html>

tests/email.html renamed to examples/email.html

@@ -1,7 +1,7 @@
 <!doctype html>
-<html lang="{{language}}">
+<html lang="en">
   <head>
-    <title>{{title}}</title>
+    <title>{{htmlTitleTag}}</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta name="viewport" content="width=device-width">
 
@@ -14,17 +14,17 @@
             <table border="0" cellpadding="0" cellspacing="0" class="email-container" style="padding: 10px 20px 10px 20px; min-width: 580px; max-width: 720px; width: 100%; background-color: white;" width="100%" bgcolor="white">
               <tr>
                 <td align="left" valign="middle">
-                  <p>{{title}}</p>
+                  <p style="text-align: justify; hyphens: auto;">{{header}}</p>
                 </td>
               </tr>
               <tr>
                 <td align="left" valign="top">
-                  <p>{{> content}}</p>
+                  <p style="text-align: justify; hyphens: auto;">{{> template}}</p>
                 </td>
               </tr>
               <tr>
                 <td align="left" valign="middle">
-                  <p>{{footer}}</p>
+                  <p style="text-align: justify; hyphens: auto;">{{footer}}</p>
                 </td>
               </tr>
             </table>