Basic solar network post preview

This commit is contained in:
LittleSheep 2024-08-10 15:00:17 +08:00
parent bd76dc2ba8
commit c25640b673
9 changed files with 136 additions and 11 deletions

3
.env Normal file
View File

@ -0,0 +1,3 @@
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

5
.gitignore vendored
View File

@ -19,8 +19,3 @@ logs
.DS_Store
.fleet
.idea
# Local env files
.env
.env.*
!.env.example

View File

@ -5,4 +5,9 @@ html, body {
html, body, #app, .v-application {
overflow: auto !important;
font-family: "Comfortaa", "Noto Sans SC", "Noto Sans TC", "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
}

View File

@ -2,7 +2,7 @@
thumbnail: /thumbnails/products/solar-network.webp
title: Solar Network
description: Your all-in-one platform for building and connecting communities.
url: https://lian.solsynth.dev
url: https://sn.solsynth.dev
---
Solar Network is an innovative platform that seamlessly integrates social interactions, chat, and voice calls into a single, cohesive experience. With Solar Network, you can effortlessly build and manage your own community.

View File

@ -6,11 +6,24 @@ export default defineNuxtConfig({
css: ["@/assets/index.css"],
runtimeConfig: {
public: {
baseUrl: "https://solsynth.dev",
solarNetworkApi: "https://api.sn.solsynth.dev",
solianUrl: "https://sn.solsynth.dev",
},
},
app: {
head: {
title: "Solsynth LLC",
titleTemplate: "%s | Solsynth",
link: [{ rel: "icon", type: "image/png", href: "/favicon.png" }],
link: [
{ 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" },
],
},
},

View File

@ -32,7 +32,7 @@ const { data: products } = await useAsyncData("products", () => queryContent("/p
}
.content-section {
margin-top: 7.5rem;
margin-bottom: 7.5rem;
margin-top: 3rem;
margin-bottom: 8rem;
}
</style>

View File

@ -1,7 +1,82 @@
<template></template>
<template>
<v-container class="content-container mx-auto">
<div class="my-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 class="text-base prose prose-truegray xl:text-lg 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">
<v-carousel hide-delimiter-background hide-delimiters progress show-arrows="hover">
<v-carousel-item
v-for="attachment in post.body?.attachments"
:src="getAttachmentUrl(attachment)"
:aspect-ratio="16 / 9"
cover
/>
</v-carousel>
</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 class="text-xs text-grey flex flex-col">
<span>Solar Network Post Web Preview</span>
<span>To get full view of this post, open it on <a class="underline" :href="externalOpenLink">Solian</a></span>
</div>
</v-container>
</template>
<script setup lang="ts">
import { createSEOHead } from "~/utils/seo"
const route = useRoute()
const config = useRuntimeConfig()
const { data: post } = await useFetch<any>(`${config.public.solarNetworkApi}/cgi/interactive/posts/${route.params.id}`)
useHead({
title: post.value.body?.title ?? `Post #${route.params.id}`,
meta: [
...createSEOHead(
post.value.body?.title ?? `Post #${route.params.id}`,
post.value.body?.description ?? post.value.body?.content.substring(0, 160).trim(),
route.fullPath,
),
],
titleTemplate: "%s on Solar Network",
link: [{ rel: "icon", type: "image/png", href: "/favicon-solian.png" }],
})
const externalOpenLink = computed(() => `${config.public.solianUrl}/posts/view/${route.params.id}`)
function getAttachmentUrl(id: number) {
return `${config.public.solarNetworkApi}/cgi/files/attachments/${id}`
}
</script>
<style scoped>
.content-container {
max-width: 65ch !important;
}
</style>

View File

@ -5,7 +5,7 @@
<template #empty>
<v-empty-state
icon="mdi-image-broken-variant"
text="This product has no spefifc describe for it, yet."
text="This product has no specific describe for it, yet."
title="No Content"
class="no-content-placeholder"
>
@ -14,6 +14,18 @@
</template>
</v-empty-state>
</template>
<template #not-found>
<v-empty-state
icon="mdi-flask-empty-remove-outline"
text="We haven't this product, yet."
title="Not Found"
class="no-content-placeholder"
>
<template #actions>
<v-btn prepend-icon="mdi-list-box" variant="plain" text="Back to index" to="/products" exact />
</template>
</v-empty-state>
</template>
</content-doc>
</article>
</v-container>
@ -25,3 +37,5 @@
max-height: 64rem;
}
</style>
<script setup lang="ts">
</script>

20
utils/seo.ts Normal file
View File

@ -0,0 +1,20 @@
export function createSEOHead(title: string, description: string, url: string) {
return [
{ key: "og:title", property: "og:title", content: title },
{
key: "og:description",
name: "og:description",
content: description,
},
{
key: "description",
name: "description",
content: description,
},
{
hid: 'og:url',
property: 'og:url',
content: useRuntimeConfig().public.baseUrl + '/' + url,
},
]
}