feat: add github stats

docs/src/components/ChallengeFooter.astro

@@ -2,6 +2,7 @@
 import VideoButton from './VideoButton.astro';
 import ClipboardCopy from './ClipboardCopy.astro';
 import { getEntry } from 'astro:content';
+import AnsweredUser from './github/AnsweredUser.svelte';
 
 const { lang } = Astro.props;
 const { author, challengeNumber, title, blogLink, videoLink, command } = Astro.props.entry.data;
@@ -11,27 +12,6 @@ const authorLink = `https://github.com/tomalaforge/angular-challenges/pulls?q=la
 const communityLink = `https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A${challengeNumber}+label%3Aanswer+sort%3Areactions-%2B1-desc`;
 const npxCommand = `npx nx serve ${command}`;
 
-let items = [];
-let page = 1;
-let error = false;
-try {
-while (true) {
-  const response = await fetch(`https://api.github.com/search/issues?q=repo:tomalaforge/angular-challenges+is:pr+label:"${challengeNumber}"+label:"answer"&per_page=100&page=${page}`);
-  if (!response.ok) {
-    throw new Error('Network response was not ok');
-  }
-  const { items: new_items, total_count } = await response.json();
-  if (!new_items || new_items.length === 0) break;
-  items.push(...new_items);
-
-  if(total_count < page * 100) break;
-
-  page++;
-}
-} catch (e) {
-  error = true;
-}
-
 ---
 
 <div class="separator"></div>
@@ -71,7 +51,7 @@ while (true) {
 <div class="article-footer">
   <a
     href={communityLink}>
-    ❖ {items.length > 0 ? items.length : ''} {data['challenge.footer.communityAnswers']}*
+    ❖ {data['challenge.footer.communityAnswers']}*
   </a>
   <a
     href={authorLink}>
@@ -92,20 +72,7 @@ while (true) {
     <VideoButton {...videoLink} {...Astro.props} />}
 </div>
 
-{error ? null :
-<div class="solution-container">
-  <div>Answered by</div>
-  {(items ?? []).map((item) => (
-    <img
-      loading="lazy"
-      src={item.user.avatar_url}
-      width="30"
-      height="30"
-      alt=""
-      class="avatar"
-    />
-  ))}
-</div>}
+<AnsweredUser client:load {challengeNumber} />
 
 <div class="footer-note">
   * {data['challenge.footer.upvoteAnswer']}
@@ -131,16 +98,5 @@ while (true) {
     margin-top: 3rem;
   }
 
-
-  .solution-container {
-    margin-top: 3rem;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-
-    img {
-      border-radius: 50%;
-    }
-  }
 </style>