Capital/src/pages/posts/[slug].astro
2024-02-10 11:41:08 +08:00

151 lines
3.9 KiB
Plaintext

---
import PageLayout from "../../layouts/PageLayout.astro";
// @ts-ignore
import Media from "../../components/posts/Media";
import Content from "../../components/posts/Content";
export const prerender = false;
const { slug } = Astro.params;
const response = await fetch(`https://feed.smartsheep.studio/api/posts/${slug}`);
const post = (await response.json())["data"];
if (!post) {
return Astro.redirect("/404");
} else if (post.realm_id != parseInt(process.env.PUBLIC_REALM_ID ?? "0")) {
return Astro.redirect(`https://feed.smartsheep.studio/posts/${post.id}`);
}
function getThumbnail(item: any): string | null {
for (const attachment of item?.attachments ?? []) {
if (attachment.mimetype.startsWith("image")) {
return attachment.external_url
? attachment.external_url
: `https://feed.smartsheep.studio/api/attachments/o/${attachment.file_id}`;
}
}
return null;
}
function getAttachments(item: any): any[] {
if (item?.attachments[0] && item?.attachments[0].mimetype.startsWith("image")) {
return item?.attachments?.slice(1, item?.attachments?.length - 1) ?? [];
} else {
return item?.attachments;
}
}
function getAuthorLink(user: any): string {
return `https://feed.smartsheep.studio/accounts/${user.name}`;
}
const embedOptions = new URLSearchParams({
embedded: "yes",
title: "讨论",
noContent: "yes",
noAuthor: "yes",
}).toString();
---
<PageLayout title={post?.title}>
<div class="wrapper">
<div class="card w-full shadow-xl post">
{
getThumbnail(post) && (
<figure>
<img src={getThumbnail(post)} alt={post?.title} />
</figure>
)
}
<div class="card-body">
<div class="mx-1 mb-5">
<h2 class="card-title">{post?.title}</h2>
<div class="text-sm flex max-lg:flex-col gap-x-4">
<span>
<i class="fa-solid fa-user me-1"></i>
作者
<a class="link" target="_blank" href={getAuthorLink(post?.author)}>{post?.author?.nick ?? "佚名"}</a>
</span>
<span>
<i class="fa-solid fa-calendar me-1"></i>
发布于 {new Date(post?.created_at).toLocaleString()}
</span>
</div>
{
getAttachments(post)?.length > 0 && (
<div class="mb-5 w-full">
<Media client:only sources={getAttachments(post)} author={post?.author} />
</div>
)
}
</div>
<Content content={post?.content} client:only />
<div class="mt-5 flex gap-1">
{
post?.categories?.map((category: any) => (
<a href={`/categories/${category?.alias}`} class="badge badge-primary">
<i class="fa-solid fa-layer-group me-1.5" />
{category?.name}
</a>
))
}
{
post?.tags?.map((tag: any) => (
<a href={`/tags/${tag?.alias}`} class="badge badge-accent">
<i class="fa-regular fa-tag me-1.5" />
{tag?.name}
</a>
))
}
</div>
</div>
</div>
<div class="h-fit sticky top-header">
<div class="card shadow-xl">
<iframe id="interactive-iframe" src={`https://feed.smartsheep.studio/posts/${slug}?${embedOptions}`}> </iframe>
</div>
</div>
</div>
</PageLayout>
<style>
.wrapper {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.description {
color: oklch(var(--bc) / 0.8);
}
.metadata {
display: flex;
flex-direction: column;
transition: color 0.3s;
}
@media (min-width: 768px) {
.wrapper {
grid-template-columns: 2fr 1fr;
}
#interactive-iframe {
height: 100vh;
}
}
#interactive-iframe {
display: block;
border: 0;
width: 100%;
min-height: 480px;
}
</style>