feat: separate superblock for rosetta code (#52629)

Co-authored-by: mot01 <tmondloch01@gmail.com>

client/i18n/locales/english/intro.json

@@ -1026,14 +1026,6 @@
           "Programming interviews have always been stressful. Job applicants are sometimes given a take home project to be completed outside of the interview. These types of interviews usually require a lot of work, but they're a great way for employers to see how you might perform on the job.",
           "Build the bonus coding projects below for extra practice. Take your time, make them great, and put them on your resume or portfolio to show potential employers."
         ]
-      },
-      "rosetta-code": {
-        "title": "Rosetta Code",
-        "intro": [
-          "Level up your creative problem solving skills with these free programming tasks from the classic Rosetta Code library.",
-          "These challenges can prove to be difficult, but they will push your algorithm logic to new heights.",
-          "<a href='https://rosettacode.org/wiki/Rosetta_Code' target='_blank' rel='noopener noreferrer nofollow'>Attribute: Rosetta Code</a>"
-        ]
       }
     }
   },
@@ -1354,6 +1346,20 @@
       }
     }
   },
+  "rosetta-code": {
+    "title": "Rosetta Code",
+    "intro": [
+      "Level up your creative problem solving skills with these free programming tasks from the classic Rosetta Code library.",
+      "These challenges can prove to be difficult, but they will push your algorithm logic to new heights.",
+      "<a href='https://rosettacode.org/wiki/Rosetta_Code' target='_blank' rel='noopener noreferrer nofollow'>Attribute: Rosetta Code</a>"
+    ],
+    "blocks": {
+      "rosetta-code-challenges": {
+        "title": "Rosetta Code Challenges",
+        "intro": ["These are the challenges for Rosetta Code."]
+      }
+    }
+  },
   "example-certification": {
     "title": "Example Certification",
     "intro": ["placeholder"],

client/src/assets/icons/rosetta-code.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+function RosettaCodeIcon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
+  return (
+    <>
+      <svg
+        xmlns='http://www.w3.org/2000/svg'
+        height='16'
+        width='14'
+        viewBox='0 0 448 512'
+        {...props}
+      >
+        <path d='M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64zM176 432h96c8.8 0 16 7.2 16 16s-7.2 16-16 16H176c-8.8 0-16-7.2-16-16s7.2-16 16-16z' />
+      </svg>
+    </>
+  );
+}
+
+RosettaCodeIcon.displayName = 'RosettaCodeIcon';
+
+export default RosettaCodeIcon;

client/src/assets/icons/superblock-icon.tsx

@@ -17,6 +17,7 @@ import Graduation from './graduation';
 import CollegeAlgebra from './college-algebra';
 import CSharpLogo from './c-sharp-logo';
 import A2EnglishIcon from './a2-english';
+import RosettaCodeIcon from './rosetta-code';
 
 const iconMap = {
   [SuperBlocks.RespWebDesignNew]: ResponsiveDesign,
@@ -39,7 +40,8 @@ const iconMap = {
   [SuperBlocks.FoundationalCSharp]: CSharpLogo,
   [SuperBlocks.ExampleCertification]: ResponsiveDesign,
   [SuperBlocks.UpcomingPython]: PythonIcon,
-  [SuperBlocks.A2English]: A2EnglishIcon
+  [SuperBlocks.A2English]: A2EnglishIcon,
+  [SuperBlocks.RosettaCode]: RosettaCodeIcon
 };
 
 type SuperBlockIconProps = {

client/src/pages/learn/rosetta-code/index.md

@@ -1,10 +1,10 @@
 ---
-title: Introduction to the Rosetta Code Problems
-block: rosetta-code
-superBlock: coding-interview-prep
+title: Rosetta Code
+superBlock: rosetta-code
+certification: rosetta-code
 ---
 
-## Introduction to the Rosetta Code Problems
+## Rosetta Code
 
 [The Rosetta Code](https://rosettacode.org) is a list of programming challenges which will help you build your programming skills.
 

client/src/pages/learn/rosetta-code/rosetta-code-challenges/index.md

@@ -0,0 +1,11 @@
+---
+title: Rosetta Code Challenges
+block: rosetta-code-challenges
+superBlock: rosetta-code
+---
+
+## Introduction to the Rosetta Code Challenges
+
+[The Rosetta Code](https://rosettacode.org) is a list of programming challenges which will help you build your programming skills.
+
+> "The idea is to present solutions to the same task in as many different languages as possible, to demonstrate how languages are similar and different, and to aid a person with a grounding in one approach to a problem in learning another." - _Homepage of the Rosetta Code site_

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

@@ -73,7 +73,7 @@ function SuperBlockIntro(props: SuperBlockIntroProps): JSX.Element {
       <SuperBlockIcon className='cert-header-icon' superBlock={superBlock} />
       <Spacer size='medium' />
       {superBlockIntroText.map((str, i) => (
-        <p key={i}>{str}</p>
+        <p dangerouslySetInnerHTML={{ __html: str }} key={i} />
       ))}
       {superBlockNoteText && (
         <div className='alert alert-info' style={{ marginTop: '2rem' }}>

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

@@ -185,6 +185,7 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
     SuperBlocks.CodingInterviewPrep,
     SuperBlocks.TheOdinProject,
     SuperBlocks.ProjectEuler,
+    SuperBlocks.RosettaCode,
     SuperBlocks.A2English
   ];
 

client/utils/tags.tsx

@@ -65,7 +65,7 @@ export function getPostBodyComponents(pathname: string): JSX.Element[] {
   );
 
   if (
-    pathname.includes('/learn/coding-interview-prep/rosetta-code') ||
+    pathname.includes('/learn/rosetta-code') ||
     pathname.includes('/learn/project-euler/')
   ) {
     scripts.push(mathJaxScriptElement);

curriculum/challenges/_meta/rosetta-code-challenges/meta.json

@@ -1,13 +1,13 @@
 {
-  "name": "Rosetta Code",
+  "name": "Rosetta Code Challenges",
   "isUpcomingChange": false,
-  "dashedName": "rosetta-code",
+  "dashedName": "rosetta-code-challenges",
   "helpCategory": "Rosetta",
   "order": 3,
   "time": "",
   "template": "",
   "required": [],
-  "superBlock": "coding-interview-prep",
+  "superBlock": "rosetta-code",
   "disableLoopProtectTests": true,
   "challengeOrder": [
     {