Merge pull request #703 from freeCodeCamp/main

Create a new pull request by comparing changes across two branches

Author: GulajavaMinistudio

client/i18n/locales/english/intro.json

@@ -585,10 +585,7 @@
           "In these projects, you'll need to fetch data and parse a dataset, then use D3 to create different data visualizations. Finish them all to earn your Data Visualization certification."
         ]
       },
-      "d3-dashboard": {
-        "title": "D3 Dashboard",
-        "intro": ["", ""]
-      }
+      "d3-dashboard": { "title": "D3 Dashboard", "intro": ["", ""] }
     }
   },
   "relational-database": {
@@ -891,7 +888,6 @@
           "In this project, you'll discover how to implement an interface in Python while building a simple equation solver program."
         ]
       },
-
       "learn-special-methods-by-building-a-vector-space": {
         "title": "Learn Special Methods by Building a Vector Space",
         "intro": [
@@ -1713,6 +1709,12 @@
       "front-end-development-certification-exam": {
         "title": "Front End Development Certification Exam",
         "intro": ["", ""]
+      },
+      "workshop-blog-page": {
+        "title": "Build a Cat Blog Page",
+        "intro": [
+          "In this workshop, you will learn how to build an HTML only blog page using semantic elements including the main, nav, article and footer elements."
+        ]
       }
     }
   },

client/src/components/profile/components/time-line.tsx

@@ -198,13 +198,13 @@ function TimelineInner({
         </Table>
       )}
       {id && (
-        <Modal onClose={closeSolution} open={solutionOpen}>
+        <Modal onClose={closeSolution} open={solutionOpen} size='large'>
           <Modal.Header showCloseButton={true} closeButtonClassNames='close'>
             {`${username}'s Solution to ${
               idToNameMap.get(id)?.challengeTitle ?? ''
             }`}
           </Modal.Header>
-          <Modal.Body>
+          <Modal.Body alignment='left'>
             <SolutionViewer
               challengeFiles={challengeData.challengeFiles}
               solution={challengeData.solution ?? ''}

client/src/pages/learn/front-end-development/workshop-blog-page/index.md

@@ -0,0 +1,9 @@
+---
+title: Introduction to the Build a Cat Blog Page
+block: workshop-blog-page
+superBlock: front-end-development
+---
+
+## Introduction to the Build a Cat Blog Page
+
+This is the second workshop for the new frontend certification.

client/src/templates/Challenges/classic/editor.css

@@ -55,6 +55,10 @@ textarea.inputarea {
   max-width: unset !important;
 }
 
+.editor-upper-jaw code {
+  white-space: pre-wrap;
+}
+
 .action-row-container,
 .description-container {
   background-color: var(--secondary-background);
@@ -141,6 +145,7 @@ textarea.inputarea {
   from {
     background-color: var(--highlight-background);
   }
+
   to {
     background-color: var(--secondary-background);
   }
@@ -211,10 +216,12 @@ textarea.inputarea {
   0% {
     opacity: 0;
   }
+
   /* keep test feedback contents initially hidden for 200ms*/
   40% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }

client/src/templates/Challenges/classic/mobile-layout.tsx

@@ -1,5 +1,5 @@
 import i18next from 'i18next';
-import React, { Component } from 'react';
+import React, { Component, type ReactNode } from 'react';
 import { faWindowRestore } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { createSelector } from 'reselect';
@@ -17,14 +17,12 @@ import {
   showPreviewPaneSelector
 } from '../redux/selectors';
 import { TOOL_PANEL_HEIGHT } from '../../../../config/misc';
-import ToolPanel from '../components/tool-panel';
 import PreviewPortal from '../components/preview-portal';
 import Notes from '../components/notes';
 import EditorTabs from './editor-tabs';
 
 interface MobileLayoutProps {
   editor: JSX.Element | null;
-  guideUrl: string;
   hasEditableBoundaries: boolean;
   hasPreview: boolean;
   instructions: JSX.Element;
@@ -34,13 +32,13 @@ interface MobileLayoutProps {
   windowTitle: string;
   showPreviewPortal: boolean;
   showPreviewPane: boolean;
+  toolPanel: ReactNode;
   removePortalWindow: () => void;
   setShowPreviewPortal: (arg: boolean) => void;
   setShowPreviewPane: (arg: boolean) => void;
   portalWindow: null | Window;
   updateUsingKeyboardInTablist: (arg0: boolean) => void;
   testOutput: JSX.Element;
-  videoUrl: string;
   usesMultifileEditor: boolean;
 }
 
@@ -160,13 +158,12 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
       onPreviewResize,
       showPreviewPane,
       showPreviewPortal,
+      toolPanel,
       removePortalWindow,
       setShowPreviewPane,
       setShowPreviewPortal,
       portalWindow,
       windowTitle,
-      guideUrl,
-      videoUrl,
       usesMultifileEditor
     } = this.props;
 
@@ -309,13 +306,7 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
               )}
             </TabsContent>
           )}
