tuna2134/cecilia
1
0
Fork 0
mirror of https://github.com/tuna2134/cecilia.git synced 2026-02-06 14:42:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update blog page layout and add blog list functionality

Browse Source
This commit is contained in:
tuna2134
2025-05-04 04:20:13 +00:00
parent fa25d3da89
commit 6d4ef05b16
4 changed files with 57 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/(pages)/blogs/[slug]/page.tsx
View File

@@ -15,10 +15,10 @@ export default async function Page({ params }: Props) {
return ( return (
<> <>
<div className="mb-6 rounded-lg border border-gray-300 p-2 shadow-md"> <div className="mb-6 rounded-lg border border-gray-300 p-2 shadow-md">
<h2 className="border-b-4 border-indigo-600 bg-indigo-600/20 p-1 text-2xl font-bold"> <h2 className="p-1 text-center text-2xl font-bold tracking-wider">
{metadata.title} {metadata.title}
</h2> </h2>
<div className="mt-3 flex items-center space-x-2"> <div className="mt-4 flex items-center justify-center space-x-2">
<Timer /> <Timer />
<p>作成日時：{metadata.datetime}</p> <p>作成日時：{metadata.datetime}</p>
</div> </div>

42
app/(pages)/blogs/page.tsx Normal file
View File

@@ -0,0 +1,42 @@
import fs from "fs/promises";
import { NextPage } from "next";
const Page: NextPage = async () => {
const blogs = (await fs.readdir("blogs"))
.filter((name) => name.endsWith(".mdx"))
.map(async (name) => ({
slug: name.replace(/\.mdx$/, ""),
metadata: (await import(`@/blogs/${name}`)).metadata,
}));
const blogList = await Promise.all(blogs);
blogList.sort((a, b) => {
const dateA = new Date(a.metadata.datetime);
const dateB = new Date(b.metadata.datetime);
return dateB.getTime() - dateA.getTime();
});
return (
<div>
<h1 className="text-center text-2xl font-bold">ブログ一覧</h1>
<ul className="mt-6 grid grid-cols-2 gap-4">
{blogList.map((blog) => (
<li
key={blog.slug}
className="rounded-md bg-gray-100 p-2 shadow-md"
>
<a
href={`/blogs/${blog.slug}`}
className="text-xl text-blue-500 hover:underline"
>
{blog.metadata.title}
</a>
<p className="text-gray-500">
作成日時：{blog.metadata.datetime}
</p>
</li>
))}
</ul>
</div>
);
};
export default Page;

9
app/layout.tsx
View File

@@ -1,5 +1,5 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google"; import { Geist, Geist_Mono, Noto_Sans_JP } from "next/font/google";
import "./globals.css"; import "./globals.css";
const geistSans = Geist({ const geistSans = Geist({
@@ -12,6 +12,11 @@ const geistMono = Geist_Mono({
subsets: ["latin"], subsets: ["latin"],
}); });
const notoSansJP = Noto_Sans_JP({
variable: "--font-noto-sans-jp",
subsets: ["latin"],
});
export const metadata: Metadata = { export const metadata: Metadata = {
title: "tuna2134", title: "tuna2134",
description: "tuna2134 official website", description: "tuna2134 official website",
@@ -25,7 +30,7 @@ export default function RootLayout({
return ( return (
<html lang="ja"> <html lang="ja">
<body <body
className={`${geistSans.variable} ${geistMono.variable} antialiased`} className={`${geistSans.variable} ${geistMono.variable} ${notoSansJP.variable} antialiased`}
> >
{children} {children}
</body> </body>

8
blogs/hello.mdx
View File

@@ -1,7 +1,11 @@
export const metadata = { export const metadata = {
title: "書き直し", title: "書き直し",
description: "久しぶりに書き直しました。", description: "久しぶりに書き直しました。",
datetime: "2025/05/03", datetime: "2025/05/04",
}; };
# Hello # 久しぶりの書き直し
久しぶりにウェブサイトを書き直しました。
## 変更点
- ブログの再開 - 結構どうでもいいことを記事にするつもりです。