feat: add es video

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 &&
+  {videoLinks && videoLinks.map((videoLink) => (
-    <VideoButton {...videoLink} {...Astro.props} />}
+    <VideoButton {...videoLink} {...Astro.props} />
+  ))}
 </div>
 
 <AnsweredUser client:load {challengeNumber} />

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>

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
+        videoLinks: z
-          .object({
+          .array(
+            z.object({
               link: z.string(),
               alt: z.string(),
-            flag: z.enum(['FR']).optional(),
+              flag: z.enum(['FR', 'ES']).optional(),
-          })
+            }),
+          )
           .optional(),
       }),
     })(ctx),

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:
+videoLinks:
-  link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq
+  - 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
 ---

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:
+videoLinks:
-  link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq
+  - 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
 ---

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:
+videoLinks:
-  link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq
+  - 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
 ---

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:
+videoLinks:
-  link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq
+  - link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq
-  alt: Vídeo de projeção por Arthur Lannelucq
+    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
 ---

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:
+videoLinks:
-  link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq
+  - 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
 ---

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%;
 }