feat: add number of answers and people ansering

2026-02-10 12:53:03 -05:00 · 2024-03-26 21:28:30 +01:00
parent e42a40ef3d
commit d96f72872f
14 changed files with 139 additions and 23 deletions
--- a/docs/astro.config.mjs
+++ b/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,
--- a/docs/src/components/ActionButtonFooter.astro
+++ b/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>

--- a/docs/src/components/AnswerNumber.astro
+++ b/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>
--- a/docs/src/components/Author.astro
+++ b/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 {
--- a/docs/src/components/ChallengeFooter.astro
+++ b/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>

--- a/docs/src/components/Content.astro
+++ b/docs/src/components/Content.astro
@@ -6,23 +6,27 @@ 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} /> }
@@ -30,9 +34,12 @@ const renderCommentSection = !Astro.props.entry.data.noCommentSection;
 <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>
--- a/docs/src/components/MyIcon.astro
+++ b/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>
--- a/docs/src/components/SiteTitle.astro
+++ b/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>
--- a/docs/src/components/icons.ts
+++ b/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"/>',
 };
--- a/docs/src/content/docs/es/index.mdx
+++ b/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>
--- a/docs/src/content/docs/fr/index.mdx
+++ b/docs/src/content/docs/fr/index.mdx
@@ -69,7 +69,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" />
    Sponsoriser le Project
  </a>
 </div>
--- a/docs/src/content/docs/index.mdx
+++ b/docs/src/content/docs/index.mdx
@@ -73,7 +73,7 @@ import SubscriptionForm from '../../components/SubscriptionForm.astro';
    class="action"
    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" />
    Sponsor the Project
  </a>
 </div>
--- a/docs/src/content/docs/pt/index.mdx
+++ b/docs/src/content/docs/pt/index.mdx
@@ -85,7 +85,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" />
    Patrocine o Projeto
  </a>
 </div>
--- a/docs/src/content/docs/ru/index.mdx
+++ b/docs/src/content/docs/ru/index.mdx
@@ -75,7 +75,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" />
    Поддержать проект
  </a>
 </div>