refactor(client): source superblock intros from curriculum (#66328)

2026-05-28 18:26:54 +00:00 · 2026-03-11 16:53:10 +01:00
parent e8052b52c2
commit b72d31c209
80 changed files with 26 additions and 928 deletions
@@ -1028,8 +1028,4 @@ const certsToProjects = allStandardCerts.reduce((acc, curr) => {
  };
 }, {} as CertsToProjects);

-export type CertTitle =
-  | (typeof liveCerts)[number]['title']
-  | 'Legacy Full-Stack';
-
 export { liveCerts, certsToProjects, allCerts };
@@ -9,8 +9,6 @@ const { pathPrefix } = require('./utils/gatsby/path-prefix');

 const { curriculumLocale, homeLocation } = envData;

-const curriculumIntroRoot = path.resolve(__dirname, './src/pages');
-
 module.exports = {
  flags: {
    DEV_SSR: false
@@ -55,16 +53,6 @@ module.exports = {
        curriculumPath: localeChallengesRootDir
      }
    },
-    {
-      resolve: 'gatsby-source-filesystem',
-      options: {
-        name: 'introductions',
-        path: curriculumIntroRoot
-      }
-    },
-    {
-      resolve: 'gatsby-transformer-remark'
-    },
    'gatsby-plugin-remove-serviceworker',
    {
      resolve: 'gatsby-plugin-schema-snapshot',
@@ -1,25 +1,12 @@
-const { createFilePath } = require('gatsby-source-filesystem');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const webpack = require('webpack');

-const { SuperBlocks } = require('@freecodecamp/shared/config/curriculum');
 const env = require('./config/env.json');
 const { createSuperBlockIntroPages } = require('./utils/gatsby');

-exports.onCreateNode = function onCreateNode({ node, actions, getNode }) {
-  const { createNodeField } = actions;
-
-  if (node.internal.type === 'MarkdownRemark') {
-    const slug = createFilePath({ node, getNode });
-    if (!slug.includes('LICENSE')) {
-      createNodeField({ node, name: 'slug', value: slug });
-    }
-  }
-};
-
 exports.createPages = async function createPages({
-  graphql,
  actions,
+  graphql,
  reporter
 }) {
  if (!env.algoliaAPIKey || !env.algoliaAppId) {
@@ -46,67 +33,21 @@ exports.createPages = async function createPages({

  const { createPage } = actions;

-  const result = await graphql(`
+  const {
+    data: { allSuperBlockStructure }
+  } = await graphql(`
    {
-      allChallengeNode(
-        sort: [
-          { challenge: { superOrder: ASC } }
-          { challenge: { order: ASC } }
-          { challenge: { challengeOrder: ASC } }
-        ]
-      ) {
-        edges {
-          node {
-            challenge {
-              block
-            }
-          }
-        }
-      }
-      allMarkdownRemark {
-        edges {
-          node {
-            fields {
-              slug
-            }
-            frontmatter {
-              certification
+      allSuperBlockStructure {
+        nodes {
          superBlock
-              title
-            }
-            id
-          }
        }
      }
    }
  `);

-  // Includes upcoming superBlocks
-  const allSuperBlocks = Object.values(SuperBlocks);
-
-  // Create intro pages
-  // TODO: Remove allMarkdownRemark (populate from elsewhere)
-  result.data.allMarkdownRemark.edges.forEach(edge => {
-    const {
-      node: { frontmatter, fields }
-    } = edge;
-
-    if (!fields) {
-      throw Error(
-        "'fields' property missing (this should be added in onCreateNode)"
-      );
-    }
-    const { slug } = fields;
-    if (slug.includes('LICENCE')) {
-      return;
-    }
-
-    if (!allSuperBlocks.includes(frontmatter.superBlock)) {
-      throw Error(`Unknown superblock ${frontmatter.superBlock}`);
-    }
-
-    const pageBuilder = createSuperBlockIntroPages(createPage);
-    pageBuilder(edge);
+  const superBlocks = allSuperBlockStructure.nodes.map(node => node.superBlock);
+  superBlocks.forEach(superBlock => {
+    createSuperBlockIntroPages(createPage)({ superBlock });
  });
 };

@@ -1,4 +1,4 @@
-### Type definitions saved at 2026-02-12T12:28:08.262Z ###
+### Type definitions saved at 2026-03-10T08:56:46.271Z ###

 enum RemoteFileFit {
  COVER
@@ -201,8 +201,6 @@ type File implements Node @dontInfer {
  ctime: Date! @dateformat
  birthtime: Date @deprecated(reason: "Use `birthTime` instead")
  birthtimeMs: Float @deprecated(reason: "Use `birthTime` instead")
-  blksize: Int
-  blocks: Int
 }

 type Directory implements Node @dontInfer {
@@ -298,54 +296,6 @@ type SiteBuildMetadata implements Node @dontInfer {
  buildTime: Date @dateformat
 }

-type MarkdownHeading {
-  id: String
-  value: String
-  depth: Int
-}
-
-enum MarkdownHeadingLevels {
-  h1
-  h2
-  h3
-  h4
-  h5
-  h6
-}
-
-enum MarkdownExcerptFormats {
-  PLAIN
-  HTML
-  MARKDOWN
-}
-
-type MarkdownWordCount {
-  paragraphs: Int
-  sentences: Int
-  words: Int
-}
-
-type MarkdownRemark implements Node
-  @childOf(mimeTypes: ["text/markdown", "text/x-markdown"], types: ["File"])
-  @derivedTypes
-  @dontInfer {
-  frontmatter: MarkdownRemarkFrontmatter
-  excerpt: String
-  rawMarkdownBody: String
-  fileAbsolutePath: String
-  fields: MarkdownRemarkFields
-}
-
-type MarkdownRemarkFrontmatter {
-  title: String
-  superBlock: String
-  certification: String
-}
-
-type MarkdownRemarkFields {
-  slug: String
-}
-
 type ChallengeNodeChallengeHooks {
  afterEach: String
  beforeAll: String
@@ -508,7 +458,7 @@ type ChallengeNodeChallengeQuizzesQuestionsAudioData @derivedTypes {

 type ChallengeNodeChallengeQuizzesQuestionsAudioDataAudio {
  filename: String
-  startTimestamp: Int
+  startTimestamp: Float
  finishTimestamp: Float
 }

@@ -1,20 +0,0 @@
---
-title: Responsive Web Design
-superBlock: 2022/responsive-web-design
-certification: responsive-web-design
---
-
-## Introduction to Responsive Web Design
-
-Welcome to Responsive Web Design!
-
-Let's first take a look at what is in the scope of Responsive Web Design (and what is not).
-The Web part of Responsive Web Design means that the content you are creating is designed to be delivered over the web to users' browsers. To do this, you will need to learn the language that browsers use to describe web pages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.
-
-That brings us to design. Web Design focuses on how websites should look and behave to the end user. There are plenty of additional aspects to websites, including how to host a website so people can access it, how to protect your websites and store your users' data, and the ethos behind what should go on a website in the first place. These are somewhat harder to teach, but do require a good understanding of the capabilities of the web in modern contexts.
-
-And what of the word Responsive? Well, that brings us to the idea of modern contexts. In today's world, websites are expected to be just as accessible on laptops, tablets and phones. If you compare your user experience on a document-editing program on a computer versus a document-editing program on a mobile, the features on mobile are likely to be far more constrained. This applies in some way to websites as well, but developers have found interesting ways to adapt to the mobile experience, not in the least by harnessing powerful features built for flexible (a.k.a responsive) web displays such as CSS `flexbox` and CSS `grid`.
-
-Ready to learn about good design practices for the web? Let's get started!
-
-[Begin Course](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/)
@@ -1,9 +0,0 @@
---
-title: A1 Professional Chinese
-superBlock: a1-professional-chinese
-certification: a1-professional-chinese
---
-
-## Introduction to A1 Professional Chinese
-
-A1 Professional Chinese
@@ -1,9 +0,0 @@
---
-title: A1 Professional Spanish
-superBlock: a1-professional-spanish
-certification: a1-professional-spanish
---
-
-## Introduction to A1 Professional Spanish
-
-A1 Professional Spanish
@@ -1,9 +0,0 @@
---
-title: A2 English for Developers
-superBlock: a2-english-for-developers
-certification: a2-english-for-developers
---
-
-## Introduction to A2 English for Developers
-
-A2 English for Developers
@@ -1,9 +0,0 @@
---
-title: A2 Professional Chinese
-superBlock: a2-professional-chinese
-certification: a2-professional-chinese
---
-
-## Introduction to A2 Professional Chinese
-
-A2 Professional Chinese
@@ -1,9 +0,0 @@
---
-title: A2 Professional Spanish
-superBlock: a2-professional-spanish
-certification: a2-professional-spanish
---
-
-## Introduction to A2 Professional Spanish
-
-A2 Professional Spanish
@@ -1,9 +0,0 @@
---
-title: Learn Absolute and Relative Units in CSS
-superBlock: absolute-and-relative-units
-certification: absolute-and-relative-units
---
-
-## Introduction to Learn Absolute and Relative Units in CSS
-
-Understand when to use absolute and relative CSS units to build flexible layouts.
@@ -1,9 +0,0 @@
---
-title: Learn CSS Attribute Selectors
-superBlock: attribute-selectors
-certification: attribute-selectors
---
-
-## Introduction to Learn CSS Attribute Selectors
-
-Target elements precisely with CSS attribute selectors.
@@ -1,9 +0,0 @@
---
-title: B1 English for Developers
-superBlock: b1-english-for-developers
-certification: b1-english-for-developers
---
-
-## Introduction to B1 English for Developers
-
-B1 English for Developers
@@ -1,9 +0,0 @@
---
-title: Back-End Development and APIs
-superBlock: back-end-development-and-apis-v9
-certification: back-end-development-and-apis-v9
---
-
-## Introduction to Back-End Development and APIs
-
-This is a stub introduction for Back-End Development and APIs
@@ -1,45 +0,0 @@
---
-title: Back-End Development and APIs
-superBlock: back-end-development-and-apis
-certification: back-end-development-and-apis
---
-
-## Introduction to Back-End Development and APIs
-
-This is a stub introduction for Back-End Development and APIs
-
-## Microservices
-
-So, what are Microservices?
-
-Here is a fairly simple definition from [Techtarget](https://searchmicroservices.techtarget.com/definition/microservices) - Microservices, or microservice architecture, is an approach to application development in which a large application is built as a suite of modular components or services.
-
-Basically, it is an architectural style of developing large applications through a multitude of small, self contained services that interact with one another to provide the overall functionality. The style is best understood by comparing it to a traditional application built as a monolith.
-
-A monolith typically has the three key components of any application - the UI, Business logic and the Data storage - all bundled up into a single codebase. This is deployed on a server, and managed thereby through change management. As long as the application is small, doesn't change too often and is able to effectively scale easily, managing it is not a problem. However, most applications grow over a period of time, become more complex and are unable to scale very well. While horizontal scaling is one way of scaling monoliths, the issue of managing change and operational efficiency of a large codebase is daunting, at best.
-
-To overcome some of the issues, one of the suggestions that was made early on was to functionally decompose an application, referred to as the Scale Cube in the book [The Art of Scalability](www.theartofscalability.com). This eventually led to the microservices pattern that we see now. A microservice takes a single bit of functionality and bundles all the layers of technology into it. This means that each microservice has its own UI, business logic and data store. To deliver a larger piece of functionality, microservices talk to one another through common communication methods like APIs or messages.
-
-## Key benefits
-
-1. Microservices can be developed and deployed independently of one another, thereby reducing the risk of one wrong piece of code bringing down an entire application
-2. Easier to isolate and find where issues lie, while debugging
-3. Fits the modern DevOps paradigm, as the architecture is well placed for Continuous Integration/Continuous Deployment
-4. Enables developers to choose a language and data store technology best suited for that bit of functionality
-5. Ease of automated deployment means it's best suited for the cloud
-6. Way easier to scale than monoliths, due to ease in deploying multiple instances of the same service
-7. Easy to change, as it encapsulates a single piece of business functionality
-
-## Key drawbacks
-
-1. Additional operational overheads to monitor and manage multiple services
-2. Manage communications between services
-3. Additional effort to build fault tolerance
-4. Getting the right balance of functional and data separation is not easy
-5. Distributed transaction model comes with its own share of issues regarding data consistency (eventual consistency)
-
-### Sources
-
-1. Microservices, a definition - by Martin Fowler and James Lewis : https://www.martinfowler.com/articles/microservices.html
-2. Introduction to Microservices - NGINX blog : https://www.nginx.com/blog/introduction-to-microservices/
-3. What are microservices - Smartbear : https://smartbear.com/learn/api-design/what-are-microservices/
@@ -1,9 +0,0 @@
---
-title: Learn Basic CSS
-superBlock: basic-css
-certification: basic-css
---
-
-## Learn Basic CSS
-
-Learn core CSS concepts and start styling real-world layouts.
@@ -1,9 +0,0 @@
---
-title: Learn Basic HTML
-superBlock: basic-html
-certification: basic-html
---
-
-## Introduction to Learn Basic HTML
-
-Introduction to Basic HTML.
@@ -1,11 +0,0 @@
---
-title: Coding Interview Prep
-superBlock: coding-interview-prep
-certification: coding-interview-prep
---
-
-## Introduction to Coding Interview Prep
-
-This introduction is a stub
-
-Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions).
@@ -1,13 +0,0 @@
---
-title: College Algebra with Python
-superBlock: college-algebra-with-python
-certification: college-algebra-with-python
---
-
-## Introduction to College Algebra with Python
-
-This course is designed as a one-semester college course. It consists of instructional videos, with Google Colaboratory notebooks to follow along interactively, assignments, and challenging projects.
-
-As you go through each part of this course in sequence, you will gain a full understanding of Algebra and how to write Python code to solve Algebra problems.
-
-Throughout this course, you will also build your own Algebra Colab notebook that you will be able to use as your custom calculator. This course (and the code you write here) will give you the foundation for a deeper math and data science understanding.
@@ -1,9 +0,0 @@
---
-title: Learn Computer Basics
-superBlock: computer-basics
-certification: computer-basics
---
-
-## Learn Computer Basics
-
-Build a foundation in computer, internet, and tooling basics for web development.
@@ -1,9 +0,0 @@
---
-title: Learn CSS and Accessibility
-superBlock: css-and-accessibility
-certification: css-and-accessibility
---
-
-## Introduction to Learn CSS and Accessibility
-
-Apply CSS techniques that support accessible and inclusive interfaces.
@@ -1,9 +0,0 @@
---
-title: Learn CSS Animations
-superBlock: css-animations
-certification: css-animations
---
-
-## Introduction to Learn CSS Animations
-
-Create engaging UI motion with accessible CSS animations.
@@ -1,9 +0,0 @@
---
-title: Learn the CSS Box Model
-superBlock: css-box-model
-certification: css-box-model
---
-
-## Introduction to Learn the CSS Box Model
-
-Master the CSS box model, spacing, and layout effects for precise designs.
@@ -1,9 +0,0 @@
---
-title: Learn CSS Colors
-superBlock: css-colors
-certification: css-colors
---
-
-## Introduction to Learn CSS Colors
-
-Work with CSS color formats and build cohesive color palettes.
@@ -1,9 +0,0 @@
---
-title: Learn CSS Flexbox
-superBlock: css-flexbox
-certification: css-flexbox
---
-
-## Introduction to Learn CSS Flexbox
-
-Build responsive layouts using the Flexbox model and alignment tools.
@@ -1,9 +0,0 @@
---
-title: Learn CSS Grid
-superBlock: css-grid
-certification: css-grid
---
-
-## Introduction to Learn CSS Grid
-
-Design complex layouts using the CSS Grid system.
@@ -1,9 +0,0 @@
---
-title: Learn CSS Positioning
-superBlock: css-positioning
-certification: css-positioning
---
-
-## Introduction to Learn CSS Positioning
-
-Use positioning and floats to control layout and element flow.
@@ -1,9 +0,0 @@
---
-title: Learn CSS Typography
-superBlock: css-typography
-certification: css-typography
---
-
-## Introduction to Learn CSS Typography
-
-Learn how to style text for readability, hierarchy, and visual balance.
@@ -1,9 +0,0 @@
---
-title: Learn CSS Variables
-superBlock: css-variables
-certification: css-variables
---
-
-## Introduction to Learn CSS Variables
-
-Use CSS variables to build reusable, theme-friendly styles.
@@ -1,9 +0,0 @@
---
-title: Data Analysis with Python
-superBlock: data-analysis-with-python
-certification: data-analysis-with-python
---
-
-## Introduction to Data Analysis with Python
-
-Learn the basics of data analysis with Python.
@@ -1,9 +0,0 @@
---
-title: Data Visualization
-superBlock: data-visualization
-certification: data-visualization
---
-
-## Introduction to Data Visualization
-
-This is a stub introduction for Data Visualization
@@ -1,9 +0,0 @@
---
-title: Introduction to UI/UX Design
-superBlock: design-for-developers
-certification: design-for-developers
---
-
-## Introduction to UI/UX Design
-
-Explore UI design fundamentals and user-centered design principles for developers.
@@ -1,9 +0,0 @@
---
-title: Dev Playground
-superBlock: dev-playground
-certification: dev-playground
---
-
-## Introduction to the Dev Playground
-
-Playground for creating and testing new challenges
@@ -1,9 +0,0 @@
---
-title: Foundational C# with Microsoft
-superBlock: foundational-c-sharp-with-microsoft
-certification: foundational-c-sharp-with-microsoft
---
-
-## Introduction to Foundational C# with Microsoft
-
-Foundational C# with Microsoft
@@ -1,9 +0,0 @@
---
-title: Front-End Development Libraries
-superBlock: front-end-development-libraries-v9
-certification: front-end-development-libraries-v9
---
-
-## Introduction to Front-End Development Libraries
-
-This is a stub introduction for Front-End Development Libraries
@@ -1,9 +0,0 @@
---
-title: Front-End Development Libraries
-superBlock: front-end-development-libraries
-certification: front-end-development-libraries
---
-
-## Introduction to Front-End Development Libraries
-
-This is a stub introduction for Front-End Development Libraries
@@ -1,9 +0,0 @@
---
-title: Certified Full-Stack Developer
-superBlock: full-stack-developer-v9
-certification: full-stack-developer-v9
---
-
-## Certified Full-Stack Developer
-
-Learn HTML, CSS, JavaScript, Relational Databases, React, and Node.js to become a Certified Full-Stack Developer.
@@ -1,9 +0,0 @@
---
-title: Full-Stack Open
-superBlock: full-stack-open
-certification: full-stack-open
---
-
-## Full-Stack Open
-
-The [Full-Stack Open](https://fullstackopen.com/en/) curriculum, created by the University of Helsinki, covers modern web development with JavaScript. The curriculum focuses on building single page applications with ReactJS that use REST APIs built with Node.js. It also covers GraphQL APIs, TypeScript, and testing.
@@ -1,9 +0,0 @@
---
-title: Learn HTML and Accessibility
-superBlock: html-and-accessibility
-certification: html-and-accessibility
---
-
-## Learn HTML and Accessibility
-
-Learn how to write inclusive HTML using accessibility best practices and ARIA.
@@ -1,9 +0,0 @@
---
-title: Learn HTML Forms and Tables
-superBlock: html-forms-and-tables
-certification: html-forms-and-tables
---
-
-## Introduction to Learn HTML Forms and Tables
-
-Learn how to build accessible forms and data tables with semantic HTML.
@@ -1,9 +0,0 @@
---
-title: Information Security
-superBlock: information-security
-certification: information-security
---
-
-## Introduction to Information Security
-
-This is a stub introduction for Information Security
@@ -1,13 +0,0 @@
---
-title: Introduction to Algorithms and Data Structures
-superBlock: introduction-to-algorithms-and-data-structures
-certification: introduction-to-algorithms-and-data-structures
---
-
-## Introduction to Algorithms and Data Structures
-
-Algorithms and Data Structures are the backbone of programming. So it's important to learn how to work with them.
-
-In this comprehensive course, you will learn about common sorting and searching algorithms including merge sort, quicksort and binary search.
-
-You will also learn how to work with common data structures including arrays and linked lists.
@@ -1,9 +0,0 @@
---
-title: Introduction to Bash
-superBlock: introduction-to-bash
-certification: introduction-to-bash
---
-
-## Introduction to Bash
-
-Bash is a command-line interface that allows you to interact with your computer's operating system. It is a powerful tool that can be used for a variety of tasks, including file management, system administration, and programming.
@@ -1,9 +0,0 @@
---
-title: Introduction to Git and GitHub
-superBlock: introduction-to-git-and-github
-certification: introduction-to-git-and-github
---
-
-## Introduction to Git and GitHub
-
-Git is a distributed version control system that allows developers to track changes in their code and collaborate with others. GitHub is a web-based platform that provides hosting for Git repositories, making it easier for developers to share their code and work together on projects. In this course, you will learn the basics of Git and how to use GitHub to manage your code and collaborate with other developers. By the end of this course, you will have a solid understanding of how to use Git and GitHub effectively for your development projects.
@@ -1,9 +0,0 @@
---
-title: Introduction to Nano
-superBlock: introduction-to-nano
-certification: introduction-to-nano
---
-
-## Introduction to Nano
-
-Nano is a simple and user-friendly text editor that runs in the terminal. It is designed to be easy to use, making it a great choice for beginners who are new to command-line interfaces. In this course, you will learn how to use Nano to create and edit text files, navigate through the editor, and perform basic editing tasks. By the end of this course, you will have a solid understanding of how to use Nano effectively for your text editing needs.
@@ -1,9 +0,0 @@
---
-title: Introduction to SQL and PostgreSQL
-superBlock: introduction-to-sql-and-postgresql
-certification: introduction-to-sql-and-postgresql
---
-
-## Introduction to SQL and PostgreSQL
-
-SQL (Structured Query Language) is a programming language used to manage and manipulate relational databases. It allows you to create, read, update, and delete data in a database. PostgreSQL is an open-source relational database management system that uses SQL as its primary query language. It is known for its robustness, scalability, and support for advanced features. In this course, you will learn the basics of SQL and how to use PostgreSQL to manage your databases effectively.
@@ -1,9 +0,0 @@
---
-title: JavaScript Algorithms and Data Structures
-superBlock: javascript-algorithms-and-data-structures-v8
-certification: javascript-algorithms-and-data-structures
---
-
-## Does it need a title?
-
-Naomi will put stuff here eventually.
@@ -1,9 +0,0 @@
---
-title: Legacy JavaScript Algorithms and Data Structures
-superBlock: javascript-algorithms-and-data-structures
-certification: javascript-algorithms-and-data-structures
---
-
-## Introduction to JavaScript Algorithms and Data Structures
-
-JavaScript Algorithms and Data Structures will teach you basic JavaScript in a series of challenges. It will teach you how to assign variables, arrays, create functions, and some of the various loop types used in JavaScript. Then it will teach you to apply what you’ve learned in multiple algorithm creation challenges. Once you have completed all the challenges and the required projects you will receive the JavaScript Algorithms and Data Structures Certification.
@@ -1,14 +0,0 @@
---
-title: JavaScript Certification
-superBlock: javascript-v9
-certification: javascript-v9
---
-
-## Introduction to JavaScript Certification
-
-This course teaches you core JavaScript programming concepts such as working with variables, functions, objects, arrays, and control flow. You'll also learn how to manipulate the DOM, handle events, and apply techniques like asynchronous programming, functional programming, and accessibility best practices.
-
-To earn your JavaScript Certification:
-
- Complete the five required projects to qualify for the certification exam.
- Pass the JavaScript Certification exam.
@@ -1,9 +0,0 @@
---
-title: Build a Book Inventory App
-superBlock: lab-book-inventory-app
-certification: lab-book-inventory-app
---
-
-## Build a Book Inventory App
-
-Build a structured layout for managing a book inventory.
@@ -1,9 +0,0 @@
---
-title: Build a Page of Playing Cards
-superBlock: lab-page-of-playing-cards
-certification: lab-page-of-playing-cards
---
-
-## Build a Page of Playing Cards
-
-Create a multi-card layout to practice flexible CSS composition.
@@ -1,9 +0,0 @@
---
-title: Build a Product Landing Page
-superBlock: lab-product-landing-page
-certification: lab-product-landing-page
---
-
-## Build a Product Landing Page
-
-Build a complete landing page and apply layout, typography, and responsive design.
@@ -1,9 +0,0 @@
---
-title: Build a Survey Form
-superBlock: lab-survey-form
-certification: lab-survey-form
---
-
-## Build a Survey Form
-
-Create a complete survey form while practicing HTML structure and accessible form controls.
@@ -1,9 +0,0 @@
---
-title: Build a Technical Documentation Page
-superBlock: lab-technical-documentation-page
-certification: lab-technical-documentation-page
---
-
-## Build a Technical Documentation Page
-
-Create a documentation page and practice responsive structure and layout.
@@ -1,11 +0,0 @@
---
-title: Learn Bash Scripting
-superBlock: learn-bash-scripting
-certification: learn-bash-scripting
---
-
-## Learn Bash Scripting
-
-Bash is a command-line interface that allows you to interact with your computer's operating system.
-
-In this course, you will build several bash programs and get quizzed on what you have learned.
@@ -1,9 +0,0 @@
---
-title: Learn Prompting Fundamentals
-superBlock: learn-prompting-fundamentals
-certification: learn-prompting-fundamentals
---
-
-## Learn Prompting Fundamentals
-
-In this video course, you will learn about prompting techniques, including zero-shot and few-shot strategies, and learn how to handle AI hallucinations. This course also covers practical applications, best practices, and text embeddings to make your prompts more effective and reliable.
@@ -1,9 +0,0 @@
---
-title: Learn Python for Beginners
-superBlock: learn-python-for-beginners
-certification: learn-python-for-beginners
---
-
-## Introduction to Learn Python for Beginners
-
-Learn the fundamentals of Python programming from the ground up. Python is one of the most popular programming languages today and is great for beginners.
@@ -1,9 +0,0 @@
---
-title: Learn SQL and Bash
-superBlock: learn-sql-and-bash
-certification: learn-sql-and-bash
---
-
-## Learn SQL and Bash
-
-SQL (Structured Query Language) is a programming language used to manage and manipulate relational databases. It allows you to create, read, update, and delete data in a database. PostgreSQL is an open-source relational database management system that uses SQL as its primary query language. It is known for its robustness, scalability, and support for advanced features. In this course, you will learn the basics of SQL and how to use PostgreSQL to manage your databases effectively.
@@ -1,9 +0,0 @@
---
-title: Machine Learning with Python
-superBlock: machine-learning-with-python
-certification: machine-learning-with-python
---
-
-## Introduction to Machine Learning with Python
-
-Learn the basics of Machine Learning with Python.
@@ -1,9 +0,0 @@
---
-title: Project Euler
-superBlock: project-euler
-certification: project-euler
---
-
-## Project Euler
-
-Project Euler is a series of challenging mathematical and computational problems that require creative problem-solving and programming skills to solve. It was created by Colin Hughes in 2001 and has since become a popular platform for individuals to test and improve their mathematical and programming abilities. With over 400 problems to solve, Project Euler provides an opportunity for individuals to challenge themselves and learn new concepts in a fun and engaging way. Whether you are a beginner or an experienced programmer, Project Euler has something to offer for everyone, and its growing community of users from around the world makes it a great place to learn, collaborate, and grow.
@@ -1,9 +0,0 @@
---
-title: Learn CSS Pseudo Classes and Elements
-superBlock: pseudo-classes-and-elements
-certification: pseudo-classes-and-elements
---
-
-## Learn CSS Pseudo Classes and Elements
-
-Use pseudo-classes and pseudo-elements to create richer, more interactive styles.
@@ -1,9 +0,0 @@
---
-title: Python for Everybody
-superBlock: python-for-everybody
-certification: python-for-everybody
---
-
-## Introduction to Python for Everybody
-
-Learn the basics of Python.
@@ -1,9 +0,0 @@
---
-title: Python
-superBlock: python-v9
-certification: python-v9
---
-
-## Introduction to Python
-
-This is a stub introduction for Python
@@ -1,9 +0,0 @@
---
-title: Quality Assurance
-superBlock: quality-assurance
-certification: quality-assurance
---
-
-## Introduction to Quality Assurance
-
-This is a stub introduction for Quality Assurance
@@ -1,11 +0,0 @@
---
-title: Relational Database
-superBlock: relational-database
-certification: relational-database
---
-
-## Introduction to Relational Database
-
-This introduction is a stub
-
-Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions).
@@ -1,9 +0,0 @@
---
-title: Relational Database
-superBlock: relational-databases-v9
-certification: relational-databases-v9
---
-
-## Introduction to Relational Databases
-
-This is a stub introduction for Relational Databases
@@ -1,9 +0,0 @@
---
-title: Learn Responsive Design
-superBlock: responsive-design
-certification: responsive-design
---
-
-## Introduction to Learn Responsive Design
-
-Learn responsive design principles and build layouts that adapt to any screen.
@@ -1,14 +0,0 @@
---
-title: New Responsive Web Design Certification
-superBlock: responsive-web-design-v9
-certification: responsive-web-design-v9
---
-
-## New Responsive Web Design Certification
-
-This course teaches you the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.
-
-To earn your Responsive Web Design Certification:
-
- Complete the five required projects to qualify for the certification exam.
- Pass the Responsive Web Design Certification exam.
@@ -1,21 +0,0 @@
---
-title: Responsive Web Design
-superBlock: responsive-web-design
-certification: responsive-web-design
---
-
-## Introduction to Responsive Web Design
-
-Welcome to Responsive Web Design!
-
-Let's first take a look at what is in the scope of Responsive Web Design (and what is not).
-
-The Web part of Responsive Web Design means that the content you are creating is designed to be delivered over the web to users' browsers. To do this, you will need to learn the language that browsers use to describe web pages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.
-
-That brings us to design. Web Design focuses on how websites should look and behave to the end user. There are plenty of additional aspects to websites, including how to host a website so people can access it, how to protect your websites and store your users' data, and the ethos behind what should go on a website in the first place. These are somewhat harder to teach, but do require a good understanding of the capabilities of the web in modern contexts.
-
-And what of the word Responsive? Well, that brings us to the idea of modern contexts. In today's world, websites are expected to be just as accessible on laptops, tablets and phones. If you compare your user experience on a document-editing program on a computer versus a document-editing program on a mobile, the features on mobile are likely to be far more constrained. This applies in some way to websites as well, but developers have found interesting ways to adapt to the mobile experience, not in the least by harnessing powerful features built for flexible (a.k.a responsive) web displays such as CSS `flexbox` and CSS `grid`.
-
-Ready to learn about good design practices for the web? Let's get started!
-
-[Begin Course](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/)
@@ -1,11 +0,0 @@
---
-title: Rosetta Code
-superBlock: rosetta-code
-certification: rosetta-code
---
-
-## Rosetta Code
-
-[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_
@@ -1,14 +0,0 @@
---
-title: Scientific Computing with Python
-superBlock: scientific-computing-with-python
-certification: scientific-computing-with-python
---
-
-## Introduction to Scientific Computing with Python
-
-The Scientific Computing with Python curriculum will equip you with the fundamentals of scientific computing, including data structures and algorithms to solidify your understanding of Python programming.
-
-Among the projects, you'll learn Python list comprehensions by building a case converter program, and master string manipulation by developing a cipher. The course also includes lessons on working with numbers and strings through implementing the Luhn algorithm and using lambda functions by creating an expense tracker.
-The curriculum also covers algorithm design with the shortest path algorithm, recursion with the Tower of Hanoi puzzle, and data structures with the merge sort algorithm.
-
-In addition to core programming skills, the curriculum emphasizes real-world applications of scientific computing. You'll learn about numerical methods, building a vector space and simulating projectile motion, making you proficient in scientific and analytical programming.
@@ -1,9 +0,0 @@
---
-title: Learn Semantic HTML
-superBlock: semantic-html
-certification: semantic-html
---
-
-## Introduction to Learn Semantic HTML
-
-In this course, you will learn how to write semantic HTML.
@@ -1,9 +0,0 @@
---
-title: Learn How to Style Forms using CSS
-superBlock: styling-forms
-certification: styling-forms
---
-
-## Introduction to Learn How to Style Forms Using CSS
-
-Apply CSS techniques to create clean, usable form layouts.
@@ -1,9 +0,0 @@
---
-title: The Odin Project
-superBlock: the-odin-project
-certification: the-odin-project
---
-
-## The Odin project
-
-The Odin Project is one of those "What I wish I had when I was learning" resources. Not everyone has access to a computer science education or the funds to attend an intensive coding school and neither of those is right for everyone anyway. This project is designed to fill in the gap for people who are trying to hack it on their own but still want a high quality education.
@@ -10,7 +10,6 @@ import type {
 import type { Chapter } from '@freecodecamp/shared/config/chapters';
 import { BlockLayouts, BlockLabel } from '@freecodecamp/shared/config/blocks';
 import type { ChallengeFile, Ext } from '@freecodecamp/shared/utils/polyvinyl';
-import { type CertTitle } from '../../config/cert-and-project-map';
 import { UserThemes } from './types';

 export type { ChallengeFile, Ext };
@@ -29,17 +28,6 @@ export type CurrentCert = {
  certSlug: string;
 };

-export type MarkdownRemark = {
-  frontmatter: {
-    block: string;
-    superBlock: SuperBlocks;
-    certification: Certification;
-    title: CertTitle;
-  };
-  html: string;
-  id: string;
-};
-
 type MultipleChoiceAnswer = {
  answer: string;
  feedback: string | null;
@@ -15,14 +15,10 @@ import {
  userFetchStateSelector
 } from '../../../redux/selectors';
 import { User } from '../../../redux/prop-types';
-import {
-  type CertTitle,
-  liveCerts
-} from '../../../../config/cert-and-project-map';
+import { liveCerts } from '../../../../config/cert-and-project-map';
 import { getCertifications } from '../../../components/profile/components/utils/certification';

 interface CertChallengeProps {
-  certification: Certification;
  fetchState: {
    pending: boolean;
    complete: boolean;
@@ -31,7 +27,6 @@ interface CertChallengeProps {
  };
  isSignedIn: boolean;
  superBlock: SuperBlocks;
-  title: CertTitle;
  user: User;
 }

@@ -48,7 +43,6 @@ const mapStateToProps = (state: unknown) => {

 const CertChallenge = ({
  superBlock,
-  title,
  fetchState,
  isSignedIn,
  user
@@ -59,8 +53,10 @@ const CertChallenge = ({
  const { currentCerts, legacyCerts } = getCertifications(user);
  const { username } = user;

-  const cert = liveCerts.find(x => x.title === title);
-  if (!cert) throw Error(`Certification ${title} not found`);
+  const certification = superBlockToCertMap[superBlock];
+
+  const cert = liveCerts.find(x => x.certSlug === certification);
+  if (!cert) throw Error(`Certification ${certification} not found`);
  const certSlug = cert.certSlug;

  useEffect(() => {
@@ -80,6 +76,7 @@ const CertChallenge = ({
    )?.show ?? false;

  const certLocation = `/certification/${username}/${certSlug}`;
+  const title = t(`certification.title.${certification}`);

  return (
    <div>
@@ -7,7 +7,6 @@ import {
  chapterBasedSuperBlocks,
  SuperBlocks
 } from '@freecodecamp/shared/config/curriculum';
-import type { CertTitle } from '../../../../config/cert-and-project-map';
 import type {
  ChapterBasedSuperBlockStructure,
  User
@@ -19,7 +18,6 @@ import type {
 import { SuperBlockIcon } from '../../../assets/superblock-icon';
 import { Link } from '../../../components/helpers';
 import {
-  type Certification,
  certSlugTypeMap,
  certificationRequirements,
  superBlockToCertMap
@@ -46,7 +44,6 @@ type Challenge = {
 };

 type SuperBlockMapProps = {
-  certification: Certification;
  completedChallengeIds: string[];
  disabledBlocks: string[];
  initialExpandedBlock: string;
@@ -54,25 +51,20 @@ type SuperBlockMapProps = {
  structure?: ChapterBasedSuperBlockStructure;
  superBlock: SuperBlocks;
  superBlockChallenges: Challenge[];
-  title: CertTitle;
  user: User | null;
 };

 const BlockList = ({
-  certification,
  disabledBlocks,
  showCertification,
  superBlock,
  superBlockChallenges,
-  title,
  user
 }: {
-  certification: Certification;
  disabledBlocks: string[];
  showCertification: boolean;
  superBlock: SuperBlocks;
  superBlockChallenges: Challenge[];
-  title: CertTitle;
  user: User | null;
 }) => {
  const visibleBlocks = useMemo(() => {
@@ -104,19 +96,13 @@ const BlockList = ({
        );
      })}
      {showCertification && !!user && (
-        <CertChallenge
-          certification={certification}
-          superBlock={superBlock}
-          title={title}
-          user={user}
-        />
+        <CertChallenge superBlock={superBlock} user={user} />
      )}
    </div>
  );
 };

 export const SuperBlockMap = ({
-  certification,
  completedChallengeIds,
  disabledBlocks,
  initialExpandedBlock,
@@ -124,7 +110,6 @@ export const SuperBlockMap = ({
  structure,
  superBlock,
  superBlockChallenges,
-  title,
  user
 }: SuperBlockMapProps) => {
  const { t } = useTranslation();
@@ -201,12 +186,10 @@ export const SuperBlockMap = ({

  return (
    <BlockList
-      certification={certification}
      disabledBlocks={disabledBlocks}
      showCertification={showCertification}
      superBlock={superBlock}
      superBlockChallenges={superBlockChallenges}
-      title={title}
      user={user}
    />
  );
@@ -257,9 +257,7 @@ const createPageProps = (
    signInLoading: false,
    location: createLocation(),
    pageContext: {
-      superBlock,
-      title: `${superBlock} certification`,
-      certification: superBlock
+      superBlock
    },
    resetExpansion: vi.fn(),
    toggleBlock: vi.fn(),
@@ -33,11 +33,8 @@ import type {
  User,
  ChapterBasedSuperBlockStructure
 } from '../../redux/prop-types';
-import { CertTitle, liveCerts } from '../../../config/cert-and-project-map';
-import {
-  type Certification,
-  superBlockToCertMap
-} from '@freecodecamp/shared/config/certification-settings';
+import { liveCerts } from '../../../config/cert-and-project-map';
+import { superBlockToCertMap } from '@freecodecamp/shared/config/certification-settings';
 import { BlockLayouts, BlockLabel } from '@freecodecamp/shared/config/blocks';
 import LegacyLinks from './components/legacy-links';
 import HelpTranslate from './components/help-translate';
@@ -85,8 +82,6 @@ type SuperBlockProps = {
  location: WindowLocation<{ breadcrumbBlockClick: string }>;
  pageContext: {
    superBlock: SuperBlocks;
-    title: CertTitle;
-    certification: Certification;
  };
  resetExpansion: () => void;
  toggleBlock: (arg0: string) => void;
@@ -164,7 +159,7 @@ const SuperBlockIntroductionPage = (props: SuperBlockProps) => {
    currentChallengeId,
    signInLoading,
    user,
-    pageContext: { superBlock, title, certification },
+    pageContext: { superBlock },
    location
  } = props;

@@ -313,7 +308,6 @@ const SuperBlockIntroductionPage = (props: SuperBlockProps) => {
              </h2>
              <Spacer size='m' />
              <SuperBlockMap
-                certification={certification}
                completedChallengeIds={completedChallenges.map(c => c.id)}
                disabledBlocks={disabledBlocksFeature}
                initialExpandedBlock={initialExpandedBlock}
@@ -323,7 +317,6 @@ const SuperBlockIntroductionPage = (props: SuperBlockProps) => {
                }
                superBlock={superBlock}
                superBlockChallenges={superBlockChallenges}
-                title={title}
                user={user}
              />
              {!isSignedIn && !signInLoading && (
@@ -164,28 +164,12 @@ function getProjectPreviewConfig(challenge, allChallengeNodes) {
 }

 exports.createSuperBlockIntroPages = function (createPage) {
-  return function (edge) {
-    const {
-      fields: { slug },
-      frontmatter: { superBlock, certification, title }
-    } = edge.node;
-
-    if (!certification) {
-      throw Error(
-        `superBlockIntro page, '${superBlock}' must have certification in frontmatter`
-      );
-    }
-
-    // TODO: throw if it encounters an unknown certification. Also, handle
-    // coding-interview-prep. it's not a certification, but it is a superBlock.
-
+  return function ({ superBlock }) {
    createPage({
-      path: slug,
+      path: `/learn/${superBlock}/`,
      component: superBlockIntro,
      context: {
-        certification,
-        superBlock,
-        title
+        superBlock
      }
    });
  };