refactor(client): simplify page creation (#55720)

2026-03-27 11:01:38 -04:00 · 2024-08-13 17:36:00 +02:00
parent 90b2cfbfeb
commit 041a841995
15 changed files with 39 additions and 58 deletions
--- a/client/gatsby-node.js
+++ b/client/gatsby-node.js
@@ -23,11 +23,7 @@ exports.onCreateNode = function onCreateNode({ node, actions, getNode }) {
  if (node.internal.type === 'MarkdownRemark') {
    const slug = createFilePath({ node, getNode });
    if (!slug.includes('LICENSE')) {
-      const {
-        frontmatter: { component = '' }
-      } = node;
      createNodeField({ node, name: 'slug', value: slug });
-      createNodeField({ node, name: 'component', value: component });
    }
  }
 };
@@ -74,6 +70,7 @@ exports.createPages = async function createPages({
      ) {
        edges {
          node {
+            id
            challenge {
              block
              blockType
@@ -122,7 +119,6 @@ exports.createPages = async function createPages({
            fields {
              slug
              nodeIdentity
-              component
            }
            frontmatter {
              certification
@@ -130,9 +126,7 @@ exports.createPages = async function createPages({
              superBlock
              title
            }
-            htmlAst
            id
-            excerpt
          }
        }
      }
--- a/client/src/redux/prop-types.ts
+++ b/client/src/redux/prop-types.ts
@@ -19,8 +19,6 @@ export type CurrentCert = {
 };

 export type MarkdownRemark = {
-  fields: [{ component: string; nodeIdentity: string; slug: string }];
-  fileAbsolutePath: string;
  frontmatter: {
    block: string;
    superBlock: SuperBlocks;
@@ -28,23 +26,8 @@ export type MarkdownRemark = {
    certification: string;
    title: CertTitle;
  };
-  headings: [
-    {
-      depth: number;
-      value: string;
-      id: string;
-    }
-  ];
  html: string;
-  htmlAst: Record<string, unknown>;
  id: string;
-  rawMarkdownBody: string;
-  timeToRead: number;
-  wordCount: {
-    paragraphs: number;
-    sentences: number;
-    words: number;
-  };
 };

 export type MultipleChoiceAnswer = {
--- a/client/src/templates/Challenges/classic/show.tsx
+++ b/client/src/templates/Challenges/classic/show.tsx
@@ -532,8 +532,8 @@ ShowClassic.displayName = 'ShowClassic';
 export default connect(mapStateToProps, mapDispatchToProps)(ShowClassic);

 export const query = graphql`
-  query ClassicChallenge($slug: String!) {
-    challengeNode(challenge: { fields: { slug: { eq: $slug } } }) {
+  query ClassicChallenge($id: String!) {
+    challengeNode(id: { eq: $id }) {
      challenge {
        block
        demoType
--- a/client/src/templates/Challenges/codeally/show.tsx
+++ b/client/src/templates/Challenges/codeally/show.tsx
@@ -426,8 +426,8 @@ export default connect(

 // GraphQL
 export const query = graphql`
-  query CodeAllyChallenge($slug: String!) {
-    challengeNode(challenge: { fields: { slug: { eq: $slug } } }) {
+  query CodeAllyChallenge($id: String!) {
+    challengeNode(id: { eq: $id }) {
      challenge {
        block
        fields {
--- a/client/src/templates/Challenges/dialogue/show.tsx
+++ b/client/src/templates/Challenges/dialogue/show.tsx
@@ -329,8 +329,8 @@ export default connect(
 )(withTranslation()(ShowDialogue));

 export const query = graphql`
-  query Dialogue($slug: String!) {
-    challengeNode(challenge: { fields: { slug: { eq: $slug } } }) {
+  query Dialogue($id: String!) {
+    challengeNode(id: { eq: $id }) {
      challenge {
        videoId
        title
--- a/client/src/templates/Challenges/exam/show.tsx
+++ b/client/src/templates/Challenges/exam/show.tsx
@@ -596,8 +596,8 @@ export default connect(

 // GraphQL
 export const query = graphql`
-  query ExamChallenge($slug: String!) {
-    challengeNode(challenge: { fields: { slug: { eq: $slug } } }) {
+  query ExamChallenge($id: String!) {
+    challengeNode(id: { eq: $id }) {
      challenge {
        block
        challengeType
--- a/client/src/templates/Challenges/fill-in-the-blank/show.tsx
+++ b/client/src/templates/Challenges/fill-in-the-blank/show.tsx
@@ -429,8 +429,8 @@ export default connect(
 )(withTranslation()(ShowFillInTheBlank));

 export const query = graphql`
-  query FillInTheBlankChallenge($slug: String!) {
-    challengeNode(challenge: { fields: { slug: { eq: $slug } } }) {
+  query FillInTheBlankChallenge($id: String!) {
+    challengeNode(id: { eq: $id }) {
      challenge {
        title
        description
--- a/client/src/templates/Challenges/ms-trophy/show.tsx
+++ b/client/src/templates/Challenges/ms-trophy/show.tsx
@@ -250,8 +250,8 @@ export default connect(
 )(withTranslation()(MsTrophy));

 export const query = graphql`
-  query MsTrophyChallenge($slug: String!) {
-    challengeNode(challenge: { fields: { slug: { eq: $slug } } }) {
+  query MsTrophyChallenge($id: String!) {
+    challengeNode(id: { eq: $id }) {
      challenge {
        title
        description
--- a/client/src/templates/Challenges/odin/show.tsx
+++ b/client/src/templates/Challenges/odin/show.tsx
@@ -452,8 +452,8 @@ export default connect(
 )(withTranslation()(ShowOdin));

 export const query = graphql`
-  query TheOdinProject($slug: String!) {
-    challengeNode(challenge: { fields: { slug: { eq: $slug } } }) {
+  query TheOdinProject($id: String!) {
+    challengeNode(id: { eq: $id }) {
      challenge {
        videoId
        videoLocaleIds {
--- a/client/src/templates/Challenges/projects/backend/show.tsx
+++ b/client/src/templates/Challenges/projects/backend/show.tsx
@@ -282,8 +282,8 @@ export default connect(
 )(withTranslation()(BackEnd));

 export const query = graphql`
-  query BackendChallenge($slug: String!) {
-    challengeNode(challenge: { fields: { slug: { eq: $slug } } }) {
+  query BackendChallenge($id: String!) {
+    challengeNode(id: { eq: $id }) {
      challenge {
        forumTopicId
        title
--- a/client/src/templates/Challenges/projects/frontend/show.tsx
+++ b/client/src/templates/Challenges/projects/frontend/show.tsx
@@ -228,8 +228,8 @@ export default connect(
 )(withTranslation()(Project));

 export const query = graphql`
-  query ProjectChallenge($slug: String!) {
-    challengeNode(challenge: { fields: { slug: { eq: $slug } } }) {
+  query ProjectChallenge($id: String!) {
+    challengeNode(id: { eq: $id }) {
      challenge {
        forumTopicId
        title
--- a/client/src/templates/Challenges/video/show.tsx
+++ b/client/src/templates/Challenges/video/show.tsx
@@ -359,8 +359,8 @@ export default connect(
 )(withTranslation()(ShowVideo));

 export const query = graphql`
-  query VideoChallenge($slug: String!) {
-    challengeNode(challenge: { fields: { slug: { eq: $slug } } }) {
+  query VideoChallenge($id: String!) {
+    challengeNode(id: { eq: $id }) {
      challenge {
        videoId
        videoLocaleIds {
--- a/client/src/templates/Introduction/intro.tsx
+++ b/client/src/templates/Introduction/intro.tsx
@@ -64,8 +64,8 @@ IntroductionPage.displayName = 'IntroductionPage';
 export default IntroductionPage;

 export const query = graphql`
-  query IntroPageBySlug($slug: String!, $block: String!) {
-    markdownRemark(fields: { slug: { eq: $slug } }) {
+  query IntroPageBySlug($id: String!, $block: String!) {
+    markdownRemark(id: { eq: $id }) {
      frontmatter {
        block
        superBlock
--- a/client/src/templates/Introduction/super-block-intro.tsx
+++ b/client/src/templates/Introduction/super-block-intro.tsx
@@ -276,8 +276,8 @@ export default connect(
 )(withTranslation()(memo(SuperBlockIntroductionPage)));

 export const query = graphql`
-  query SuperBlockIntroPageBySlug($slug: String!, $superBlock: String!) {
-    markdownRemark(fields: { slug: { eq: $slug } }) {
+  query SuperBlockIntroPageBySlug($id: String!, $superBlock: String!) {
+    markdownRemark(id: { eq: $id }) {
      frontmatter {
        certification
        superBlock
--- a/client/utils/gatsby/challenge-page-creator.js
+++ b/client/utils/gatsby/challenge-page-creator.js
@@ -99,7 +99,7 @@ function getNextBlock(id, edges) {
 }

 exports.createChallengePages = function (createPage) {
-  return function ({ node: { challenge } }, index, allChallengeEdges) {
+  return function ({ node }, index, allChallengeEdges) {
    const {
      dashedName,
      disableLoopProtectTests,
@@ -112,7 +112,7 @@ exports.createChallengePages = function (createPage) {
      template,
      challengeType,
      id
-    } = challenge;
+    } = node.challenge;
    // TODO: challengeType === 7 and isPrivate are the same, right? If so, we
    // should remove one of them.

@@ -136,8 +136,11 @@ exports.createChallengePages = function (createPage) {
          prevChallengePath: getPrevChallengePath(index, allChallengeEdges),
          id
        },
-        projectPreview: getProjectPreviewConfig(challenge, allChallengeEdges),
-        slug
+        projectPreview: getProjectPreviewConfig(
+          node.challenge,
+          allChallengeEdges
+        ),
+        id: node.id
      }
    });
  };
@@ -176,7 +179,8 @@ exports.createBlockIntroPages = function (createPage) {
  return function (edge) {
    const {
      fields: { slug },
-      frontmatter: { block }
+      frontmatter: { block },
+      id
    } = edge.node;

    createPage({
@@ -184,7 +188,7 @@ exports.createBlockIntroPages = function (createPage) {
      component: intro,
      context: {
        block,
-        slug
+        id
      }
    });
  };
@@ -194,7 +198,8 @@ exports.createSuperBlockIntroPages = function (createPage) {
  return function (edge) {
    const {
      fields: { slug },
-      frontmatter: { superBlock, certification }
+      frontmatter: { superBlock, certification },
+      id
    } = edge.node;

    if (!certification) {
@@ -210,9 +215,8 @@ exports.createSuperBlockIntroPages = function (createPage) {
      path: slug,
      component: superBlockIntro,
      context: {
-        certification,
-        superBlock,
-        slug
+        id,
+        superBlock
      }
    });
  };