Add get signal gist api

components/gists/GistsCode.tsx

@@ -10,6 +10,7 @@ import classNames from 'classnames';
 import useInView from 'lib/hooks/useInView';
 import loadingImage from 'public/images/img/mona-loading-default.gif';
 import Image from 'next/image';
+import Link from 'next/link';
 
 interface Props {
   gist: Gist;
@@ -49,7 +50,8 @@ const GistsCode = ({ gist, f }: Props) => {
     <>
       <div ref={ref} className={classNames('pb-4 text-sm')}>
         <h1 className="md:text-lg">
-          {gist.owner.login} / {file[f].filename}
+          {gist.owner.login} /
+          <Link href={`/g/${gist.id}`}>{file[f].filename}</Link>
         </h1>
         <p className="text-gray-400">Update at: {gist.updated_at}</p>
         <p className="text-gray-500">{gist.description}</p>

pages/g/[id].tsx

@@ -1,17 +1,29 @@
-import { GetStaticProps } from 'next';
+import { GetStaticProps, InferGetStaticPropsType, GetStaticPaths } from 'next';
 import dynamic from 'next/dynamic';
 import { ReactElement } from 'react';
-import { NextPageWithLayout } from 'types';
 
 const MainLayout = dynamic(() => import('layouts/MainLayout'));
 
-const Gist: NextPageWithLayout = () => {
-  return <></>;
+const Gist = ({ id }: InferGetStaticPropsType<typeof getStaticProps>) => {
+  return (
+    <>
+      <main className="max-w-5xl px-4 mx-auto lg:px-0">{id}</main>
+    </>
+  );
 };
 
-export const getStaticProps:GetStaticProps  = async ({params}) => {
+export const getStaticPaths: GetStaticPaths = async () => {
   return {
-    props: {},
+    paths: [],
+    fallback: true,
+  };
+};
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+  return {
+    props: {
+      id: params?.id,
+    },
     revalidate: 60,
   };
 };

pages/gists.tsx

@@ -42,6 +42,7 @@ const Gists = ({
               <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>

styles/prism-one-light.css

@@ -30,7 +30,7 @@
 
 code,
 pre {
-  background: hsl(230, 1%, 98%);
+  background: #fff;
   color: hsl(230, 8%, 24%);
   font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono',
     monospace;

types/index.ts

@@ -136,3 +136,68 @@ export interface GithubUser {
   created_at: string;
   updated_at: string;
 }
+
+// Generated by https://quicktype.io
+export interface SignalGist {
+  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]: File };
+  public: boolean;
+  created_at: string;
+  updated_at: string;
+  description: string;
+  comments: number;
+  user: null;
+  comments_url: string;
+  owner: Owner;
+  forks: any[];
+  history: History[];
+  truncated: boolean;
+}
+export interface File {
+  filename: string;
+  type: string;
+  language: string;
+  raw_url: string;
+  size: number;
+  truncated: boolean;
+  content: string;
+}
+export interface History {
+  user: Owner;
+  version: string;
+  committed_at: string;
+  change_status: ChangeStatus;
+  url: string;
+}
+export interface ChangeStatus {
+  total: number;
+  additions: number;
+  deletions: number;
+}
+export interface Owner {
+  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;
+}