[Sistent] feat: refactoring and implementing dynamic routing for Sistent components.

gatsby-node.js

@@ -15,9 +15,6 @@ const {
   getExcludedCollections,
   isFullSiteBuild,
 } = require("./src/utils/build-collections");
-const {
-  componentsData,
-} = require("./src/sections/Projects/Sistent/components/content");
 
 const shouldBuildFullSite = isFullSiteBuild();
 const excludedCollections = new Set(
@@ -358,6 +355,25 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
           }
         }
       }
+      sistentComponents: allMdx(
+        filter: { 
+          fields: { collection: { eq: "sistent" } }
+        }
+      ) {
+        group(field: { fields: { componentName: SELECT } }) {
+          fieldValue
+          nodes {
+            fields {
+              slug
+              componentName
+              pageType
+            }
+            internal {
+              contentFilePath
+            }
+          }
+        }
+      }
     }
   `);
 
@@ -712,39 +728,29 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     }
   });
 
-  const components = componentsData.map((component) =>
-    component.src.replace("/", ""),
-  );
-  const createComponentPages = (createPage, components) => {
-    const pageTypes = [
-      { suffix: "", file: "index.js" },
-      { suffix: "/guidance", file: "guidance.js" },
-      { suffix: "/code", file: "code.js" },
-    ];
+  // Create Sistent component pages dynamically from MDX
+  // Use grouping to identify which sub-pages (Tabs) exist for each component
+  const sistentGroups = res.data.sistentComponents.group;
+  const sistentTemplate = path.resolve("src/templates/sistent-component.js");
 
-    components.forEach((name) => {
-      pageTypes.forEach(({ suffix, file }) => {
-        const pagePath = `/projects/sistent/components/${name}${suffix}`;
-        const componentPath = `./src/sections/Projects/Sistent/components/${name}/${file}`;
-        if (fs.existsSync(path.resolve(componentPath))) {
-          try {
-            createPage({
-              path: pagePath,
-              component: require.resolve(componentPath),
-            });
-          } catch (error) {
-            console.error(`Error creating page for "${pagePath}":`, error);
-          }
-        } else {
-          console.info(
-            `Skipping creating page "${pagePath}" - file not found: "${componentPath}"`,
-          );
-        }
+  sistentGroups.forEach((group) => {
+    const componentName = group.fieldValue;
+    // content-learn uses different fields, sistent uses componentName.
+
+    const availablePages = group.nodes.map((node) => node.fields.pageType);
+
+    group.nodes.forEach((node) => {
+      createPage({
+        path: node.fields.slug,
+        component: `${sistentTemplate}?__contentFilePath=${node.internal.contentFilePath}`,
+        context: {
+          slug: node.fields.slug,
+          componentName: componentName,
+          availablePages: availablePages,
+        },
       });
     });
-  };
-
-  createComponentPages(createPage, components);
+  });
 };
 
 // slug starts and ends with '/' so parts[0] and parts[-1] will be empty
@@ -831,13 +837,11 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
   const parent = getNode(node.parent);
   let collection = parent.sourceInstanceName;
 
-  // --- CHANGED: Consolidated Source Logic ---
   // If the source is "collections", we determine the actual collection
   // from the parent directory name (e.g., "blog", "news", etc.)
   if (collection === "collections") {
     collection = parent.relativeDirectory.split("/")[0];
   }
-  // ------------------------------------------
 
   createNodeField({
     name: "collection",
@@ -900,6 +904,29 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
           if (node.frontmatter.title)
             slug = `/community/events/${slugify(node.frontmatter.title)}`;
           break;
+        case "sistent": {
+          // For sistent components, create slug from directory structure
+          const componentSlug = parent.relativeDirectory.split("/").pop();
+          const fileName = parent.name;
+          const suffix = fileName === "index" ? "" : `/${fileName}`;
+
+          slug = `/projects/sistent/components/${componentSlug}${suffix}`;
+
+          createNodeField({
+            name: "componentName",
+            node,
+            value: componentSlug,
+          });
+
+          // "index" -> "overview", others match filename
+          const pageType = fileName === "index" ? "overview" : fileName;
+          createNodeField({
+            name: "pageType",
+            node,
+            value: pageType,
+          });
+          break;
+        }
         default:
           slug = `/${collection}/${slugify(node.frontmatter.title)}`;
       }