✨ Better detail post

app/components/OgImage/ImageCard.vue

@@ -47,6 +47,9 @@ const themeRgb = computed(() => {
     ?.map((v) => Number.parseInt(v, 16))
     .join(", ")
 })
+const textShadow = computed(() => {
+  return '2px 2px 8px rgba(0,0,0,0.8)'
+})
 const siteConfig = useSiteConfig()
 const siteName = computed(() => {
   return props.siteName || siteConfig.name
@@ -88,11 +91,11 @@ function toAbsoluteUrl(url: string | undefined) {
 
 <template>
   <div
-    class="w-full h-full flex justify-between relative"
+    class="w-full h-full flex justify-between relative text-white"
     :class="[
       ...(colorMode === 'light'
-        ? ['bg-white', 'text-gray-900']
-        : ['bg-gray-900', 'text-white'])
+        ? ['bg-white']
+        : ['bg-gray-900'])
     ]"
   >
     <div
@@ -103,8 +106,8 @@ function toAbsoluteUrl(url: string | undefined) {
     <img
       v-if="backgroundImage"
       :src="toAbsoluteUrl(backgroundImage)"
-      class="absolute top-0 left-0 w-full h-full object-cover opacity-70"
-      style="min-width: 1200px; min-height: 600px;"
+      class="absolute top-0 left-0 w-full h-full object-cover"
+      style="min-width: 1200px; min-height: 600px; filter: blur(8px)"
     />
     <div class="h-full w-full justify-between relative p-[60px]">
       <div class="flex flex-row justify-between items-start">
@@ -112,17 +115,15 @@ function toAbsoluteUrl(url: string | undefined) {
           <h1
             class="m-0 font-bold mb-[30px] text-[75px]"
             style="display: block; text-overflow: ellipsis"
-            :style="{ lineClamp: description ? 2 : 3 }"
+            :style="{ lineClamp: description ? 2 : 3, textShadow }"
           >
             {{ title }}
           </h1>
           <p
             v-if="description"
-            class="text-[35px] leading-12"
-            :class="[
-              colorMode === 'light' ? ['text-gray-700'] : ['text-gray-300']
-            ]"
+            class="text-[35px] leading-12 text-white"
             style="display: block; line-clamp: 3; text-overflow: ellipsis"
+            :style="{ textShadow }"
           >
             {{ description }}
           </p>
@@ -136,7 +137,7 @@ function toAbsoluteUrl(url: string | undefined) {
         </div>
       </div>
       <div class="flex flex-row justify-end items-center text-right gap-3 w-full">
-        <p v-if="siteName" style="font-size: 25px" class="font-bold">
+        <p v-if="siteName" style="font-size: 25px" class="font-bold" :style="{ textShadow }">
           {{ siteName }}
         </p>
         <img

app/components/PostEditor.vue

@@ -7,29 +7,7 @@
       @keydown.meta.enter.exact="submit"
       @keydown.ctrl.enter.exact="submit"
     />
-    <div v-if="fileList.length > 0" class="d-flex gap-2 flex-wrap">
-      <v-img
-        v-for="file in fileList"
-        :key="file.name"
-        :src="file.url"
-        width="100"
-        height="100"
-        class="rounded"
-      />
-    </div>
     <div class="flex justify-between">
-      <div class="flex gap-2">
-        <v-file-input
-          v-model="selectedFiles"
-          multiple
-          accept="image/*,video/*,audio/*"
-          label="Upload files"
-          prepend-icon="mdi-upload"
-          hide-details
-          density="compact"
-          @change="handleFileSelect"
-        />
-      </div>
       <v-btn type="primary" :loading="submitting" @click="submit">
         Post
         <template #append>

app/components/SidebarFooter.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="flex flex-col text-xs opacity-80 mx-3 mt-1">
+    <div class="flex flex-wrap gap-1.5">
+      <span class="font-bold">The Solar Network</span>
+      <span class="font-bold">·</span>
+      <span>FloatingIsland</span>
+    </div>
+    <div class="flex flex-wrap gap-1.5">
+      <a class="link" target="_blank" href="https://solsynth.dev/terms">
+        Terms of Services
+      </a>
+      <span class="font-bold">·</span>
+      <a class="link" target="_blank" href="https://status.solsynth.dev">
+        Service Status
+      </a>
+      <span class="font-bold">·</span>
+      <a
+        class="link"
+        target="_blank"
+        href="https://solian.app/swagger/index.html"
+      >
+        API
+      </a>
+    </div>
+    <p class="mt-2 opacity-80">
+      The FloatingIsland do not provides all the features the Solar Network has,
+      for further usage, see <a href="https://web.solian.app" class="font-bold underline">Solian</a>
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.link:hover {
+  text-decoration: underline;
+}
+</style>