🚨 Clean up eslint issues

app/assets/css/main.css

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

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/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,8 @@
-import { createMarkdownExit, type PluginWithParams } from "markdown-exit"
+import {
+  createMarkdownExit,
+  type PluginSimple,
+  type PluginWithParams
+} from "markdown-exit"
 import hljs from "highlight.js"
 import hljsMarkdown from "markdown-it-highlightjs"
 // @ts-ignore
@@ -7,7 +11,11 @@ import katex from "katex"
 
 import "highlight.js/styles/a11y-dark.min.css"
 
-export function useMarkdownProcessor() {
+export function useMarkdownProcessor(
+  { preserveEmptyLines }: { preserveEmptyLines?: boolean } = {
+    preserveEmptyLines: true
+  }
+) {
   const serverUrl = useSolarNetworkUrl()
 
   const processor = createMarkdownExit({
@@ -25,12 +33,22 @@ export function useMarkdownProcessor() {
     .use(hljsMarkdown, { hljs })
     .use(imgSolarNetworkPlugin, { serverUrl: serverUrl })
 
-  // Keep the empty lines
+  if (preserveEmptyLines) {
+    processor.use(preserveEmptyLinesPlugin)
+  }
+
+  return {
+    render: (content: string) => processor.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 +76,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

@@ -439,7 +439,7 @@ function handleTouchMove(event: TouchEvent) {
   zoomLevel.value = Math.max(0.1, Math.min(5, scale))
 }
 
-function handleTouchEnd(event: TouchEvent) {
+function handleTouchEnd(_event: TouchEvent) {
   if (fileType.value !== "image") return
 
   isPinching.value = false

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
@@ -141,7 +144,8 @@ import { useMarkdownProcessor } from "~/composables/useMarkdownProcessor"
 import type { SnPost } from "~/types/api"
 
 const route = useRoute()
-const id = route.params.id as string
+const slugParts = route.params.slug as string[]
+const id = slugParts.join("/")
 
 const { render } = useMarkdownProcessor()
 
@@ -168,6 +172,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 +203,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,6 +226,8 @@ const userBackground = computed(() => {
   )
   return firstImageAttachment
     ? `${apiBase}/drive/files/${firstImageAttachment.id}`
+    : post.value?.publisher.background
+      ? `${apiBase}/drive/files/${post.value?.publisher.background.id}`
       : undefined
 })
 
@@ -260,18 +283,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
 }