✨ Official activity

.env

@@ -1,3 +1,4 @@
+NUXT_PUBLIC_SOLAR_REALM_ID=2
 NUXT_PUBLIC_BASE_URL=https://sn.solsynth.dev
 NUXT_PUBLIC_SOLAR_NETWORK_API=https://api.sn.solsynth.dev
 NUXT_PUBLIC_SOLIAN_URL=https://sn.solsynth.dev

components/post/Item.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-card :to="`/posts/${props.post.id}`" class="mx-[2.5ch] mb-3">
+    <v-card-text>
+      <div class="mb-3 flex flex-row gap-4">
+        <v-avatar :image="post.author?.avatar" />
+        <div class="flex flex-col">
+          <span>{{ post.author?.nick }} <span class="text-xs">@{{ post.author?.name }}</span></span>
+          <span v-if="post.body?.title" class="text-md">{{ post.body?.title }}</span>
+          <span v-if="post.body?.description" class="text-sm">{{ post.body?.description }}</span>
+          <span v-if="!post.body?.title && !post.body?.description" class="text-sm">{{ post.author?.description
+            }}</span>
+        </div>
+      </div>
+
+      <article v-if="post.type == 'story'" class="text-base prose prose-truegray mx-auto">
+        <m-d-c :value="post.body?.content"></m-d-c>
+      </article>
+
+      <v-card v-if="post.body?.attachments?.length > 0" class="mb-5">
+        <attachment-carousel :attachments="post.body?.attachments" />
+      </v-card>
+
+      <div class="mb-3 text-sm flex flex-col">
+      <span class="flex flex-row gap-1">
+      <span>
+        {{ post.metric.reply_count }} {{ post.metric.reply_count > 1 ? "replies" : "reply" }},
+      </span>
+      <span>
+        {{ post.metric.reaction_count }} {{ post.metric.reaction_count > 1 ? "reactions" : "reaction" }}
+      </span>
+      </span>
+        <span>
+        {{ post.type.startsWith("a") ? "An" : "A" }} {{ post.type }} posted on
+        {{ new Date(post.published_at).toLocaleString() }}
+      </span>
+      </div>
+
+      <div v-if="post.tags?.length > 0" class="text-xs text-grey flex flex-row gap-1">
+        <span v-for="tag in post.tags">#{{ tag.alias }}</span>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ post: any }>()
+</script>

layouts/default.vue

@@ -6,6 +6,7 @@
       </nuxt-link>
 
       <v-btn variant="text" text="Products" to="/products" exact />
+      <v-btn variant="text" text="Activity" to="/activity" exact />
 
       <v-spacer></v-spacer>
 

nuxt.config.ts

@@ -9,6 +9,7 @@ export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       baseUrl: "https://solsynth.dev",
+      solarRealmId: 2,
       solarNetworkApi: "https://api.sn.solsynth.dev",
       solianUrl: "https://sn.solsynth.dev",
     },
@@ -22,7 +23,10 @@ export default defineNuxtConfig({
         { rel: "icon", type: "image/png", href: "/favicon.png" },
         { rel: "preconnect", href: "https://fonts.googleapis.com" },
         { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: "" },
-        { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+SC:wght@100..900&family=Noto+Sans+TC:wght@100..900&display=swap" },
+        {
+          rel: "stylesheet",
+          href: "https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+SC:wght@100..900&family=Noto+Sans+TC:wght@100..900&display=swap",
+        },
       ],
     },
   },

pages/activity/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-container class="content-container mx-auto">
+    <div class="my-3 mx-[3.5ch]">
+      <h1 class="text-2xl">Activity</h1>
+      <span>Explore our official recent activities.</span>
+    </div>
+
+    <v-infinite-scroll :items="items" :onLoad="load">
+      <template v-for="item in items" :key="item">
+        <post-item :post="item" />
+      </template>
+    </v-infinite-scroll>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+const config = useRuntimeConfig()
+
+const items = ref<any[]>([])
+
+async function load({ done }: any) {
+  const res = await fetch(`${config.public.solarNetworkApi}/cgi/interactive/posts?take=10&offset=${items.value.length}&realmId=${config.public.solarRealmId}`)
+  const result = await res.json()
+
+  items.value.push(...result.data)
+
+  done("ok")
+}
+</script>
+
+<style scoped>
+.content-container {
+  max-width: 70ch !important;
+}
+</style>