From 8d53e2d397e4a78a8f08007f3af250af8286162c Mon Sep 17 00:00:00 2001 From: DefectingCat Date: Thu, 21 Apr 2022 17:06:48 +0800 Subject: [PATCH] Add gists page * update search placeholder --- components/NavBar.tsx | 6 +++ next.config.mjs | 1 + pages/gists.tsx | 85 ++++++++++++++++++++++++++++++ types/index.ts | 117 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 209 insertions(+) create mode 100644 pages/gists.tsx diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 8a828a8..163dfcf 100644 --- a/components/NavBar.tsx +++ b/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..." /> diff --git a/next.config.mjs b/next.config.mjs index 8c47253..9a923eb 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -24,6 +24,7 @@ const composedConfig = composePlugins([ outputStandalone: true, }, pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'], + images: { domains: ['avatars.githubusercontent.com'] }, }, ]); diff --git a/pages/gists.tsx b/pages/gists.tsx new file mode 100644 index 0000000..3aad649 --- /dev/null +++ b/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) => { + return ( + <> +
+
+
+
+ User Avatar +
+ +
+

+ {user.name} +

+

+ {user.login} +

+
+
+ +
+ {gists.map((g) => ( +
+ {Object.keys(g.files).map((f) => { + const file = g.files; + return ( +
+

+ {g.owner.login} / {file[f].filename} +

+

Update at: {g.updated_at}

+

{g.description}

+
+ ); + })} +
+ ))} +
+
+
+ + ); +}; + +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 {page}; +}; + +export default Gists; diff --git a/types/index.ts b/types/index.ts index 638107c..a414d4b 100644 --- a/types/index.ts +++ b/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; +}