👔 Disabled preserve empty lines on the article posts

app/assets/css/main.css

@@ -43,3 +43,7 @@ body {
   opacity: 0;
   filter: blur(1rem);
 }
+
+.prose pre {
+  padding: 0;
+}

app/components/Attachment/AttachmentItem.vue

@@ -60,7 +60,7 @@ const aspectRatio = computed(
     props.item.fileMeta?.ratio ??
     (imageWidth.value && imageHeight.value
       ? imageHeight.value / imageWidth.value
-      : 1)
+      : null)
 )
 const imageLoaded = ref(false)
 
@@ -77,7 +77,7 @@ function openExternally() {
       y: rect.top,
       width: rect.width,
       height: rect.height,
-      aspectRatio: aspectRatio.value
+      aspectRatio: aspectRatio.value == null ? 0 : aspectRatio.value
     }
 
     // Store transition data
@@ -98,7 +98,7 @@ const remoteSource = computed(
 
 const blurhashContainerStyle = computed(() => {
   return {
-    "padding-bottom": `${aspectRatio.value * 100}%`
+    "padding-bottom": `${aspectRatio.value == null ? 0 : aspectRatio.value * 100}%`
   }
 })
 

app/components/Attachment/AttachmentList.vue

@@ -58,7 +58,6 @@ const props = defineProps<{
   maxHeight?: number
 }>()
 
-const apiBase = useSolarNetworkUrl()
 
 const isAllImages = computed(
   () =>
@@ -194,8 +193,4 @@ function calculateAspectRatio(): number {
     ? (mostFrequent[mid - 1]! + mostFrequent[mid]!) / 2
     : mostFrequent[mid]!
 }
-
-function getAttachmentUrl(attachment: SnAttachment): string {
-  return `${apiBase}/drive/files/${attachment.id}`
-}
 </script>

app/components/OgImage/ImageCard.vue

@@ -4,49 +4,23 @@ import { useSiteConfig } from "#site-config/app/composables"
 import { computed, defineComponent, h, resolveComponent } from "vue"
 
 const props = defineProps({
-  colorMode: { type: String, required: false },
+  colorMode: { type: String, required: false, default: "light" },
   title: { type: String, required: false, default: "title" },
-  description: { type: String, required: false },
-  icon: { type: [String, Boolean], required: false },
-  siteName: { type: String, required: false },
-  siteLogo: { type: String, required: false },
+  description: { type: String, required: false, default: null },
+  icon: { type: [String, Boolean], required: false, default: null },
+  siteName: { type: String, required: false, default: null },
+  siteLogo: { type: String, required: false, default: null },
   theme: { type: String, required: false, default: "#3f51b5" },
-  backgroundImage: { type: String, required: false },
-  avatarUrl: { type: String, required: false }
+  backgroundImage: { type: String, required: false, default: null },
+  avatarUrl: { type: String, required: false, default: null }
 })
-const HexRegex = /^#(?:[0-9a-f]{3}){1,2}$/i
 const runtimeConfig = useOgImageRuntimeConfig()
 const colorMode = computed(() => {
   return props.colorMode || runtimeConfig.colorPreference || "light"
 })
 
-const themeHex = computed(() => {
-  if (HexRegex.test(props.theme)) return props.theme
-  if (HexRegex.test(`#${props.theme}`)) return `#${props.theme}`
-  if (props.theme.startsWith("rgb")) {
-    const rgb = props.theme
-      .replace("rgb(", "")
-      .replace("rgba(", "")
-      .replace(")", "")
-      .split(",")
-      .map((v) => Number.parseInt(v.trim(), 10))
-    const hex = rgb
-      .map((v) => {
-        const hex2 = v.toString(16)
-        return hex2.length === 1 ? `0${hex2}` : hex2
-      })
-      .join("")
-    return `#${hex}`
-  }
-  return "#FFFFFF"
-})
-const themeRgb = computed(() => {
-  return themeHex.value
-    .replace("#", "")
-    .match(/.{1,2}/g)
-    ?.map((v) => Number.parseInt(v, 16))
-    .join(", ")
-})
+
+
 const textShadow = computed(() => {
   return '2px 2px 8px rgba(0,0,0,0.8)'
 })
@@ -54,9 +28,7 @@ const siteConfig = useSiteConfig()
 const siteName = computed(() => {
   return props.siteName || siteConfig.name
 })
-const siteLogo = computed(() => {
-  return props.siteLogo || siteConfig.logo
-})
+
 const IconComponent = runtimeConfig.hasNuxtIcon
   ? resolveComponent("Icon")
   : defineComponent({
@@ -67,7 +39,7 @@ const IconComponent = runtimeConfig.hasNuxtIcon
 if (
   typeof props.icon === "string" &&
   !runtimeConfig.hasNuxtIcon &&
-  process.dev
+  import.meta.dev
 ) {
   console.warn(
     "Please install `@nuxt/icon` to use icons with the fallback OG Image component."

app/components/OgImage/NuxtSeo.vue

@@ -3,14 +3,14 @@ import { useOgImageRuntimeConfig } from "#og-image/app/utils"
 import { useSiteConfig } from "#site-config/app/composables"
 import { computed, defineComponent, h, resolveComponent } from "vue"
 const props = defineProps({
-  colorMode: { type: String, required: false },
+  colorMode: { type: String, required: false, default: "light" },
   title: { type: String, required: false, default: "title" },
-  description: { type: String, required: false },
-  icon: { type: [String, Boolean], required: false },
-  siteName: { type: String, required: false },
-  siteLogo: { type: String, required: false },
+  description: { type: String, required: false, default: null },
+  icon: { type: [String, Boolean], required: false, default: null },
+  siteName: { type: String, required: false, default: null },
+  siteLogo: { type: String, required: false, default: null },
   theme: { type: String, required: false, default: "#3f51b5" },
-  backgroundImage: { type: String, required: false }
+  backgroundImage: { type: String, required: false, default: null }
 })
 const HexRegex = /^#(?:[0-9a-f]{3}){1,2}$/i
 const runtimeConfig = useOgImageRuntimeConfig()
@@ -62,7 +62,7 @@ const IconComponent = runtimeConfig.hasNuxtIcon
 if (
   typeof props.icon === "string" &&
   !runtimeConfig.hasNuxtIcon &&
-  process.dev
+  import.meta.dev
 ) {
   console.warn(
     "Please install `@nuxt/icon` to use icons with the fallback OG Image component."

app/components/Post/PostEditor.vue

@@ -20,7 +20,6 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import * as tus from 'tus-js-client'
 import { useSolarNetwork } from '~/composables/useSolarNetwork'
 
 // Interface for uploaded files in the editor
@@ -35,7 +34,6 @@ const emits = defineEmits(['posted'])
 const publisher = ref<string | undefined>()
 const content = ref('')
 
-const selectedFiles = ref<File[]>([])
 const fileList = ref<UploadedFile[]>([])
 
 const submitting = ref(false)
@@ -61,54 +59,4 @@ async function submit() {
   fileList.value = []
   emits('posted')
 }
-
-function handleFileSelect() {
-  selectedFiles.value.forEach(file => {
-    uploadFile(file)
-  })
-  selectedFiles.value = []
-}
-
-function uploadFile(file: File) {
-  const upload = new tus.Upload(file, {
-    endpoint: '/cgi/drive/tus',
-    retryDelays: [0, 3000, 5000, 10000, 20000],
-    removeFingerprintOnSuccess: false,
-    uploadDataDuringCreation: false,
-    metadata: {
-      filename: file.name,
-      'content-type': file.type ?? 'application/octet-stream',
-    },
-    headers: {
-      'X-DirectUpload': 'true',
-    },
-    onShouldRetry: () => false,
-    onError: function (error) {
-      console.error('[DRIVE] Upload failed:', error)
-    },
-    onProgress: function (_bytesUploaded, _bytesTotal) {
-      // Could show progress
-    },
-    onSuccess: function (payload) {
-      const rawInfo = payload.lastResponse.getHeader('x-fileinfo')
-      const jsonInfo = JSON.parse(rawInfo as string)
-      console.log('[DRIVE] Upload successful: ', jsonInfo)
-      fileList.value.push({
-        name: file.name,
-        url: `/cgi/drive/files/${jsonInfo.id}`,
-        type: jsonInfo.mime_type,
-      })
-    },
-    onBeforeRequest: function (req) {
-      const xhr = req.getUnderlyingObject()
-      xhr.withCredentials = true
-    },
-  })
-  upload.findPreviousUploads().then(function (previousUploads) {
-    if (previousUploads.length > 0 && previousUploads[0]) {
-      upload.resumeFromPreviousUpload(previousUploads[0])
-    }
-    upload.start()
-  })
-}
 </script>

app/components/Post/PostItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card class="px-4 py-3">
+  <v-card>
     <v-card-text>
       <div class="flex flex-col gap-3">
         <post-header :item="props.item" />
@@ -20,13 +20,22 @@
           <div v-html="htmlContent" />
         </article>
 
-        <attachment-list :attachments="props.item.attachments" :max-height="640" />
+        <attachment-list
+          :attachments="props.item.attachments"
+          :max-height="640"
+        />
 
-        <div v-if="props.item.repliesCount" class="flex gap-2 text-xs opacity-80">
+        <div
+          v-if="props.item.repliesCount"
+          class="flex gap-2 text-xs opacity-80"
+        >
           <v-icon icon="mdi-comment-text-multiple" size="small" />
           <p>{{ props.item.repliesCount }} replies</p>
         </div>
-        <div v-if="props.item.isTruncated" class="flex gap-2 text-xs opacity-80">
+        <div
+          v-if="props.item.isTruncated"
+          class="flex gap-2 text-xs opacity-80"
+        >
           <v-icon icon="mdi-dots-horizontal" size="small" />
           <p>Post truncated, tap to see details...</p>
         </div>
@@ -56,7 +65,11 @@ const emit = defineEmits<{
   react: [symbol: string, attitude: number, delta: number]
 }>()
 
-const { render } = useMarkdownProcessor()
+const preserveEmptyLinesRef = ref(true) // New ref for the option
+
+const { render } = useMarkdownProcessor({
+  preserveEmptyLines: preserveEmptyLinesRef
+})
 
 const htmlContent = ref<string>("")
 
@@ -65,8 +78,9 @@ function handleReaction(symbol: string, attitude: number, delta: number) {
 }
 
 watch(
-  props.item,
+  () => props.item, // Watch the item prop directly
   (value) => {
+    preserveEmptyLinesRef.value = value.type !== 1 // Update the ref
     if (value.content) htmlContent.value = render(value.content)
   },
   { immediate: true, deep: true }

app/components/Post/RepliesList.vue

@@ -62,7 +62,7 @@ const router = useRouter()
 
 const props = defineProps<{
   params: RepliesListParams
-  hideQuickReply: boolean
+  hideQuickReply?: boolean
 }>()
 
 defineEmits<{

app/composables/useMarkdownProcessor.ts

@@ -1,4 +1,9 @@
-import { createMarkdownExit, type PluginWithParams } from "markdown-exit"
+import { computed, unref, type Ref } from "vue"
+import {
+  createMarkdownExit,
+  type PluginSimple,
+  type PluginWithParams
+} from "markdown-exit"
 import hljs from "highlight.js"
 import hljsMarkdown from "markdown-it-highlightjs"
 // @ts-ignore
@@ -7,30 +12,49 @@ import katex from "katex"
 
 import "highlight.js/styles/a11y-dark.min.css"
 
-export function useMarkdownProcessor() {
+export function useMarkdownProcessor(
+  options: { preserveEmptyLines?: boolean | Ref<boolean> } = {
+    preserveEmptyLines: true
+  }
+) {
   const serverUrl = useSolarNetworkUrl()
 
-  const processor = createMarkdownExit({
-    breaks: true,
-    html: true,
-    linkify: true,
-    typographer: true
-  })
-    // @ts-ignore
-    .use(texmath, {
-      engine: katex,
-      delimiters: "dollars",
-      katexOptions: { macros: { "\\RR": "\\mathbb{R}" } }
-    })
-    .use(hljsMarkdown, { hljs })
-    .use(imgSolarNetworkPlugin, { serverUrl: serverUrl })
+  const processor = computed(() => {
+    const currentPreserveEmptyLines = unref(options.preserveEmptyLines)
 
-  // Keep the empty lines
+    const md = createMarkdownExit({
+      breaks: true,
+      html: true,
+      linkify: true,
+      typographer: true
+    })
+      // @ts-ignore
+      .use(texmath, {
+        engine: katex,
+        delimiters: "dollars",
+        katexOptions: { macros: { "\\RR": "\\mathbb{R}" } }
+      })
+      .use(hljsMarkdown, { hljs })
+      .use(imgSolarNetworkPlugin, { serverUrl: serverUrl })
+
+    if (currentPreserveEmptyLines) {
+      md.use(preserveEmptyLinesPlugin)
+    }
+    return md
+  })
+
+  return {
+    render: (content: string) => processor.value.render(content)
+  }
+}
+
+const preserveEmptyLinesPlugin: PluginSimple = (md) => {
   const defaultParagraphRenderer =
-    processor.renderer.rules.paragraph_open ||
+    md.renderer.rules.paragraph_open ||
     ((tokens, idx, options, _env, self) =>
       self.renderToken(tokens, idx, options))
-  processor.renderer.rules.paragraph_open = function (
+
+  md.renderer.rules.paragraph_open = function (
     tokens,
     idx,
     options,
@@ -58,10 +82,6 @@ export function useMarkdownProcessor() {
     }
     return result + defaultParagraphRenderer(tokens, idx, options, env, self)
   }
-
-  return {
-    render: (content: string) => processor.render(content)
-  }
 }
 
 const imgSolarNetworkPlugin: PluginWithParams = (

app/pages/auth/authorize.vue

@@ -74,18 +74,18 @@
                   <v-btn
                     color="primary"
                     :loading="isAuthorizing"
-                    @click="handleAuthorize"
                     class="flex-grow-1"
                     size="large"
+                    @click="handleAuthorize"
                   >
                     Authorize
                   </v-btn>
                   <v-btn
                     variant="outlined"
                     :disabled="isAuthorizing"
-                    @click="handleDeny"
                     class="flex-grow-1"
                     size="large"
+                    @click="handleDeny"
                   >
                     Deny
                   </v-btn>
@@ -140,9 +140,10 @@ async function fetchClientInfo() {
     const queryString = window.location.search.slice(1)
     clientInfo.value = await api(`/id/auth/open/authorize?${queryString}`)
     checkIfNewApp()
-  } catch (err: any) {
+  } catch (err) {
     error.value =
-      err.message || "An error occurred while loading the authorization request"
+      (err instanceof Error ? err.message : String(err)) ||
+      "An error occurred while loading the authorization request"
   } finally {
     isLoading.value = false
   }
@@ -171,8 +172,10 @@ async function handleAuthorize(authorize = true) {
     if (data.redirectUri) {
       window.location.href = data.redirectUri
     }
-  } catch (err: any) {
-    error.value = err.message || "An error occurred during authorization"
+  } catch (err) {
+    error.value =
+      (err instanceof Error ? err.message : String(err)) ||
+      "An error occurred during authorization"
   } finally {
     isAuthorizing.value = false
   }

app/pages/files/[id].vue

@@ -1,14 +1,7 @@
 <template>
   <div class="lightbox-container">
     <!-- Top Toolbar -->
-    <v-app-bar
-      v-if="fileInfo"
-      class="top-toolbar"
-      flat
-      height="56"
-      color="rgba(0,0,0,0.7)"
-      dark
-    >
+    <v-app-bar v-if="fileInfo" class="top-toolbar" flat height="56">
       <v-container fluid>
         <v-row align="center" class="pa-2">
           <v-col cols="12" md="4">
@@ -94,7 +87,15 @@
             password to download it.
           </v-alert>
         </div>
-        <div v-else class="file-preview" @wheel="handleZoom" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" @dblclick="handleDoubleClick">
+        <div
+          v-else
+          class="file-preview"
+          @wheel="handleZoom"
+          @touchstart="handleTouchStart"
+          @touchmove="handleTouchMove"
+          @touchend="handleTouchEnd"
+          @dblclick="handleDoubleClick"
+        >
           <v-img
             v-if="fileType === 'image'"
             :src="fileSource"
@@ -161,25 +162,35 @@
               </div>
               <div class="mb-4">
                 <strong>File Name</strong>
-                <div class="text-xs">{{ fileInfo?.name || 'N/A' }}</div>
+                <div class="text-xs">{{ fileInfo?.name || "N/A" }}</div>
               </div>
               <div class="mb-4">
                 <strong>MIME Type</strong>
-                <div class="text-xs">{{ fileInfo?.mimeType || 'N/A' }}</div>
+                <div class="text-xs">{{ fileInfo?.mimeType || "N/A" }}</div>
               </div>
               <div class="mb-4">
                 <strong>File Size</strong>
-                <div class="text-xs">{{ fileInfo?.size ? formatBytes(fileInfo.size) : 'N/A' }}</div>
+                <div class="text-xs">
+                  {{ fileInfo?.size ? formatBytes(fileInfo.size) : "N/A" }}
+                </div>
               </div>
             </v-col>
             <v-col cols="12" md="6">
               <div class="mb-4">
                 <strong>Created At</strong>
-                <div class="text-xs">{{ fileInfo?.createdAt ? new Date(fileInfo.createdAt).toLocaleString() : 'N/A' }}</div>
+                <div class="text-xs">
+                  {{
+                    fileInfo?.createdAt
+                      ? new Date(fileInfo.createdAt).toLocaleString()
+                      : "N/A"
+                  }}
+                </div>
               </div>
               <div class="mb-4">
                 <strong>Encrypted</strong>
-                <div class="text-xs">{{ fileInfo?.isEncrypted ? 'Yes' : 'No' }}</div>
+                <div class="text-xs">
+                  {{ fileInfo?.isEncrypted ? "Yes" : "No" }}
+                </div>
               </div>
             </v-col>
           </v-row>
@@ -189,7 +200,7 @@
           <v-card variant="outlined" class="pa-2">
             <pre
               class="overflow-x-auto"
-              style="font-size: 14px;"
+              style="font-size: 14px"
             ><code>{{ JSON.stringify(fileInfo?.fileMeta, null, 2) }}</code></pre>
           </v-card>
         </v-card-text>
@@ -335,19 +346,32 @@ const fileType = computed(() => {
   return fileInfo.value.mimeType?.split("/")[0] || "unknown"
 })
 const fileIcon = computed(() => {
-  if (!fileInfo.value?.mimeType) return 'mdi-file'
+  if (!fileInfo.value?.mimeType) return "mdi-file"
 
   const mime = fileInfo.value.mimeType.toLowerCase()
 
-  if (mime.startsWith('image/')) return 'mdi-file-image'
-  if (mime.startsWith('video/')) return 'mdi-file-video'
-  if (mime.startsWith('audio/')) return 'mdi-file-music'
-  if (mime === 'application/pdf') return 'mdi-file-pdf'
-  if (mime.startsWith('text/') || mime.includes('javascript') || mime.includes('json') || mime.includes('xml')) return 'mdi-file-code'
-  if (mime.includes('zip') || mime.includes('rar') || mime.includes('tar')) return 'mdi-zip-box'
-  if (mime.includes('document') || mime.includes('word') || mime.includes('excel') || mime.includes('powerpoint')) return 'mdi-file-document'
+  if (mime.startsWith("image/")) return "mdi-file-image"
+  if (mime.startsWith("video/")) return "mdi-file-video"
+  if (mime.startsWith("audio/")) return "mdi-file-music"
+  if (mime === "application/pdf") return "mdi-file-pdf"
+  if (
+    mime.startsWith("text/") ||
+    mime.includes("javascript") ||
+    mime.includes("json") ||
+    mime.includes("xml")
+  )
+    return "mdi-file-code"
+  if (mime.includes("zip") || mime.includes("rar") || mime.includes("tar"))
+    return "mdi-zip-box"
+  if (
+    mime.includes("document") ||
+    mime.includes("word") ||
+    mime.includes("excel") ||
+    mime.includes("powerpoint")
+  )
+    return "mdi-file-document"
 
-  return 'mdi-file'
+  return "mdi-file"
 })
 const fileSource = computed(() => {
   let url = `${apiBase}/drive/files/${fileId}?original=true`
@@ -375,7 +399,7 @@ async function confirmDownload() {
 }
 
 function handleZoom(event: WheelEvent) {
-  if (fileType.value !== 'image') return
+  if (fileType.value !== "image") return
 
   event.preventDefault()
   const delta = event.deltaY > 0 ? -0.1 : 0.1
@@ -383,7 +407,7 @@ function handleZoom(event: WheelEvent) {
 }
 
 function handleTouchStart(event: TouchEvent) {
-  if (fileType.value !== 'image' || event.touches.length !== 2) return
+  if (fileType.value !== "image" || event.touches.length !== 2) return
 
   event.preventDefault()
   isPinching.value = true
@@ -391,33 +415,38 @@ function handleTouchStart(event: TouchEvent) {
   const touch2 = event.touches[1]!
   initialDistance.value = Math.sqrt(
     Math.pow(touch2.clientX - touch1.clientX, 2) +
-    Math.pow(touch2.clientY - touch1.clientY, 2)
+      Math.pow(touch2.clientY - touch1.clientY, 2)
   )
 }
 
 function handleTouchMove(event: TouchEvent) {
-  if (fileType.value !== 'image' || !isPinching.value || event.touches.length !== 2) return
+  if (
+    fileType.value !== "image" ||
+    !isPinching.value ||
+    event.touches.length !== 2
+  )
+    return
 
   event.preventDefault()
   const touch1 = event.touches[0]!
   const touch2 = event.touches[1]!
   const currentDistance = Math.sqrt(
     Math.pow(touch2.clientX - touch1.clientX, 2) +
-    Math.pow(touch2.clientY - touch1.clientY, 2)
+      Math.pow(touch2.clientY - touch1.clientY, 2)
   )
 
   const scale = currentDistance / initialDistance.value
   zoomLevel.value = Math.max(0.1, Math.min(5, scale))
 }
 
-function handleTouchEnd(event: TouchEvent) {
-  if (fileType.value !== 'image') return
+function handleTouchEnd(_event: TouchEvent) {
+  if (fileType.value !== "image") return
 
   isPinching.value = false
 }
 
 function handleDoubleClick() {
-  if (fileType.value !== 'image') return
+  if (fileType.value !== "image") return
 
   zoomLevel.value = zoomLevel.value > 1 ? 1 : 2
 }
@@ -498,7 +527,6 @@ definePageMeta({
 .top-toolbar {
   position: relative;
   z-index: 1001;
-  backdrop-filter: blur(10px);
 }
 
 .preview-container {
@@ -534,7 +562,7 @@ definePageMeta({
   width: 100%;
   height: 100%;
   object-fit: contain;
-  transition: all .3s ease-in-out;
+  transition: all 0.3s ease-in-out;
   will-change: contents;
 }
 

app/pages/index.vue

@@ -47,8 +47,6 @@ import type { SnVersion, SnActivity } from "~/types/api"
 import PostEditor from "~/components/Post/PostEditor.vue"
 import PostItem from "~/components/Post/PostItem.vue"
 
-import IconLight from "~/assets/images/cloudy-lamb.png"
-
 const router = useRouter()
 
 useHead({

app/pages/orders/[id].vue

@@ -7,13 +7,13 @@
       class="pa-2"
     >
       <v-card-text>
-        <v-alert type="success" v-if="done" class="mb-4">
+        <v-alert v-if="done" type="success" class="mb-4">
           The order has been paid successfully. Now you can close this tab and
           back to the Solar Network!
         </v-alert>
         <v-alert
-          type="error"
           v-else-if="!!error"
+          type="error"
           title="Something went wrong"
           class="mb-4"
           >{{ error }}</v-alert
@@ -31,7 +31,7 @@
             <span>Amount</span>
             <strong>{{ order.amount }} {{ order.currency }}</strong>
           </div>
-          <div class="d-flex align-center gap-2 mb-4" v-if="order.expiredAt">
+          <div v-if="order.expiredAt" class="d-flex align-center gap-2 mb-4">
             <v-icon size="18">mdi-calendar</v-icon>
             <span>Until</span>
             <strong>{{ new Date(order.expiredAt).toLocaleString() }}</strong>
@@ -47,8 +47,8 @@
             <v-btn
               color="primary"
               :loading="submitting"
-              @click="pay"
               class="mt-4"
+              @click="pay"
             >
               <v-icon left>mdi-check</v-icon>
               Pay

app/pages/posts/[...slug].vue

@@ -68,7 +68,10 @@
             </article>
 
             <!-- Attachments within Content Section -->
-            <attachment-list v-if="post.type != 1" :attachments="post.attachments || []" />
+            <attachment-list
+              v-if="post.type != 1"
+              :attachments="post.attachments || []"
+            />
           </v-card>
 
           <v-card
@@ -136,17 +139,22 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue"
+import { computed, ref } from "vue" // Added ref
 import { useMarkdownProcessor } from "~/composables/useMarkdownProcessor"
 import type { SnPost } from "~/types/api"
 
 const route = useRoute()
-const id = route.params.id as string
-
-const { render } = useMarkdownProcessor()
+const slugParts = route.params.slug as string[]
+const id = slugParts.join("/")
 
 const apiServer = useSolarNetwork()
 
+const preserveEmptyLinesRef = ref(true) // New ref for the option
+
+const { render } = useMarkdownProcessor({
+  preserveEmptyLines: preserveEmptyLinesRef
+})
+
 const {
   data: postData,
   error,
@@ -155,6 +163,10 @@ const {
   try {
     const resp = await apiServer(`/sphere/posts/${id}`)
     const post = resp as SnPost
+
+    // Update the ref based on post.type
+    preserveEmptyLinesRef.value = post.type !== 1
+
     let html = ""
     if (post.content) {
       html = render(post.content)
@@ -168,6 +180,16 @@ const {
   }
 })
 
+if (postData.value?.post) {
+  const p = postData.value.post
+  if (p.publisher?.name && p.slug) {
+    const slugUrl = `/posts/${p.publisher.name}/${p.slug}`
+    if (route.path !== slugUrl) {
+      await navigateTo(slugUrl, { redirectCode: 301 })
+    }
+  }
+}
+
 const post = computed(() => postData.value?.post || null)
 const htmlContent = computed(() => postData.value?.html || "")
 
@@ -189,6 +211,13 @@ useHead({
       return [{ name: "description", content: description }]
     }
     return []
+  }),
+  link: computed(() => {
+    if (post.value && post.value.publisher?.name && post.value.slug) {
+      const slugUrl = `/posts/${post.value.publisher.name}/${post.value.slug}`
+      return [{ rel: "canonical", href: slugUrl }]
+    }
+    return []
   })
 })
 
@@ -205,7 +234,9 @@ const userBackground = computed(() => {
   )
   return firstImageAttachment
     ? `${apiBase}/drive/files/${firstImageAttachment.id}`
-    : undefined
+    : post.value?.publisher.background
+      ? `${apiBase}/drive/files/${post.value?.publisher.background.id}`
+      : undefined
 })
 
 defineOgImage({
@@ -260,18 +291,18 @@ onMounted(() => {
 
 function makeEmbedImageClickable() {
   const elements = document.getElementsByClassName("prose-img-solar-network")
-  let count = 0;
+  let count = 0
   for (const element of elements) {
     if (element instanceof HTMLImageElement) {
-      count += 1;
+      count += 1
       element.addEventListener("click", (evt) => {
         const targetImg = evt.target as HTMLImageElement
         window.open("/files/" + targetImg.src.split("/").findLast((_) => true))
       })
-      element.style['cursor'] = 'pointer';
+      element.style["cursor"] = "pointer"
     }
   }
-  console.log(`[Article] Made ${count} image(s) clickable in the article.`);
+  console.log(`[Article] Made ${count} image(s) clickable in the article.`)
 }
 </script>
 

app/pages/spells/[...word].vue

@@ -2,13 +2,13 @@
   <div class="d-flex align-center justify-center fill-height">
     <v-card max-width="400" title="Magic Spell" prepend-icon="mdi-magic-staff" class="pa-2">
       <v-card-text>
-        <v-alert type="success" v-if="done" class="mb-4">
+        <v-alert v-if="done" type="success" class="mb-4">
           The magic spell has been applied successfully. Now you can close this
           tab and back to the Solar Network!
         </v-alert>
         <v-alert
-          type="error"
           v-else-if="!!error"
+          type="error"
           title="Something went wrong"
           class="mb-4"
           >{{ error }}</v-alert
@@ -28,7 +28,7 @@
               new Date(spell.createdAt ?? spell.affectedAt).toLocaleString()
             }}</strong>
           </div>
-          <div class="d-flex align-center gap-2 mb-4" v-if="spell.expiredAt">
+          <div v-if="spell.expiredAt" class="d-flex align-center gap-2 mb-4">
             <v-icon size="18">mdi-calendar</v-icon>
             <span>Until</span>
             <strong>{{ spell.expiredAt.toString() }}</strong>
@@ -68,7 +68,16 @@ const spellWord: string =
   typeof route.params.word === "string"
     ? route.params.word
     : route.params.word?.join("/") || ""
-const spell = ref<any>(null)
+interface SnSpell {
+  type: number
+  account: {
+    name: string
+  }
+  createdAt: string
+  affectedAt: string
+  expiredAt?: string
+}
+const spell = ref<SnSpell | null>(null)
 const error = ref<string | null>(null)
 
 const newPassword = ref<string>()

app/types/api/order.ts

@@ -13,11 +13,11 @@ export interface SnWalletOrder {
   remarks?: string
   appIdentifier?: string
   productIdentifier?: string
-  meta?: Record<string, any>
+  meta?: Record<string, unknown>
   amount: number
   expiredAt: string
   payeeWalletId?: string
-  payeeWallet?: any
+  payeeWallet?: unknown
   transactionId?: string
-  transaction?: any
+  transaction?: unknown
 }

app/types/api/publisher.ts

@@ -1,30 +1,28 @@
-import type { SnCloudFile } from './post'
+import type { SnCloudFile } from "./post"
 
 // Verification interface
 export interface SnVerification {
-  type: number;
-  title: string;
-  description: string;
-  verifiedBy: string;
+  type: number
+  title: string
+  description: string
+  verifiedBy: string
 }
 
 // Publisher interface
 export interface SnPublisher {
-  id: string;
-  type: number;
-  name: string;
-  nick: string;
-  bio: string;
-  pictureId: string;
-  backgroundId: string;
-  picture: SnCloudFile | null;
-  background: SnCloudFile | null;
-  verification: SnVerification | null;
-  accountId: string;
-  realmId: string | null;
-  account: unknown | null;
-  resourceIdentifier: string;
-  createdAt: string;
-  updatedAt: string;
-  deletedAt: string | null;
+  id: string
+  type: number
+  name: string
+  nick: string
+  bio: string
+  picture: SnCloudFile | null
+  background: SnCloudFile | null
+  verification: SnVerification | null
+  accountId: string
+  realmId: string | null
+  account: unknown | null
+  resourceIdentifier: string
+  createdAt: string
+  updatedAt: string
+  deletedAt: string | null
 }

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

@@ -1,10 +1,14 @@
-declare module 'markdown-it-texmath' {
+import type { PluginSimple } from "markdown-it"
+import type katex from "katex"
+import type { KatexOptions } from "katex"
+
+declare module "markdown-it-texmath" {
   interface TexMathOptions {
-    engine?: any
+    engine?: typeof katex
     delimiters?: string
-    katexOptions?: Record<string, any>
+    katexOptions?: KatexOptions
   }
 
-  function texmath(options?: TexMathOptions): any
+  function texmath(options?: TexMathOptions): PluginSimple
   export default texmath
 }

app/types/marked-katex.d.ts

@@ -1,4 +1,4 @@
-declare module 'marked-katex' {
+declare module "marked-katex" {
   interface Options {
     throwOnError?: boolean
     errorColor?: string
@@ -7,12 +7,18 @@ declare module 'marked-katex' {
     fleqn?: boolean
     macros?: Record<string, string>
     colorIsTextColor?: boolean
-    strict?: boolean | 'ignore' | 'warn' | 'error'
-    trust?: boolean | ((context: { command: string; url: string; protocol: string }) => boolean)
-    output?: 'html' | 'mathml' | 'htmlAndMathml'
+    strict?: boolean | "ignore" | "warn" | "error"
+    trust?:
+      | boolean
+      | ((context: {
+          command: string
+          url: string
+          protocol: string
+        }) => boolean)
+    output?: "html" | "mathml" | "htmlAndMathml"
   }
 
-  function markedKatex(options?: Options): any
+  function markedKatex(options?: Options): object
 
   export default markedKatex
 }