Add gists page

* update search placeholder

components/NavBar.tsx

@@ -21,6 +21,11 @@ const txtMenu = [
   },
   {
     id: 2,
+    name: 'Gists',
+    path: '/gists',
+  },
+  {
+    id: 3,
     name: 'About',
     path: '/about',
   },
@@ -96,6 +101,7 @@ const HeadBar: FC = () => {
                 appId={process.env.NEXT_PUBLIC_ALGOLIA_APP_ID ?? ''}
                 indexName="RUA"
                 apiKey={process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_ADMIN_KEY ?? ''}
+                placeholder="Search..."
               />
             </li>
           </ul>

next.config.mjs

@@ -24,6 +24,7 @@ const composedConfig = composePlugins([
       outputStandalone: true,
     },
     pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
+    images: { domains: ['avatars.githubusercontent.com'] },
   },
 ]);
 

pages/gists.tsx

@@ -0,0 +1,85 @@
+import MainLayout from 'layouts/MainLayout';
+import { InferGetStaticPropsType } from 'next';
+import { ReactElement } from 'react';
+import { Gist, GithubUser } from 'types';
+import Image from 'next/image';
+import classNames from 'classnames';
+
+const Gists = ({
+  gists,
+  user,
+}: InferGetStaticPropsType<typeof getStaticProps>) => {
+  return (
+    <>
+      <main className="max-w-5xl px-4 mx-auto lg:px-0">
+        <div className="md:flex">
+          <div className="flex items-center md:block">
+            <div
+              className={classNames(
+                'w-16 h-16 mr-4 overflow-hidden',
+                'md:w-auto h-auto'
+              )}
+            >
+              <Image
+                src={user.avatar_url}
+                alt="User Avatar"
+                width={280}
+                height={280}
+                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="py-4 md:pl-8">
+            {gists.map((g) => (
+              <div key={g.id}>
+                {Object.keys(g.files).map((f) => {
+                  const file = g.files;
+                  return (
+                    <div key={file[f].raw_url} className="py-4 text-sm">
+                      <h1 className="md:text-lg">
+                        {g.owner.login} / {file[f].filename}
+                      </h1>
+                      <p className="text-gray-400">Update at: {g.updated_at}</p>
+                      <p className="text-gray-500">{g.description}</p>
+                    </div>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};
+
+export const getStaticProps = async () => {
+  return {
+    props: {
+      gists: (await fetch(
+        'https://api.github.com/users/DefectingCat/gists'
+      ).then((res) => res.json())) as Gist[],
+      user: (await fetch('https://api.github.com/users/DefectingCat').then(
+        (res) => res.json()
+      )) as GithubUser,
+    },
+    revalidate: 60,
+  };
+};
+
+Gists.getLayout = function getLayout(page: ReactElement) {
+  return <MainLayout>{page}</MainLayout>;
+};
+
+export default Gists;

types/index.ts

@@ -19,3 +19,120 @@ export interface MyMatters {
 export interface Post extends MyMatters {
   slug: string;
 }
+
+// Generated by https://quicktype.io
+export interface Gist {
+  url: string;
+  forks_url: string;
+  commits_url: string;
+  id: string;
+  node_id: string;
+  git_pull_url: string;
+  git_push_url: string;
+  html_url: string;
+  files: { [key: string]: GistsFile };
+  public: boolean;
+  created_at: string;
+  updated_at: string;
+  description: string;
+  comments: number;
+  user: null;
+  comments_url: string;
+  owner: GistsOwner;
+  truncated: boolean;
+}
+export interface GistsFile {
+  filename: string;
+  type: GistsFileType;
+  language: GistsLanguage | null;
+  raw_url: string;
+  size: number;
+}
+export enum GistsLanguage {
+  JavaScript = 'JavaScript',
+  PublicKey = 'Public Key',
+  TypeScript = 'TypeScript',
+}
+export enum GistsFileType {
+  ApplicationJavascript = 'application/javascript',
+  ApplicationPGPSignature = 'application/pgp-signature',
+  TextPlain = 'text/plain',
+  VideoMP2T = 'video/MP2T',
+}
+export interface GistsOwner {
+  login: GistsLogin;
+  id: number;
+  node_id: GistsNodeID;
+  avatar_url: string;
+  gravatar_id: string;
+  url: string;
+  html_url: string;
+  followers_url: string;
+  following_url: GistsFollowingURL;
+  gists_url: GistsURL;
+  starred_url: GistsStarredURL;
+  subscriptions_url: string;
+  organizations_url: string;
+  repos_url: string;
+  events_url: GistsEventsURL;
+  received_events_url: string;
+  type: GistsOwnerType;
+  site_admin: boolean;
+}
+export enum GistsEventsURL {
+  HTTPSAPIGithubCOMUsersDefectingCatEventsPrivacy = 'https://api.github.com/users/DefectingCat/events{/privacy}',
+}
+export enum GistsFollowingURL {
+  HTTPSAPIGithubCOMUsersDefectingCatFollowingOtherUser = 'https://api.github.com/users/DefectingCat/following{/other_user}',
+}
+export enum GistsURL {
+  HTTPSAPIGithubCOMUsersDefectingCatGistsGistID = 'https://api.github.com/users/DefectingCat/gists{/gist_id}',
+}
+export enum GistsLogin {
+  DefectingCat = 'DefectingCat',
+}
+export enum GistsNodeID {
+  MDQ6VXNlcjI1MDMzNDkz = 'MDQ6VXNlcjI1MDMzNDkz',
+}
+export enum GistsStarredURL {
+  HTTPSAPIGithubCOMUsersDefectingCatStarredOwnerRepo = 'https://api.github.com/users/DefectingCat/starred{/owner}{/repo}',
+}
+export enum GistsOwnerType {
+  User = 'User',
+}
+
+// Generated by https://quicktype.io
+export interface GithubUser {
+  login: string;
+  id: number;
+  node_id: string;
+  avatar_url: string;
+  gravatar_id: string;
+  url: string;
+  html_url: string;
+  followers_url: string;
+  following_url: string;
+  gists_url: string;
+  starred_url: string;
+  subscriptions_url: string;
+  organizations_url: string;
+  repos_url: string;
+  events_url: string;
+  received_events_url: string;
+  type: string;
+  site_admin: boolean;
+  name: string;
+  company: null;
+  blog: string;
+  location: null;
+  email: null;
+  hireable: null;
+  bio: string;
+  twitter_username: string;
+  public_repos: number;
+  public_gists: number;
+  followers: number;
+  following: number;
+  created_at: string;
+  updated_at: string;
+}