How I Customized Multiterm

The main features that I wanted for this blog was to have a way to embed commutative diagrams and have custom callouts (theorems, lemmas, proofs, etc.), both matching the theme selected theme of the site. This post will discuss my current process for achieving this, along with some other miscellaneous modifications.

LaTeX Diagrams

This solution requires you to change the file extensions for posts from .md to .mdx and import all of your diagrams at the top of the file:

---
title: 'Blog Post Title'
.
.
.
---
import TestDiagram from "./comm-diagram-test.svg"
import TestDiagram2 from "./comm-diagram-test-2.svg"
.
.
.

Render them in $\LaTeX$ using quiver or some other tool. Use upmath by rendering as html, viewing the source by following the link, and saving the page with ctrl + s as an svg.

In the global.css file, add the following at the bottom of the file:

.diagram {
  width: 100%;
  width: 100%;
  /* [top bottom] [left right] */
  margin: 3rem auto;
  fill: currentColor;
}

.diagram path,
.diagram line,
.diagram polyline,
.diagram polygon {
  /* to avoid having bloated glyphs on mobile */
  vector-effect: non-scaling-stroke;
  stroke: currentColor;
  stroke-width: 0.075rem;
}

Finally, inline the diagrams

<TestDiagram class="diagram" />
<TestDiagram2 class="diagram" />

(some text between them)

To place two diagrams next to each other, add the following styling to the end of global.css file:

.diagram-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
}

Place your diagrams next to each other like so:

<div class="diagram-row">
  <TestDiagram class="diagram" />
  <TestDiagram2 class="diagram" />
</div>

The diagrams will now change their color with the selected theme 🙂

Custom Callouts

While the Multiterm theme comes packaged with callouts, they don’t support my goals for blogging about math and computer science. During my search for a blog template, I was debating on using the Erudite theme. I ultimately chose the Multiterm template - one of the main reasons being the wide variety of themes to choose from - but the Erudite theme had the callout feature that I wanted: A Callout Component for Nerds. So, I integrated the callout component into Multiterm; I absolutely love the way they look!

Definition (Functor)

A functor is an arrow $F : \mathsf{C} \to \mathsf{D}$ between categories - $F$ takes objects to objects and morphisms to morphisms in such a way that

$\mathsf{dom} \, Ff = F \, \mathsf{dom} \, f$ for each $\mathsf{C}$ -morphism $f$ ,
$\mathsf{cod} \, Ff = F \, \mathsf{cod} \, f$ for each $\mathsf{C}$ -morphism $f$ ,
$F \, \mathsf{id}_c = \mathsf{id}_{Fc}$ for each $c \in \mathsf{C}$ ,
$F(g \circ f) = F f \circ F g$ for each pair of composable $\mathsf{C}$ -morphisms $f$ and $g$ .

Example (Identity Functor)

For every category $\mathsf{C}$ , there is a functor $\mathsf{Id} : \mathsf{C} \to \mathsf{C}$ which preserves all objects and morphisms of $\mathsf{C}$ .

Lemma (The Yoneda Lemma)

Let $\mathsf{C}$ be a locally small category and $F : \mathsf{C} \to \mathsf{Set}$ be a functor.

\mathsf{Nat}(\mathsf{C}(c,-),F) \cong Fc

naturally in $F$ and $c$ when viewed as functors $\mathsf{C} \times [\mathsf{C},\mathsf{Set}] \to \mathsf{Set}$ .

Proof (Of Yoneda)

Theorem (The Comprehensive Factorization Theorem)

The class of final functors and discrete fibrations forms an orthogonal factorization system of $\mathsf{Cat}$ . Dually, the class of inital functors and discrete opfibrations forms an orthogonal factorization system of $\mathsf{Cat}$ .

Miscellaneous Modifications

In addition to the above modifications for having responsive $\LaTeX$ diagrams, I will keep a record of the other small customizations that I have made to Multiterm.

Increasing the Article Width

In the Layouts.astro file, there is a section specifying the layout of the page, along with some tailwindcss styling:

<body class="w-full h-full m-0 bg-background text-foreground">
    <div
      class="flex flex-col max-w-3xl min-h-screen border-accent/10 m-auto p-3 sm:py-5 sm:px-6 md:py-10"
    >
      <Header />
      <main class="flex flex-col py-1">
        <slot />
      </main>
      <Footer />
    </div>
</body>

To increase the article width, we can change maximum width parameter (I changed it to something between 3xl and 4xl)

    <div
      class="flex flex-col max-w-[52rem] min-h-screen border-accent/10 m-auto p-3 sm:py-5 sm:px-6 md:py-10"
    >

Setting Up Giscus

Setting up Giscus was relatively straightforward by following the directions found on the giscus.app. The one thing that was confusing for me was setting up the giscus.json and using the origins key correctly. The below can be found at Advanced Usage Giscus Documentation.

The origins field is used to control the domains can read from and write to the GitHub discussions on your blog’s repository. The origins key accepts a list of strings that are checked against the window.origin of the page that loads Giscus. Another key that the giscus.json accepts is the originsRegex key, which accepts a regular expression representing a set of domain names to be tested against the window.origin of the page that loads Giscus.

An example giscus.json looks like this:

{
  "origins": [
    "https://your-blogs-domain-name"
  ],
  "originsRegex": [
    "http://localhost:[0-9]+"
  ]
}

After pushing to your remote repository with this giscus.json, your blog’s domain and any ports exposed by your machine’s local host have read and write permissions to the GitHub discussions on your blog’s repository.

In my case, when I set up my giscus.json, I had set my origins key incorrectly. Giscus wasn’t loading comments and was being redirected to https://github.com/orgs/giscus/discussions/1298 (you can find this redirect in the Network Monitor section of your browser’s developer tools), but figuring out that my origins key was incorrect was tricky. If you end up being redirected here when setting up Giscus, make sure that your domain names are correct in your giscus.json.

Staying Synced with stelcodes

Since I forked this template from stelcodes/multiterm-astro, I wanted my fork to stay up to date with the original repository. To do so, I followed this guide.

# How I Customized Multiterm

LaTeX Diagrams

Custom Callouts

Miscellaneous Modifications

Increasing the Article Width

Setting Up Giscus

Staying Synced with stelcodes

# Showing Off Blog Features

# Three Connected Perspectives