Official activity

This commit is contained in:
LittleSheep 2024-08-10 17:42:49 +08:00
parent 0758f2d5c1
commit 666868f22b
5 changed files with 89 additions and 1 deletions

1
.env
View File

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

47
components/post/Item.vue Normal file
View File

@ -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>

View File

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

View File

@ -9,6 +9,7 @@ export default defineNuxtConfig({
runtimeConfig: { runtimeConfig: {
public: { public: {
baseUrl: "https://solsynth.dev", baseUrl: "https://solsynth.dev",
solarRealmId: 2,
solarNetworkApi: "https://api.sn.solsynth.dev", solarNetworkApi: "https://api.sn.solsynth.dev",
solianUrl: "https://sn.solsynth.dev", solianUrl: "https://sn.solsynth.dev",
}, },
@ -22,7 +23,10 @@ export default defineNuxtConfig({
{ rel: "icon", type: "image/png", href: "/favicon.png" }, { rel: "icon", type: "image/png", href: "/favicon.png" },
{ rel: "preconnect", href: "https://fonts.googleapis.com" }, { rel: "preconnect", href: "https://fonts.googleapis.com" },
{ rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: "" }, { 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",
},
], ],
}, },
}, },

35
pages/activity/index.vue Normal file
View File

@ -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>