feat(client): decouple superblock id from certification name (#59478)

client/i18n/locales/english/intro.json

@@ -1335,7 +1335,7 @@
     }
   },
   "foundational-c-sharp-with-microsoft": {
-    "title": "Free Foundational C# with Microsoft",
+    "title": "Free Foundational C# with Microsoft Certification",
     "intro": [
       "This course offers a comprehensive introduction to C# programming, covering its core concepts, syntax, and practical application in software development.",
       "Through hands-on exercises and projects, you will learn the fundamentals of C#, including variables, data types, control structures, and object-oriented programming principles.",
@@ -1388,7 +1388,7 @@
     }
   },
   "a2-english-for-developers": {
-    "title": "A2 English for Developers (Beta)",
+    "title": "A2 English for Developers (Beta) Certification",
     "intro": [
       "In this English for Developers Curriculum, you'll learn the essentials of English communication. This will follow the A2 level of the Common European Framework of Reference (CEFR). And we've focused on vocabulary that is particularly useful for developers.",
       "The first half of the curriculum will help you get comfortable with English grammar and usage. It will give you tons of hands-on practice. You'll learn basics like introducing yourself, making small talk, and discussing your work.",
@@ -1567,7 +1567,7 @@
     }
   },
   "b1-english-for-developers": {
-    "title": "B1 English for Developers (Beta)",
+    "title": "B1 English for Developers (Beta) Certification",
     "intro": [
       "In this English for Developers Curriculum, you'll learn the essentials of English communication. This will follow the B1 level of the Common European Framework of Reference (CEFR). And we've focused on vocabulary that is particularly useful for developers.",
       "It will help you strengthen your foundational skills while introducing more complex grammar and usage. You'll learn how to describe places and things, share past experiences, and confidently use tenses like Present Perfect and Future. Practical communication strategies are included as well, such as managing conversations, expressing opinions, and building agreement or disagreement in discussions.",
@@ -3799,7 +3799,6 @@
     }
   },
   "misc-text": {
-    "certification": "{{cert}} Certification",
     "browse-other": "Browse our other free certifications",
     "courses": "Courses",
     "steps": "Steps",

client/i18n/locales/english/translations.json

@@ -456,9 +456,6 @@
     "sign-in-see-benefits": "Sign in to see your supporter benefits",
     "card-has-been-updated": "Your card has been updated successfully.",
     "contact-support-mistake": "If you think there has been a mistake, please contact us at donors@freecodecamp.org",
-    "cert-map-estimates": {
-      "certs": "{{title}} Certification"
-    },
     "editor-tabs": {
       "code": "Code",
       "tests": "Tests",

client/src/components/Map/index.tsx

@@ -1,8 +1,9 @@
-import React, { Fragment } from 'react';
-import { useTranslation } from 'react-i18next';
+import i18next from 'i18next';
 import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
+import React, { Fragment } from 'react';
 import { Spacer } from '@freecodecamp/ui';
+import { createSelector } from 'reselect';
+import { useTranslation } from 'react-i18next';
 import { graphql, useStaticQuery } from 'gatsby';
 
 import {
@@ -14,7 +15,6 @@ import {
 import { SuperBlockIcon } from '../../assets/superblock-icon';
 import LinkButton from '../../assets/icons/link-button';
 import { ButtonLink } from '../helpers';
-import { getSuperBlockTitleForMap } from '../../utils/superblock-map-titles';
 import { showUpcomingChanges } from '../../../config/env.json';
 
 import './map.css';
@@ -97,6 +97,8 @@ function MapLi({
   showNumbers?: boolean;
   index: number;
 }) {
+  const i18nTitle = i18next.t(`intro:${superBlock}.title`);
+
   return (
     <li
       data-test-label='curriculum-map-button'
@@ -123,7 +125,7 @@ function MapLi({
       >
         <div style={linkSpacingStyle}>
           <SuperBlockIcon className='map-icon' superBlock={superBlock} />
-          {getSuperBlockTitleForMap(superBlock)}
+          {i18nTitle}
         </div>
         {landing && <LinkButton />}
       </ButtonLink>

client/src/templates/Introduction/super-block-intro.tsx

@@ -1,3 +1,4 @@
+import i18next from 'i18next';
 import { WindowLocation } from '@gatsbyjs/reach-router';
 import { graphql } from 'gatsby';
 import { uniq, isEmpty, last } from 'lodash-es';
@@ -11,7 +12,6 @@ import { createSelector } from 'reselect';
 import { Container, Col, Row, Spacer } from '@freecodecamp/ui';
 
 import { SuperBlocks } from '../../../../shared/config/curriculum';
-import { getSuperBlockTitleForMap } from '../../utils/superblock-map-titles';
 import DonateModal from '../../components/Donation/donation-modal';
 import Login from '../../components/Header/components/login';
 import Map from '../../components/Map';
@@ -166,7 +166,7 @@ const SuperBlockIntroductionPage = (props: SuperBlockProps) => {
     [superBlockChallenges, allCompletedChallenges]
   );
 
-  const i18nTitle = getSuperBlockTitleForMap(superBlock);
+  const i18nTitle = i18next.t(`intro:${superBlock}.title`);
 
   const showCertification = liveCerts.some(
     cert => superBlockToCertMap[superBlock] === cert.certSlug

client/src/utils/superblock-map-titles.ts

@@ -1,30 +0,0 @@
-import i18next from 'i18next';
-import { SuperBlocks } from '../../../shared/config/curriculum';
-
-// these are keys from i18n translations.json files
-enum SuperBlockI18nKeys {
-  Certification = 'learn.cert-map-estimates.certs'
-}
-
-// the key above is used to create the last word for superBlock titles used on
-// the map and window. e.g. 'Certification' in Responsive Web Design
-// Certification
-const superBlocksWithoutLastWord = [
-  SuperBlocks.RespWebDesign,
-  SuperBlocks.CodingInterviewPrep,
-  SuperBlocks.TheOdinProject,
-  SuperBlocks.ProjectEuler,
-  SuperBlocks.PythonForEverybody,
-  SuperBlocks.RosettaCode,
-  SuperBlocks.FullStackDeveloper
-];
-
-export function getSuperBlockTitleForMap(superBlock: SuperBlocks): string {
-  const i18nSuperBlock = i18next.t(`intro:${superBlock}.title`);
-
-  return superBlocksWithoutLastWord.includes(superBlock)
-    ? i18nSuperBlock
-    : i18next.t([SuperBlockI18nKeys.Certification], {
-        title: i18nSuperBlock
-      });
-}

e2e/intro-page-rwd.spec.ts

@@ -20,9 +20,7 @@ test.describe('Certification intro page', () => {
 
     await page.goto('/learn/2022/responsive-web-design');
 
-    await expect(page).toHaveTitle(
-      'Responsive Web Design Certification | freeCodeCamp.org'
-    );
+    await expect(page).toHaveTitle('Responsive Web Design | freeCodeCamp.org');
     await expect(superBlockText).toBeVisible();
     await expect(firstBlockText).toBeVisible();
     await expect(secondBlockText).not.toBeVisible();

e2e/map.spec.ts

@@ -8,39 +8,39 @@ test.beforeEach(async ({ page }) => {
 const LANDING_PAGE_LINKS = [
   {
     slug: '2022/responsive-web-design',
-    name: 'Responsive Web Design Certification'
+    name: 'Responsive Web Design'
   },
   {
     slug: 'javascript-algorithms-and-data-structures-v8',
-    name: 'JavaScript Algorithms and Data Structures Certification'
+    name: 'JavaScript Algorithms and Data Structures'
   },
   {
     slug: 'front-end-development-libraries',
-    name: 'Front End Development Libraries Certification'
+    name: 'Front End Development Libraries'
   },
-  { slug: 'data-visualization', name: 'Data Visualization Certification' },
-  { slug: 'relational-database', name: 'Relational Database Certification' },
+  { slug: 'data-visualization', name: 'Data Visualization' },
+  { slug: 'relational-database', name: 'Relational Database' },
   {
     slug: 'back-end-development-and-apis',
-    name: 'Back End Development and APIs Certification'
+    name: 'Back End Development and APIs'
   },
-  { slug: 'quality-assurance', name: 'Quality Assurance Certification' },
+  { slug: 'quality-assurance', name: 'Quality Assurance' },
   {
     slug: 'scientific-computing-with-python',
-    name: 'Scientific Computing with Python Certification'
+    name: 'Scientific Computing with Python'
   },
   {
     slug: 'data-analysis-with-python',
-    name: 'Data Analysis with Python Certification'
+    name: 'Data Analysis with Python'
   },
-  { slug: 'information-security', name: 'Information Security Certification' },
+  { slug: 'information-security', name: 'Information Security' },
   {
     slug: 'machine-learning-with-python',
-    name: 'Machine Learning with Python Certification'
+    name: 'Machine Learning with Python'
   },
   {
     slug: 'college-algebra-with-python',
-    name: 'College Algebra with Python Certification'
+    name: 'College Algebra with Python'
   },
   {
     slug: 'full-stack-developer',
@@ -68,7 +68,7 @@ const LANDING_PAGE_LINKS = [
   },
   {
     slug: 'javascript-algorithms-and-data-structures',
-    name: 'Legacy JavaScript Algorithms and Data Structures Certification'
+    name: 'Legacy JavaScript Algorithms and Data Structures'
   },
   { slug: 'python-for-everybody', name: 'Legacy Python for Everybody' }
 ];