feat: add es video

2026-02-10 04:43:03 -05:00 · 2024-07-23 10:44:09 +02:00
parent 44f0ea2270
commit 7398221676
9 changed files with 51 additions and 37 deletions
--- a/docs/src/components/ChallengeFooter.astro
+++ b/docs/src/components/ChallengeFooter.astro
@@ -5,7 +5,7 @@ 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;
+const { author, challengeNumber, title, blogLink, videoLinks, command } = Astro.props.entry.data;
 const { data } = await getEntry('i18n', lang);

 const authorLink = `https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A${challengeNumber}+label%3A"answer+author"`;
@@ -70,8 +70,9 @@ const npxCommand = `npx nx serve ${command}`;
    </svg>
    {data['challenge.footer.blogPost']}
  </a>}
-  {videoLink &&
-    <VideoButton {...videoLink} {...Astro.props} />}
+  {videoLinks && videoLinks.map((videoLink) => (
+    <VideoButton {...videoLink} {...Astro.props} />
+  ))}
 </div>

 <AnsweredUser client:load {challengeNumber} />
--- a/docs/src/components/VideoButton.astro
+++ b/docs/src/components/VideoButton.astro
@@ -5,12 +5,13 @@ interface Props {
    lang: any;
 	link: string;
 	alt: string;
-	flag?: 'FR';
+	flag?: 'FR' | 'ES';
 }

 const { link, alt, flag, lang } = Astro.props;
 const { data } = await getEntry('i18n', lang);
 const isFR = flag === 'FR';
+const isES = flag === 'ES';
 ---

 <a
@@ -20,5 +21,6 @@ const isFR = flag === 'FR';
    alt={alt}>
 	<svg aria-hidden="true" class="astro-yzt5nm4y astro-lq7oo3uf" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M23.5 6.2A3 3 0 0 0 21.4 4c-1.9-.5-9.4-.5-9.4-.5s-7.5 0-9.4.5A3 3 0 0 0 .5 6.3C0 8 0 12 0 12s0 4 .5 5.8A3 3 0 0 0 2.6 20c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2c.5-2 .5-5.9.5-5.9s0-4-.5-5.8zm-14 9.4V8.4l6.3 3.6-6.3 3.6z"></path></svg>
    {data['challenge.footer.video']}
-    {isFR && <span class="flag">🇫🇷</span>}
+    {isFR && <span>🇫🇷</span>}
+    {isES && <span>🇪🇸</span>}
 </a>
--- a/docs/src/content/config.ts
+++ b/docs/src/content/config.ts
@@ -22,12 +22,14 @@ const docs = defineCollection({
        contributors: z.array(z.string()).optional(),
        command: z.string().optional(),
        blogLink: z.string().optional(),
-        videoLink: z
-          .object({
-            link: z.string(),
-            alt: z.string(),
-            flag: z.enum(['FR']).optional(),
-          })
+        videoLinks: z
+          .array(
+            z.object({
+              link: z.string(),
+              alt: z.string(),
+              flag: z.enum(['FR', 'ES']).optional(),
+            }),
+          )
          .optional(),
      }),
    })(ctx),
--- a/docs/src/content/docs/challenges/angular/1-projection.md
+++ b/docs/src/content/docs/challenges/angular/1-projection.md
@@ -11,10 +11,13 @@ contributors:
 challengeNumber: 1
 command: angular-projection
 blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5
-videoLink:
-  link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq
-  alt: Projection video by Arthur Lannelucq
-  flag: FR
+videoLinks:
+  - link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq
+    alt: Projection video by Arthur Lannelucq
+    flag: FR
+  - link: https://www.youtube.com/watch?v=yNrfvu7vTa4
+    alt: Projection video by Amos Lucian IsailaAmos Lucian Isaila
+    flag: ES
 sidebar:
  order: 1
 ---
--- a/docs/src/content/docs/es/challenges/angular/1-projection.md
+++ b/docs/src/content/docs/es/challenges/angular/1-projection.md
@@ -7,10 +7,13 @@ contributors:
 challengeNumber: 1
 command: angular-projection
 blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5
-videoLink:
-  link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq
-  alt: Projection video by Arthur Lannelucq
-  flag: FR
+videoLinks:
+  - link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq
+    alt: Projection video by Arthur Lannelucq
+    flag: FR
+  - link: https://www.youtube.com/watch?v=yNrfvu7vTa4
+    alt: Projection video by Amos Lucian IsailaAmos Lucian Isaila
+    flag: ES
 sidebar:
  order: 1
 ---
--- a/docs/src/content/docs/fr/challenges/angular/1-projection.md
+++ b/docs/src/content/docs/fr/challenges/angular/1-projection.md
@@ -7,10 +7,13 @@ contributors:
 challengeNumber: 1
 command: angular-projection
 blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5
-videoLink:
-  link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq
-  alt: Projection video by Arthur Lannelucq
-  flag: FR
+videoLinks:
+  - link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq
+    alt: Projection video by Arthur Lannelucq
+    flag: FR
+  - link: https://www.youtube.com/watch?v=yNrfvu7vTa4
+    alt: Projection video by Amos Lucian IsailaAmos Lucian Isaila
+    flag: ES
 sidebar:
  order: 1
 ---
--- a/docs/src/content/docs/pt/challenges/angular/1-projection.md
+++ b/docs/src/content/docs/pt/challenges/angular/1-projection.md
@@ -7,10 +7,13 @@ contributors:
 challengeNumber: 1
 command: angular-projection
 blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5
-videoLink:
-  link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq
-  alt: Vídeo de projeção por Arthur Lannelucq
-  flag: FR
+videoLinks:
+  - link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq
+    alt: Projection video by Arthur Lannelucq
+    flag: FR
+  - link: https://www.youtube.com/watch?v=yNrfvu7vTa4
+    alt: Projection video by Amos Lucian IsailaAmos Lucian Isaila
+    flag: ES
 sidebar:
  order: 1
 ---
--- a/docs/src/content/docs/ru/challenges/angular/1-projection.md
+++ b/docs/src/content/docs/ru/challenges/angular/1-projection.md
@@ -7,10 +7,13 @@ contributors:
 challengeNumber: 1
 command: angular-projection
 blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5
-videoLink:
-  link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq
-  alt: Projection video by Arthur Lannelucq
-  flag: FR
+videoLinks:
+  - link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq
+    alt: Projection video by Arthur Lannelucq
+    flag: FR
+  - link: https://www.youtube.com/watch?v=yNrfvu7vTa4
+    alt: Projection video by Amos Lucian IsailaAmos Lucian Isaila
+    flag: ES
 sidebar:
  order: 1
 ---
--- a/docs/src/styles/custom-css.css
+++ b/docs/src/styles/custom-css.css
@@ -137,12 +137,6 @@ starlight-menu-button svg {
  color: #1c1a1d;
 }

-.flag {
-  background-color: white;
-  padding: 1px 2px;
-  border-radius: 999px;
-}
-
 .right-sidebar-panel {
  height: 100%;
 }