feat: add number of answers and people ansering

docs/src/components/ChallengeFooter.astro

@@ -10,6 +10,19 @@ const { data } = await getEntry('i18n', lang);
 const authorLink = `https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A${challengeNumber}+label%3A"answer+author"`;
 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}`;
+
+const response = await fetch(`https://api.github.com/search/issues?q=repo:tomalaforge/angular-challenges+is:pr+label:%22${challengeNumber}%22+label:%22answer%22`);
+const { total_count, items } = await response.json();
+
+let count = 1;
+while(total_count > count*30) {
+  const response = await fetch(`https://api.github.com/search/issues?q=repo:tomalaforge/angular-challenges+is:pr+label:%22${challengeNumber}%22+label:%22answer%22&page=${count}`);
+  const { items: new_items } = await response.json();
+  if(new_items && new_items.length === 0) break;
+  items.push(...new_items);
+  count++;
+}
+
 ---
 
 <div class="separator"></div>
@@ -49,7 +62,7 @@ const npxCommand = `npx nx serve ${command}`;
 <div class="article-footer">
   <a
     href={communityLink}>
-    ❖ {data['challenge.footer.communityAnswers']}*
+    ❖ {total_count} {data['challenge.footer.communityAnswers']}*
   </a>
   <a
     href={authorLink}>
@@ -70,6 +83,20 @@ const npxCommand = `npx nx serve ${command}`;
     <VideoButton {...videoLink} {...Astro.props} />}
 </div>
 
+<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>
+
 <div class="footer-note">
   * {data['challenge.footer.upvoteAnswer']}
 </div>
@@ -93,5 +120,17 @@ const npxCommand = `npx nx serve ${command}`;
     gap: 0.25rem;
     margin-top: 3rem;
   }
+
+
+  .solution-container {
+    margin-top: 3rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+
+    img {
+      border-radius: 50%;
+    }
+  }
 </style>