Skip to content
Convert LaTeX documents into beautiful responsive web pages using LaTeXML.
HTML TeX JavaScript CSS Perl Shell
Branch: master
Clone or download
dependabot-preview and bfirsh Bump debian from testing-20190708 to testing-20190812
Bumps debian from testing-20190708 to testing-20190812.

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>
Latest commit 5e6f6ba Aug 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook Generate storybook from static files Sep 7, 2018
.vscode Add vscode config Apr 24, 2019
bin Add Sentry Apr 26, 2019
docs Add Percy to readme Jul 5, 2018
latexml Remove ICML hacks Jun 11, 2019
script Rename development image to engrafo-dev Jan 17, 2019
src Don't eat all 404 errors from glutton Aug 13, 2019
stories
tests Improve gunzip tests Jun 25, 2019
.dockerignore Add cache & tmp to dockerignore Nov 27, 2018
.eslintrc Run client JS on arbitrary elements Aug 20, 2018
.gitignore Load environment variables from .env Apr 25, 2019
.travis.yml Run Percy outside tests and Docker Sep 7, 2018
Dockerfile Bump debian from testing-20190708 to testing-20190812 Aug 14, 2019
LICENSE Add license Aug 11, 2017
README.md Remove stuff from readme about rewrite Mar 25, 2019
jest.config.js Hide console output when tests pass Sep 7, 2018
package.json Bump @babel/runtime from 7.5.4 to 7.5.5 Aug 13, 2019
yarn.lock Bump @babel/runtime from 7.5.4 to 7.5.5 Aug 13, 2019

README.md

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! Sponsor us to get your logo here.

YLD

Tested by:

Percy

You can’t perform that action at this time.