♻️ Refactored the post item

app/components/PostItem.vue

@@ -49,14 +49,7 @@
 
 <script lang="ts" setup>
 import { ref, watch } from "vue"
-import { unified } from "unified"
-import remarkParse from "remark-parse"
-import remarkMath from "remark-math"
-import remarkRehype from "remark-rehype"
-import remarkBreaks from "remark-breaks"
-import remarkGfm from "remark-gfm"
-import rehypeKatex from "rehype-katex"
-import rehypeStringify from "rehype-stringify"
+import { useMarkdownProcessor } from "~/composables/useMarkdownProcessor"
 import type { SnPost } from "~/types/api"
 
 import PostHeader from "./PostHeader.vue"
@@ -64,50 +57,23 @@ import AttachmentItem from "./AttachmentItem.vue"
 import PostReactionList from "./PostReactionList.vue"
 
 const props = defineProps<{ item: SnPost }>()
+const emit = defineEmits<{
+  react: [symbol: string, attitude: number, delta: number]
+}>()
 
-const processor = unified()
-  .use(remarkParse)
-  .use(remarkMath)
-  .use(remarkBreaks)
-  .use(remarkGfm)
-  .use(remarkRehype)
-  .use(rehypeKatex)
-  .use(rehypeStringify)
+const { render } = useMarkdownProcessor()
 
 const htmlContent = ref<string>("")
 
 function handleReaction(symbol: string, attitude: number, delta: number) {
-  // Update the local item data
-  if (!props.item) return
-
-  const reactions = (props.item as any).reactions || {}
-  const currentCount = reactions[symbol] || 0
-  const newCount = Math.max(0, currentCount + delta)
-
-  if (newCount === 0) {
-    delete reactions[symbol]
-  } else {
-    reactions[symbol] = newCount
-  }
-
-  // Update the reactionsMade status
-  const reactionsMade = (props.item as any).reactionsMade || {}
-  if (delta > 0) {
-    reactionsMade[symbol] = true
-  } else {
-    delete reactionsMade[symbol]
-  }
-
-  // Update the item object (this will trigger reactivity)
-  ;(props.item as any).reactions = { ...reactions }
-  ;(props.item as any).reactionsMade = { ...reactionsMade }
+  emit('react', symbol, attitude, delta)
 }
 
 watch(
   props.item,
   (value) => {
     if (value.content)
-      htmlContent.value = String(processor.processSync(value.content))
+      htmlContent.value = render(value.content)
   },
   { immediate: true, deep: true }
 )

app/composables/useMarkdownProcessor.ts

@@ -0,0 +1,22 @@
+import { createMarkdownExit } from "markdown-exit"
+// @ts-ignore
+import texmath from "markdown-it-texmath"
+import katex from "katex"
+
+export function useMarkdownProcessor() {
+  const processor = createMarkdownExit({
+    breaks: true,
+    html: true,
+    linkify: true,
+    typographer: true
+  // @ts-ignore
+  }).use(texmath, {
+    engine: katex,
+    delimiters: 'dollars',
+    katexOptions: { macros: { "\\RR": "\\mathbb{R}" } }
+  })
+
+  return {
+    render: (content: string) => processor.render(content)
+  }
+}

app/layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app :theme="colorMode.preference">
-    <v-app-bar flat class="app-bar-blur">
+    <v-app-bar elevation="2" color="surface-lighten-5">
       <v-container class="mx-auto d-flex align-center justify-center">
         <img
           :src="colorMode.value == 'dark' ? IconDark : IconLight"
@@ -22,7 +22,7 @@
         <v-spacer />
 
         <v-menu>
-          <template v-slot:activator="{ props }">
+          <template #activator="{ props }">
             <v-avatar
               v-bind="props"
               class="me-4"
@@ -82,22 +82,3 @@ const links: NavLink[] = [
   }
 ]
 </script>
-
-<style scoped>
-.app-bar-blur {
-  -webkit-mask-image: linear-gradient(
-    to bottom,
-    rgba(0, 0, 0, 1) 40%,
-    rgba(0, 0, 0, 0.5) 65%,
-    rgba(0, 0, 0, 0) 100%
-  );
-  mask-image: linear-gradient(
-    to bottom,
-    rgba(0, 0, 0, 1) 40%,
-    rgba(0, 0, 0, 0.5) 65%,
-    rgba(0, 0, 0, 0) 100%
-  );
-  mask-repeat: no-repeat;
-  mask-size: 100%;
-}
-</style>

app/pages/posts/[id].vue

@@ -206,14 +206,7 @@
 
 <script setup lang="ts">
 import { computed } from "vue"
-import { unified } from "unified"
-import remarkParse from "remark-parse"
-import remarkMath from "remark-math"
-import remarkRehype from "remark-rehype"
-import rehypeKatex from "rehype-katex"
-import rehypeStringify from "rehype-stringify"
-import remarkBreaks from "remark-breaks"
-import remarkGfm from "remark-gfm"
+import { useMarkdownProcessor } from "~/composables/useMarkdownProcessor"
 import type { SnPost } from "~/types/api"
 
 import PostHeader from "~/components/PostHeader.vue"
@@ -223,16 +216,9 @@ import PostReactionList from "~/components/PostReactionList.vue"
 const route = useRoute()
 const id = route.params.id as string
 