-          {!hasEditableBoundaries && (
-            <ToolPanel
-              guideUrl={guideUrl}
-              isMobile={true}
-              videoUrl={videoUrl}
-            />
-          )}
+          {!hasEditableBoundaries && toolPanel}
           {hasPreview && this.state.currentTab !== 'preview' && (
             <div className='portal-button-wrap'>
               <button

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

@@ -60,6 +60,7 @@ import { savedChallengesSelector } from '../../../redux/selectors';
 import { getGuideUrl } from '../utils';
 import { preloadPage } from '../../../../utils/gatsby/page-loading';
 import envData from '../../../../config/env.json';
+import ToolPanel from '../components/tool-panel';
 import { XtermTerminal } from './xterm';
 import MultifileEditor from './multifile-editor';
 import DesktopLayout from './desktop-layout';
@@ -227,6 +228,7 @@ function ShowClassic({
   const isMobile = useMediaQuery({
     query: `(max-width: ${MAX_MOBILE_WIDTH}px)`
   });
+  const guideUrl = getGuideUrl({ forumTopicId, title });
 
   const blockNameTitle = `${t(
     `intro:${superBlock}.blocks.${block}.title`
@@ -369,9 +371,9 @@ function ShowClassic({
   };
 
   const renderInstructionsPanel = ({
-    showToolPanel
+    toolPanel
   }: {
-    showToolPanel: boolean;
+    toolPanel: React.ReactNode;
   }) => {
     return (
       <SidePanel
@@ -392,11 +394,9 @@ function ShowClassic({
             {title}
           </ChallengeTitle>
         }
-        guideUrl={getGuideUrl({ forumTopicId, title })}
         instructionsPanelRef={instructionsPanelRef}
-        showToolPanel={showToolPanel}
+        toolPanel={toolPanel}
         superBlock={superBlock}
-        videoUrl={videoUrl}
       />
     );
   };
@@ -445,11 +445,10 @@ function ShowClassic({
               isMobileLayout: true,
               isUsingKeyboardInTablist: usingKeyboardInTablist
             })}
-            guideUrl={getGuideUrl({ forumTopicId, title })}
             hasEditableBoundaries={hasEditableBoundaries}
             hasPreview={showPreview}
             instructions={renderInstructionsPanel({
-              showToolPanel: false
+              toolPanel: null
             })}
             notes={notes}
             onPreviewResize={onPreviewResize}
@@ -465,9 +464,11 @@ function ShowClassic({
             testOutput={
               <Output defaultOutput={defaultOutput} output={output} />
             }
+            toolPanel={
+              <ToolPanel guideUrl={guideUrl} isMobile videoUrl={videoUrl} />
+            }
             updateUsingKeyboardInTablist={updateUsingKeyboardInTablist}
             usesMultifileEditor={usesMultifileEditor}
-            videoUrl={videoUrl}
           />
         )}
         {!isMobile && (
@@ -481,7 +482,7 @@ function ShowClassic({
             hasEditableBoundaries={hasEditableBoundaries}
             hasPreview={showPreview}
             instructions={renderInstructionsPanel({
-              showToolPanel: true
+              toolPanel: <ToolPanel guideUrl={guideUrl} videoUrl={videoUrl} />
             })}
             isFirstStep={isFirstStep}
             layoutState={layout}

client/src/templates/Challenges/components/side-panel.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, ReactElement } from 'react';
+import React, { useEffect, ReactElement, ReactNode } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Test } from '../../../redux/prop-types';
@@ -7,7 +7,6 @@ import { SuperBlocks } from '../../../../../shared/config/curriculum';
 import { initializeMathJax } from '../../../utils/math-jax';
 import { challengeTestsSelector } from '../redux/selectors';
 import TestSuite from './test-suite';
-import ToolPanel from './tool-panel';
 
 import './side-panel.css';
 
@@ -21,24 +20,20 @@ interface SidePanelProps {
   block: string;
   challengeDescription: ReactElement;
   challengeTitle: ReactElement;
-  guideUrl: string;
   instructionsPanelRef: React.RefObject<HTMLDivElement>;
-  showToolPanel: boolean;
+  toolPanel: ReactNode;
   superBlock: SuperBlocks;
   tests: Test[];
-  videoUrl: string;
 }
 
 export function SidePanel({
   block,
   challengeDescription,
   challengeTitle,
-  guideUrl,
   instructionsPanelRef,
-  showToolPanel = false,
+  toolPanel,
   superBlock,
-  tests,
-  videoUrl
+  tests
 }: SidePanelProps): JSX.Element {
   useEffect(() => {
     const mathJaxChallenge =
@@ -56,7 +51,7 @@ export function SidePanel({
     >
       {challengeTitle}
       {challengeDescription}
-      {showToolPanel && <ToolPanel guideUrl={guideUrl} videoUrl={videoUrl} />}
+      {toolPanel}
       <TestSuite tests={tests} />
     </div>
   );

client/src/templates/Challenges/rechallenge/transformers.js

@@ -213,13 +213,11 @@ export const embedFilesInHtml = async function (challengeFiles) {
       script.removeAttribute('src');
       script.setAttribute('data-src', 'script.js');
     }
-    return {
-      contents: documentElement.innerHTML
-    };
+    return documentElement.innerHTML;
   };
 
   if (indexHtml) {
-    const { contents } = await transformWithFrame(
+    const contents = await parseAndTransform(
       embedStylesAndScript,
       indexHtml.contents
     );
@@ -243,32 +241,11 @@ function challengeFilesToObject(challengeFiles) {
   return { indexHtml, indexJsx, stylesCss, scriptJs };
 }
 
-const transformWithFrame = async function (transform, contents) {
-  // we use iframe here since file.contents is destined to be be inserted into
-  // the root of an iframe.
-  const frame = document.createElement('iframe');
-  frame.style = 'display: none';
-  let out = { contents };
-  try {
-    // the frame needs to be inserted into the document to create the html
-    // element
-    document.body.appendChild(frame);
-    // replace the root element with user code
-    frame.contentDocument.documentElement.innerHTML = contents;
-    // grab the contents now, in case the transformation fails
-    out = { contents: frame.contentDocument.documentElement.innerHTML };
-    // it's important to pass around the documentElement and NOT the frame
-    // itself. It appears that the frame's documentElement can get replaced by a
-    // blank documentElement without the contents. This seems only to happen on
-    // Firefox.
-    out = await transform(
-      frame.contentDocument.documentElement,
-      frame.contentDocument
-    );
-  } finally {
-    document.body.removeChild(frame);
-  }
-  return out;
+const parseAndTransform = async function (transform, contents) {
+  const parser = new DOMParser();
+  const newDoc = parser.parseFromString(contents, 'text/html');
+
+  return await transform(newDoc.documentElement, newDoc);
 };
 
 const transformHtml = async function (file) {
@@ -277,10 +254,10 @@ const transformHtml = async function (file) {
       transformSASS(documentElement),
       transformScript(documentElement)
     ]);
-    return { contents: documentElement.innerHTML };
+    return documentElement.innerHTML;
   };
 
-  const { contents } = await transformWithFrame(transform, file.contents);
+  const contents = await parseAndTransform(transform, file.contents);
   return transformContents(() => contents, file);
 };