Setting up Nerdamer in Hugo

Update. The GitHub repository for Nerdamer has been archived as of Nov 2022. There are a couple of alternatives you can look at, such as math.js. This post may be still useful for those who wish to incorporate JavaScript libraries in Hugo.

Introduction

Nerdamer is a JavaScript library for symbolic algebra calculations. Because it is written in pure JavaScript and does not require any server-side calculation, Nerdamer fits in quite nicely when you need your Hugo website to be able to solve some algebra problems on-the-run.

Installing Nerdamer on a Hugo Project

If your Hugo webpage is maintained as a Git repository, the easiest method of installing Nerdamer is to use Git submodules. At the base directory, run

$ git submodule add https://github.com/jiggzson/nerdamer assets/js/nerdamer/
$ git submodule init

to attach the Nerdamer depository to assets/js/nerdamer/. Note that we are putting the files under the Assets folder, not the Static folder, because you would want to minify the files first with Hugo Pipes. The library is delivered without minification. You can reduce its size from 1 MB to about 500 kB by minifying the files. Inside the folder, you will see five JavaScript files:

/
├───.github
├───archetypes
├───assets
│   └───js
│       └───nerdamer
│           ├───spec
│           ├───Algebra.js
│           ├───Calculus.js
│           ├───Extra.js
│           ├───nerdamer.core.js
│           └───Solve.js
├───config
├───content
├───static
└───themes

nerdamer.core.js contains the core functionality of Nerdamer, and the four other ‘add-ons’ provide some extra features (the full list of functions each add-on provides on the documentation page). Create a partial that minifies and loads the necessary files:

> layouts/partials/nerdamer.html
1
2
3
4
5
6
{{- $nerdamer_loc := "js/nerdamer" -}}
{{- $nerdamer_files := slice "nerdamer.core.js" "Algebra.js" "Calculus.js" "Extra.js" "Solve.js" -}}
{{- range $nerdamer_files }}
{{- $minified_js := resources.Get (printf "%s/%s" $nerdamer_loc .) | resources.Minify }}
<script src="{{ $minified_js.Permalink }}"></script>
{{- end }}

and attach it to the site’s head:

> layouts/_default/baseof.html
1
2
3
4
5
6
7
<head>
  <!-- ...rest of head -->

  {{- if .Params.nerdamer -}}
    {{ partial "nerdamer" . }}
  {{- end -}}
</head>

If you want to load Nerdamer in a specific page, simply set nerdamer: true in the page’s YAML.