feat: switch to mathml instead of katex

src/css/default.css

@@ -1,5 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
+@import url("https://fonts.cdnfonts.com/css/latin-modern-math");
 
 @tailwind base;
 @tailwind components;
@@ -44,7 +45,10 @@
   div.sourceCode {
     @apply p-4 rounded-lg;
   }
-  .math.display {
+  math {
-    @apply overflow-x-auto;
+    @apply font-math;
+  }
+  math[display="block"] {
+    @apply overflow-x-auto my-1 text-xl;
   }
 }

src/js/main.js

@@ -2,19 +2,19 @@ import "../css/default.css"
 
 // @ts-check
 
-document.addEventListener("DOMContentLoaded", () => {
+// document.addEventListener("DOMContentLoaded", () => {
-  var mathElements = document.querySelectorAll(".math.inline, .math.display")
+//   var mathElements = document.querySelectorAll(".math.inline, .math.display")
-  mathElements.forEach(function (element) {
+//   mathElements.forEach(function (element) {
-    var tex = element.textContent
+//     var tex = element.textContent
-    var displayMode = element.classList.contains("display")
+//     var displayMode = element.classList.contains("display")
-    var renderedMath = katex.renderToString(tex, {
+//     var renderedMath = katex.renderToString(tex, {
-      displayMode: displayMode,
+//       displayMode: displayMode,
-      throwOnError: false,
+//       throwOnError: false,
-    })
+//     })
-    element.innerHTML = renderedMath
+//     element.innerHTML = renderedMath
-  })
+//   })
-})
+// })
-
+//
 const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
 const themeSystem = () => {
   if (prefersDark) {

src/out/bundle.js

@@ -1 +1 @@
-document.addEventListener("DOMContentLoaded",(()=>{document.querySelectorAll(".math.inline, .math.display").forEach((function(e){var t=e.textContent,a=e.classList.contains("display"),n=katex.renderToString(t,{displayMode:a,throwOnError:!1});e.innerHTML=n}))}));const e=window.matchMedia("(prefers-color-scheme: dark)").matches,t=()=>{document.documentElement.classList.remove("dark")},a=()=>{document.documentElement.classList.add("dark")};let n="dark"===localStorage.getItem("theme")?2:"light"===localStorage.getItem("theme")?1:0;const m=document.getElementById("theme-toggle");m.addEventListener("click",(()=>{switch(n=(n+1)%3,n){case 0:localStorage.removeItem("theme"),e?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"),m.innerText="theme: system";break;case 1:e?(localStorage.setItem("theme","light"),t(),m.innerText="theme: light"):(localStorage.setItem("theme","dark"),a(),m.innerText="theme: dark");break;case 2:e?(localStorage.setItem("theme","dark"),a(),m.innerText="theme: dark"):(localStorage.setItem("theme","light"),t(),m.innerText="theme: light")}}));
+const e=window.matchMedia("(prefers-color-scheme: dark)").matches,t=()=>{document.documentElement.classList.remove("dark")},m=()=>{document.documentElement.classList.add("dark")};let a="dark"===localStorage.getItem("theme")?2:"light"===localStorage.getItem("theme")?1:0;const c=document.getElementById("theme-toggle");c.addEventListener("click",(()=>{switch(a=(a+1)%3,a){case 0:localStorage.removeItem("theme"),e?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"),c.innerText="theme: system";break;case 1:e?(localStorage.setItem("theme","light"),t(),c.innerText="theme: light"):(localStorage.setItem("theme","dark"),m(),c.innerText="theme: dark");break;case 2:e?(localStorage.setItem("theme","dark"),m(),c.innerText="theme: dark"):(localStorage.setItem("theme","light"),t(),c.innerText="theme: light")}}));

src/posts/2020-09-21-hello-world.md

@@ -1,26 +0,0 @@
----
-author: "Youwen Wu"
-authorTwitter: "@youwen"
-desc: "I announce myself to the world"
-image: "./images/waiheke-stony-batter.jpg"
-keywords: "hello, announcement"
-lang: "en"
-title: "Hello, world!"
-updated: "2020-09-22T12:00:00Z"
----
-
-Hello, world! I am here!
-
-<img
-  alt="Grapevines among rolling hills leading to the sea"
-  src="./images/waiheke-stony-batter.jpg"
-  height="200"
-/>
-
-Haskell, for example:
-
-```haskell
-toSlug :: T.Text -> T.Text
-toSlug =
-  T.intercalate (T.singleton '-') . T.words . T.toLower . clean
-```

src/posts/2024-05-25-haskell-blog.md

@@ -1,15 +1,16 @@
 ---
 author: "Youwen Wu"
 authorTwitter: "@youwen"
-desc: "The first post"
+desc: "a purely functional...blog?"
 image: "./images/waiheke-stony-batter.jpg"
-keywords: "hola, anuncio"
+keywords: "haskell, blog, functional programming"
-lang: "cn"
+lang: "en"
-title: "Ni Hao"
+title: "Why I made my blog in haskell"
-updated: "2020-09-23T12:00:00Z"
+updated: "2024-05-25T12:00:00Z"
 ---
 
-Welcome!
+Welcome! This is the first post on _gradient ascent_ and also one that tests all
+of the features.
 
 <img
   alt="Grapevines among rolling hills leading to the sea"
@@ -17,11 +18,6 @@ Welcome!
   height="200"
 />
 
-Haskell is a great language. It is a pure functional programming language with
-strong static typing. It is also a lazy language, which means that it does not
-evaluate expressions until it is absolutely necessary. This can lead to some
-interesting performance characteristics.
-
 ```haskell
 toSlug :: T.Text -> T.Text
 toSlug =

ssg/src/Main.hs

@@ -21,7 +21,6 @@ import Text.Pandoc.Highlighting (Style, breezeDark, styleToCss)
 import Text.Pandoc.Options (
     HTMLMathMethod (..),
     WriterOptions (..),
-    defaultKaTeXURL,
  )
 
 --------------------------------------------------------------------------------
@@ -223,7 +222,7 @@ pandocWriterOpts =
     defaultHakyllWriterOptions
         { writerExtensions = pandocExtensionsCustom
         , writerHighlightStyle = Just pandocHighlightStyle
-        , writerHTMLMathMethod = KaTeX defaultKaTeXURL
+        , writerHTMLMathMethod = MathML
         }
 
 pandocHighlightStyle :: Style

tailwind.config.js

@@ -7,6 +7,7 @@ module.exports = {
       fontFamily: {
         sans: ["Inter", "sans-serif"],
         serif: ["Merriweather", "serif"],
+        math: ["Latin Modern Math", "serif"],
       },
       colors: {
         primary: {
@@ -33,4 +34,4 @@ module.exports = {
     },
   },
   plugins: [require("@tailwindcss/typography")],
-};
+}