Move from directive to service for simplicity

zimui/src/main.ts

@@ -8,7 +8,6 @@ import router from './router'
 import loadVuetify from './plugins/vuetify'
 
 import ResizeObserver from 'resize-observer-polyfill'
-import vMathJax from './directives/mathjax'
 
 if (typeof window.ResizeObserver === 'undefined') {
   console.debug('Polyfilling ResizeObserver')
@@ -21,7 +20,6 @@ loadVuetify()
     app.use(createPinia())
     app.use(vuetify)
     app.use(router)
-    app.directive('mathjax', vMathJax)
     app.mount('#app')
   })
   .catch((error) => {

zimui/src/services/__tests__/mathjax.spec.ts

@@ -0,0 +1,14 @@
+import { describe, it, expect } from 'vitest'
+import mathjaxService from '../mathjax'
+
+describe('MathJaxService', () => {
+  it('computes front 1.2. properly', () => {
+    expect(mathjaxService.frontFromTitle('1.2: The Scientific Method')).toBe('1.2.')
+  })
+  it('computes front 1.3. properly', () => {
+    expect(mathjaxService.frontFromTitle('1.3: The Foo Method')).toBe('1.3.')
+  })
+  it('computes front 1. properly', () => {
+    expect(mathjaxService.frontFromTitle('1: The Title Method')).toBe('1.')
+  })
+})

zimui/src/services/mathjax.ts

@@ -0,0 +1,79 @@
+/* 
+Service to handle DOM manipulation to add/remove MathJax everytime needed.
+
+This is a bit hackhish to remove and and back MathJax, but it is the only reliable 
+solution found so far, and probably the most robust one.
+
+The dynamic behavior of removing / adding back MathJax is wanted/necessary because we 
+need to dynamically set the PageIndex macro to dynamically display proper figures 
+/ equations / ... numbering.
+
+MathJax settings are an adaptation of libretexts.org settings, for MathJax 3 (including
+extensions now removed or not yet supported or included by default).
+*/
+
+class MathJaxService {
+  front: string | undefined = undefined
+
+  frontFromTitle(title: string): string {
+    // Computes front value from page title.
+    // E.g. if page title is `1.2: The Scientific Method` then front is `1.2.`
+    let front: string = ''
+    if (title.includes(':')) {
+      front = title.split(':')[0]
+      if (front.includes('.')) {
+        const parts: string[] = front.split('.')
+        front = parts.map((int) => (int.includes('0') ? parseInt(int, 10) : int)).join('.')
+      }
+      front += '.'
+    }
+    return front
+  }
+
+  removeMathJax() {
+    const script = document.getElementById('mathjax-script')
+    if (script) script.remove()
+    if (window.MathJax) delete window.MathJax
+  }
+
+  addMathJax(front: string) {
+    window.MathJax = {
+      section: front,
+      tex: {
+        tags: 'all',
+        macros: {
+          PageIndex: ['{' + front + '#1}'.toString(), 1]
+        },
+        autoload: {
+          color: [],
+          colorv2: ['color']
+        },
+        packages: { '[+]': ['noerrors', 'mhchem', 'tagFormat', 'color', 'cancel'] }
+      },
+      loader: {
+        load: ['[tex]/noerrors', '[tex]/mhchem', '[tex]/tagFormat', '[tex]/colorv2', '[tex]/cancel']
+      },
+      svg: {
+        scale: 0.85
+      },
+      options: {
+        menuOptions: {
+          settings: {
+            zoom: 'Double-Click',
+            zscale: '150%'
+          }
+        }
+      }
+    }
+    const script = document.createElement('script', {
+      id: 'mathjax-script'
+    } as ElementCreationOptions)
+    script.src = './mathjax/es5/tex-svg.js'
+    document.head.appendChild(script)
+  }
+}
+
+const mathjaxService = new MathJaxService()
+Object.freeze(mathjaxService)
+
+export default mathjaxService

zimui/src/stores/main.ts

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import axios, { AxiosError } from 'axios'
 import type { PageContent, Shared, SharedPage } from '@/types/shared'
+import mathjaxService from '@/services/mathjax'
 
 export type RootState = {
   shared: Shared | null
@@ -56,6 +57,8 @@ export const useMainStore = defineStore('main', {
         (response) => {
           this.isLoading = false
           this.pageContent = response.data as PageContent
+          mathjaxService.removeMathJax()
+          mathjaxService.addMathJax(mathjaxService.frontFromTitle(page.title))
         },
         (error) => {
           this.isLoading = false

zimui/src/views/HomeView.vue

@@ -50,7 +50,6 @@ watch(
         class="mt-content-container"
         v-if="main.pageContent"
         v-html="main.pageContent.htmlBody"
-        v-mathjax="page"
       ></section>
       <div v-else>Page not found</div>
     </article>