feat: standardize sistent component layouts and refactor to MDX

Migrated all Sistent components to dynamic MDX routing. Standardized component header layouts by moving descriptions to frontmatter. Cleaned up legacy content.js and deprecated code.

Signed-off-by: Rishi Raj <rishiraj438gt@gmail.com>

Author: rishiraj38

gatsby-node.js

@@ -242,23 +242,19 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
       sistentComponents: allMdx(
         filter: { 
           fields: { collection: { eq: "sistent" } }
-          frontmatter: { published: { eq: true } }
         }
       ) {
-        nodes {
-          frontmatter {
-            name
-            title
-            description
-            component
-            pages
-          }
-          fields {
-            slug
-            collection
-          }
-          internal {
-            contentFilePath
+        group(field: { fields: { componentName: SELECT } }) {
+          fieldValue
+          nodes {
+            fields {
+              slug
+              componentName
+              pageType
+            }
+            internal {
+              contentFilePath
+            }
           }
         }
       }
@@ -563,43 +559,26 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   });
 
   // Create Sistent component pages dynamically from MDX
-  const sistentComponents = res.data.sistentComponents.nodes;
-
-  sistentComponents.forEach((node) => {
-    const componentName = node.frontmatter.component;
-    const pages = node.frontmatter.pages || ["overview"];
-
-    const pageTypes = [
-      { suffix: "", file: "index.js", pageType: "overview" },
-      { suffix: "/guidance", file: "guidance.js", pageType: "guidance" },
-      { suffix: "/code", file: "code.js", pageType: "code" },
-    ];
-
-    pageTypes.forEach(({ suffix, file, pageType }) => {
-      // Only create pages that exist in frontmatter
-      if (pages.includes(pageType)) {
-        const pagePath = `/projects/sistent/components/${componentName}${suffix}`;
-        const componentPath = `./src/sections/Projects/Sistent/components/${componentName}/${file}`;
-
-        if (fs.existsSync(path.resolve(componentPath))) {
-          try {
-            createPage({
-              path: pagePath,
-              component: require.resolve(componentPath),
-              context: {
-                slug: `/sistent/components/${componentName}`,
-                componentName: componentName,
-              },
-            });
-          } catch (error) {
-            console.error(`Error creating page for "${pagePath}":`, error);
-          }
-        } else {
-          console.info(
-            `Skipping creating page "${pagePath}" - file not found: "${componentPath}"`
-          );
-        }
-      }
+  // 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");
+
+  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
+         }
+       });
     });
   });
 };
@@ -688,13 +667,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",
@@ -742,7 +719,24 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
         case "sistent": {
           // For sistent components, create slug from directory structure
           const componentSlug = parent.relativeDirectory.split("/").pop();
-          slug = `/sistent/components/${componentSlug}`;
+          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:

src/collections/sistent/components/accordion/ControlledAccordion.js

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import { Accordion, AccordionSummary, AccordionDetails, Typography } from "@sistent/sistent";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+const ControlledAccordion = () => {
+  const [expanded, setExpanded] = useState("panel1");
+
+  const handleChange = (panel) => (event, isExpanded) => {
+    setExpanded(isExpanded ? panel : false);
+  };
+
+  return (
+    <div style={{ width: "100%" }}>
+      <Accordion expanded={expanded === "panel1"} onChange={handleChange("panel1")}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1bh-content"
+          id="panel1bh-header"
+        >
+          <Typography>
+            General settings
+          </Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Controlled accordions manage their expanded state through React, allowing only one panel to be open at a time. This creates a cleaner, more focused user experience by preventing multiple sections from being visible simultaneously.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion expanded={expanded === "panel2"} onChange={handleChange("panel2")}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel2bh-content"
+          id="panel2bh-header"
+        >
+          <Typography>Users</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            When expanding this panel, the previously opened panel automatically collapses. This behavior is ideal for settings pages, configuration panels, and any interface where you want users to focus on one section at a time.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion expanded={expanded === "panel3"} onChange={handleChange("panel3")}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel3bh-content"
+          id="panel3bh-header"
+        >
+          <Typography>
+            Advanced settings
+          </Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Accordions help organize complex information into digestible sections. They reduce cognitive load by hiding content until users actively choose to reveal it, making interfaces feel less overwhelming and more navigable.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+    </div>
+  );
+};
+
+export default ControlledAccordion;