feat: add es video

Author: tomalaforge

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} />

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
- .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),

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
 ---

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
 ---

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
 ---

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
 ---

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
 ---

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