diff --git a/docs/src/components/ChallengeFooter.astro b/docs/src/components/ChallengeFooter.astro
index 6a714b0..ccd4f1a 100644
--- 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}`;
{data['challenge.footer.blogPost']}
}
- {videoLink &&
- }
+ {videoLinks && videoLinks.map((videoLink) => (
+
+ ))}
diff --git a/docs/src/components/VideoButton.astro b/docs/src/components/VideoButton.astro
index a739090..723ef30 100644
--- 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';
---
{data['challenge.footer.video']}
- {isFR && 🇫🇷}
+ {isFR && 🇫🇷}
+ {isES && 🇪🇸}
diff --git a/docs/src/content/config.ts b/docs/src/content/config.ts
index 15a0095..91a2d50 100644
--- 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),
diff --git a/docs/src/content/docs/challenges/angular/1-projection.md b/docs/src/content/docs/challenges/angular/1-projection.md
index 0fce427..30f83ef 100644
--- 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
---
diff --git a/docs/src/content/docs/es/challenges/angular/1-projection.md b/docs/src/content/docs/es/challenges/angular/1-projection.md
index e0e1250..6d3434d 100644
--- 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
---
diff --git a/docs/src/content/docs/fr/challenges/angular/1-projection.md b/docs/src/content/docs/fr/challenges/angular/1-projection.md
index e93d0b3..87abd77 100644
--- 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
---
diff --git a/docs/src/content/docs/pt/challenges/angular/1-projection.md b/docs/src/content/docs/pt/challenges/angular/1-projection.md
index 2b782b2..1b4d7fb 100644
--- 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
---
diff --git a/docs/src/content/docs/ru/challenges/angular/1-projection.md b/docs/src/content/docs/ru/challenges/angular/1-projection.md
index 1f2a3a9..a9dc26d 100644
--- 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
---
diff --git a/docs/src/styles/custom-css.css b/docs/src/styles/custom-css.css
index c566ce9..4083f93 100644
--- 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%;
}