Add gists layout

app/blog/layout.tsx

@@ -1,6 +1,11 @@
 import clsx from 'clsx';
+import { Metadata } from 'next';
 import { ReactNode } from 'react';
 
+export const metadata: Metadata = {
+  title: 'RUA - Blog',
+};
+
 export default function PageLayout({ children }: { children: ReactNode }) {
   return (
     <main className="max-w-4xl mx-auto">

app/blog/page.tsx

@@ -3,11 +3,6 @@ import PostCardLoading from './post-card-loading';
 import { PostPerPage, postLists } from 'lib/posts';
 import { Fragment, Suspense } from 'react';
 import Pagination from 'components/rua/rua-pagination';
-import { Metadata } from 'next';
-
-export const metadata: Metadata = {
-  title: 'RUA - Blog',
-};
 
 export default async function Page() {
   const allPosts = await postLists();

app/gists/layout.tsx

@@ -0,0 +1,32 @@
+import UserInfo from './user-info';
+import { ReactNode, Suspense } from 'react';
+import UserInfoLoading from './user-info-skeleton';
+import { Metadata } from 'next';
+
+export const revalidate = 600;
+export const metadata: Metadata = {
+  title: 'RUA - Gists',
+};
+
+export default async function PageLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <>
+      <main className="max-w-5xl px-4 mx-auto lg:px-0">
+        <div className="md:flex">
+          <Suspense fallback={<UserInfoLoading />}>
+            {/* @ts-expect-error Async Server Component */}
+            <UserInfo />
+          </Suspense>
+
+          <div className="flex-1 px-1 py-4 overflow-hidden md:pl-8">
+            {children}
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}

app/gists/page.tsx

@@ -1,16 +1,9 @@
 import { getGists } from 'lib/fetcher';
 import { notFound } from 'next/navigation';
-import UserInfo from './user-info';
-import { Suspense } from 'react';
 import Pagination from 'components/rua/rua-pagination';
 import FileContent from './file-content';
-import UserInfoLoading from './user-info-skeleton';
-import { Metadata } from 'next';
 
 export const revalidate = 600;
-export const metadata: Metadata = {
-  title: 'RUA - Gists',
-};
 
 export default async function Page() {
   const gists = await getGists();
@@ -22,27 +15,16 @@ export default async function Page() {
 
   return (
     <>
-      <main className="max-w-5xl px-4 mx-auto lg:px-0">
-        <div className="md:flex">
-          <Suspense fallback={<UserInfoLoading />}>
-            {/* @ts-expect-error Async Server Component */}
-            <UserInfo />
-          </Suspense>
-
-          <div className="flex-1 px-1 py-4 overflow-hidden md:pl-8">
-            <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}
-            />
-          </div>
-        </div>
-      </main>
+      <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}
+      />
     </>
   );
 }