145 lines
3.0 KiB
Plaintext
145 lines
3.0 KiB
Plaintext
---
|
||
import FullLayoutV1 from '../layout/FullLayoutV1.astro'
|
||
import { listBlogs, type ListBlogItemType } from '../lib/apis/legacy/blog'
|
||
import BlogCard from '../components/BlogCard.astro'
|
||
import BlogHeaderImage from '../assets/blogs-header.webp'
|
||
import { Image } from 'astro:assets'
|
||
|
||
export const prerender = false
|
||
|
||
const _page = parseInt(Astro.url.searchParams.get('page') || '1')
|
||
const page = isNaN(_page) ? 1 : Math.max(1, _page)
|
||
|
||
let blogs: ListBlogItemType[] = []
|
||
|
||
try {
|
||
blogs = await listBlogs({ page, limit: 100 })
|
||
} catch (e) {
|
||
console.error(e)
|
||
return Astro.redirect('/500')
|
||
}
|
||
---
|
||
|
||
<FullLayoutV1 withGap title="博客列表 - 小帕的小窝">
|
||
<!-- <div class="__dev__caution">
|
||
<h1>仍在开发中，界面会崩坏</h1>
|
||
</div> -->
|
||
<div class="container">
|
||
<section class="blogs-header">
|
||
<Image
|
||
class="image"
|
||
src={BlogHeaderImage}
|
||
alt="博客列表的头图，一个悬挂在空中的 LCD1602，上面写着一些示例文本"
|
||
width={960}
|
||
height={540}
|
||
densities={[1.5, 2]}
|
||
/>
|
||
<div class="description">
|
||
<h1>博客列表</h1>
|
||
<h2>这里是 passthem 和他朋友们的文章</h2>
|
||
</div>
|
||
</section>
|
||
<main>
|
||
<ul>
|
||
{
|
||
blogs.map((blog) => (
|
||
<BlogCard
|
||
title={blog.title}
|
||
link={`/blogs/${blog.id}`}
|
||
featureImage={blog.featured_image?.image_url}
|
||
author={{
|
||
name: blog.author.nickname,
|
||
avatar: blog.author.avatar.image_url,
|
||
}}
|
||
createdAt={blog.created_at}
|
||
updatedAt={blog.updated_at}
|
||
/>
|
||
))
|
||
}
|
||
</ul>
|
||
</main>
|
||
</div>
|
||
</FullLayoutV1>
|
||
|
||
<style>
|
||
.__dev__caution {
|
||
height: 100dvh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
& > h1 {
|
||
font-size: 72px;
|
||
font-weight: 800;
|
||
}
|
||
}
|
||
|
||
.container {
|
||
max-inline-size: 960px;
|
||
margin-inline: auto;
|
||
}
|
||
|
||
.blogs-header {
|
||
margin-block-end: 3rem;
|
||
position: relative;
|
||
aspect-ratio: 16 / 9;
|
||
|
||
@media (width < 768px) and (width >= 540px) {
|
||
aspect-ratio: 2.5 / 1;
|
||
}
|
||
|
||
@media (width >= 768px) {
|
||
aspect-ratio: 4 / 1;
|
||
}
|
||
|
||
& > .image {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
filter: saturate(0.6);
|
||
object-fit: cover;
|
||
user-select: none;
|
||
}
|
||
|
||
& > .description {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
gap: 0.5rem;
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #00000099;
|
||
color: white;
|
||
|
||
& > h1 {
|
||
font-size: 2.5rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
& > h2 {
|
||
font-size: 1rem;
|
||
font-weight: 300;
|
||
}
|
||
|
||
& > h1,
|
||
& > h2 {
|
||
text-shadow: 0 0 10px black;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (width >= 768px) {
|
||
main {
|
||
margin-inline: auto;
|
||
max-width: 840px;
|
||
}
|
||
}
|
||
</style>
|