feat: add github access token settings

core/core/src/tokens.ts

@@ -1,3 +1,4 @@
 export interface TokenOptions {
-  figmaAccessToken: string;
+  figmaAccessToken?: string;
+  githubAccessToken?: string;
 }

examples/gatsby/.config/buildtime.js

@@ -79,7 +79,9 @@ module.exports = {
       adminAPIKey: process.env.ALGOLIA_SEARCH_ADMIN_KEY,
     },
   },
-
+  tokens: {
+    githubAccessToken: process.env.GITHUB_AUTH_TOKEN,
+  },
   webpack: (config = {}, options = {}) => {
     return {
       ...config,

examples/nextjs/.config/buildtime.js

@@ -68,6 +68,9 @@ module.exports = {
       isCaseSensitive: true,
     },
   },
+  tokens: {
+    githubAccessToken: process.env.GITHUB_AUTH_TOKEN,
+  },
   webpack: (config = {}, options = {}) => {
     return {
       ...config,

ui/blocks/src/ComponentContributors/ComponentContributors.tsx

@@ -8,6 +8,7 @@ import {
   GithubAvatarUser,
 } from '@component-controls/components';
 import { useCustomProps } from '../context';
+import { useConfig } from '@component-controls/store';
 
 export interface ComponentContributorsProps {
   caption?: string;
@@ -20,7 +21,8 @@ export const ComponentContributors: FC<ComponentContributorsProps &
     'component_contributors',
     rest,
   );
-
+  const config = useConfig();
+  const { tokens } = config;
   const contributors = useMemo(() => {
     if (!component?.fileInfo?.commits?.length) {
       return [];
@@ -51,7 +53,12 @@ export const ComponentContributors: FC<ComponentContributorsProps &
   return !!contributors.length ? (
     <div sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
       {caption && <div sx={{ mr: 1 }}>{caption}</div>}
-      <GithubAvatarList users={contributors} size={24} {...props} />
+      <GithubAvatarList
+        githubAccessToken={tokens?.githubAccessToken}
+        users={contributors}
+        size={24}
+        {...props}
+      />
     </div>
   ) : null;
 };

ui/components/src/GithubAvatarList/GithubAvatarItem.tsx

@@ -33,6 +33,10 @@ export interface GithubAvatarItemProps {
    * whether to freeze the size of the avataro on hover
    */
   freeze?: boolean;
+  /**
+   * to increase access rate for github user profile info
+   */
+  githubAccessToken?: string;
 }
 
 /**
@@ -44,8 +48,9 @@ export const GithubAvatarItem: FC<GithubAvatarItemProps> = ({
   size = 48,
   overlap = 0.4,
   freeze = false,
+  githubAccessToken,
 }) => {
-  const profile = useGithubProfile(username, useremail);
+  const profile = useGithubProfile(username, useremail, githubAccessToken);
   const profileBox = (
     <div sx={{ p: 2 }}>
       <div sx={{ fontSize: 4, fontWeight: 'bold' }}>

ui/components/src/GithubAvatarList/GithubAvatarList.tsx

@@ -33,6 +33,7 @@ export const GithubAvatarList: FC<GithubAvatarListProps> = ({
   size = 32,
   overlap = 0.4,
   maxItems = 7,
+  githubAccessToken,
   ...rest
 }) => {
   const width = useMemo(() => {
@@ -55,6 +56,7 @@ export const GithubAvatarList: FC<GithubAvatarListProps> = ({
         <GithubAvatarItem
           key={`avatar_item${user.username}`}
           size={size}
+          githubAccessToken={githubAccessToken}
           username={user.username}
           useremail={user.useremail}
           overlap={overlap}

ui/components/src/GithubAvatarList/useGithubProfile.tsx

@@ -41,6 +41,7 @@ const profilesCache: Record<string, GithubProfile> = {};
 export const useGithubProfile = (
   username: string,
   useremail?: string,
+  githubToken?: string,
 ): GithubProfile => {
   const [profile, setProfile] = useState<GithubProfile>(
     profilesCache[username] || {
@@ -54,8 +55,15 @@ export const useGithubProfile = (
     },
   );
   useEffect(() => {
+    const headers = githubToken
+      ? {
+          Authorization: `token ${githubToken}`,
+        }
+      : undefined;
     const fetchData = async () => {
-      fetch(`https://api.github.com/users/${username}`)
+      fetch(`https://api.github.com/users/${username}`, {
+        headers,
+      })
         .then(res => res.json())
         .then(result => {
           profilesCache[username] = result;