mirror of
https://github.com/DefectingCat/DefectingCat.github.io
synced 2025-07-15 16:51:37 +00:00
feat: add tags page
This commit is contained in:
@ -1,63 +0,0 @@
|
||||
import LinkAnchor from 'components/mdx/link-anchor';
|
||||
import GistsCode from 'components/pages/gists/gists-code';
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import { getSignalGist } from 'lib/fetcher';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { notFound } from 'next/navigation';
|
||||
import avatar from 'public/images/img/avatar.svg';
|
||||
|
||||
export const revalidate = 600;
|
||||
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
export default async function Page({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{
|
||||
id: string;
|
||||
}>;
|
||||
}) {
|
||||
const { id } = await params;
|
||||
if (typeof id !== 'string') notFound();
|
||||
const gist = await getSignalGist(id);
|
||||
if (!gist || !gist.files) notFound();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center py-1 ">
|
||||
<Image
|
||||
src={avatar}
|
||||
alt="Avatar"
|
||||
priority
|
||||
width={32}
|
||||
height={32}
|
||||
className="rounded-full "
|
||||
/>
|
||||
<h1 className="ml-2 overflow-hidden text-xl whitespace-nowrap text-ellipsis">
|
||||
<Link href="/gists">
|
||||
<LinkAnchor external={false}>{gist.login}</LinkAnchor>
|
||||
</Link>
|
||||
/{Object.keys(gist.files)[0]}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<p className="pl-10 text-gray-400 ">
|
||||
Last active: {dayjs(gist.updated_at).fromNow()}
|
||||
</p>
|
||||
|
||||
<div className="py-4">
|
||||
<p className="pb-2 text-lg text-gray-500">{gist.description}</p>
|
||||
|
||||
{Object.keys(gist.files).map((f) => (
|
||||
<GistsCode
|
||||
key={gist.files[f].raw_url}
|
||||
file={gist.files[f]}
|
||||
showFileName
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
export const revalidate = 600;
|
||||
|
||||
export default async function PageLayout({
|
||||
children,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<main className="w-full max-w-5xl px-4 mx-auto lg:px-0">
|
||||
<div className="pb-4 text-sm">{children}</div>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,56 +0,0 @@
|
||||
import clsx from 'clsx';
|
||||
import GistsCodeSkeleton from 'components/pages/gists/gists-code-skeleton';
|
||||
|
||||
const loading = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center py-1 ">
|
||||
<div
|
||||
className={clsx(
|
||||
'w-8 h-8 rounded-full',
|
||||
'bg-gray-200 animate-pulse dark:bg-rua-gray-600',
|
||||
)}
|
||||
></div>
|
||||
<h1
|
||||
className={clsx(
|
||||
'ml-2 overflow-hidden text-xl',
|
||||
'whitespace-nowrap text-ellipsis',
|
||||
'flex items-center',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
'w-32 h-5 bg-gray-200',
|
||||
'animate-pulse rounded-lg',
|
||||
'dark:bg-rua-gray-600',
|
||||
)}
|
||||
></div>
|
||||
<span className="mx-1">/</span>
|
||||
<div
|
||||
className={clsx(
|
||||
'w-32 h-5 bg-gray-200',
|
||||
'animate-pulse rounded-lg',
|
||||
'dark:bg-rua-gray-600',
|
||||
)}
|
||||
></div>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-400 pl-11 ">
|
||||
<div
|
||||
className={clsx(
|
||||
'w-32 h-4 bg-gray-200',
|
||||
'animate-pulse rounded-lg',
|
||||
'dark:bg-rua-gray-600',
|
||||
)}
|
||||
></div>
|
||||
</p>
|
||||
|
||||
<div className="py-4">
|
||||
<GistsCodeSkeleton />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default loading;
|
||||
@ -1,39 +0,0 @@
|
||||
import FileContent from 'components/pages/gists/file-content';
|
||||
import Pagination from 'components/rua/rua-pagination';
|
||||
import { getGists } from 'lib/fetcher';
|
||||
import { notFound } from 'next/navigation';
|
||||
|
||||
export const revalidate = 600;
|
||||
|
||||
export default async function Page({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{
|
||||
page: string;
|
||||
}>;
|
||||
}) {
|
||||
const { page: pageNumber } = await params;
|
||||
const page = Number(pageNumber);
|
||||
if (!page) notFound();
|
||||
const gists = await getGists(page);
|
||||
if (!gists) notFound();
|
||||
|
||||
const prev = Number(gists.pageSize.prev);
|
||||
const next = Number(gists.pageSize.next);
|
||||
const total = Number(gists.pageSize.last);
|
||||
|
||||
return (
|
||||
<>
|
||||
<FileContent gists={gists.gists} />
|
||||
<Pagination
|
||||
className="mt-4"
|
||||
hasPrev={!!prev}
|
||||
hasNext={!!next}
|
||||
prevLink={prev === 1 ? `/gists/` : `/gists/${prev}`}
|
||||
nextLink={`/gists/${next}`}
|
||||
current={prev == null ? next - 1 : prev + 1}
|
||||
total={total}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,31 +0,0 @@
|
||||
import UserInfo from 'components/pages/gists/user-info';
|
||||
import UserInfoLoading from 'components/pages/gists/user-info-skeleton';
|
||||
import { Metadata } from 'next';
|
||||
import { ReactNode, Suspense } from 'react';
|
||||
|
||||
export const revalidate = 600;
|
||||
export const metadata: Metadata = {
|
||||
title: 'RUA - Gists',
|
||||
};
|
||||
|
||||
export default async function PageLayout({
|
||||
children,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<main className="w-full max-w-5xl px-4 mx-auto lg:px-0">
|
||||
<div className="md:flex">
|
||||
<Suspense fallback={<UserInfoLoading />}>
|
||||
<UserInfo />
|
||||
</Suspense>
|
||||
|
||||
<div className="flex-1 px-1 py-4 overflow-hidden md:pl-8">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import FileContentLoading from 'components/pages/gists/file-content-skeleton';
|
||||
|
||||
export default function Loading() {
|
||||
const num = Array(3).fill(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
{num.map((_, i) => (
|
||||
<FileContentLoading key={i} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
import FileContent from 'components/pages/gists/file-content';
|
||||
import Pagination from 'components/rua/rua-pagination';
|
||||
import { getGists } from 'lib/fetcher';
|
||||
import { notFound } from 'next/navigation';
|
||||
|
||||
export const revalidate = 600;
|
||||
|
||||
export default async function Page() {
|
||||
const gists = await getGists();
|
||||
if (!gists) notFound();
|
||||
|
||||
const prev = Number(gists.pageSize.prev);
|
||||
const next = Number(gists.pageSize.next);
|
||||
const total = Number(gists.pageSize.last);
|
||||
|
||||
return (
|
||||
<>
|
||||
<FileContent gists={gists.gists} />
|
||||
<Pagination
|
||||
className="mt-4"
|
||||
hasPrev={!!prev}
|
||||
hasNext={!!next}
|
||||
prevLink={prev === 1 ? `/gists/` : `/gists/${prev}`}
|
||||
nextLink={`/gists/${next}`}
|
||||
current={prev == null ? next - 1 : prev + 1}
|
||||
total={total}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
27
app/tags/layout.tsx
Normal file
27
app/tags/layout.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
import clsx from 'clsx';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
const Layout = ({ children }: { children: ReactNode }) => {
|
||||
return (
|
||||
<>
|
||||
<main
|
||||
className={clsx(
|
||||
'flex-1 max-w-4xl px-8 py-8 mx-auto',
|
||||
'lg:px-0 w-full flex-1',
|
||||
)}
|
||||
>
|
||||
<h1
|
||||
className={clsx(
|
||||
'text-5xl font-bold text-center font-Barlow',
|
||||
'mt-8 mb-20 text-gray-800 dark:text-gray-200',
|
||||
)}
|
||||
>
|
||||
Tags
|
||||
</h1>
|
||||
{children}
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
60
app/tags/page.tsx
Normal file
60
app/tags/page.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import clsx from 'clsx';
|
||||
import { postLists } from 'lib/posts';
|
||||
import { Metadata } from 'next';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'RUA - Tags',
|
||||
};
|
||||
|
||||
const Page = async () => {
|
||||
const posts = await postLists();
|
||||
// tag ["Rust", "React"] or "Rust"
|
||||
// tag object {"Rust": 1, "React": 1}
|
||||
const tags = posts.reduce<{
|
||||
[key: string]: number;
|
||||
}>((prev, cur) => {
|
||||
if (cur.tags?.length <= 0) {
|
||||
return prev;
|
||||
}
|
||||
if (typeof cur.tags === 'string') {
|
||||
const tag = prev[cur.tags];
|
||||
if (tag) {
|
||||
prev[cur.tags] += 1;
|
||||
} else {
|
||||
prev[cur.tags] = 1;
|
||||
}
|
||||
}
|
||||
if (Array.isArray(cur.tags)) {
|
||||
cur.tags.forEach((tag) => {
|
||||
const tagCount = prev[tag];
|
||||
if (tagCount) {
|
||||
prev[tag] += 1;
|
||||
} else {
|
||||
prev[tag] = 1;
|
||||
}
|
||||
});
|
||||
}
|
||||
return prev;
|
||||
}, {});
|
||||
|
||||
return (
|
||||
<div className={clsx('flex gap-4 flex-wrap')}>
|
||||
{Object.entries(tags).map(([tag, count]) => (
|
||||
<div
|
||||
key={tag}
|
||||
className={clsx(
|
||||
'px-4 py-2 bg-gray-200',
|
||||
'rounded-lg flex items-center',
|
||||
'gap-2 cursor-pointer',
|
||||
'dark:bg-rua-gray-800',
|
||||
)}
|
||||
>
|
||||
<div>{tag}</div>
|
||||
<div>{count}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page;
|
||||
Reference in New Issue
Block a user