✨ New post editor basis

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

@@ -13,7 +13,7 @@
 
         <div>
           <div class="font-bold">{{ props.item?.author.nick }}</div>
-          {{ props.item?.content }}
+          <div class="prose prose-post" v-html="parseContent(props.item.content)"></div>
         </div>
       </div>
     </template>
@@ -21,11 +21,24 @@
 </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 scoped>
 .rounded-card {
   border-radius: 8px;
 }
+</style>
+
+<style>
+.prose.prose-post, p {
+  margin: 0 !important;
+}
 </style>

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

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

pkg/views/src/components/publish/PostEditor.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-dialog v-model="editor.show" class="max-w-[540px]">
+    <v-card title="New post">
+      <v-form>
+        <v-card-text>
+          <v-textarea
+            required
+            hide-details
+            variant="outlined"
+            label="What's happened?!"
+          />
+
+          <div class="flex mt-1">
+            <v-tooltip text="Planned publish" location="start">
+              <template #activator="{ props }">
+                <v-btn v-bind="props" type="button" variant="text" icon="mdi-calendar" size="small" />
+              </template>
+            </v-tooltip>
+            <v-tooltip text="Categories" location="start">
+              <template #activator="{ props }">
+                <v-btn v-bind="props" type="button" variant="text" icon="mdi-shape" size="small" />
+              </template>
+            </v-tooltip>
+            <v-tooltip text="Media" location="start">
+              <template #activator="{ props }">
+                <v-btn v-bind="props" type="button" variant="text" icon="mdi-camera" size="small" />
+              </template>
+            </v-tooltip>
+          </div>
+        </v-card-text>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+
+          <v-btn type="reset" color="grey" @click="editor.show = false">Cancel</v-btn>
+          <v-btn type="submit" @click.prevent>Publish</v-btn>
+        </v-card-actions>
+      </v-form>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { useEditor } from "@/stores/editor";
+
+const editor = useEditor();
+</script>