diff --git a/package-lock.json b/package-lock.json index 9842e5e..140e2c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "20260327_blog_frontend_v2", "version": "0.0.1", "dependencies": { "@astrojs/node": "^10.0.4", @@ -12,6 +13,7 @@ "@astrojs/rss": "^4.0.18", "@astrojs/svelte": "^8.0.4", "@astrojs/vue": "^6.0.1", + "@iconify-json/material-symbols": "^1.2.65", "@iconify-json/mdi": "^1.2.3", "@markdoc/markdoc": "^0.5.7", "@traptitech/markdown-it-katex": "^3.6.0", @@ -1335,6 +1337,15 @@ "url": "https://github.com/sponsors/nzakas" } }, + "node_modules/@iconify-json/material-symbols": { + "version": "1.2.65", + "resolved": "https://registry.npmjs.org/@iconify-json/material-symbols/-/material-symbols-1.2.65.tgz", + "integrity": "sha512-0kGO7z+yuWjn4de2gAz1hrOpDHN1rvnb1Lr3YnkmZr/pJ9bfLSv2bRXQo/nKx6oODXKcoYuFLcLvg2xPxMq5Pg==", + "license": "Apache-2.0", + "dependencies": { + "@iconify/types": "*" + } + }, "node_modules/@iconify-json/mdi": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.2.3.tgz", @@ -4021,9 +4032,9 @@ } }, "node_modules/defu": { - "version": "6.1.4", - "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz", - "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==", + "version": "6.1.6", + "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.6.tgz", + "integrity": "sha512-f8mefEW4WIVg4LckePx3mALjQSPQgFlg9U8yaPdlsbdYcHQyj9n2zL2LJEA52smeYxOvmd/nB7TpMtHGMTHcug==", "license": "MIT" }, "node_modules/delayed-stream": { diff --git a/package.json b/package.json index 01c04a5..3163fc5 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@astrojs/rss": "^4.0.18", "@astrojs/svelte": "^8.0.4", "@astrojs/vue": "^6.0.1", + "@iconify-json/material-symbols": "^1.2.65", "@iconify-json/mdi": "^1.2.3", "@markdoc/markdoc": "^0.5.7", "@traptitech/markdown-it-katex": "^3.6.0", diff --git a/src/assets/blogs-header.webp b/src/assets/blogs-header.webp new file mode 100644 index 0000000..134cb24 Binary files /dev/null and b/src/assets/blogs-header.webp differ diff --git a/src/components/BlogCard.astro b/src/components/BlogCard.astro new file mode 100644 index 0000000..eac2f96 --- /dev/null +++ b/src/components/BlogCard.astro @@ -0,0 +1,145 @@ +--- +import { Image } from 'astro:assets' +import { Icon } from 'astro-icon/components' + +interface Props { + link: string + title: string + featureImage?: string + createdAt?: Date + updatedAt?: Date + author?: { + name: string + avatar?: string + } +} + +const { link, title, featureImage, author, createdAt, updatedAt } = Astro.props + +const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日` + +--- + + + { + featureImage && ( + 博文的头图 + ) + } +
+

{title}

+ {author &&
+ `用户 + {author.name} +
} + {createdAt &&
+ + {formatDate(createdAt)} +
} + {updatedAt && (!createdAt || formatDate(createdAt) != formatDate(updatedAt)) &&
+ + {formatDate(updatedAt)} +
} +
+ + + diff --git a/src/layout/FullLayoutV1.astro b/src/layout/FullLayoutV1.astro index 1874e24..9161f42 100644 --- a/src/layout/FullLayoutV1.astro +++ b/src/layout/FullLayoutV1.astro @@ -44,6 +44,11 @@ const { title = '小帕的小窝', withGap = false } = Astro.props > 旧博客系统* +
  • + + 博客 RSS + +
    • diff --git a/src/lib/apis/legacy/blog.ts b/src/lib/apis/legacy/blog.ts index 231383a..5abbd81 100644 --- a/src/lib/apis/legacy/blog.ts +++ b/src/lib/apis/legacy/blog.ts @@ -5,10 +5,10 @@ export type ListBlogItemType = { title: string /** ISO8601 */ - created_at: string + created_at: Date /** ISO8601 */ - updated_at: string + updated_at: Date featured_image: null | { image_url: string @@ -18,6 +18,9 @@ export type ListBlogItemType = { id: number username: string nickname: string + avatar: { + image_url: string + } } } @@ -29,7 +32,28 @@ export const listBlogs = async ({ limit?: number }) => { const resp = await legacyClient.post('/v1/blog/list', { page, limit }) - return resp.data.data as ListBlogItemType[] + return resp.data.data.map((blog: any) => { + let _blog = blog + if (blog.featured_image) { + _blog = { + ...blog, + featured_image: { + image_url: + 'https://legacy.passthem.top' + blog.featured_image.image_url, + }, + } + } else { + _blog = blog + } + + _blog.author.avatar = { + image_url: 'https://legacy.passthem.top' + _blog.author.avatar.image_url, + } + _blog.created_at = new Date(_blog.created_at) + _blog.updated_at = new Date(_blog.updated_at) + + return _blog + }) as ListBlogItemType[] } export const getBlog: ( diff --git a/src/pages/blogs.astro b/src/pages/blogs.astro index d87fac9..0159b85 100644 --- a/src/pages/blogs.astro +++ b/src/pages/blogs.astro @@ -1,30 +1,56 @@ --- import FullLayoutV1 from '../layout/FullLayoutV1.astro' import { listBlogs } 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) -const blogs = await listBlogs({ page }) +const blogs = await listBlogs({ page, limit: 100 }) --- - + -
    - -
    +
    +
    + 博客列表的头图，一个悬挂在空中的 LCD1602，上面写着一些示例文本 +
    +

    博客列表

    +

    这里是 passthem 和他朋友们的文章

    +
    +
    +
    +
      + { + blogs.map((blog) => ( + + )) + } +
    +
    +
    diff --git a/src/pages/index.astro b/src/pages/index.astro index 8db1db1..bfa0b9f 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -32,7 +32,7 @@ try {