🐛 Fix gists styles

fix #48
fix #49

components/gists/FileContent.tsx

@@ -0,0 +1,48 @@
+import Anchor from 'components/mdx/Anchor';
+import Loading from 'components/RUA/loading/RUALoading';
+import dayjs from 'dayjs';
+import dynamic from 'next/dynamic';
+import Link from 'next/link';
+import { Gist } from 'types';
+
+const GistsCode = dynamic(() => import('components/gists/GistsCode'), {
+  loading: () => <Loading classNames="h-[300px]" />,
+});
+
+type Props = {
+  gists: Gist[];
+};
+
+const FileContent = ({ gists }: Props) => {
+  return (
+    <>
+      <div className="flex-1 py-4 overflow-hidden md:pl-8">
+        {gists.map((g) => (
+          <div key={g.id}>
+            {Object.keys(g.files).map((f) => (
+              <div key={g.files[f].raw_url} className="pb-4 ">
+                {/* Username and file name */}
+                <h1 className="md:text-lg">
+                  {g.owner.login} /
+                  <Link href={`/g/${g.id}`} passHref>
+                    <Anchor external={false}>{g.files[f].filename}</Anchor>
+                  </Link>
+                </h1>
+                {/* Time */}
+                <p className="text-gray-400">
+                  Last active: {dayjs(g.updated_at).fromNow()}
+                </p>
+                {/* Description */}
+                <p className="text-gray-500">{g.description}</p>
+
+                <GistsCode file={g.files[f]} />
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default FileContent;

components/gists/GistsCode.tsx

@@ -59,7 +59,8 @@ const GistsCode = ({ file, showFileName = false }: Props) => {
               className={classNames(
                 'px-4 bg-white',
                 'leading-[30px]',
-                'dark:bg-[hsl(220,13%,18%)] dark:border-b dark:border-b-[rgb(128,203,196)]'
+                'dark:bg-[hsl(220,13%,18%)] dark:border-b dark:border-b-[rgb(128,203,196)]',
+                'overflow-hidden whitespace-nowrap overflow-ellipsis'
               )}
             >
               {file.filename}

components/gists/UserInfo.tsx

@@ -0,0 +1,78 @@
+import classNames from 'classnames';
+import Image from 'next/image';
+import avatar from 'public/images/img/avatar.svg';
+import { FiLink, FiMail, FiTwitter } from 'react-icons/fi';
+import { GithubUser } from 'types';
+
+type Props = {
+  user: GithubUser;
+};
+
+const UserInfo = ({ user }: Props) => {
+  return (
+    <>
+      <div
+        className={classNames(
+          'flex md:items-center flex-1',
+          'max-w-[280px] md:block',
+          'mb-4 flex-col md:flex-row'
+        )}
+      >
+        <div className="flex md:flex-col">
+          <div
+            className={classNames(
+              'w-16 h-16 mr-4 overflow-hidden',
+              'md:w-auto h-auto'
+            )}
+          >
+            <Image
+              src={avatar}
+              alt="Avatar"
+              priority
+              className="rounded-full"
+            />
+          </div>
+
+          <div>
+            <h1 className="text-xl font-bold font-Barlow md:text-2xl">
+              {user.name}
+            </h1>
+
+            <h2 className="text-xl text-gray-400 font-Barlow md:text-2xl">
+              {user.login}
+            </h2>
+          </div>
+        </div>
+
+        <div className="my-4">{user.bio}</div>
+
+        <div>
+          <div className="flex items-center mb-1">
+            <FiMail className="mr-2" />
+            <span>
+              <a href={`mailto:${user.email}`}>{user.email}</a>
+            </span>
+          </div>
+          <div className="flex items-center mb-1">
+            <FiLink className="mr-2" />
+            <a href={user.blog} target="_blank" rel="noreferrer">
+              {user.blog}
+            </a>
+          </div>
+          <div className="flex items-center mb-1">
+            <FiTwitter className="mr-2" />
+            <a
+              rel="noreferrer"
+              target="_blank"
+              href={`https://twitter.com/${user.twitter_username}`}
+            >
+              @{user.twitter_username}
+            </a>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default UserInfo;

lib/fetcher.ts

@@ -31,7 +31,7 @@ export const getUser = async () => {
   )) as GithubUser;
 };
 
-export const getSignalGist = async (id: string | string[] | undefined) => {
+export const getSignalGist = async (id: string) => {
   return (await fetch(`${baseUrl}/gists/${id}`, { headers }).then((res) =>
     res.json()
   )) as SignalGist;

pages/g/[id].tsx

@@ -29,13 +29,14 @@ const Gist = ({ gist }: InferGetStaticPropsType<typeof getStaticProps>) => {
               height={32}
               className="rounded-full "
             />
-            <h1 className="ml-2 text-xl">
+            <h1 className="ml-2 overflow-hidden text-xl whitespace-nowrap overflow-ellipsis">
               <Link href={`/gists`} passHref>
                 <Anchor external={false}>{gist.owner.login}</Anchor>
               </Link>
               /{Object.keys(gist.files)[0]}
             </h1>
           </div>
+
           <p className="pl-10 text-gray-400 ">
             Last active: {dayjs(gist.updated_at).fromNow()}
           </p>
@@ -68,6 +69,12 @@ export const getStaticProps: GetStaticProps<{
   id: string | undefined;
   gist: SignalGist;
 }> = async ({ params }) => {
+  if (typeof params?.id !== 'string') {
+    return {
+      notFound: true,
+    };
+  }
+
   const gist = await getSignalGist(params?.id);
 
   await Promise.all(

pages/gists/[p].tsx

@@ -1,22 +1,14 @@
-import classNames from 'classnames';
-import Loading from 'components/RUA/loading/RUALoading';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { getGists, getUser } from 'lib/fetcher';
 import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
 import dynamic from 'next/dynamic';
-import Image from 'next/image';
-import Link from 'next/link';
-import avatar from 'public/images/img/avatar.svg';
 import { ReactElement } from 'react';
-import { FiLink, FiMail, FiTwitter } from 'react-icons/fi';
 import { Gist, GithubUser } from 'types';
 
 const MainLayout = dynamic(() => import('layouts/MainLayout'));
-const GistsCode = dynamic(() => import('components/gists/GistsCode'), {
-  loading: () => <Loading classNames="h-[300px]" />,
-});
-const Anchor = dynamic(() => import('components/mdx/Anchor'));
+const UserInfo = dynamic(() => import('components/gists/UserInfo'));
+const FileContent = dynamic(() => import('components/gists/FileContent'));
 
 dayjs.extend(relativeTime);
 
@@ -28,87 +20,9 @@ const Gists = ({
     <>
       <main className="max-w-5xl px-4 mx-auto lg:px-0">
         <div className="md:flex">
-          <div
-            className={classNames(
-              'flex items-center flex-1',
-              'max-w-[280px] md:block',
-              'mb-4'
-            )}
-          >
-            <div
-              className={classNames(
-                'w-16 h-16 mr-4 overflow-hidden',
-                'md:w-auto h-auto'
-              )}
-            >
-              <Image
-                src={avatar}
-                alt="Avatar"
-                priority
-                className="rounded-full"
-              />
-            </div>
+          <UserInfo user={user} />
 
-            <div>
-              <h1 className="text-xl font-bold font-Barlow md:text-2xl">
-                {user.name}
-              </h1>
-
-              <h2 className="text-xl text-gray-400 font-Barlow md:text-2xl">
-                {user.login}
-              </h2>
-            </div>
-
-            <div className="my-4">{user.bio}</div>
-
-            <div>
-              <div className="flex items-center mb-1">
-                <FiMail className="mr-2" />
-                <span>
-                  <a href={`mailto:${user.email}`}>{user.email}</a>
-                </span>
-              </div>
-              <div className="flex items-center mb-1">
-                <FiLink className="mr-2" />
-                <a href={user.blog} target="_blank" rel="noreferrer">
-                  {user.blog}
-                </a>
-              </div>
-              <div className="flex items-center mb-1">
-                <FiTwitter className="mr-2" />
-                <a
-                  rel="noreferrer"
-                  target="_blank"
-                  href={`https://twitter.com/${user.twitter_username}`}
-                >
-                  @{user.twitter_username}
-                </a>
-              </div>
-            </div>
-          </div>
-
-          <div className="flex-1 py-4 overflow-hidden md:pl-8">
-            {gists.map((g) => (
-              <div key={g.id}>
-                {Object.keys(g.files).map((f) => (
-                  <div key={g.files[f].raw_url} className="pb-4 ">
-                    <h1 className="md:text-lg">
-                      {g.owner.login} /
-                      <Link href={`/g/${g.id}`} passHref>
-                        <Anchor external={false}>{g.files[f].filename}</Anchor>
-                      </Link>
-                    </h1>
-                    <p className="text-gray-400">
-                      Last active: {dayjs(g.updated_at).fromNow()}
-                    </p>
-                    <p className="text-gray-500">{g.description}</p>
-
-                    <GistsCode file={g.files[f]} />
-                  </div>
-                ))}
-              </div>
-            ))}
-          </div>
+          <FileContent gists={gists} />
         </div>
       </main>
     </>
@@ -126,7 +40,6 @@ export const getStaticProps: GetStaticProps<{
   gists: Gist[];
   user: GithubUser;
 }> = async ({ params }) => {
-  console.log(params?.p);
   if (typeof params?.p !== 'string') {
     return {
       notFound: true,

pages/gists/index.tsx

@@ -1,22 +1,14 @@
-import classNames from 'classnames';
-import Loading from 'components/RUA/loading/RUALoading';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { getGists, getUser } from 'lib/fetcher';
 import { GetStaticProps, InferGetStaticPropsType } from 'next';
 import dynamic from 'next/dynamic';
-import Image from 'next/image';
-import Link from 'next/link';
-import avatar from 'public/images/img/avatar.svg';
 import { ReactElement } from 'react';
-import { FiLink, FiMail, FiTwitter } from 'react-icons/fi';
 import { Gist, GithubUser } from 'types';
 
 const MainLayout = dynamic(() => import('layouts/MainLayout'));
-const GistsCode = dynamic(() => import('components/gists/GistsCode'), {
-  loading: () => <Loading classNames="h-[300px]" />,
-});
-const Anchor = dynamic(() => import('components/mdx/Anchor'));
+const UserInfo = dynamic(() => import('components/gists/UserInfo'));
+const FileContent = dynamic(() => import('components/gists/FileContent'));
 
 dayjs.extend(relativeTime);
 
@@ -28,87 +20,9 @@ const Gists = ({
     <>
       <main className="max-w-5xl px-4 mx-auto lg:px-0">
         <div className="md:flex">
-          <div
-            className={classNames(
-              'flex items-center flex-1',
-              'max-w-[280px] md:block',
-              'mb-4'
-            )}
-          >
-            <div
-              className={classNames(
-                'w-16 h-16 mr-4 overflow-hidden',
-                'md:w-auto h-auto'
-              )}
-            >
-              <Image
-                src={avatar}
-                alt="Avatar"
-                priority
-                className="rounded-full"
-              />
-            </div>
+          <UserInfo user={user} />
 
-            <div>
-              <h1 className="text-xl font-bold font-Barlow md:text-2xl">
-                {user.name}
-              </h1>
-
-              <h2 className="text-xl text-gray-400 font-Barlow md:text-2xl">
-                {user.login}
-              </h2>
-            </div>
-
-            <div className="my-4">{user.bio}</div>
-
-            <div>
-              <div className="flex items-center mb-1">
-                <FiMail className="mr-2" />
-                <span>
-                  <a href={`mailto:${user.email}`}>{user.email}</a>
-                </span>
-              </div>
-              <div className="flex items-center mb-1">
-                <FiLink className="mr-2" />
-                <a href={user.blog} target="_blank" rel="noreferrer">
-                  {user.blog}
-                </a>
-              </div>
-              <div className="flex items-center mb-1">
-                <FiTwitter className="mr-2" />
-                <a
-                  rel="noreferrer"
-                  target="_blank"
-                  href={`https://twitter.com/${user.twitter_username}`}
-                >
-                  @{user.twitter_username}
-                </a>
-              </div>
-            </div>
-          </div>
-
-          <div className="flex-1 py-4 overflow-hidden md:pl-8">
-            {gists.map((g) => (
-              <div key={g.id}>
-                {Object.keys(g.files).map((f) => (
-                  <div key={g.files[f].raw_url} className="pb-4 ">
-                    <h1 className="md:text-lg">
-                      {g.owner.login} /
-                      <Link href={`/g/${g.id}`} passHref>
-                        <Anchor external={false}>{g.files[f].filename}</Anchor>
-                      </Link>
-                    </h1>
-                    <p className="text-gray-400">
-                      Last active: {dayjs(g.updated_at).fromNow()}
-                    </p>
-                    <p className="text-gray-500">{g.description}</p>
-
-                    <GistsCode file={g.files[f]} />
-                  </div>
-                ))}
-              </div>
-            ))}
-          </div>
+          <FileContent gists={gists} />
         </div>
       </main>
     </>