🎉 Initial Commit for the Sphere webpage

DysonNetwork.Sphere/Client/src/components/AttachmentItem.vue

@@ -0,0 +1,18 @@
+<template>
+  <n-image v-if="itemType == 'image'" :src="remoteSource" class="rounded-md">
+    <template #error>
+      <img src="/image-broken.jpg" class="w-32 h-32 rounded-md" />
+    </template>
+  </n-image>
+</template>
+
+<script lang="ts" setup>
+import { NImage } from 'naive-ui'
+import { computed } from 'vue'
+
+const props = defineProps<{ item: any }>()
+
+const itemType = computed(() => props.item.mime_type.split('/')[0] ?? 'unknown')
+
+const remoteSource = computed(() => `/cgi/drive/files/${props.item.id}`)
+</script>

DysonNetwork.Sphere/Client/src/components/PostHeader.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="flex gap-3 items-center">
+    <n-avatar round :size="40" :src="publisherAvatar" />
+    <div class="flex-grow-1 flex flex-col">
+      <p class="flex gap-1 items-baseline">
+        <span class="font-bold">{{ props.item.publisher.nick }}</span>
+        <span class="text-xs">@{{ props.item.publisher.name }}</span>
+      </p>
+      <p class="text-xs flex gap-1">
+        <span>{{ dayjs(props.item.created_at).utc().fromNow() }}</span>
+        <span class="font-bold">·</span>
+        <span>{{ new Date(props.item.created_at).toLocaleString() }}</span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NAvatar } from 'naive-ui'
+import { computed } from 'vue'
+
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import utc from 'dayjs/plugin/utc'
+
+dayjs.extend(utc)
+dayjs.extend(relativeTime)
+
+const props = defineProps<{ item: any }>()
+
+const publisherAvatar = computed(() =>
+  props.item.publisher.picture ? `/cgi/drive/files/${props.item.publisher.picture.id}` : undefined,
+)
+</script>

DysonNetwork.Sphere/Client/src/components/PostItem.vue

@@ -0,0 +1,53 @@
+<template>
+  <n-card>
+    <div class="flex flex-col gap-3">
+      <post-header :item="props.item" />
+
+      <div v-if="props.item.title || props.item.description">
+        <h2 class="text-lg" v-if="props.item.title">{{ props.item.title }}</h2>
+        <p class="text-sm" v-if="props.item.description">
+          {{ props.item.description }}
+        </p>
+      </div>
+
+      <article v-if="htmlContent" class="prose prose-sm dark:prose-invert prose-slate prose-p:m-0">
+        <div v-html="htmlContent"></div>
+      </article>
+
+      <div v-if="props.item.attachments">
+        <n-image-group>
+          <n-space>
+            <attachment-item
+              v-for="attachment in props.item.attachments"
+              :key="attachment.id"
+              :item="attachment"
+            />
+          </n-space>
+        </n-image-group>
+      </div>
+    </div>
+  </n-card>
+</template>
+
+<script lang="ts" setup>
+import { NCard, NImageGroup, NSpace } from 'naive-ui'
+import { ref, watch } from 'vue'
+import { Marked } from 'marked'
+
+import PostHeader from './PostHeader.vue'
+import AttachmentItem from './AttachmentItem.vue'
+
+const props = defineProps<{ item: any }>()
+
+const marked = new Marked()
+
+const htmlContent = ref<string>('')
+
+watch(
+  props.item,
+  async (value) => {
+    if (value.content) htmlContent.value = await marked.parse(value.content)
+  },
+  { immediate: true, deep: true },
+)
+</script>