Refactor handling and styling in project gallery page

components/global/Footer/FooterLayout.tsx

@@ -1,9 +1,10 @@
 import type { PortableTextBlock } from 'next-sanity'
 
 import { CustomPortableText } from '@/components//shared/CustomPortableText'
+import ChatWidget from '@/components/shared/ChatWidget'
 import type { SettingsPayload } from '@/types'
+
 import GTranslate from './gTranslate'
-import ChatWidget from '@/components/shared/ChatWidget'
 
 interface FooterProps {
   data: SettingsPayload

components/shared/CustomPortableText.tsx

@@ -1,3 +1,6 @@
+import 'katex/dist/katex.min.css' // Import the KaTeX CSS for styling
+
+import katex from 'katex'
 import {
   PortableText,
   type PortableTextBlock,
@@ -8,13 +11,6 @@ import type { Image } from 'sanity'
 import ImageBox from '@/components/shared/ImageBox'
 import { TimelineSection } from '@/components/shared/TimelineSection'
 
-const mathInlineIcon = () => (
-  <span>
-    <span style={{ fontWeight: 'bold' }}>∑</span>b
-  </span>
-)
-const mathIcon = () => <span style={{ fontWeight: 'bold' }}>∑</span>
-
 export function CustomPortableText({
   paragraphClasses,
   value,
@@ -66,6 +62,50 @@ export function CustomPortableText({
         const { items } = value || {}
         return <TimelineSection timelines={items} />
       },
+      latexEquation: ({ value }) => {
+        const renderEquation = (equation: any) => {
+          if (equation._type === 'latex') {
+            return (
+              <div key={equation._key} className="my-4">
+                <span
+                  dangerouslySetInnerHTML={{
+                    __html: katex.renderToString(equation.body, {
+                      throwOnError: false,
+                    }),
+                  }}
+                />
+              </div>
+            )
+          } else if (equation._type === 'block') {
+            return (
+              <div key={equation._key} className="my-4">
+                {equation.children.map((child: any) => {
+                  if (child._type === 'span') {
+                    return <span key={child._key}>{child.text}</span>
+                  } else if (child._type === 'latex') {
+                    return (
+                      <span
+                        key={child._key}
+                        dangerouslySetInnerHTML={{
+                          __html: katex.renderToString(child.body, {
+                            throwOnError: false,
+                          }),
+                        }}
+                      />
+                    )
+                  }
+                  return null
+                })}
+              </div>
+            )
+          }
+          return null
+        }
+
+        return (
+          <div>{value?.equation?.map((item: any) => renderEquation(item))}</div>
+        )
+      },
     },
   }
 

package.json

@@ -46,6 +46,7 @@
     "eslint-config-next": "^13.0.1",
     "framer-motion": "^7.10.3",
     "imagemin": "^9.0.0",
+    "katex": "^0.16.11",
     "lucide-react": "^0.452.0",
     "next": "14.2.13",
     "next-sanity": "9.5.0",

sanity/schemas/objects/latexEquation.ts

@@ -18,7 +18,7 @@ export default defineType({
           title: 'Block',
           of: [{ type: 'latex', icon: CalculatorIcon, title: 'Inline math' }],
         },
-        { type: 'latex', icon: CalculatorIcon, title: 'Math block' },
+        { type: 'latex', icon: Calculator, title: 'Math block' },
       ],
       options: {
         layout: 'tags',