Engrafo

Engrafo converts LaTeX documents into beautiful responsive web pages using LaTeXML.

It is a set of stylesheets and scripts for LaTeXML output. It makes the design responsive so you can read it on phones, and adds various interactive bits like footnote tooltips.

It turns this sort of thing:

Into this:

Usage

The easiest way to run Engrafo is by using the Docker image. To convert input/main.tex into output/index.html, run:

$ docker run \
  -v "$(pwd)":/workdir -w /workdir \
  arxivvanity/engrafo engrafo input/main.tex output/

For full usage, run docker run arxivvanity/engrafo engrafo --help.

Development environment

First, install Node and Yarn. Then, install the Node dependencies:

$ yarn

Frontend development

For developing the CSS and frontend JavaScript, there are a bunch of pre-rendered documents you can use to work with. This means you don't need to install LaTeX or Docker.

Run this command:

$ yarn run storybook

Then, all the documents will be available as a Storybook at http://localhost:6006. Any changes you make to the CSS and JS in src/assets/ will automatically be updated in the Storybook.

Converting documents

The LaTeXML and LaTeX toolchain runs inside Docker. If you want to work on the code that actually converts documents, you will need to install Docker.

Install Docker and build the Docker image:

$ script/docker-build

You can convert documents with yarn run convert:

$ yarn run convert tests/documents/sample2e.tex output/

There is also a development server, which is useful for developing CSS and JavaScript. When you make changes to the JavaScript or CSS, it will automatically update in the browser:

$ yarn run server tests/documents/sample2e.tex

There is a script to download a paper from arXiv and start a development server:

$ script/arxiv-server 1707.08901

Tests

Run the main test suite:

$ yarn test

You can run particular suites:

$ yarn test tests/integration.test.js

Or particular tests by matching a string:

$ yarn test -t "titles and headings"

Writing integration tests

The integration tests are LaTeX documents in tests/integration that are rendered to ensure they produce a particular output. The HTML output from LaTeXML is checked using Jest snapshots, and the visual output is checked using Percy.

First, write a LaTeX document in tests/integration. If it is a test for a package, it normally has the same name as the package, as you can see from other documents in that directory.

For example, this could be a test in tests/integration/textbf.tex:

\begin{document}
  I am \textbf{bold}!
\end{document}

Now, run the test passing the -u option to write out a snapshot of what is rendered:

$ yarn test -t "textbf.tex" -u

Check the output looks correct in tests/__snapshots__/integration.test.js.snap. You can re-run that command without the -u option to ensure the test passes.

The test will fail if the output changes in the future. If the change is expected, then you can simply re-run the test with -u to overwrite the snapshot and fix the test.

The visual changes are harder to test locally. The easiest way is to open a pull request, then Percy will check for any changes against master.

Code style

All code must be formatted with Prettier. To automatically format the code, run:

$ yarn run prettier

Sponsors

Thanks to our generous sponsors for supporting the development of arXiv Vanity!

Tested by: