Moments & 404

This commit is contained in:
LittleSheep 2024-02-09 11:56:37 +08:00
parent 4f756826d7
commit f754e155dc
4 changed files with 56 additions and 18 deletions

View File

@ -9,7 +9,8 @@ const items: MenuItem[] = [
{ {
label: "情报", children: [ label: "情报", children: [
{ href: "/posts", label: "记录" }, { href: "/posts", label: "记录" },
{ href: "/events", label: "活动" } { href: "/events", label: "活动" },
{ href: "/moments", label: "回忆" }
] ]
} }
]; ];

15
src/pages/404.astro Normal file
View File

@ -0,0 +1,15 @@
---
import RootLayout from "../layouts/RootLayout.astro";
---
<RootLayout>
<div class="h-screen w-full flex justify-center items-center">
<div class="text-center">
<h2 class="text-2xl font-bold">404</h2>
<h3 class="text-lg">Not Found</h3>
<p class="mt-5">The resource you want to access was not found.</p>
<a class="link" href="/">Back to homepage</a>
</div>
</div>
</RootLayout>

17
src/pages/moments.astro Normal file
View File

@ -0,0 +1,17 @@
---
import RootLayout from "../layouts/RootLayout.astro";
---
<RootLayout>
<iframe class="moments-frame" src="https://feed.smartsheep.studio/realms/1?noTitle=yes" />
</RootLayout>
<style>
.moments-frame {
margin-top: 64px;
display: block;
border: 0;
width: 100vw;
height: calc(100vh - 64px);
}
</style>

View File

@ -6,6 +6,7 @@ import Media from "../../components/posts/Media";
import { POST_TYPES } from "../../scripts/consts"; import { POST_TYPES } from "../../scripts/consts";
import { graphQuery } from "../../scripts/requests"; import { graphQuery } from "../../scripts/requests";
import { DocumentRenderer } from "@keystone-6/document-renderer"; import { DocumentRenderer } from "@keystone-6/document-renderer";
import { navigate } from "astro:transitions/client";
export const prerender = false; export const prerender = false;
@ -51,33 +52,37 @@ const { post } = (
}, },
) )
).data; ).data;
if (!post) {
return Astro.redirect("/404");
}
--- ---
<PageLayout title={post.title}> <PageLayout title={post?.title}>
<div class="wrapper"> <div class="wrapper">
<div class="card w-full shadow-xl post"> <div class="card w-full shadow-xl post">
{ {
post.cover && ( post?.cover && (
<figure> <figure>
<img src={post.cover.image.url} alt={post.title} /> <img src={post?.cover?.image?.url} alt={post?.title} />
</figure> </figure>
) )
} }
<div class="card-body"> <div class="card-body">
<h2 class="card-title">{post.title}</h2> <h2 class="card-title">{post?.title}</h2>
<p class="description">{post.description ?? "No description"}</p> <p class="description">{post?.description ?? "No description"}</p>
<div class="divider"></div> <div class="divider"></div>
{ {
post.assets?.length > 0 && ( post?.assets?.length > 0 && (
<div class="mb-5 w-full"> <div class="mb-5 w-full">
<Media client:only sources={post.assets} author={post.author} /> <Media client:only sources={post?.assets} author={post?.author} />
</div> </div>
) )
} }
<div class="prose max-w-none"> <div class="prose max-w-none">
<DocumentRenderer document={post.content.document} /> <DocumentRenderer document={post?.content?.document ?? []} />
</div> </div>
</div> </div>
</div> </div>
@ -88,21 +93,21 @@ const { post } = (
<div class="gap-2 text-sm metadata description"> <div class="gap-2 text-sm metadata description">
<div> <div>
<div>作者</div> <div>作者</div>
<div>{post.author?.name ?? "佚名"}</div> <div>{post?.author?.name ?? "佚名"}</div>
</div> </div>
<div> <div>
<div>类型</div> <div>类型</div>
<div class="text-accent"> <div class="text-accent">
{POST_TYPES[post.type as unknown as string]} {POST_TYPES[post?.type as unknown as string]}
</div> </div>
</div> </div>
<div> <div>
<div>分类</div> <div>分类</div>
<div class="flex gap-1"> <div class="flex gap-1">
{ {
post.categories?.map((category: any) => ( post?.categories?.map((category: any) => (
<a href={`/categories/${category.slug}`} class="link link-primary"> <a href={`/categories/${category?.slug}`} class="link link-primary">
{category.name} {category?.name}
</a> </a>
)) ))
} }
@ -112,9 +117,9 @@ const { post } = (
<div>标签</div> <div>标签</div>
<div class="flex gap-1"> <div class="flex gap-1">
{ {
post.tags?.map((tag: any) => ( post?.tags?.map((tag: any) => (
<a href={`/tags/${tag.slug}`} class="link link-secondary"> <a href={`/tags/${tag?.slug}`} class="link link-secondary">
{tag.name} {tag?.name}
</a> </a>
)) ))
} }
@ -122,7 +127,7 @@ const { post } = (
</div> </div>
<div> <div>
<div>发布于</div> <div>发布于</div>
<div>{new Date(post.createdAt).toLocaleString()}</div> <div>{new Date(post?.createdAt).toLocaleString()}</div>
</div> </div>
</div> </div>
</div> </div>