✨ Add http base authentication for gist

lib/fetcher.ts

@@ -0,0 +1,32 @@
+import { Gist, GithubUser } from 'types';
+import { Base64 } from 'js-base64';
+
+const baseUrl = 'https://api.github.com/';
+const username = 'DefectingCat';
+const password = process.env.NEXT_PUBLIC_GITHUB_API;
+
+const headers = new Headers();
+headers.set(
+  'Authorization',
+  'Basic ' + Base64.encode(username + ':' + password)
+);
+
+/**
+ * Get all gists
+ * @returns
+ */
+export const getGists = async () => {
+  return (await fetch(`${baseUrl}users/${username}/gists`, { headers }).then(
+    (res) => res.json()
+  )) as Gist[];
+};
+
+/**
+ * Get user information.
+ * @returns
+ */
+export const getUser = async () => {
+  return (await fetch(`${baseUrl}user`, { headers }).then((res) =>
+    res.json()
+  )) as GithubUser;
+};

package.json

@@ -21,6 +21,7 @@
     "algoliasearch": "^4.13.1",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.3",
+    "js-base64": "^3.7.2",
     "next": "12.1.6",
     "next-compose-plugins": "^2.2.1",
     "next-themes": "^0.2.0",

pages/gists.tsx

@@ -9,6 +9,8 @@ import Link from 'next/link';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import Loading from 'components/RUA/loading/RUALoading';
+import { getGists, getUser } from 'lib/fetcher';
+import { FiLink, FiMail, FiTwitter } from 'react-icons/fi';
 
 const MainLayout = dynamic(() => import('layouts/MainLayout'));
 const GistsCode = dynamic(() => import('components/gists/GistsCode'), {
@@ -56,6 +58,34 @@ const Gists = ({
                 {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">
@@ -90,12 +120,8 @@ export const getStaticProps: GetStaticProps<{
   gists: Gist[];
   user: GithubUser;
 }> = async () => {
-  const gists = (await fetch(
+  const gists = await getGists();
-    'https://api.github.com/users/DefectingCat/gists'
+  const user = await getUser();
-  ).then((res) => res.json())) as Gist[];
-  const user = await fetch('https://api.github.com/users/DefectingCat').then(
-    (res) => res.json()
-  );
 
   await Promise.all(
     gists.map(async (g) => {

types/index.ts

@@ -114,6 +114,12 @@ export enum GistsOwnerType {
 }
 
 // Generated by https://quicktype.io
+export interface SignalGist extends Gist {
+  forks: any[];
+  history: History[];
+}
+// Generated by https://quicktype.io
+
 export interface GithubUser {
   login: string;
   id: number;
@@ -137,7 +143,7 @@ export interface GithubUser {
   company: null;
   blog: string;
   location: null;
-  email: null;
+  email: string;
   hireable: null;
   bio: string;
   twitter_username: string;
@@ -147,10 +153,18 @@ export interface GithubUser {
   following: number;
   created_at: string;
   updated_at: string;
+  private_gists: number;
+  total_private_repos: number;
+  owned_private_repos: number;
+  disk_usage: number;
+  collaborators: number;
+  two_factor_authentication: boolean;
+  plan: Plan;
 }
 
-// Generated by https://quicktype.io
+export interface Plan {
-export interface SignalGist extends Gist {
+  name: string;
-  forks: any[];
+  space: number;
-  history: History[];
+  collaborators: number;
+  private_repos: number;
 }

yarn.lock

@@ -4912,6 +4912,11 @@ jest@^28.1.1:
     import-local "^3.0.2"
     jest-cli "^28.1.1"
 
+js-base64@^3.7.2:
+  version "3.7.2"
+  resolved "https://registry.npmmirror.com/js-base64/-/js-base64-3.7.2.tgz#816d11d81a8aff241603d19ce5761e13e41d7745"
+  integrity sha512-NnRs6dsyqUXejqk/yv2aiXlAvOs56sLkX6nUdeaNezI5LFFLlsZjOThmwnrcwh5ZZRwZlCMnVAY3CvhIhoVEKQ==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"