diff --git a/src/web/src/components/GithubInfoProvider.tsx b/src/web/src/components/GithubInfoProvider.tsx
new file mode 100644
index 0000000000..7f97dd45ba
--- /dev/null
+++ b/src/web/src/components/GithubInfoProvider.tsx
@@ -0,0 +1,133 @@
+import { createContext, ReactNode, useMemo } from 'react';
+import githubReservedNames from '../githubReservedName';
+
+export interface GithubInfoContextInterface {
+  issues: string[];
+  pullRequests: string[];
+  repos: string[];
+  commits: string[];
+  users: string[];
+}
+
+const GithubInfoContext = createContext<GithubInfoContextInterface>({
+  issues: [],
+  pullRequests: [],
+  repos: [],
+  commits: [],
+  users: [],
+});
+
+type Props = {
+  children: ReactNode;
+  htmlString?: string;
+};
+
+const extractGitHubUrlsFromPost = (htmlString: string): string[] => {
+  const parser = new DOMParser();
+  const postDoc = parser.parseFromString(htmlString, 'text/html');
+
+  const allGithubLinks = Array.from(
+    // all links that have href starts with 'https://github.com'
+    postDoc.querySelectorAll("a[href^='https://github.com']"),
+    (element) => (element as HTMLAnchorElement).href
+  );
+
+  // unique links only
+  return allGithubLinks.reduce(
+    (acc: string[], element) => (acc.includes(element) ? acc : [...acc, element]),
+    []
+  );
+};
+
+const GithubInfoProvider = ({ children, htmlString }: Props) => {
+  const extractedGitHubUrls: string[] = useMemo(
+    () => (htmlString ? extractGitHubUrlsFromPost(htmlString) : []),
+    [htmlString]
+  );
+
+  const parseGitHubUrl = (url: string): URL | null => {
+    try {
+      const ghUrl = new URL(url);
+      if (ghUrl.hostname !== 'github.com') {
+        return null;
+      }
+      return ghUrl;
+    } catch (err) {
+      return null;
+    }
+  };
+
+  const filterGitHubUrls = () => {
+    const issues: Set<string> = new Set();
+    const pullRequests: Set<string> = new Set();
+    const repos: Set<string> = new Set();
+    const commits: Set<string> = new Set();
+    const users: Set<string> = new Set();
+
+    const ghUrls = (
+      extractedGitHubUrls.map((url) => parseGitHubUrl(url)).filter((url) => url !== null) as URL[]
+    ).filter((url) => !githubReservedNames.includes(url.pathname.split('/').slice(1, 2)[0]));
+
+    ghUrls.forEach((url) => {
+      const { pathname } = url;
+
+      // Match urls that start with /<user> and optionally end with /<repo> or /<repo>/<anything-in-between>/<type>/<id>
+      // <id> can be number, or a mixed of 40 alphanumeric (commit id)
+      // Ex: /Seneca-CDOT/telescope/pull/2367 ✅
+      // Ex: /Seneca-CDOT/telescope ✅
+      // Ex: /Seneca-CDOT/telescope/pull/2367/commits/d3fagd3fagd3fagd3fagd3fagd3fag4d41265748 ✅
+      // Ex: /Seneca-CDOT/telescope/issues ✅
+      const matches =
+        /^\/(?<user>[^/]+)(\/(?<repo>[^/]+)((\/(.*))?(\/(?<type>[^/]+)?\/(?<id>(\d+|\w{40}))\/?$))?)?/gi.exec(
+          pathname
+        );
+
+      if (matches?.groups) {
+        const { type, user, repo } = matches.groups;
+
+        // if repo defined add to repos
+        if (repo) {
+          const repoUrl = `${user}/${repo}`;
+          repos.add(repoUrl);
+        }
+        users.add(user);
+        switch (type?.toLowerCase()) {
+          case 'pull':
+            pullRequests.add(pathname);
+            break;
+
+          case 'issues':
+            issues.add(pathname);
+            break;
+
+          case 'commit':
+          case 'commits':
+            commits.add(pathname);
+            break;
+
+          default:
+            break;
+        }
+      }
+    });
+
+    return {
+      repos: Array.from(repos),
+      issues: Array.from(issues),
+      pullRequests: Array.from(pullRequests),
+      commits: Array.from(commits),
+      users: Array.from(users),
+    };
+  };
+
+  const { repos, issues, commits, users, pullRequests } = filterGitHubUrls();
+
+  return (
+    <GithubInfoContext.Provider value={{ issues, pullRequests, repos, commits, users }}>
+      {children}
+    </GithubInfoContext.Provider>
+  );
+};
+
+export default GithubInfoProvider;
+export { GithubInfoContext };
diff --git a/src/web/src/components/Posts/Commits.tsx b/src/web/src/components/Posts/Commits.tsx
index e2b21b0168..14018831fd 100644
--- a/src/web/src/components/Posts/Commits.tsx
+++ b/src/web/src/components/Posts/Commits.tsx
@@ -1,5 +1,6 @@
 import { VscGitCommit } from 'react-icons/vsc';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
