110 lines
4.0 KiB
TypeScript
110 lines
4.0 KiB
TypeScript
import { Link } from "react-router";
|
|
|
|
import {
|
|
ArrowDown,
|
|
BiliBili,
|
|
CloudMusic,
|
|
GitHub,
|
|
QQ,
|
|
Steam,
|
|
TwitterX,
|
|
} from "~/components/ui/icons";
|
|
import { siteTitle } from "~/utils";
|
|
|
|
import type { Route } from "./+types/index";
|
|
import styles from "./index.module.css";
|
|
|
|
const year = new Date().getFullYear();
|
|
|
|
export function meta({}: Route.MetaArgs) {
|
|
return [
|
|
{ title: siteTitle() },
|
|
{ name: "description", content: "一只正在学习前后端技术的萌新" },
|
|
];
|
|
}
|
|
|
|
export async function loader() {
|
|
const data = (await fetch("https://paul.ren/api/sync").then((res) =>
|
|
res.json()
|
|
)) as unknown as API.Response<API.Sync.ISyncData>;
|
|
|
|
return { data };
|
|
}
|
|
|
|
export default function Index({ loaderData }: Route.ComponentProps) {
|
|
const { data } = loaderData;
|
|
|
|
return (
|
|
<main className="px-2 py-24 max-w-3xl mx-auto">
|
|
<section className="-mt-40 relative flex flex-col h-screen min-h-160 max-w-3xl mx-auto">
|
|
<div className="my-auto px-4 py-10 bg-white rounded-xl text-center">
|
|
<div className="mx-auto w-40 mb-10 relative select-none">
|
|
<div className="top-4 left-2 w-36 h-36 rounded-full absolute bg-pink-100"></div>
|
|
<img className={styles.avatar} src="/avatar.webp" alt="奇趣保罗" />
|
|
</div>
|
|
<h1 className="text-5xl mb-4">奇趣保罗</h1>
|
|
<p className="opacity-60 mb-10">一只正在学习前后端技术的萌新</p>
|
|
<p className="flex justify-center gap-3">
|
|
<a href="https://paul.ren/join-group" target="_blank" rel="noreferrer" title="企鹅群">
|
|
<QQ className="w-6" />
|
|
</a>
|
|
<a href="https://github.com/Dreamer-Paul" target="_blank" rel="noreferrer" title="GitHub">
|
|
<GitHub className="w-6" />
|
|
</a>
|
|
<a href="https://music.163.com/#/user/home?id=7041859" target="_blank" rel="noreferrer" title="网易云">
|
|
<CloudMusic className="w-6" />
|
|
</a>
|
|
<a href="https://x.com/Dreamer__Paul" target="_blank" rel="noreferrer" title="X">
|
|
<TwitterX className="w-6" />
|
|
</a>
|
|
<a href="https://space.bilibili.com/124512959" target="_blank" rel="noreferrer" title="哔哩哔哩">
|
|
<BiliBili className="w-6" />
|
|
</a>
|
|
<a href="https://steamcommunity.com/id/dreamer-paul" target="_blank" rel="noreferrer" title="Steam">
|
|
<Steam className="w-6" />
|
|
</a>
|
|
</p>
|
|
</div>
|
|
<ArrowDown className="absolute left-0 right-0 bottom-20 mx-auto w-10 h-10 opacity-60 animate-bounce" />
|
|
</section>
|
|
|
|
<section className="mb-16">
|
|
<h2 className="text-3xl mb-4">近期博文</h2>
|
|
<div className="bg-white rounded-xl p-5">
|
|
{data.data.blog.map((item) => (
|
|
<p key={item.link} className="flex mb-3 last:mb-0">
|
|
<a className="flex-1" href={item.link} target="_blank" rel="noreferrer">{item.title}</a>
|
|
<span className="font-mono opacity-50">{item.date}</span>
|
|
</p>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="mb-16">
|
|
<h2 className="text-3xl mb-4">近期日记</h2>
|
|
<div className="bg-white rounded-xl p-5">
|
|
{data.data.note.map((item) => (
|
|
<p key={item.id} className="flex mb-3 last:mb-0">
|
|
<Link className="flex-1" to={`/note/${year}/${item.id}`}>{item.title}</Link>
|
|
<span className="font-mono opacity-50">{item.date}</span>
|
|
</p>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 className="text-3xl mb-4">近期捕获</h2>
|
|
<div className="bg-white rounded-xl p-5 grid grid-cols-2 gap-5">
|
|
{data.data.media.map((item) => (
|
|
<div key={item.id}>
|
|
<img className="mb-3 rounded-xl" src={item.thumb_url} alt={item.title} />
|
|
<h3 className="text-lg mb-1">{item.title}</h3>
|
|
<p className="text-xs opacity-50">{item.take_time.substring(0, 10)}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|