Embed widgets

This commit is contained in:
LittleSheep 2024-08-17 01:33:16 +08:00
parent 58ad9996cd
commit 21a02689dd
14 changed files with 403 additions and 20 deletions

View File

@ -1,17 +1,34 @@
<template> <template>
<div class="text-xs text-grey" :class="props.noCentered ? 'text-left' : 'text-center'"> <div class="text-xs text-grey" :class="props.noCentered ? 'text-left' : 'text-center'">
<p>{{ t("copyright") }} © {{ new Date().getFullYear() }} {{ t("brandNameFormal") }}</p> <p>{{ t("copyright") }} © {{ new Date().getFullYear() }} {{ t("brandNameFormal") }}</p>
<p>Powered by <a class="underline" :href="projects[props.service][1]">{{ projects[props.service][0] }}</a></p> <p v-if="services" class="flex justify-center">
<span>Powered by</span>
<span class="flex services-list ms-1">
<a class="service underline" v-for="item in services" :href="projects[item][1]">
{{ projects[item][0] }}
</a>
</span>
</p>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const props = defineProps<{ service: string, noCentered?: boolean }>() const props = defineProps<{ service?: string | string[], noCentered?: boolean }>()
const services = computed<string[]>(() => props.service instanceof Array ? (props.service ?? []) : (props.service ? [props.service] : []))
const { t } = useI18n() const { t } = useI18n()
const projects: { [id: string]: [string, string] } = { const projects: { [id: string]: [string, string] } = {
"solar-network": ["Solar Network", "https://solsynth.dev/products/solar-network"],
"capital": ["Capital", "https://git.solsynth.dev/Goatworks/Capital"],
"passport": ["Hydrogen.Passport", "https://git.solsynth.dev/Hydrogen/Passport"], "passport": ["Hydrogen.Passport", "https://git.solsynth.dev/Hydrogen/Passport"],
"paperclip": ["Hydrogen.Paperclip", "https://git.solsynth.dev/Hydrogen/Paperclip"], "paperclip": ["Hydrogen.Paperclip", "https://git.solsynth.dev/Hydrogen/Paperclip"],
} }
</script> </script>
<style scoped>
.services-list .service:nth-child(n+2)::before {
content: ", ";
}
</style>

View File

@ -10,6 +10,7 @@
"navPostsCaption": "Explore posts that posted by Solar Network users.", "navPostsCaption": "Explore posts that posted by Solar Network users.",
"navPostsCaptionWithTag": "Explore posts with tag {0}.", "navPostsCaptionWithTag": "Explore posts with tag {0}.",
"navPostsCaptionWithCategory": "Explore posts in category {0}.", "navPostsCaptionWithCategory": "Explore posts in category {0}.",
"navPostsCaptionWithRealm": "Explore posts in realm {0}.",
"indexIntroduce": "An energetic software company that create wonderful software which everyone love.", "indexIntroduce": "An energetic software company that create wonderful software which everyone love.",
"indexProductListHint": "See some of our products just there", "indexProductListHint": "See some of our products just there",
"indexActivities": "Activities", "indexActivities": "Activities",
@ -59,6 +60,9 @@
"lastUpdatedAt": "Last updated at {0}", "lastUpdatedAt": "Last updated at {0}",
"learnMore": "Learn more", "learnMore": "Learn more",
"open": "Open", "open": "Open",
"openInSite": "Open in Website",
"postReplies": "Replies", "postReplies": "Replies",
"postRepliesCaption": "All replies of this post" "postRepliesCaption": "All replies of this post",
"language": "Language",
"embedWidget": "Solar Network Embed Widget"
} }

View File

@ -10,6 +10,7 @@
"navPostsCaption": "探索整个 Solar Network 上的帖子。", "navPostsCaption": "探索整个 Solar Network 上的帖子。",
"navPostsCaptionWithTag": "探索带有 {0} 标签的帖子", "navPostsCaptionWithTag": "探索带有 {0} 标签的帖子",
"navPostsCaptionWithCategory": "探索被分类为 {0} 的帖子", "navPostsCaptionWithCategory": "探索被分类为 {0} 的帖子",
"navPostsCaptionWithRealm": "探索在领域 {0} 内的帖子",
"indexIntroduce": "一家充满活力的软件公司,创造了人人喜爱的精彩软件。", "indexIntroduce": "一家充满活力的软件公司,创造了人人喜爱的精彩软件。",
"indexProductListHint": "在这里看看我们的一些产品", "indexProductListHint": "在这里看看我们的一些产品",
"indexActivities": "动态", "indexActivities": "动态",
@ -59,6 +60,9 @@
"lastUpdatedAt": "最后更新于 {0}", "lastUpdatedAt": "最后更新于 {0}",
"learnMore": "了解更多", "learnMore": "了解更多",
"open": "打开", "open": "打开",
"openInSite": "在站点里打开",
"postReplies": "回复", "postReplies": "回复",
"postRepliesCaption": "该帖子的全部回复" "postRepliesCaption": "该帖子的全部回复",
"language": "语言",
"embedWidget": "Solar Network 嵌入式组件"
} }

