From 0f70554e6f3594d1de84ffd108168f4fa4f82bfa Mon Sep 17 00:00:00 2001
From: Brendan Lee <121414318+bjklee@users.noreply.github.com>
Date: Wed, 6 Dec 2023 11:22:39 -0500
Subject: [PATCH] feat(UI): added freeCodeCamp podcast link to nav menu
 (#52482)

Co-authored-by: Sem Bauke <semboot699@gmail.com>
---
 client/i18n/locales/english/links.json              |  3 ++-
 client/i18n/locales/english/translations.json       |  1 +
 .../src/components/Header/components/nav-links.tsx  | 13 +++++++++++++
 e2e/header.spec.ts                                  |  6 +++++-
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/client/i18n/locales/english/links.json b/client/i18n/locales/english/links.json
index 0a728ef1797..e5bb70c0034 100644
--- a/client/i18n/locales/english/links.json
+++ b/client/i18n/locales/english/links.json
@@ -21,7 +21,8 @@
   "nav": {
     "contribute": "https://contribute.freecodecamp.org/#/",
     "forum": "https://forum.freecodecamp.org/",
-    "news": "https://freecodecamp.org/news/"
+    "news": "https://freecodecamp.org/news/",
+    "podcast": "https://freecodecamp.libsyn.com/"
   },
   "help": {
     "HTML-CSS": "HTML-CSS",
diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index 382d52df048..c540d89f4e7 100644
--- a/client/i18n/locales/english/translations.json
+++ b/client/i18n/locales/english/translations.json
@@ -30,6 +30,7 @@
     "sign-out": "Sign out",
     "curriculum": "Curriculum",
     "contribute": "Contribute",
+    "podcast": "Podcast",
     "forum": "Forum",
     "radio": "Radio",
     "profile": "Profile",
diff --git a/client/src/components/Header/components/nav-links.tsx b/client/src/components/Header/components/nav-links.tsx
index 72230f3576b..26dd4fe871c 100644
--- a/client/src/components/Header/components/nav-links.tsx
+++ b/client/src/components/Header/components/nav-links.tsx
@@ -242,6 +242,19 @@ function NavLinks({
           <FontAwesomeIcon icon={faExternalLinkAlt} />
         </Link>
       </li>
+      <li key='podcast'>
+        <Link
+          className='nav-link nav-link-flex'
+          external={true}
+          onKeyDown={handleMenuKeyDown}
+          sameTab={false}
+          to={t('links:nav.podcast')}
+        >
+          <span>{t('buttons.podcast')}</span>
+          <span className='sr-only'>, {t('aria.opens-new-window')}</span>
+          <FontAwesomeIcon icon={faExternalLinkAlt} />
+        </Link>
+      </li>
       <li className='nav-line' key='theme'>
         <button
           {...(!currentUserName && { 'aria-describedby': 'theme-sign-in' })}
diff --git a/e2e/header.spec.ts b/e2e/header.spec.ts
index 9cc59cddff8..d0e4df9f937 100644
--- a/e2e/header.spec.ts
+++ b/e2e/header.spec.ts
@@ -120,7 +120,7 @@ test('Clicking the menu button should open the menu', async ({ page }) => {
   await expect(menu).toBeVisible();
 });
 
-test('The menu should contain links to: donate, curriculum, forum, news, radio, and contribute', async ({
+test('The menu should contain links to: donate, curriculum, forum, news, radio, contribute, and podcast', async ({
   page
 }) => {
   const menuButton = page.getByTestId(headerComponentElements.menuButton);
@@ -153,6 +153,10 @@ test('The menu should contain links to: donate, curriculum, forum, news, radio,
     {
       name: translations.buttons.contribute,
       href: links.nav.contribute
+    },
+    {
+      name: translations.buttons.podcast,
+      href: links.nav.podcast
     }
   ];