fix: add missing i18n text in components

* Affects ActionButtonFooter, ChallengeFooter, ClipboardCopy, SubscriptionForm, VideoButton components
* Adds new entries for each json file: buttons.email, buttons.clipboardCopy, challenge.footer.video, challenge.footer.upvoteAnswer
* Available in English and Spanish

docs/src/components/ActionButtonFooter.astro

@@ -10,7 +10,7 @@ const { data } = await getEntry('i18n', lang);
 
 <div class="action-footer">
   <a class="action-button" href="/subscription">
-    <div>Email subscription</div>
+    <div>{data['buttons.email']}</div>
     <Icon name="email" size="1rem" />
   </a>
 

docs/src/components/ChallengeFooter.astro

@@ -27,7 +27,7 @@ const npxCommand = `npx nx serve ${command}`;
     <p>{data['challenge.footer.gettingStarted.title']} <a
       href="/guides/getting-started">{data['challenge.footer.gettingStarted.link']}</a>.</p>
     <p>{data['challenge.footer.running']} <code class="code" dir="auto">{npxCommand}
-      <ClipboardCopy copyText={npxCommand} />
+      <ClipboardCopy copyText={npxCommand} {...Astro.props} />
     </code></p>
   </section>
 </aside>
@@ -71,7 +71,7 @@ const npxCommand = `npx nx serve ${command}`;
 </div>
 
 <div class="footer-note">
-  * You can upvote an answer with a 👍 if you like it
+  * {data['challenge.footer.upvoteAnswer']}
 </div>
 
 <style>

docs/src/components/ClipboardCopy.astro

@@ -1,5 +1,8 @@
 ---
-const { copyText } = Astro.props;
+import { getEntry } from "astro:content";
+
+const { copyText, lang } = Astro.props;
+const { data } = await getEntry('i18n', lang);
 ---
 
 <span class="copy-container">
@@ -32,7 +35,9 @@ const { copyText } = Astro.props;
       d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
     ></path></svg
   >
-  <span class="tooltipText triangle">Copied!</span>
+  <span class="tooltipText triangle">
+    {data['buttons.clipboardCopy']}
+  </span>
 </span>
 
 <script define:vars={{ copyText }}>

docs/src/components/SubscriptionForm.astro

@@ -12,7 +12,7 @@ const { data } = await getEntry('i18n', lang ?? 'en');
     <form novalidate="" class="sp-element-container ">
       <div class="sp-field " sp-id="sp-76dfa588-3af2-4619-b685-835cf8c62ef0">
         <input
-          type="email" sp-type="email" name="sform[email]" class="sp-form-control " placeholder="username@gmail.com"
+          type="email" sp-type="email" name="sform[email]" class="sp-form-control " placeholder={data['subscription.email']}
           sp-tips="%7B%22required%22%3A%22Required%20field%22%2C%22wrong%22%3A%22Wrong%20email%22%7D" autocomplete="on"
           required="required"></div>
       <div class="sp-field sp-button-container " sp-id="sp-82642eda-e68f-4b7a-a2b8-69e9d9bb5c99">

docs/src/components/VideoButton.astro

@@ -1,12 +1,15 @@
 ---
+import { getEntry } from 'astro:content';
 
 interface Props {
+    lang: any;
 	link: string;
 	alt: string;
 	flag?: 'FR';
 }
 
-const { link, alt, flag } = Astro.props;
+const { link, alt, flag, lang } = Astro.props;
+const { data } = await getEntry('i18n', lang);
 const isFR = flag === 'FR';
 ---
 
@@ -16,6 +19,6 @@ const isFR = flag === 'FR';
     rel="noopener noreferrer"
     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>
-    Video
+    {data['challenge.footer.video']}
     {isFR && <span class="flag">🇫🇷</span>}
 </a>