✨ Better details page

pkg/views/src/components/posts/ArticleContent.vue

@@ -5,14 +5,16 @@
       <div class="text-sm">{{ props.item?.description }}</div>
     </section>
 
-    <div v-if="props.brief">
-      <router-link
-        :to="{ name: 'posts.details.articles', params: { alias: props.item?.alias ?? 'not-found' } }"
+    <div v-if="props.brief" class="mt-2">
+      <v-btn
         append-icon="mdi-arrow-right"
-        class="link underline text-primary font-medium"
+        variant="tonal"
+        size="small"
+        rounded="sm"
+        :to="{ name: 'posts.details.articles', params: { alias: props.item?.alias ?? 'not-found' } }"
       >
-        Read more...
-      </router-link>
+        Read more
+      </v-btn>
     </div>
 
     <div v-else>
@@ -22,12 +24,12 @@
 </template>
 
 <script setup lang="ts">
-import dompurify from "dompurify";
-import { parse } from "marked";
+import dompurify from "dompurify"
+import { parse } from "marked"
 
-const props = defineProps<{ item: any, brief?: boolean, contentOnly?: boolean }>();
+const props = defineProps<{ item: any; brief?: boolean; contentOnly?: boolean }>()
 
 function parseContent(src: string): string {
-  return dompurify().sanitize(parse(src) as string);
+  return dompurify().sanitize(parse(src) as string)
 }
-</script>
+</script>

pkg/views/src/components/posts/CommentContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <article class="prose prose-comment" v-html="parseContent(props.item.content)" />
+  <article class="prose prose-comment" v-html="parseContent(props.item?.content ?? '')" />
 </template>
 
 <script setup lang="ts">

pkg/views/src/components/posts/MomentContent.vue

@@ -1,15 +1,29 @@
 <template>
-  <article class="prose prose-moment" v-html="parseContent(props.item.content)" />
+  <div>
+    <article class="prose prose-moment" v-html="parseContent(props.item?.content ?? '')" />
+
+    <div v-if="props.brief" class="my-1">
+      <v-btn
+        append-icon="mdi-arrow-right"
+        variant="tonal"
+        size="x-small"
+        rounded="sm"
+        :to="{ name: 'posts.details.moments', params: { alias: props.item?.alias ?? 'not-found' } }"
+      >
+        More
+      </v-btn>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import dompurify from "dompurify";
-import { parse } from "marked";
+import dompurify from "dompurify"
+import { parse } from "marked"
 
-const props = defineProps<{ item: any }>();
+const props = defineProps<{ item: any; brief?: boolean }>()
 
 function parseContent(src: string): string {
-  return dompurify().sanitize(parse(src) as string);
+  return dompurify().sanitize(parse(src) as string)
 }
 </script>
 

pkg/views/src/components/posts/PostItem.vue

@@ -33,7 +33,7 @@
         @update="updateReactions"
       />
 
-      <div class="mt-1 text-xs text-opacity-60 flex gap-2 items-center">
+      <div class="mt-1 text-xs opacity-80 flex gap-2 items-center">
         <span>Posted at {{ new Date(props.item?.created_at).toLocaleString() }}</span>
       </div>