app/globals.css

@@ -1,6 +1,5 @@
 @import 'tailwindcss';
 @import '../node_modules/highlight.js/styles/monokai.min.css';
-@import '../node_modules/katex/dist/katex.min.css';
 
 @theme {
   --color-bg: #040404;
@@ -25,16 +24,6 @@ pre code.hljs {
   @apply p-0;
 }
 
-.katex-display {
-  overflow-x: auto;
-  overflow-y: hidden;
-  padding-block-end: 0.25rem;
-}
-
-.katex-display > .katex > .katex-html > .tag {
-  @apply relative ml-8 lg:absolute lg:right-1;
-}
-
 * {
   @apply scroll-smooth;
 }

app/posts/[slug]/page.tsx

@@ -4,7 +4,6 @@ import { ShareLinks } from '@/components/post/ShareLinks'
 import { TableOfContents } from '@/components/post/TableOfContents'
 import { getAllPostSlugs, getNextAndPreviousPosts, getPostBySlug } from '@/lib/posts'
 import { slugify } from '@/utils/slug'
-import { Pencil, SendHorizonal } from 'lucide-react'
 import type { Metadata } from 'next'
 import Link from 'next/link'
 
@@ -44,7 +43,7 @@ export default async function Post({ params }: { params: Promise<{ slug: string
 
   return (
     <main className="flex w-full">
-      <article className="max-w-3xl 2xl:max-w-4xl mx-auto px-4 py-8 lg:py-16 min-w-0">
+      <article className="max-w-3xl 2xl:max-w-4xl mx-auto px-4 py-8 lg:py-16">
         {meta.category && (
           <Link
             href={`/categories/${slugify(meta.category)}`}
@@ -54,12 +53,9 @@ export default async function Post({ params }: { params: Promise<{ slug: string
           </Link>
         )}
         <h1 className="text-4xl font-bold mb-4">{meta.title}</h1>
-        <div className="flex justify-between md:justify-normal items-center gap-2 text-fg-dim mb-4 border-y border-border py-2 px-2 md:px-4 text-sm">
+        <div className="flex items-center gap-2 text-fg-dim mb-4 border-y border-border py-2 px-4 text-sm">
           <div className="flex items-center gap-2">
-            <span className="hidden md:inline">Posted</span>
-            <span className="md:hidden">
-              <SendHorizonal className="w-3 h-3" />
-            </span>
+            <span>Posted</span>
             <time
               dateTime={meta.date}
               title={new Date(meta.date).toLocaleString()}
@@ -67,19 +63,16 @@ export default async function Post({ params }: { params: Promise<{ slug: string
             >
               {new Date(meta.date).toLocaleDateString(undefined, {
                 day: 'numeric',
-                month: 'short',
+                month: 'long',
                 year: 'numeric',
               })}
             </time>
           </div>
-          <span className="hidden md:inline">&middot;</span>
+          <span>&middot;</span>
           {meta.updated && (
             <>
               <div className="flex items-center gap-2">
-                <span className="hidden md:inline">Updated</span>
-                <span className="md:hidden">
-                  <Pencil className="w-3 h-3" />
-                </span>
+                <span>Updated</span>
                 <time
                   dateTime={meta.updated}
                   title={new Date(meta.updated).toLocaleString()}
@@ -87,12 +80,12 @@ export default async function Post({ params }: { params: Promise<{ slug: string
                 >
                   {new Date(meta.updated).toLocaleDateString(undefined, {
                     day: 'numeric',
-                    month: 'short',
+                    month: 'long',
                     year: 'numeric',
                   })}
                 </time>
               </div>
-              <span className="hidden md:inline">&middot;</span>
+              <span>&middot;</span>
             </>
           )}
           <span>{meta.readingTimeText}</span>

lib/posts.tsx

@@ -80,7 +80,7 @@ export async function getPostBySlug(slug: string) {
     .use(rehypeDefinition)
 
   if (data.math) {
-    processor = processor.use(rehypeKatex)
+    processor = processor.use(rehypeKatex, { output: 'mathml' })
   }
 
   if (data.mermaid) {

lib/rehype-mermaid-ssg.ts

@@ -29,8 +29,6 @@ export const rehypeMermaidSsg: Plugin<[], Root> = () => async (tree: Root) => {
         const svg = await renderMermaidToSvg(chart)
         const svgTree = fromHtmlIsomorphic(svg, { fragment: true })
         const svgNode = svgTree.children.find((c) => c.type === 'element') as Element | undefined
-        svgNode?.properties.className?.push('max-w-160', 'mx-auto', 'my-4')
-        if (svgNode?.properties.style) svgNode.properties.style = ''
         if (svgNode) {
           ;(parent.children as Element[])[index] = svgNode
         }