+import useGithubInfo from '../../hooks/use-githubInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -46,21 +47,18 @@ const getCommitInfo = (commit: string) => {
   return `${user}/${repo}`;
 };
 
-type Props = {
-  commitUrls: string[];
-};
-
-const Commits = ({ commitUrls }: Props) => {
+const Commits = () => {
   const classes = useStyles();
+  const { commits } = useGithubInfo();
 
   return (
     <div className={classes.GitHubInfo}>
       <h2 className={classes.GitHubLinkTitle}>
         <VscGitCommit className={classes.icon} />
-        {commitUrls.length === 1 ? 'Commit' : 'Commits'}
+        {commits.length === 1 ? 'Commit' : 'Commits'}
       </h2>
       <ul className={classes.commits}>
-        {commitUrls.map((url) => (
+        {commits.map((url) => (
           <li key={url} className={classes.commit}>
             <a
               href={`https://github.com${url}`}
diff --git a/src/web/src/components/Posts/GitHubInfo.tsx b/src/web/src/components/Posts/GitHubInfo.tsx
index 2249208295..2e5efce34a 100644
--- a/src/web/src/components/Posts/GitHubInfo.tsx
+++ b/src/web/src/components/Posts/GitHubInfo.tsx
@@ -4,7 +4,7 @@ import Issues from './Issues';
 import PullRequests from './PullRequests';
 import Commits from './Commits';
 import Users from './Users';
-import githubReservedNames from '../../githubReservedName';
+import useGithubInfo from '../../hooks/use-githubInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -24,99 +24,19 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 );
 
-type Props = {
-  ghUrls: string[];
-};
-
-const parseGitHubUrl = (url: string): URL | null => {
-  try {
-    const ghUrl = new URL(url);
-    if (ghUrl.hostname !== 'github.com') {
-      return null;
-    }
-    return ghUrl;
-  } catch (err) {
-    return null;
-  }
-};
-
-export const filterGitHubUrls = (urls: string[]) => {
-  const issues: Set<string> = new Set();
-  const pullRequests: Set<string> = new Set();
-  const repos: Set<string> = new Set();
-  const commits: Set<string> = new Set();
-  const users: Set<string> = new Set();
-
-  // parse string to URL, and filter non reserved name
-  const ghUrls = (
-    urls.map((url) => parseGitHubUrl(url)).filter((url) => url !== null) as URL[]
-  ).filter((url) => !githubReservedNames.includes(url.pathname.split('/').slice(1, 2)[0]));
-
-  ghUrls.forEach((url) => {
-    const { pathname } = url;
-
-    // Match urls that start with /<user> and optionally end with /<repo> or /<repo>/<anything-in-between>/<type>/<id>
-    // <id> can be number, or a mixed of 40 alphanumeric (commit id)
-    // Ex: /Seneca-CDOT/telescope/pull/2367 ✅
-    // Ex: /Seneca-CDOT/telescope ✅
-    // Ex: /Seneca-CDOT/telescope/pull/2367/commits/d3fagd3fagd3fagd3fagd3fagd3fag4d41265748 ✅
-    // Ex: /Seneca-CDOT/telescope/issues ✅
-    // Ex: /Seneca-CDOT ✅
-    const matches =
-      /^\/(?<user>[^/]+)(\/(?<repo>[^/]+)((\/(.*))?(\/(?<type>[^/]+)?\/(?<id>(\d+|\w{40}))\/?$))?)?/gi.exec(
-        pathname
-      );
-
-    if (matches?.groups) {
-      const { type, user, repo } = matches.groups;
-
-      // if repo defined add to repos
-      if (repo) {
-        const repoUrl = `${user}/${repo}`;
-        repos.add(repoUrl);
-      }
-      users.add(user);
-      switch (type?.toLowerCase()) {
-        case 'pull':
-          pullRequests.add(pathname);
-          break;
-
-        case 'issues':
-          issues.add(pathname);
-          break;
-
-        case 'commit':
-        case 'commits':
-          commits.add(pathname);
-          break;
-
-        default:
-          break;
-      }
-    }
-  });
-
-  return {
-    repos: Array.from(repos),
-    issues: Array.from(issues),
-    pullRequests: Array.from(pullRequests),
-    commits: Array.from(commits),
-    users: Array.from(users),
-  };
-};
-
-const GitHubInfo = ({ ghUrls }: Props) => {
+const GitHubInfo = () => {
   const classes = useStyles();
-  const { repos, issues, pullRequests, commits, users } = filterGitHubUrls(ghUrls);
+
+  const { repos, issues, commits, pullRequests, users } = useGithubInfo();
 
   return (
     <ListSubheader component="div" className={classes.root}>
       <div className={classes.GitHubInfoContainer}>
-        {!!repos.length && <Repos repoUrls={repos} />}
-        {!!issues.length && <Issues issueUrls={issues} />}
-        {!!pullRequests.length && <PullRequests prUrls={pullRequests} />}
-        {!!commits.length && <Commits commitUrls={commits} />}
-        {!!users.length && <Users usernames={users} />}
+        {!!repos.length && <Repos />}
+        {!!issues.length && <Issues />}
+        {!!pullRequests.length && <PullRequests />}
+        {!!commits.length && <Commits />}
+        {!!users.length && <Users />}
       </div>
     </ListSubheader>
   );
diff --git a/src/web/src/components/Posts/GitHubInfoMobile.tsx b/src/web/src/components/Posts/GitHubInfoMobile.tsx
index 1f8e3d5d6c..1d0d3768ca 100644
--- a/src/web/src/components/Posts/GitHubInfoMobile.tsx
+++ b/src/web/src/components/Posts/GitHubInfoMobile.tsx
@@ -4,11 +4,7 @@ import Issues from './Issues';
 import PullRequests from './PullRequests';
 import Commits from './Commits';
 import Users from './Users';
-import { filterGitHubUrls } from './GitHubInfo';
-
-type Props = {
-  ghUrls: string[];
-};
+import useGithubInfo from '../../hooks/use-githubInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -29,19 +25,19 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 );
 
-const GitHubInfoMobile = ({ ghUrls }: Props) => {
+const GitHubInfoMobile = () => {
   const classes = useStyles();
-  const { repos, issues, pullRequests, commits, users } = filterGitHubUrls(ghUrls);
+  const { repos, issues, pullRequests, commits, users } = useGithubInfo();
 
   return (
     <div>
       <ListSubheader className={classes.root}>
         <div className={classes.GitHubInfoContainer}>
-          {!!repos.length && <Repos repoUrls={repos} />}
-          {!!issues.length && <Issues issueUrls={issues} />}
-          {!!pullRequests.length && <PullRequests prUrls={pullRequests} />}
-          {!!commits.length && <Commits commitUrls={commits} />}
-          {!!users.length && <Users usernames={users} />}
+          {!!repos.length && <Repos />}
+          {!!issues.length && <Issues />}
+          {!!pullRequests.length && <PullRequests />}
+          {!!commits.length && <Commits />}
+          {!!users.length && <Users />}
         </div>
       </ListSubheader>
     </div>
diff --git a/src/web/src/components/Posts/Issues.tsx b/src/web/src/components/Posts/Issues.tsx
index 692e3c0d2b..de0aff2148 100644
--- a/src/web/src/components/Posts/Issues.tsx
+++ b/src/web/src/components/Posts/Issues.tsx
@@ -1,5 +1,6 @@
 import { VscIssues } from 'react-icons/vsc';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
+import useGithubInfo from '../../hooks/use-githubInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -43,21 +44,18 @@ const getIssueInfo = (issue: string) => {
   return `${user}/${repo}`;
 };
 
-type Props = {
-  issueUrls: string[];
-};
-
-const Issues = ({ issueUrls }: Props) => {
+const Issues = () => {
   const classes = useStyles();
+  const { issues } = useGithubInfo();
 
   return (
     <div className={classes.GitHubInfo}>
       <h2 className={classes.GitHubLinkTitle}>
         <VscIssues className={classes.icon} />
-        {issueUrls.length === 1 ? 'Issue' : 'Issues'}
+        {issues.length === 1 ? 'Issue' : 'Issues'}
       </h2>
       <ul className={classes.issues}>
-        {issueUrls.map((issue) => (
+        {issues.map((issue) => (
           <li key={issue} className={classes.issue}>
             <a
               href={`https://github.com${issue}`}
diff --git a/src/web/src/components/Posts/Post.tsx b/src/web/src/components/Posts/Post.tsx
index 91f77cb83c..4e5ff2796b 100644
--- a/src/web/src/components/Posts/Post.tsx
+++ b/src/web/src/components/Posts/Post.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState, useMemo, useEffect } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import useSWR from 'swr';
 import clsx from 'clsx';
 import { makeStyles, Theme, useTheme } from '@material-ui/core/styles';
@@ -16,6 +16,7 @@ import {
 } from '@material-ui/core';
 import ErrorRoundedIcon from '@material-ui/icons/ErrorRounded';
 import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import GithubInfoProvider from '../GithubInfoProvider';
 import { Post } from '../../interfaces';
 import AdminButtons from '../AdminButtons';
 import Spinner from '../Spinner';
@@ -282,23 +283,6 @@ const extractBlogClassName = (url: string) => {
   }
 };
 
-const extractGitHubUrlsFromPost = (htmlString: string): string[] => {
-  const parser = new DOMParser();
-  const postDoc = parser.parseFromString(htmlString, 'text/html');
-
-  const allGithubLinks = Array.from(
-    // all links that have href starts with 'https://github.com'
-    postDoc.querySelectorAll("a[href^='https://github.com']"),
-    (element) => (element as HTMLAnchorElement).href
-  );
-
-  // unique links only
-  return allGithubLinks.reduce(
-    (acc: string[], element) => (acc.includes(element) ? acc : [...acc, element]),
-    []
-  );
-};
-
 // a 'guid' from a YouTube video is usually written as 'yt:video:id'
 const extractVideoId = (post: Post): string => post.guid.split(':')[2];
 
@@ -314,11 +298,6 @@ const PostComponent = ({ postUrl, currentPost, totalPosts }: Props) => {
   const isMedia = post?.type === 'video';
   const [expandHeader, setExpandHeader] = useState(false);
   // Extract all the github urls from the post
-  const extractedGitHubUrls: string[] = useMemo(
-    () => (post?.html ? extractGitHubUrlsFromPost(post.html) : []),
-    [post?.html]
-  );
-
   useEffect(() => {
     const onScroll = () => {
       // get the distance between the bottom of the blog post and
@@ -375,55 +354,20 @@ const PostComponent = ({ postUrl, currentPost, totalPosts }: Props) => {
   }
 
   return (
-    <Box className={classes.root}>
-      {currentPost && totalPosts && (
-        <div className={classes.postCount}>
-          <Chip
-            label={`${currentPost.toLocaleString()} of ${totalPosts.toLocaleString()}`}
-            variant="outlined"
-            className={classes.chipComponent}
-          />
-        </div>
-      )}
-
-      {desktop ? (
-        <>
-          <ListSubheader component="div" className={classes.postInfo}>
-            <div className={classes.titleContainer}>
-              <Typography
-                variant="h3"
-                title={post.title}
-                id={post.id}
-                className={clsx(classes.title, expandHeader && classes.expandedTitle)}
-              >
-                <span
-                  role="button"
-                  tabIndex={0}
-                  onClick={() => setExpandHeader(!expandHeader)}
-                  onKeyDown={() => setExpandHeader(!expandHeader)}
-                >
-                  {post.title}
-                </span>
-              </Typography>
-            </div>
-          </ListSubheader>
-          <ListSubheader component="div" className={classes.desktopPostInfo}>
-            <PostDesktopInfo
-              postUrl={post.url}
-              authorName={post.feed.author}
-              postDate={formatPublishedDate(post.updated)}
-              blogUrl={post.feed.link}
+    <GithubInfoProvider htmlString={post?.html}>
+      <Box className={classes.root}>
+        {currentPost && totalPosts && (
+          <div className={classes.postCount}>
+            <Chip
+              label={`${currentPost.toLocaleString()} of ${totalPosts.toLocaleString()}`}
+              variant="outlined"
+              className={classes.chipComponent}
             />
-            {!!extractedGitHubUrls.length && <GitHubInfo ghUrls={extractedGitHubUrls} />}
-          </ListSubheader>
-        </>
-      ) : (
-        <Accordion
-          onKeyDown={() => setExpandHeader(!expandHeader)}
-          expanded={expandHeader}
-          className={classes.accordion}
-        >
-          <AccordionSummary className={classes.accordionSummary}>
+          </div>
+        )}
+
+        {desktop ? (
+          <>
             <ListSubheader component="div" className={classes.postInfo}>
               <div className={classes.titleContainer}>
                 <Typography
@@ -432,59 +376,113 @@ const PostComponent = ({ postUrl, currentPost, totalPosts }: Props) => {
                   id={post.id}
                   className={clsx(classes.title, expandHeader && classes.expandedTitle)}
                 >
-                  <span role="button" tabIndex={0}>
+                  <span
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => setExpandHeader(!expandHeader)}
+                    onKeyDown={() => setExpandHeader(!expandHeader)}
+                  >
                     {post.title}
                   </span>
                 </Typography>
               </div>
-              <div className={classes.authorAvatarContainer}>
-                <PostAvatar name={post.feed.author} url={post.feed.link} />
-              </div>
-              <div className={classes.authorNameContainer}>
-                <h1 className={classes.author}>
-                  <a className={classes.link} href={post.feed.link}>
-                    {post.feed.author}
-                  </a>
-                </h1>
-              </div>
-              <div className={classes.publishedDateContainer}>
-                <h1 className={classes.published}>
-                  <a href={post.url} rel="bookmark" className={classes.link}>
-                    <time dateTime={post.updated}>{`${formatPublishedDate(post.updated)}`}</time>
-                  </a>
-                  <ShareButton url={post.url} />
-                  <ExpandIcon small expandHeader={expandHeader} setExpandHeader={setExpandHeader} />
-                </h1>
-
-                <div>
-                  <AdminButtons />
-                </div>
-              </div>
             </ListSubheader>
-          </AccordionSummary>
-          <AccordionDetails>
-            {!!extractedGitHubUrls.length && <GitHubInfoMobile ghUrls={extractedGitHubUrls} />}
-          </AccordionDetails>
-          <ExpandIcon small={false} expandHeader={expandHeader} setExpandHeader={setExpandHeader} />
-        </Accordion>
-      )}
+            <ListSubheader component="div" className={classes.desktopPostInfo}>
+              <PostDesktopInfo
+                postUrl={post.url}
+                authorName={post.feed.author}
+                postDate={formatPublishedDate(post.updated)}
+                blogUrl={post.feed.link}
+              />
+              <GitHubInfo />
+            </ListSubheader>
+          </>
+        ) : (
+          <Accordion
+            onKeyDown={() => setExpandHeader(!expandHeader)}
+            expanded={expandHeader}
+            className={classes.accordion}
+          >
+            <AccordionSummary className={classes.accordionSummary}>
+              <ListSubheader component="div" className={classes.postInfo}>
+                <div className={classes.titleContainer}>
+                  <Typography
+                    variant="h3"
+                    title={post.title}
+                    id={post.id}
+                    className={clsx(classes.title, expandHeader && classes.expandedTitle)}
+                  >
+                    <span role="button" tabIndex={0}>
+                      {post.title}
+                    </span>
+                  </Typography>
+                </div>
+                <div className={classes.authorAvatarContainer}>
+                  <PostAvatar name={post.feed.author} url={post.feed.link} />
+                </div>
+                <div className={classes.authorNameContainer}>
+                  <h1 className={classes.author}>
+                    <a className={classes.link} href={post.feed.link}>
+                      {post.feed.author}
+                    </a>
+                  </h1>
+                </div>
+                <div className={classes.publishedDateContainer}>
+                  <h1 className={classes.published}>
+                    <a href={post.url} rel="bookmark" className={classes.link}>
+                      <time dateTime={post.updated}>{`${formatPublishedDate(post.updated)}`}</time>
+                    </a>
+                    <ShareButton url={post.url} />
+                    <ExpandIcon
+                      small
+                      expandHeader={expandHeader}
+                      setExpandHeader={setExpandHeader}
+                    />
+                  </h1>
 
-      <div className={classes.content}>
-        {isMedia && (
-          <LiteYouTubeEmbed
-            id={extractVideoId(post)}
-            title={post.title}
-            wrapperClass={`yt-lite ${classes.video}`}
-          />
+                  <div>
+                    <AdminButtons />
+                  </div>
+                </div>
+              </ListSubheader>
+            </AccordionSummary>
+            <AccordionDetails>
+              <GitHubInfoMobile />
+            </AccordionDetails>
+            <ExpandIcon
+              small={false}
+              expandHeader={expandHeader}
+              setExpandHeader={setExpandHeader}
+            />
+          </Accordion>
         )}
 
-        <section
-          ref={sectionEl}
-          className={`telescope-post-content ${extractBlogClassName(post.url)}`}
-          dangerouslySetInnerHTML={{ __html: post.html }}
-        />
-      </div>
-    </Box>
+        <div className={classes.content}>
+          {isMedia && (
+            <LiteYouTubeEmbed
+              id={extractVideoId(post)}
+              title={post.title}
+              wrapperClass={`yt-lite ${classes.video}`}
+            />
+          )}
+        </div>
+        <div className={classes.content}>
+          {isMedia && (
+            <LiteYouTubeEmbed
+              id={extractVideoId(post)}
+              title={post.title}
+              wrapperClass={`yt-lite ${classes.video}`}
+            />
+          )}
+
+          <section
+            ref={sectionEl}
+            className={`telescope-post-content ${extractBlogClassName(post.url)}`}
+            dangerouslySetInnerHTML={{ __html: post.html }}
+          />
+        </div>
+      </Box>
+    </GithubInfoProvider>
   );
 };
 
diff --git a/src/web/src/components/Posts/PullRequests.tsx b/src/web/src/components/Posts/PullRequests.tsx
index d9d3a5aad9..3438d8f6e1 100644
--- a/src/web/src/components/Posts/PullRequests.tsx
+++ b/src/web/src/components/Posts/PullRequests.tsx
@@ -1,5 +1,6 @@
 import { VscGitPullRequest } from 'react-icons/vsc';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
+import useGithubInfo from '../../hooks/use-githubInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -44,21 +45,19 @@ const getPullRequestInfo = (pullRequest: string) => {
   return `${user}/${repo}`;
 };
 
-type Props = {
-  prUrls: string[];
-};
-
-const PullRequests = ({ prUrls }: Props) => {
+const PullRequests = () => {
   const classes = useStyles();
 
+  const { pullRequests } = useGithubInfo();
+
   return (
     <div className={classes.GitHubInfo}>
       <h2 className={classes.GitHubLinkTitle}>
         <VscGitPullRequest className={classes.icon} />
-        {prUrls.length === 1 ? 'Pull Request' : 'Pull Requests'}
+        {pullRequests.length === 1 ? 'Pull Request' : 'Pull Requests'}
       </h2>
       <ul className={classes.pullRequests}>
-        {prUrls.map((pullRequest) => (
+        {pullRequests.map((pullRequest) => (
           <li key={pullRequest} className={classes.pullRequest}>
             <a
               href={`https://github.com${pullRequest}`}
diff --git a/src/web/src/components/Posts/Repos.tsx b/src/web/src/components/Posts/Repos.tsx
index 8706b5f516..609b6cf03c 100644
--- a/src/web/src/components/Posts/Repos.tsx
+++ b/src/web/src/components/Posts/Repos.tsx
@@ -1,5 +1,6 @@
 import { VscRepoForked } from 'react-icons/vsc';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
+import useGithubInfo from '../../hooks/use-githubInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -39,21 +40,18 @@ const useStyles = makeStyles((theme: Theme) =>
 
 const getRepoName = (repo: string) => repo.replace(/^([^/]+\/[^/]+).*/, '$1');
 
-type Props = {
-  repoUrls: string[];
-};
-
-const Repos = ({ repoUrls }: Props) => {
+const Repos = () => {
   const classes = useStyles();
+  const { repos } = useGithubInfo();
 
   return (
     <div className={classes.GitHubInfo}>
       <h2 className={classes.GitHubLinkTitle}>
         <VscRepoForked className={classes.icon} />
-        {repoUrls.length === 1 ? 'Repo' : 'Repos'}
+        {repos.length === 1 ? 'Repo' : 'Repos'}
       </h2>
       <ul className={classes.repos}>
-        {repoUrls.map((repo) => (
+        {repos.map((repo) => (
           <li key={repo} className={classes.repo}>
             <a
               href={`https://github.com/${repo}`}
diff --git a/src/web/src/components/Posts/Users.tsx b/src/web/src/components/Posts/Users.tsx
index 6bfe1fa2aa..2af74203b8 100644
--- a/src/web/src/components/Posts/Users.tsx
+++ b/src/web/src/components/Posts/Users.tsx
@@ -1,6 +1,7 @@
 import { VscGithub } from 'react-icons/vsc';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
 import TelescopeAvatar from '../TelescopeAvatar';
+import useGithubInfo from '../../hooks/use-githubInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -40,21 +41,21 @@ const useStyles = makeStyles((theme: Theme) =>
 const getUserImage = (user: string, size: number) => `https://github.com/${user}.png?size=${size}`;
 
 type Props = {
-  usernames: string[];
   avatarSize?: number;
 };
 
-const Users = ({ usernames, avatarSize = 25 }: Props) => {
+const Users = ({ avatarSize = 25 }: Props) => {
   const classes = useStyles();
+  const { users } = useGithubInfo();
 
   return (
     <div className={classes.GitHubInfo}>
       <h2 className={classes.GitHubLinkTitle}>
         <VscGithub className={classes.icon} />
-        {usernames.length === 1 ? 'User/Org' : 'Users/Orgs'}
+        {users.length === 1 ? 'User/Org' : 'Users/Orgs'}
       </h2>
       <ul className={classes.users}>
-        {usernames?.map((user) => (
+        {users?.map((user) => (
           <li key={user} className={classes.user}>
             <div>
               <TelescopeAvatar
diff --git a/src/web/src/hooks/use-githubInfo.ts b/src/web/src/hooks/use-githubInfo.ts
new file mode 100644
index 0000000000..4de4e7a024
--- /dev/null
+++ b/src/web/src/hooks/use-githubInfo.ts
@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { GithubInfoContext, GithubInfoContextInterface } from '../components/GithubInfoProvider';
+
+const useGithubInfo = (): GithubInfoContextInterface => useContext(GithubInfoContext);
+
+export default useGithubInfo;