✨ Frontend move to union feed

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

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <section v-if="!props.contentOnly" class="mb-2">
+      <h1 class="text-lg font-bold">{{ props.item?.title }}</h1>
+      <div class="text-sm">{{ props.item?.description }}</div>
+    </section>
+
+    <div v-if="props.brief">
+      <router-link
+        :to="{ name: 'posts.details', params: { postType: 'articles', alias: props.item?.alias ?? 'not-found' } }"
+        append-icon="mdi-arrow-right"
+        class="link underline text-primary font-medium"
+      >
+        Read more...
+      </router-link>
+    </div>
+
+    <div v-else>
+      <article class="prose max-w-none" v-html="parseContent(props.item?.content ?? '')" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import dompurify from "dompurify";
+import { parse } from "marked";
+
+const props = defineProps<{ item: any, brief?: boolean, contentOnly?: boolean }>();
+
+function parseContent(src: string): string {
+  return dompurify().sanitize(parse(src) as string);
+}
+</script>

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

@@ -0,0 +1,20 @@
+<template>
+  <article class="prose prose-moment" v-html="parseContent(props.item.content)" />
+</template>
+
+<script setup lang="ts">
+import dompurify from "dompurify";
+import { parse } from "marked";
+
+const props = defineProps<{ item: any }>();
+
+function parseContent(src: string): string {
+  return dompurify().sanitize(parse(src) as string);
+}
+</script>
+
+<style>
+.prose.prose-moment, p {
+  margin: 0 !important;
+}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <v-card>
+  <v-card :loading="props.loading">
     <template #text>
       <div class="flex gap-3">
         <div>
@@ -11,9 +11,12 @@
           />
         </div>
 
-        <div>
+        <div class="flex-grow-1">
           <div class="font-bold">{{ props.item?.author.nick }}</div>
-          <div class="prose prose-post" v-html="parseContent(props.item.content)"></div>
+
+          <div v-if="props.item?.modal_type === 'article'" class="text-xs text-grey-darken-4 mb-2">Published an article</div>
+
+          <component :is="renderer[props.item?.model_type]" v-bind="props" />
         </div>
       </div>
     </template>
@@ -21,14 +24,16 @@
 </template>
 
 <script setup lang="ts">
-import dompurify from "dompurify";
-import { parse } from "marked";
+import type { Component } from "vue";
+import ArticleContent from "@/components/posts/ArticleContent.vue";
+import MomentContent from "@/components/posts/MomentContent.vue";
 
-const props = defineProps<{ item: any }>();
+const props = defineProps<{ item: any, brief?: boolean, loading?: boolean }>();
 
-function parseContent(src: string): string {
-  return dompurify().sanitize(parse(src) as string);
-}
+const renderer: { [id: string]: Component } = {
+  article: ArticleContent,
+  moment: MomentContent
+};
 </script>
 
 <style scoped>
@@ -36,9 +41,3 @@ function parseContent(src: string): string {
   border-radius: 8px;
 }
 </style>
-
-<style>
-.prose.prose-post, p {
-  margin: 0 !important;
-}
-</style>

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

@@ -7,7 +7,7 @@
     <v-infinite-scroll :items="props.posts" :onLoad="props.loader">
       <template v-for="item in props.posts" :key="item">
         <div class="mb-3 px-1">
-          <post-item :item="item" />
+          <post-item :item="item" brief />
         </div>
       </template>
     </v-infinite-scroll>