From 9bfef591fa8c8df1b419fa1d0782f535cf8c251a Mon Sep 17 00:00:00 2001
From: Ben Zhang <ben-z@users.noreply.github.com>
Date: Tue, 3 Dec 2024 21:00:47 -0800
Subject: [PATCH] Add "Additional Information" section to GitHub util (#3429)

## Description

This PR adds some frontend enhancements to the GitHub util.
Specifically, an "additional information" section is added to the
username->global node id tool.

before/after:

<img width="2032" alt="image"
src="https://github.com/user-attachments/assets/35228bad-666c-4dc5-8267-64c6ce7d392a">



## Checklist
- [x] I have read and understood the [WATcloud
Guidelines](https://cloud.watonomous.ca/docs/community-docs/watcloud/guidelines)
- [x] I have performed a self-review of my code
---
 components/blog-post.tsx       |  36 +--------
 components/github.tsx          | 110 ++++++++++++++++++++++++--
 components/ui/avatar.tsx       |  48 ++++++++++++
 components/ui/social-links.tsx |  64 +++++++++++++++
 package-lock.json              | 138 +++++++++++++++++++++++++++++++++
 package.json                   |   2 +
 6 files changed, 360 insertions(+), 38 deletions(-)
 create mode 100644 components/ui/avatar.tsx
 create mode 100644 components/ui/social-links.tsx

diff --git a/components/blog-post.tsx b/components/blog-post.tsx
index 16cb5ef..e61beb5 100644
--- a/components/blog-post.tsx
+++ b/components/blog-post.tsx
@@ -13,6 +13,7 @@ import { Link, useConfig } from "nextra-theme-docs";
 import React, { Fragment } from 'react';
 import { SubscribeDialog } from './blog';
 import Picture from './picture';
+import { SocialLinks } from './ui/social-links';
 
 // Reference for styling: https://github.com/vercel/turbo/blob/22585c9dcc23eb010ab01f177394358af03210d7/docs/pages/blog/turbo-1-10-0.mdx
 
@@ -49,38 +50,9 @@ export function Avatar({ username }: { username: string }) {
             <dl className="ml-2 text-sm font-medium leading-4 text-left whitespace-no-wrap">
                 <dt className="sr-only">Name</dt>
                 <dd className="text-gray-800 dark:text-slate-50">{profile.watcloud_public_profile.full_name}</dd>
-                {profile.watcloud_public_profile.links && profile.watcloud_public_profile.links.map((link: string) => {
-                    const iconSize = 16;
-                    let icon = <LinkIcon size={iconSize} />;
-                    let sr = "link";
-                    if (link.startsWith("mailto:")) {
-                        icon = <MailIcon size={iconSize} />;
-                        sr = "email";
-                    } else if (link.startsWith("https://github.com")) {
-                        icon = <GithubIcon size={iconSize} />;
-                        sr = "github";
-                    } else if (link.startsWith("https://linkedin.com")) {
-                        icon = <LinkedinIcon size={iconSize} />;
-                        sr = "linkedin";
-                    } else if (link.startsWith("https://twitter.com") || link.startsWith("https://x.com")) {
-                        icon = <XIcon size={iconSize} />;
-                        sr = "twitter";
-                    }
-                    return (
-                        <Fragment key={link}>
-                            <dt className="sr-only">{sr}</dt>
-                            <dd className="inline-block">
-                                <Link
-                                    className="text-xs hover:text-gray-900 dark:hover:text-white"
-                                    href={link}
-                                    target="_blank"
-                                >
-                                    {icon}
-                                </Link>
-                            </dd>
-                        </Fragment>
-                    )
-                })}
+                {profile.watcloud_public_profile.links && (
+                    <SocialLinks links={profile.watcloud_public_profile.links} />
+                )}
             </dl>
         </div>
     );
diff --git a/components/github.tsx b/components/github.tsx
index 5bac95d..dfc7266 100644
--- a/components/github.tsx
+++ b/components/github.tsx
@@ -15,16 +15,108 @@ import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { Input } from "./ui/input";
 import { useMDXComponents } from "nextra-theme-docs";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
+import { Link } from "nextra-theme-docs"
+import { SocialLinks } from "./ui/social-links";
 
 const usernameToIDFormSchema = z.object({
     username: z.string(),
 });
 
+type RawData = {
+    request: {
+        url: string;
+        options: Record<string, any>;
+    };
+    response: {
+        headers: Record<string, string>;
+        data: any;
+    };
+};
+
+export function GitHubUserCard({
+    login,
+    name,
+    bio,
+    avatar_url,
+    html_url,
+    public_repos,
+    followers,
+    following,
+    blog,
+    twitter_username,
+    email,
+}: {
+    login: string,
+    name: string,
+    bio: string,
+    avatar_url: string,
+    html_url: string,
+    public_repos: number,
+    followers: number,
+    following: number,
+    blog?: string,
+    twitter_username?: string,
+    email?: string,
+}) {
+    return (
+        <Card className="mt-2 max-w-96">
+            <CardHeader className="text-center items-center">
+                <Avatar className="h-20 w-20 mb-2 border">
+                    <AvatarImage src={avatar_url} alt={`Avatar for @${login}`} />
+                    <AvatarFallback>{(login || "U")[0]}</AvatarFallback>
+                </Avatar>
+                <CardTitle>{name}</CardTitle>
+                <CardDescription>
+                    <Link href={html_url} style={{ color: "inherit", textDecoration: "none" }}>
+                        @{login}
+                    </Link>
+                </CardDescription>
+                <CardDescription>
+                    <SocialLinks className="flex space-x-1" links={[
+                        blog ? blog.match(/^https?:\/\//) ? blog : `http://${blog}` : "",
+                        twitter_username ? `https://x.com/${twitter_username}` : "",
+                        email ? `mailto:${email}` : "",
+                    ]} />
+                </CardDescription>
+                <CardDescription className="text-card-foreground">{bio}</CardDescription>
+            </CardHeader>
+            <CardContent className="grid grid-cols-3 gap-2 text-center leading-5">
+                <div>
+                    <Link href={`${html_url}?tab=repositories`} style={{ color: "inherit", textDecoration: "none" }}>
+                        <p className="font-semibold">{public_repos}</p>
+                        <p>
+                            <span className="text-sm text-muted-foreground">Public Repos</span>
+                        </p>
+                    </Link>
+                </div>
+                <div>
+                    <Link href={`${html_url}?tab=followers`} style={{ color: "inherit", textDecoration: "none" }}>
+                        <p className="font-semibold">{followers}</p>
+                        <p>
+                            <span className="text-sm text-muted-foreground">Followers</span>
+                        </p>
+                    </Link>
+                </div>
+                <div>
+                    <Link href={`${html_url}?tab=following`} style={{ color: "inherit", textDecoration: "none" }}>
+                        <p className="font-semibold">{following}</p>
+                        <p>
+                            <span className="text-sm text-muted-foreground">Following</span>
+                        </p>
+                    </Link>
+                </div>
+            </CardContent>
+        </Card>
+    )
+}
+
 export function UsernameToID() {
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [warningMessage, setWarningMessage] = useState<string>("");
     const [errorMessage, setErrorMessage] = useState<string>("");
-    const [rawData, setRawData] = useState<Object | null>(null);
+    const [rawData, setRawData] = useState<RawData | null>(null);
     const [globalNodeID, setGlobalNodeID] = useState<string>("");
 
     // Use MDX components from the theme:
@@ -129,12 +221,18 @@ export function UsernameToID() {
                 </div>
             )}
             {rawData && (
-                <Details>
-                    <Summary>Raw data</Summary>
-                    <div className="mt-2">
-                        <Pre hasCopyCode><Code>{JSON.stringify(rawData, null, 2)}</Code></Pre>
+                <>
+                    <div className="mt-8">
+                        <h2 className="text-xl font-bold">Additional Information</h2>
+                        <GitHubUserCard {...rawData.response.data} />
+                        <Details>
+                            <Summary>Raw data</Summary>
+                            <div className="mt-2">
+                                <Pre hasCopyCode><Code>{JSON.stringify(rawData, null, 2)}</Code></Pre>
+                            </div>
+                        </Details>
                     </div>
-                </Details>
+                </>
             )}
         </>
     );
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
new file mode 100644
index 0000000..991f56e
--- /dev/null
+++ b/components/ui/avatar.tsx
@@ -0,0 +1,48 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/components/ui/social-links.tsx b/components/ui/social-links.tsx
new file mode 100644
index 0000000..9890462
--- /dev/null
+++ b/components/ui/social-links.tsx
@@ -0,0 +1,64 @@
+import { cn } from "@/lib/utils";
+import { SiX } from "@icons-pack/react-simple-icons";
+import { GithubIcon, GlobeIcon, LinkedinIcon, MailIcon } from "lucide-react";
+
+import { Link } from "nextra-theme-docs";
+import { Fragment } from "react";
+
+export const DEFAULT_ICON_SIZE = 16;
+
+
+export function SocialLink({
+    link,
+    iconSize = DEFAULT_ICON_SIZE
+}: {
+    link: string,
+    iconSize?: number,
+}) {
+    let icon = <GlobeIcon size={iconSize} />;
+    let sr = "link";
+    if (link.startsWith("mailto:")) {
+        icon = <MailIcon size={iconSize} />;
+        sr = "email";
+    } else if (link.startsWith("https://github.com")) {
+        icon = <GithubIcon size={iconSize} />;
+        sr = "github";
+    } else if (link.startsWith("https://linkedin.com")) {
+        icon = <LinkedinIcon size={iconSize} />;
+        sr = "linkedin";
+    } else if (link.startsWith("https://twitter.com") || link.startsWith("https://x.com")) {
+        icon = <SiX size={iconSize} />;
+        sr = "twitter";
+    }
+    return (
+        <Fragment key={link}>
+            <dt className="sr-only">{sr}</dt>
+            <dd className="inline-block">
+                <Link
+                    className="text-xs hover:text-gray-900 dark:hover:text-white"
+                    href={link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    {icon}
+                </Link>
+            </dd>
+        </Fragment>
+    )
+}
+
+export function SocialLinks({
+    links,
+    className,
+    iconSize = DEFAULT_ICON_SIZE
+}: {
+    links: string[],
+    className?: string,
+    iconSize?: number,
+}) {
+    return (
+        <div className={cn(className)}>
+            {links.filter((link) => link).map((link) => <SocialLink key={link} link={link} iconSize={iconSize} />)}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 3e910e3..8776126 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,9 @@
       "dependencies": {
         "@giscus/react": "^3.0.0",
         "@hookform/resolvers": "^3.3.3",
+        "@icons-pack/react-simple-icons": "^10.2.0",
         "@radix-ui/react-alert-dialog": "^1.0.5",
+        "@radix-ui/react-avatar": "^1.1.1",
         "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -988,6 +990,15 @@
       "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
       "dev": true
     },
+    "node_modules/@icons-pack/react-simple-icons": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/@icons-pack/react-simple-icons/-/react-simple-icons-10.2.0.tgz",
+      "integrity": "sha512-QDUxup8D3GdIIzwGpxQs6bjeFV5mJes25qqf4aqP/PaBYQNCar7AiyD8C14636TosCG0A/QqAUwm/Hviep4d4g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.13 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -2598,6 +2609,133 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-avatar": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.1.tgz",
+      "integrity": "sha512-eoOtThOmxeoizxpX6RiEsQZ2wj5r4+zoeqAwO0cBaFQGjJwIH3dIX0OCxNrCyrrdxG+vBweMETh3VziQG7c1kw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-checkbox": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz",
diff --git a/package.json b/package.json
index af39f27..1d48093 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,9 @@
   "dependencies": {
     "@giscus/react": "^3.0.0",
     "@hookform/resolvers": "^3.3.3",
+    "@icons-pack/react-simple-icons": "^10.2.0",
     "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",