Developer docs and how to customize PDF options with JSON Resume CLI and custom themes

[alicescfernandes]

Hi! This is not an issue per se, but the docs also don't mention how to develop themes. While trying to debug some rendering issues on puppeteer, i came across a way to customize rendering. By default, resume-cli will render a PDF with in letter format. In Europe we use A4 paper. Also, resume-cli doesn't respect @ media print rules. This can be changed by setting mediaType: 'print' on the pdfRenderOptions

In order to customize the rendering options, you need to export a pdfRenderOptions on the index.js of the theme. I believe that this only works for local themes though

Example code

module.exports = {
    render: render,
    pdfRenderOptions: {
        format: 'A4',
        mediaType: 'print',
        pdfViewport: { width: 1920, height: 1280 },
        margin: {
            top: '0.4in',
            bottom: '0.4in',
            left: '0.4in',
            right: '0.4in',
        },
    },
};

The PDF options that puppeteer accepts on page.pdf are also accepted by the resume-cli. You can check available PDF options here

Is there anyway that we can develop some sort of documentation for theme developers? I would be willing to work on that

[asbjornu]

I was just hit by this void of information and thankfully found this issue giving me a bit more information and context. More elaborate documentation in the PDF + custom theme area would be highly appreciated for sure!

[XuluWarrior]

I've been trying to make my theme more print friendly and came across this issue. Having played with it a bit my observations are

• This still doesn't seem to be officially documented anywhere. Which is shame
• In the https://github.com/jsonresume/resume-cli/issues/617#issue-938119428 pdfViewport is in the wrong place.
  Looking at the code, resume-cli expects it to be at the root level of the exports and it uses it to setViewPort on the page e.g.

  module.exports = {
  render: render,
  pdfViewPort: { ... },
  pdfOptions: { ... }
  }

• pdfViewPort/setViewPort doesn't actual have the expected effect. https://stackoverflow.com/questions/59951399/puppeteer-viewport-settings-having-no-effect-when-creating-pdf
• To actually change the width/height I had to set them directly in pdfOptions and clear format (which is defaulted in resume-cli to letter) as this overrides width/height e.g.

  module.exports = {
  ...
  pdfOptions: {
  width: "1200px",
  height: "1692px", // A4 ratio
  format: undefined
  }
  }