feat: editor page title rework (#44246)

* fix: remove "learn" from title

* feat: translate title element

client/src/templates/Challenges/classic/show.tsx

@@ -280,12 +280,9 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
 
   getChallenge = () => this.props.data.challengeNode;
 
-  getBlockNameTitle() {
-    const {
-      fields: { blockName },
-      title
-    } = this.getChallenge();
-    return `${blockName}: ${title}`;
+  getBlockNameTitle(t: TFunction) {
+    const { block, superBlock, title } = this.getChallenge();
+    return `${t(`intro:${superBlock}.blocks.${block}.title`)}: ${title}`;
   }
 
   getVideoUrl = () => this.getChallenge().videoUrl;
@@ -422,11 +419,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
         usesMultifileEditor={usesMultifileEditor}
       >
         <LearnLayout>
-          <Helmet
-            title={`${t(
-              'learn.learn'
-            )} ${this.getBlockNameTitle()} | freeCodeCamp.org`}
-          />
+          <Helmet title={`${this.getBlockNameTitle(t)} | freeCodeCamp.org`} />
           <Media maxWidth={MAX_MOBILE_WIDTH}>
             <MobileLayout
               editor={this.renderEditor()}

client/src/templates/Challenges/projects/backend/Show.tsx

@@ -203,7 +203,9 @@ class BackEnd extends Component<BackEndProps> {
       updateSolutionFormValues
     } = this.props;
 
-    const blockNameTitle = `${blockName} - ${title}`;
+    const blockNameTitle = `${t(
+      `intro:${superBlock}.blocks.${block}.title`
+    )} - ${title}`;
 
     return (
       <Hotkeys

client/src/templates/Challenges/projects/frontend/Show.tsx

@@ -149,7 +149,9 @@ class Project extends Component<ProjectProps> {
       updateSolutionFormValues
     } = this.props;
 
-    const blockNameTitle = `${blockName} - ${title}`;
+    const blockNameTitle = `${t(
+      `intro:${superBlock}.blocks.${block}.title`
+    )} - ${title}`;
 
     return (
       <Hotkeys

client/src/templates/Challenges/video/Show.tsx

@@ -189,7 +189,9 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
       isChallengeCompleted
     } = this.props;
 
-    const blockNameTitle = `${blockName} - ${title}`;
+    const blockNameTitle = `${t(
+      `intro:${superBlock}.blocks.${block}.title`
+    )} - ${title}`;
     return (
       <Hotkeys
         executeChallenge={() => {

cypress/integration/learn/challenges/backend.js

@@ -19,7 +19,7 @@ describe('Backend challenge', function () {
 
     cy.title().should(
       'eq',
-      'Managing Packages with Npm - How to Use package.json, the Core of Any' +
+      'Managing Packages with NPM - How to Use package.json, the Core of Any' +
         ' Node.js Project or npm Package | Learn | freeCodeCamp.org'
     );
   });

cypress/integration/learn/challenges/output.js

@@ -27,8 +27,7 @@ describe('Classic challenge', function () {
   it('renders the default output text', () => {
     cy.title().should(
       'eq',
-      'Learn Basic HTML and HTML5: Say Hello to HTML Elements |' +
-        ' freeCodeCamp.org'
+      'Basic HTML and HTML5: Say Hello to HTML Elements |' + ' freeCodeCamp.org'
     );
     cy.get(selectors.defaultOutput).contains(defaultOutput);
   });

cypress/integration/legacy/redirects/challenges.js

@@ -43,7 +43,7 @@ describe('challenges/superblock/block/challenge redirect', function () {
     cy.title().should(
       'eq',
       // eslint-disable-next-line max-len
-      'Learn Basic HTML and HTML5: Say Hello to HTML Elements | freeCodeCamp.org'
+      'Basic HTML and HTML5: Say Hello to HTML Elements | freeCodeCamp.org'
     );
     cy.location().should(loc => {
       expect(loc.pathname).to.eq(locations.learnChallenge);