Fallback to MathJax when KaTeX fails to compile math (#303)

* Start

* Use MathJax v3

* Format

* Improve font-size

* Lint

* Better handle loading

* Copy MathJax assets to public folder

* Attempt at using local assets for MathJax

* Use bun 1.0.31

* Try with bun 1.0.33

* Try fixing headers

* Simplify

* Simplify and not use suspense module

* Cleanup more

* Add test for Math

* Make math block scroll if needed

* Update packages/react-math/src/KaTeX.tsx

Co-authored-by: Greg Bergé <berge.greg@gmail.com>

* Use React.use

* Format

* Use exports

* Lint

* Disable cache in CI for lint

* Format

---------

Co-authored-by: Greg Bergé <berge.greg@gmail.com>

Author: SamyPesse

.eslintrc.json

@@ -13,6 +13,11 @@
                         "pattern": "@/**",
                         "group": "external",
                         "position": "after"
+                    },
+                    {
+                        "pattern": "@gitbook/**",
+                        "group": "external",
+                        "position": "after"
                     }
                 ],
                 "alphabetize": {

.github/workflows/ci.yaml

@@ -16,7 +16,7 @@ jobs:
             - name: Setup bun
               uses: oven-sh/setup-bun@v1
               with:
-                  bun-version: 1.0.30
+                  bun-version: 1.0.33
             - name: Install dependencies
               run: bun install --frozen-lockfile
               env:
@@ -78,7 +78,7 @@ jobs:
             - name: Setup bun
               uses: oven-sh/setup-bun@v1
               with:
-                  bun-version: 1.0.30
+                  bun-version: 1.0.33
             - name: Install dependencies
               run: bun install --frozen-lockfile
             - name: Setup Playwright
@@ -98,7 +98,7 @@ jobs:
             - name: Setup bun
               uses: oven-sh/setup-bun@v1
               with:
-                  bun-version: 1.0.30
+                  bun-version: 1.0.33
             - name: Install dependencies
               run: bun install --frozen-lockfile
               env:
@@ -117,7 +117,7 @@ jobs:
             - name: Setup bun
               uses: oven-sh/setup-bun@v1
               with:
-                  bun-version: 1.0.30
+                  bun-version: 1.0.33
             - name: Install dependencies
               run: bun install --frozen-lockfile
               env:
@@ -132,12 +132,12 @@ jobs:
             - name: Setup bun
               uses: oven-sh/setup-bun@v1
               with:
-                  bun-version: 1.0.30
+                  bun-version: 1.0.33
             - name: Install dependencies
               run: bun install --frozen-lockfile
               env:
                   PUPPETEER_SKIP_DOWNLOAD: 1
-            - run: bun lint
+            - run: bun lint --no-cache
     test:
         runs-on: ubuntu-latest
         name: Test
@@ -147,7 +147,7 @@ jobs:
             - name: Setup bun
               uses: oven-sh/setup-bun@v1
               with:
-                  bun-version: 1.0.30
+                  bun-version: 1.0.33
             - name: Install dependencies
               run: bun install --frozen-lockfile
               env:
@@ -162,7 +162,7 @@ jobs:
             - name: Setup bun
               uses: oven-sh/setup-bun@v1
               with:
-                  bun-version: 1.0.30
+                  bun-version: 1.0.33
             - name: Install dependencies
               run: bun install --frozen-lockfile
               env:

.gitignore

@@ -43,3 +43,6 @@ screenshots/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+# Generated public files
+/public/~gitbook/static/

bun.lockb

@@ -209,6 +209,10 @@ const testCases: TestsCase[] = [
                 name: 'Lists',
                 url: 'blocks/lists',
             },
+            {
+                name: 'Math',
+                url: 'blocks/math',
+            },
         ],
     },
     {

e2e/pages.spec.ts

@@ -22,7 +22,23 @@ module.exports = withSentryConfig(
             return config;
         },
 
+        async headers() {
+            return [
+                // Cache all static assets for 1 year
+                {
+                    source: '/~gitbook/static/:path*',
+                    headers: [
+                        {
+                            key: 'Cache-Control',
+                            value: 'public, max-age=31536000, immutable',
+                        },
+                    ],
+                },
+            ];
+        },
+
         assetPrefix: process.env.GITBOOK_ASSETS_PREFIX,
+        poweredByHeader: false,
     },
     {
         silent: true,

next.config.js

@@ -12,7 +12,8 @@
         "format:check": "prettier ./ --ignore-unknown --list-different",
         "typecheck": "tsc --noEmit",
         "unit": "bun test {src,packages}/**/*.test.ts",
-        "e2e": "playwright test"
+        "e2e": "playwright test",
+        "postinstall": "rm -rf ./public/~gitbook/static/mathjax@3.2.2 && mkdir -p ./public/~gitbook/static/ && cp -R node_modules/mathjax/es5 ./public/~gitbook/static/mathjax@3.2.2"
     },
     "workspaces": [
         "packages/*"
@@ -59,7 +60,8 @@
         "tailwind-merge": "^2.2.0",
         "tailwind-shades": "^1.1.2",
         "unified": "^11.0.4",
-        "url-join": "^5.0.0"
+        "url-join": "^5.0.0",
+        "mathjax": "^3.2.2"
     },
     "devDependencies": {
         "@argos-ci/playwright": "^2.0.0",

package.json

@@ -2,7 +2,7 @@
     "name": "@gitbook/emoji-codepoints",
     "description": "Optimized mapping of codepoints to the fully qualified emoji codepoints",
     "private": true,
-    "main": "./index.ts",
+    "exports": "./index.ts",
     "dependencies": {},
     "devDependencies": {
         "emoji-assets": "^8.0.0"

packages/emoji-codepoints/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gitbook/react-contentkit",
-    "main": "./src/index.ts",
+    "exports": "./src/index.ts",
     "dependencies": {
         "classnames": "^2.5.1",
         "@gitbook/api": "^0.36.0",

packages/react-contentkit/package.json

@@ -0,0 +1,10 @@
+{
+    "name": "@gitbook/react-math",
+    "exports": "./src/index.ts",
+    "dependencies": {
+        "object-hash": "^3.0.0"
+    },
+    "peerDependencies": {
+        "react": "*"
+    }
+}