feat: add number of answers and people ansering

Author: tomalaforge

docs/astro.config.mjs

@@ -93,6 +93,7 @@ export default defineConfig({
  TableOfContents: './src/components/TableOfContents.astro',
  PageTitle: './src/components/PageTitle.astro',
  MobileMenuFooter: './src/components/MobileMenuFooter.astro',
+ SiteTitle: './src/components/SiteTitle.astro',
  },
  defaultLocale: 'root',
  locales,

docs/src/components/ActionButtonFooter.astro

@@ -11,17 +11,17 @@ const { data } = await getEntry('i18n', lang);
 <div class="action-footer">
  <a class="action-button" href="/subscription">
  <div>{data['buttons.email']}</div>
- <Icon name="email" size="1rem" />
+ <Icon name="email" />
  </a>
 
  <a class="action-button" href="https://github.com/tomalaforge/angular-challenges">
  <div>{data['buttons.star']}</div>
- <Icon name="github" size="1rem" />
+ <Icon name="github" />
  </a>
 
  <a class="action-button button-sponsor" href="https://github.com/sponsors/tomalaforge">
  <div>{data['buttons.sponsor']}</div>
- <MyIcon name="heart" size="1rem" color="white" />
+ <MyIcon name="heart" fill="none" stroke="currentColor" color="white" />
  </a>
 </div>
 

docs/src/components/AnswerNumber.astro

@@ -0,0 +1,15 @@
+---
+const { challengeNumber } = Astro.props;
+const response = await fetch(`https://api.github.com/search/issues?q=repo:tomalaforge/angular-challenges+is:pr+label:%22${challengeNumber}%22+label:%22answer%22&per_page=1`);
+const { total_count } = await response.json();
+---
+
+<div class="answer-text">Answered by {total_count} people</div>
+
+<style>
+ .answer-text {
+ font-size: var(--sl-text-xs);
+ color: var(--sl-color-gray-3);
+ width: max-content;
+ }
+</style>

docs/src/components/Author.astro

@@ -31,9 +31,9 @@ const { name, twitter, linkedin, github, data } = Astro.props;
  display: flex;
  gap: 0.5rem;
  align-items: center;
- margin-top: -1rem;
  font-size: var(--sl-text-xs);
  color: var(--sl-color-gray-3);
+ width: max-content;
  }
 
  .icon {

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>
 

docs/src/components/Content.astro

@@ -6,33 +6,40 @@ import Author from './Author.astro';
 import ChallengeFooter from './ChallengeFooter.astro';
 import CommentSection from './CommentSection.astro';
 import ContributorsFooter from './ContributorsFooter.astro';
+import AnswerNumber from './AnswerNumber.astro';
 
 const { lang } = Astro.props;
 const { data } = await getEntry('i18n', lang);
 const { challengeNumber } = Astro.props.entry.data;
 const author = Astro.props.entry.data.author ? await getEntry(Astro.props.entry.data.author) : null;
 const renderCommentSection = !Astro.props.entry.data.noCommentSection;
+
 ---
 
-{ challengeNumber && author &&
-<Author {...author.data} {data} /> }
+{ challengeNumber ? <div class="header-container">
+ { author ? <Author {...author.data} {data} /> : null}
+ <AnswerNumber {challengeNumber}/>
+</div> :null}
 
 <Default {...Astro.props}>
  <slot />
 </Default>
 
-{challengeNumber &&
-<ChallengeFooter {...Astro.props} />}
+{challengeNumber ?
+<ChallengeFooter {...Astro.props}  /> : null}
 
 { renderCommentSection &&
 <CommentSection {...Astro.props} /> }
 
  <ContributorsFooter {...Astro.props} />
 
 <style>
- .author {
+ .header-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
  margin-top: -1rem;
- font-size: var(--sl-text-xs);
- color: var(--sl-color-gray-3);
+
  }
 </style>

docs/src/components/MyIcon.astro

@@ -9,14 +9,15 @@ interface Props {
 class?: string;
 }
 
-const { name, label, size = '1em', color } = Astro.props;
+const { name, label, size = '1em', color, fill="currentColor", stroke="none", viewBox="0 0 24 24" } = Astro.props;
 const a11yAttrs = label ? ({ 'aria-label': label } as const) : ({ 'aria-hidden': 'true' } as const);
 ---
 
-<svg height="1em" viewBox="0 0 512 512"
+<svg height="1em" width="1em" {viewBox}
 {...a11yAttrs}
 class={Astro.props.class}
-fill="currentColor"
+ {fill}
+ {stroke}
 set:html={Icons[name]}
 />
 
@@ -27,5 +28,6 @@ const a11yAttrs = label ? ({ 'aria-label': label } as const) : ({ 'aria-hidden':
 font-size: var(--sl-icon-size, 1em);
 width: 1em;
 height: 1em;
+ stroke-width: 2;
 }
 </style>

docs/src/components/SiteTitle.astro

@@ -0,0 +1,52 @@
+---
+import { getEntry } from 'astro:content';
+import type { Props } from '@astrojs/starlight/props';
+import Default from '@astrojs/starlight/components/SiteTitle.astro';
+import MyIcon from './MyIcon.astro';
+const { challengeNumber } = Astro.props.entry.data;
+const { lang } = Astro.props;
+const { data } = await getEntry('i18n', lang);
+
+const response = await fetch(`https://api.github.com/repos/tomalaforge/angular-challenges`);
+const { stargazers_count, forks } = await response.json();
+
+
+
+
+---
+
+<Default {...Astro.props}>
+ <slot />
+</Default>
+
+<div class="github">
+ <a class="category" href="https://github.com/tomalaforge/angular-challenges">
+ <MyIcon name="star" />
+ <div>{stargazers_count}</div>
+ </a>
+
+ <div class="category fork">
+ <MyIcon name="fork" viewBox="0 0 16 16" />
+ <div>{forks}</div>
+ </div>
+</div>
+
+<style>
+ .github {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ margin-left: var(--sl-nav-gap)
+ }
+
+ .category {
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ gap: 0.25rem;
+ }
+
+ .fork {
+ //margin-top: -5px;
+ }
+</style>

docs/src/components/icons.ts

@@ -1,6 +1,6 @@
 export const Icons = {
  heart:
- '<path d="M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c0 0 0 0 0 0C313.1 47 353.4 37.9 392.8 45.4C462 58.6 512 119.1 512 189.5v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9zM239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20c0 0-.1-.1-.1-.1c0 0 0 0 0 0c-23.1-25.9-58-37.7-92-31.2C81.6 101.5 48 142.1 48 189.5v3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7 431.2 268c20.9-19.4 32.8-46.7 32.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2c0 0 0 0-.1 .1s0 0-.1 .1l-17.8 20c-.3 .4-.7 .7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z"/>',
- fillHeart:
-  '<path d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/>',
+ '<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>',
+ star: '<path d="M22 9.67a1 1 0 0 0-.86-.67l-5.69-.83L12.9 3a1 1 0 0 0-1.8 0L8.55 8.16 2.86 9a1 1 0 0 0-.81.68 1 1 0 0 0 .25 1l4.13 4-1 5.68a1 1 0 0 0 1.45 1.07L12 18.76l5.1 2.68c.14.08.3.12.46.12a1 1 0 0 0 .99-1.19l-1-5.68 4.13-4A1 1 0 0 0 22 9.67Zm-6.15 4a1 1 0 0 0-.29.89l.72 4.19-3.76-2a1 1 0 0 0-.94 0l-3.76 2 .72-4.19a1 1 0 0 0-.29-.89l-3-3 4.21-.61a1 1 0 0 0 .76-.55L12 5.7l1.88 3.82a1 1 0 0 0 .76.55l4.21.61-3 2.99Z"/>',
+ fork: '<path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"/>',
 };

docs/src/content/docs/es/index.mdx

@@ -70,7 +70,7 @@ import SubscriptionForm from '../../../components/SubscriptionForm.astro';
 
 <div class="article-footer">
  <a href="https://github.com/sponsors/tomalaforge" alt="Sponsor link">
- <MyIcon name="fillHeart" size="1.2rem" color="white" />
+ <MyIcon name="heart" size="1.2rem" color="white" />
  Patrocina el Proyecto
  </a>
 </div>