PagedJS CSS editor.
We need to put a tab on the production page ('PDF controls') that will display an editable textfield containing the CSS that generates the PDF.
The current interface looks like this:
We need to add tabs:
In the Pagedjs tab we need a simple text field that displays the Pagedjs CSS and a save button.
Additional requirements include:
- A syntax highlighting JS would be helpful.
- Line numbering would be an asset.
- Keep the current download dropdown selector
Complexities:
I believe the current CSS file is actually in the pagedjs container, which means if we change the css we have to reload the container. I think it would be preferable to have the CSS as an external asset referenced by the container if possible rather than spinning up a new container.
Notes from @dbvisel -
If you look here: https://gitlab.coko.foundation/kotahi/kotahi/-/blob/main/server/pdfexport/pdfTemplates/pagedJsStyles.css?ref_type=heads – that's /server/pdfexport/pdfTemplates/pagedJsStyles.css
in your install – you'll see a CSS file. That the default styling that gets applied to PDFs on export. (The HTML framework is this file: https://gitlab.coko.foundation/kotahi/kotahi/-/blob/main/server/pdfexport/pdfTemplates/article.njk?ref_type=heads ). That's a Nunjuks file – it's basically HTML with some templating fields to put in metadata.
Now, if in your install you add a CSS file at /config/journal/export/pagedJsStyles.css
, that CSS will be appended to the default CSS file. Because of the way CSS works, you can replace any of the existing rules. If you can do it all through CSS, that's great! But if you need to change the HTML layout to achieve a different format, you're going to need to make a new version of article.njk
– put that at /config/journal/export/article.njk
. That will replace the original one if it exists.
Does this make sense? Let me know if you need more help!
and notes from @BenWh -
All deployed instances have containers built in situ as part of any installation or upgrade. So to modify the CSS you would edit the CSS file that Dan pointed you to, then run docker-compose -f docker-compose.production.yml --env-file .env build && docker-compose -f docker-compose.production.yml --env-file .env up -d