♻️ 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
+}