-const processor = unified()
-  .use(remarkParse)
-  .use(remarkMath)
-  .use(remarkBreaks)
-  .use(remarkGfm)
-  .use(remarkRehype)
-  .use(rehypeKatex)
-  .use(rehypeStringify)
+const { render } = useMarkdownProcessor()
 
-const apiServer = useSolarNetwork(true)
+const apiServer = useSolarNetwork()
 
 const {
   data: postData,
@@ -244,7 +230,7 @@ const {
     const post = resp as SnPost
     let html = ""
     if (post.content) {
-      html = String(processor.processSync(post.content))
+      html = render(post.content)
     }
     return { post, html }
   } catch (e) {
@@ -314,7 +300,7 @@ function handleReaction(symbol: string, attitude: number, delta: number) {
   if (!post.value) return
 
   // Update the reactions count
-  const reactions = (post.value as any).reactions || {}
+  const reactions = post.value.reactionsCount || {}
   const currentCount = reactions[symbol] || 0
   const newCount = Math.max(0, currentCount + delta)
 
@@ -325,7 +311,7 @@ function handleReaction(symbol: string, attitude: number, delta: number) {
   }
 
   // Update the reactionsMade status
-  const reactionsMade = (post.value as any).reactionsMade || {}
+  const reactionsMade = post.value.reactionsMade || {}
   if (delta > 0) {
     reactionsMade[symbol] = true
   } else {
@@ -333,7 +319,7 @@ function handleReaction(symbol: string, attitude: number, delta: number) {
   }
 
   // Update the post object
-  ;(post.value as any).reactions = reactions
-  ;(post.value as any).reactionsMade = reactionsMade
+  post.value.reactionsCount = reactions
+  post.value.reactionsMade = reactionsMade
 }
 </script>

app/stores/user.ts

@@ -36,7 +36,13 @@ export const useUserStore = defineStore("user", () => {
         user.value = response
         console.log(`[UserStore] Logged in as @${user.value.name}`)
       } catch (e: unknown) {
-        if (e instanceof FetchError && e.statusCode == 401) {
+        // Check for 401 Unauthorized error
+        const is401Error = (e instanceof FetchError && e.statusCode === 401) ||
+                          (e && typeof e === 'object' && 'status' in e && (e as { status: number }).status === 401) ||
+                          (e && typeof e === 'object' && 'statusCode' in e && (e as { statusCode: number }).statusCode === 401) ||
+                          (e instanceof Error && (e.message?.includes('401') || e.message?.includes('Unauthorized')))
+
+        if (is401Error) {
           error.value = "Unauthorized"
           user.value = null
         } else {

app/types/markdown-it-texmath.d.ts

@@ -0,0 +1,10 @@
+declare module 'markdown-it-texmath' {
+  interface TexMathOptions {
+    engine?: any
+    delimiters?: string
+    katexOptions?: Record<string, any>
+  }
+
+  function texmath(options?: TexMathOptions): any
+  export default texmath
+}

eslint.config.mjs

@@ -8,7 +8,8 @@ export default withNuxt(
       "vue/multi-word-component-names": "off",
       "vue/no-v-html": "off",
       "vue/html-self-closing": "off",
-      "@typescript-eslint/ban-ts-comment": "off"
+      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-dynamic-delete": "off"
     }
   }
 )

package.json

@@ -19,39 +19,31 @@
     "@nuxtjs/color-mode": "3.5.2",
     "@nuxtjs/i18n": "10.1.0",
     "@pinia/nuxt": "0.11.2",
-    "@tailwindcss/typography": "^0.5.18",
-    "@tailwindcss/vite": "^4.1.13",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.1.16",
     "@vueuse/core": "^13.9.0",
     "blurhash": "^2.0.5",
     "cfturnstile-vue3": "^2.0.0",
-    "eslint": "^9.36.0",
-    "katex": "^0.16.22",
+    "eslint": "^9.39.1",
+    "katex": "^0.16.25",
     "luxon": "^3.7.2",
-    "nuxt": "^4.1.2",
-    "nuxt-og-image": "^5.1.11",
+    "markdown-exit": "^1.0.0-beta.6",
+    "markdown-it-texmath": "^1.0.0",
+    "nuxt": "^4.2.0",
+    "nuxt-og-image": "^5.1.12",
     "pinia": "^3.0.3",
-    "rehype-katex": "^7.0.1",
-    "rehype-stringify": "^10.0.1",
-    "remark": "^15.0.1",
-    "remark-breaks": "^4.0.0",
-    "remark-gfm": "^4.0.1",
-    "remark-html": "^16.0.1",
-    "remark-math": "^6.0.0",
-    "remark-parse": "^11.0.0",
-    "remark-rehype": "^11.1.2",
     "sharp": "^0.34.4",
     "swagger-themes": "^1.4.3",
-    "swagger-ui-dist": "^5.29.0",
-    "tailwindcss": "^4.1.13",
+    "swagger-ui-dist": "^5.30.2",
+    "tailwindcss": "^4.1.16",
     "tus-js-client": "^4.3.1",
-    "unified": "^11.0.5",
-    "vue": "^3.5.21",
-    "vue-router": "^4.5.1",
+    "vue": "^3.5.22",
+    "vue-router": "^4.6.3",
     "vuetify-nuxt-module": "0.18.7"
   },
   "devDependencies": {
     "@mdi/font": "^7.4.47",
     "@types/luxon": "^3.7.1",
-    "@types/node": "^24.5.2"
+    "@types/node": "^24.10.0"
   }
 }