CodeX
Published in

CodeX

ARTICLE

Adding LaTeX Rendering to Our Website, Part 2

From Hugo in Action by Atishay Jain

Deploying to Heroku

In case you aren’t using Netlify, you need to select a vendor to host the APIs. Many cloud vendors support both the PAAS and the FAAS models and we’re free to decide what approach to take to deploy our website. Because Netlify uses the FAAS solution, we demonstrate a PAAS solution. Heroku is used as the PAAS platform, though we use little of its features and therefore the code should work in any PAAS platform we choose.

Figure 7. Creating a new application in Heroku to host our APIs
Figure 8. Giving a name to an app in Heroku
Figure 9. Connecting Heroku to GitHub
Figure 10. Finding and connecting the right repository from GitHub to Heroku
Figure 11. The settings tab of Heroku contains Buildpacks which is the configuration for the programming platform for Heroku.
Figure 12. Heroku supports multiple platforms to deploy our applications. Node.js is one of them which is needed for getting our MathJax code up and running.
Figure 13. Config vars in Hugo are passed as environment variables to the running code.
Figure 14. Manual and automatic deployments in Heroku. Manual deploys should be used for verification and once we know everything is working, we can go back to automatic.
Figure 15. When we trigger manual deployment in Heroku, step by step progress is provided until everything is ready.
Figure 16. Viewing logs on Heroku. Heroku provides access to machine logs and build logs separately and we can get into them to figure out issues.
Figure 17. Sample logs from the node.js process running in Heroku. We can use console.log to get all logs from node.js. All crashes and error logs are also available.

Monorepo vs separate repos for APIs and Markup

We decided to use the repository that was used for the website for the API code as well. This has a clear disadvantage of pushing the needless markup code to Heroku and rebuilding the Heroku based APIs every time a markup-based document has changes. If this turns into a big problem, we can choose to have a separate branch for the API or a separate repository. We can also change our integration to happen via GitHub actions instead of the direct Heroku import where we can build the smartness to recognize whether the API has changed. We can move to manual deploys if the APIs aren’t changing frequently.

Creating shortcode to render LaTeX

With a functional API, the major work needed to get to rendering LaTeX on the website is done. We need to invoke it and then render the result. Now we need to create a shortcode to call the API and display the result in the Hugo based website.

{{/* layouts/shortcodes/latex.html */}}
{{/* layouts/shortcodes/latex.html */}}
{{/* defaults taken from http://docs.mathjax.org/en/latest/web/typeset.html

{{/* a Boolean specifying whether the math is in display-mode or inline mode */
{{ $display := true }} ❶
{{ with .Get "display" }}
{{ $display = . }}
{{ end }}

{{/* a number giving the number of pixels in an em for the surrounding font. */
{{ $em := 8 }}
{{ with .Get "em" }}
{{ $em = . }}
{{ end }}


{{/* a number giving the number of pixels in an em for the surrounding font. */
{{ $ex := 16 }}
{{ with .Get "ex" }}

{{ $ex = . }}
{{ end}}

{{/* a number giving the width of the container, in pixels. */}}
{{ $containerWidth := (mul 80 $ex) }}
{{ with .Get "containerWidth" }}
{{ $containerWidth = . }}
{{ end }}


{{/* a number giving the line-breaking width in em units. Default is a very large number (100000), so effectively no line breaking. */}}
{{ $lineWidth := 100000 }}
{{ with .Get "lineWidth" }}

{{ $lineWidth = . }}
{{ end }}

{{/* a number giving a scaling factor to apply to the resulting conversion. Default is 1. */}}
{{ $scale := 1 }}
{{ with .Get "scale" }}
{{ $scale = . }}
{{ end }}

{{ if (and $.Site.Params.Latex2Svg (getenv "LATEX2SVG_PASSWORD") ) }} ❷
{{ $json := getJSON $.Site.Params.Latex2Svg "?" (querify "tex" .Inner) "&password="
(getenv "LATEX2SVG_PASSWORD") "&display=" $display "&em=" $em "&ex=" $ex
"&containerWidth=" $containerWidth "&lineWidth=" $lineWidth "&scale=" $scale}}
{{ with $json.data }}
{{. | safeHTML}} ❸
{{ end }}
{{ end }}
# config/_default/params.yaml
Latex2Svg: https://<endpoint>.herokuapp.com/latex2svg
# or
Latex2Svg: https://<endpoint>/.netlify/functions/latex2svg

Adding some LaTex in our website

With all the hard work done to get a shortcode to render latex, the next step is to write some LaTeX in our website. In our blog,we’ve a page on triangles.

<!-- content/blog/tropical triangles/index.md -->
{{< latex>}}\text{Area} = \frac{b \times h}{2}{{</latex>}}
{{< latex>}}
<!-- content/blog/community/curve.md -->
\mathbf {B} (t)=\sum _{i=0}^{n}{n \choose i}(1-t)^{n-i}t^{i}\mathbf {P} _{i}
{{</ latex>}}
<!--  content/blog/community/circle.md -->
The area of a circle is {{<latex display="false">}} \pi r^2 {{</latex>}}
Figure 18. LaTeX rendered as SVG in the curve web page of the website. Using compile time API access, we can convert LaTeX to SVG without requiring any JavaScript on the client.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Manning Publications

Follow Manning Publications on Medium for free content and exclusive discounts.