🔍 Improve SEO and User Experiences

components/PostItem.vue

@@ -16,12 +16,13 @@
         <v-img
           :src="`${config.public.solarNetworkApi}/cgi/files/attachments/${post.body?.thumbnail}`"
           :aspect-ratio="16 / 9"
+          alt="Post thumbnail"
           class="rounded-md"
           cover
         />
       </div>
 
-      <article v-if="post.type == 'story'" class="text-base prose mx-auto">
+      <article v-if="post.type == 'story' || props.forceShowContent" class="text-base prose max-w-none">
         <m-d-c :value="post.body?.content"></m-d-c>
       </article>
 
@@ -52,6 +53,6 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{ post: any }>()
+const props = defineProps<{ post: any, forceShowContent?: boolean }>()
 const config = useRuntimeConfig()
 </script>

components/activity/Carousel.vue

@@ -2,7 +2,7 @@
   <v-carousel v-if="!loading" show-arrows="hover" cycle hide-delimiters progress="primary">
     <v-carousel-item v-for="(item, i) in items" :key="i">
       <v-sheet color="rgba(0, 0, 0, .4)"  class="h-full w-full flex items-center justify-center post-container overflow-scroll">
-        <post-item class="mt-5 mb-2" :post="item" />
+        <post-item class="mt-5 mb-2" force-show-content :post="item" />
       </v-sheet>
     </v-carousel-item>
   </v-carousel>

components/attachment/Renderer.vue

@@ -17,8 +17,8 @@
       </v-col>
     </v-row>
   </v-sheet>
-  <v-img v-else-if="item.mimetype.split('/')[0] == 'image'" :src="getAttachmentUrl(item.id)" class="w-full h-full"
-         cover />
+  <v-img v-else-if="item.mimetype.split('/')[0] == 'image'" :src="getAttachmentUrl(item.id)" :alt="item.alt"
+         class="w-full h-full" cover />
   <video v-else-if="item.mimetype.split('/')[0] == 'video'" :src="getAttachmentUrl(item.id)" class="w-full h-full"
          controls />
   <v-sheet v-else color="rgba(0, 0, 0, .4)" height="calc(100% + 24px)" class="p-5">