feat: add tags page

backup/g/[id]/page.tsx

@@ -0,0 +1,63 @@
+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>
+    </>
+  );
+}

backup/g/layout.tsx

@@ -0,0 +1,17 @@
+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>
+    </>
+  );
+}

backup/g/loading.tsx

@@ -0,0 +1,56 @@
+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;

backup/gists/[page]/page.tsx

@@ -0,0 +1,39 @@
+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}
+      />
+    </>
+  );
+}

backup/gists/layout.tsx

@@ -0,0 +1,31 @@
+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>
+    </>
+  );
+}

backup/gists/loading.tsx

@@ -0,0 +1,13 @@
+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} />
+      ))}
+    </>
+  );
+}

backup/gists/page.tsx

@@ -0,0 +1,30 @@
+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}
+      />
+    </>
+  );
+}