46
layouts/embed.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<v-system-bar color="primary">
<span>© {{ new Date().getFullYear() }} {{ t("brandName") }}</span>
<v-spacer />
<span>{{ t("embedWidget") }}</span>
</v-system-bar>
<v-container fluid class="mx-auto justify-center px-8">
<v-main>
<slot />
</v-main>
<div class="text-center flex flex-col justify-center gap-1.5 text-grey text-xs">
<copyright :service="['capital', 'solar-network']" />
<div class="flex gap-2 justify-center">
<v-menu location="top center">
<template v-slot:activator="{ props }">
<span v-bind="props">{{ t("language") }}</span>
</template>
<v-list class="w-fit">
<v-list-item
class="w-48"
density="compact"
v-for="item in locales"
:key="item.code"
:value="item.code"
:active="locale == item.code"
@click.prevent.stop="setLocale(item.code)"
>
<v-list-item-title>{{ item.name }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<v-divider vertical />
<nuxt-link target="_blank" :to="route.fullPath.replace('/embed', '')">
{{ t("openInSite") }}
</nuxt-link>
</div>
</div>
</v-container>
</template>
<script setup lang="ts">
const route = useRoute()
const { locale, locales, setLocale, t } = useI18n()
</script>

View File

@ -72,7 +72,7 @@ export default defineNuxtConfig({
highlight: { highlight: {
theme: "github-dark", theme: "github-dark",
langs: ["json", "yaml", "toml", "java", "javascript", "astro", "css", "scss", "dart", "go", "typescript", "c", "csharp", langs: ["json", "yaml", "toml", "java", "javascript", "astro", "css", "scss", "dart", "go", "typescript", "c", "csharp",
"cpp", "bat", "bash", "sh", "dockerfile", "dotenv", "erlang", "fsharp", "markdown", "log", "cpp", "bat", "bash", "sh", "dockerfile", "erlang", "fsharp", "markdown", "log",
"lua", "objc", "swift", "regex", "ruby", "rust", "postcss", "blade", "asciidoc", "cmake", "cobol", "pascal", "lua", "objc", "swift", "regex", "ruby", "rust", "postcss", "blade", "asciidoc", "cmake", "cobol", "pascal",
"nginx", "angular-html", "angular-ts", "gdscript", "gdshader", "gdresource", "groovy", "gql", "python", "nginx", "angular-html", "angular-ts", "gdscript", "gdshader", "gdresource", "groovy", "gql", "python",
"crystal", "sql", "plsql", "kotlin", "html", "vue", "gleam", "julia", "lisp", "xml", "csv"], "crystal", "sql", "plsql", "kotlin", "html", "vue", "gleam", "julia", "lisp", "xml", "csv"],

136
pages/embed/posts/[id].vue Normal file
View File

@ -0,0 +1,136 @@
<template>
<div>
<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>
<v-card v-if="post.body?.thumbnail" class="mb-5">
<v-img
:src="`${config.public.solarNetworkApi}/cgi/files/attachments/${post.body?.thumbnail}`"
:aspect-ratio="16 / 9"
cover
/>
</v-card>
<article class="text-base prose xl:text-lg mx-auto max-w-none">
<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" @update:metadata="args => attachments = args" />
</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 mb-3"
>
<nuxt-link
v-for="tag in post.tags"
:to="`/posts/tags/${tag.alias}`"
class="hover:underline hover:underline-dotted"
@click.stop
>
#{{ tag.alias }}
</nuxt-link>
</div>
<div class="text-xs text-grey flex flex-col mb-5">
<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>
<div v-if="post.metric.reply_count" class="mb-5">
<v-card variant="outlined" :title="t('postReplies')" :subtitle="t('postRepliesCaption')">
<post-reply-list class="mt-[-20px] mx-[-1ch] mb-3" :post-id="post.id" />
</v-card>
</div>
</div>
</template>
<script setup lang="ts">
definePageMeta({
layout: 'embed',
})
const route = useRoute()
const config = useRuntimeConfig()
const attachments = ref<any[]>([])
const firstImage = ref<string | null>()
const firstVideo = ref<string | null>()
const { t } = useI18n()
const { data: post } = await useFetch<any>(`${config.public.solarNetworkApi}/cgi/interactive/posts/${route.params.id}`)
if (!post.value) {
throw createError({
statusCode: 404,
statusMessage: "Post Not Found",
})
}
const title = computed(() => post.value.body?.title ? `${post.value.body?.title} from ${post.value.author.nick}` : `Post from ${post.value.author.nick}`)
const description = computed(() => post.value.body?.description ?? post.value.body?.content.substring(0, 160).trim())
watch(attachments, (value) => {
if (post.value.body?.thumbnail) {
firstImage.value = `${config.public.solarNetworkApi}/cgi/files/attachments/${post.value.body?.thumbnail}`
}
if (value.length > 0 && value[0].mimetype.split("/")[0] == "image") {
firstImage.value = `${config.public.solarNetworkApi}/cgi/files/attachments/${attachments.value[0].id}`
}
if (value.length > 0 && value[0].mimetype.split("/")[0] == "video") {
firstVideo.value = `${config.public.solarNetworkApi}/cgi/files/attachments/${attachments.value[0].id}`
}
}, { immediate: true, deep: true })
useHead({
title: title.value,
titleTemplate: "%s on Solar Network",
link: [
{ rel: "icon", type: "image/png", href: "/favicon-solian.png" },
{ rel: "apple-touch-icon", type: "image/png", href: "/favicon-solian.png" },
],
})
useSeoMeta({
author: post.value.author.nick,
title: title,
articlePublishedTime: post.value.publishedAt,
description: description,
ogTitle: title,
ogDescription: description,
ogUrl: `${useRuntimeConfig().public.siteUrl}${route.fullPath}`,
ogImage: firstImage,
ogVideo: firstVideo,
ogType: "article",
publisher: "Solar Network",
ogSiteName: "Solsynth Capital",
generator: "Solar Network Open Project · Embed Widget",
})
const externalOpenLink = computed(() => `${config.public.solianUrl}/posts/view/${route.params.id}`)
</script>

View File

@ -0,0 +1,32 @@
<template>
<div>
<div class="my-3" v-if="!route.query['no-title']">
<h1 class="text-2xl">{{ route.query["title"] ?? t("navPosts") }}</h1>
<span>{{ route.query["caption"] ?? t("navPostsCaptionWithCategory", [`#${route.params.slug}`]) }}</span>
</div>
<post-list class="mx-[-2.5ch]" :category="route.params.slug?.toString()" />
</div>
</template>
<script setup lang="ts">
definePageMeta({
layout: "embed",
})
const { t } = useI18n()
const route = useRoute()
useHead({
title: t("navPosts"),
})
useSeoMeta({
title: t("navPosts"),
ogTitle: t("navPosts"),
description: t("navPostsCaption"),
ogDescription: t("navPostsCaption"),
ogType: "website",
})
</script>

View File

@ -0,0 +1,32 @@
<template>
<div>
<div class="my-3" v-if="!route.query['no-title']">
<h1 class="text-2xl">{{ route.query["title"] ?? t("navPosts") }}</h1>
<span>{{ route.query["caption"] ?? t("navPostsCaption") }}</span>
</div>
<post-list class="mx-[-2.5ch]" />
</div>
</template>
<script setup lang="ts">
definePageMeta({
layout: "embed",
})
const { t } = useI18n()
const route = useRoute()
useHead({
title: t("navPosts"),
})
useSeoMeta({
title: t("navPosts"),
ogTitle: t("navPosts"),
description: t("navPostsCaption"),
ogDescription: t("navPostsCaption"),
ogType: "website",
})
</script>

View File

@ -0,0 +1,39 @@
<template>
<div>
<div class="my-3" v-if="!route.query['no-title']">
<h1 class="text-2xl">{{ route.query["title"] ?? t("navPosts") }}</h1>
<span>{{ route.query["caption"] ?? t("navPostsCaptionWithRealm", [`#${route.params.id}`]) }}</span>
</div>
<post-list class="mx-[-2.5ch]" :realm-id="parseInt(route.params.id?.toString())" />
</div>
</template>
<script setup lang="ts">
definePageMeta({
layout: "embed",
})
const { t } = useI18n()
const route = useRoute()
if(Number.isNaN(parseInt(route.params.id?.toString()))) {
throw createError({
statusCode: 400,
statusMessage: "Realm ID must be a Number",
})
}
useHead({
title: t("navPosts"),
})
useSeoMeta({
title: t("navPosts"),
ogTitle: t("navPosts"),
description: t("navPostsCaption"),
ogDescription: t("navPostsCaption"),
ogType: "website",
})
</script>

View File

@ -0,0 +1,32 @@
<template>
<div>
<div class="my-3" v-if="!route.query['no-title']">
<h1 class="text-2xl">{{ route.query["title"] ?? t("navPosts") }}</h1>
<span>{{ route.query["caption"] ?? t("navPostsCaptionWithTag", [route.params.slug?.toString()]) }}</span>
</div>
<post-list class="mx-[-2.5ch]" :tag="route.params.slug?.toString()" />
</div>
</template>
<script setup lang="ts">
definePageMeta({
layout: "embed",
})
const { t } = useI18n()
const route = useRoute()
useHead({
title: t("navPosts"),
})
useSeoMeta({
title: t("navPosts"),
ogTitle: t("navPosts"),
description: t("navPostsCaption"),
ogDescription: t("navPostsCaption"),
ogType: "website",
})
</script>

View File

@ -15,14 +15,14 @@ const { t } = useI18n()
const route = useRoute() const route = useRoute()
useHead({ useHead({
title: t("navActivity"), title: t("navPosts"),
}) })
useSeoMeta({ useSeoMeta({
title: t("navActivity"), title: t("navPosts"),
ogTitle: t("navActivity"), ogTitle: t("navPosts"),
description: t("navActivityCaption"), description: t("navPostsCaption"),
ogDescription: t("navActivityCaption"), ogDescription: t("navPostsCaption"),
ogType: "website", ogType: "website",
}) })
</script> </script>

View File

@ -13,14 +13,14 @@
const { t } = useI18n() const { t } = useI18n()
useHead({ useHead({
title: t("navActivity"), title: t("navPosts"),
}) })
useSeoMeta({ useSeoMeta({
title: t("navActivity"), title: t("navPosts"),
ogTitle: t("navActivity"), ogTitle: t("navPosts"),
description: t("navActivityCaption"), description: t("navPostsCaption"),
ogDescription: t("navActivityCaption"), ogDescription: t("navPostsCaption"),
ogType: "website", ogType: "website",
}) })
</script> </script>

View File

@ -0,0 +1,41 @@
<template>
<v-container class="content-container mx-auto">
<div class="my-3 mx-[3.5ch]">
<h1 class="text-2xl">{{ t("navPosts") }}</h1>
<span>{{ t("navPostsCaptionWithRealm", [`#${route.params.id}`]) }}</span>
</div>
<post-list :realm-id="parseInt(route.params.id?.toString())" />
</v-container>
</template>
<script setup lang="ts">
const { t } = useI18n()
const route = useRoute()
if(Number.isNaN(parseInt(route.params.id?.toString()))) {
throw createError({
statusCode: 400,
statusMessage: "Realm ID must be a Number",
})
}
useHead({
title: t("navPosts"),
})
useSeoMeta({
title: t("navPosts"),
ogTitle: t("navPosts"),
description: t("navPostsCaption"),
ogDescription: t("navPostsCaption"),
ogType: "website",
})
</script>
<style scoped>
.content-container {
max-width: 70ch !important;
}
</style>

View File

@ -15,14 +15,14 @@ const { t } = useI18n()
const route = useRoute() const route = useRoute()
useHead({ useHead({
title: t("navActivity"), title: t("navPosts"),
}) })
useSeoMeta({ useSeoMeta({
title: t("navActivity"), title: t("navPosts"),
ogTitle: t("navActivity"), ogTitle: t("navPosts"),
description: t("navActivityCaption"), description: t("navPostsCaption"),
ogDescription: t("navActivityCaption"), ogDescription: t("navPostsCaption"),
ogType: "website", ogType: "website",
}) })
</script> </script>