DOP-5476: PoC of composable tutorials using query params

gatsby-config.js

@@ -1,11 +1,34 @@
+const { assertTrailingSlash } = require('./src/utils/assert-trailing-slash');
+const { assertLeadingSlash } = require('./src/utils/assert-leading-slash');
 const { generatePathPrefix } = require('./src/utils/generate-path-prefix');
 const { siteMetadata } = require('./src/utils/site-metadata');
+const { findKeyValuePair } = require('./src/utils/find-key-value-pair');
 
 const pathPrefix = generatePathPrefix(siteMetadata);
 const layoutComponentRelativePath = `./src/layouts/index.js`;
 
 console.log('PATH PREFIX', pathPrefix);
 
+// TODO: move into separate ts util
+function findPage(pages, id) {
+  return pages.find((p) => assertLeadingSlash(assertTrailingSlash(p.id)) === id);
+}
+
+function generatePermutations(data) {
+  const keys = data.map((obj) => obj.value);
+  const values = data.map((obj) => obj.selections.map((sel) => sel.value));
+
+  // Generate Cartesian product
+  return values
+    .reduce(
+      (acc, curr) => {
+        return acc.flatMap((prev) => curr.map((value) => [...prev, value]));
+      },
+      [[]]
+    )
+    .map((combination) => Object.fromEntries(keys.map((key, i) => [key, combination[i]])));
+}
+
 // Specifies which plugins to use depending on build environment
 // Keep our main plugin at top to include file saving before image plugins
 const plugins = [
@@ -21,7 +44,63 @@ const plugins = [
     },
   },
   'gatsby-plugin-emotion',
-  'gatsby-plugin-sitemap',
+  {
+    resolve: 'gatsby-plugin-sitemap',
+    options: {
+      query: `
+        {
+          allSitePage {
+            nodes {
+              path
+              pageContext
+            }
+          }
+
+          allPage {
+            nodes {
+              id
+              ast
+            }
+          }
+        }
+      `,
+      resolveSiteUrl: () => siteMetadata.siteUrl,
+      resolvePages: ({ allSitePage: { nodes: sitePages }, allPage: { nodes: pages } }) => {
+        // console.log(sitePages);
+        const composableSitePages = sitePages.filter((p) => p?.pageContext?.options?.consumables);
+
+        for (const composableSitePage of composableSitePages) {
+          const page = findPage(pages, composableSitePage.path);
+          if (!page) {
+            console.error(`Site Page with consumable reported at path ${composableSitePage.path}, but no page exists`);
+            continue;
+          }
+
+          // find composable node.
+          const composableNode = findKeyValuePair(page.ast.children, 'name', 'composable-tutorial');
+          if (!composableNode) {
+            console.error(`Composable node not found on page ${page.id}`);
+            continue;
+          }
+
+          // construct query params
+          // TODO: this should be from children. not options
+          const permutations = generatePermutations(composableNode['composable-options']);
+
+          for (const permutation of permutations) {
+            const queryString = new URLSearchParams(permutation).toString();
+            sitePages.push({
+              ...composableSitePage,
+              id: `${composableSitePage.id}?${queryString}`,
+              path: `${composableSitePage.path}?${queryString}`,
+            });
+          }
+        }
+
+        return sitePages;
+      },
+    },
+  },
   {
     resolve: 'gatsby-plugin-layout',
     options: {

package.json

@@ -19,6 +19,7 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/gatsbyjs__reach-router": "^2.0.5",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.10.1",
     "@types/react": "^18.3.13",

plugins/gatsby-source-snooty-prod/gatsby-node.js

@@ -21,6 +21,8 @@ const { createOpenAPIChangelogNode } = require('../utils/openapi.js');
 const { createProductNodes } = require('../utils/products.js');
 const { createDocsetNodes } = require('../utils/docsets.js');
 const { createBreadcrumbNodes } = require('../utils/breadcrumbs.js');
+const TEST_PAGE_AST = require('../../tests/unit/data/Composable.test.json');
+const TEST_SLUG = 'composable-tutorial';
 
 const assets = new Map();
 const projectComponents = new Set();
@@ -189,6 +191,19 @@ exports.sourceNodes = async ({ actions, createContentDigest, createNodeId, getNo
     if (val?.ast?.options?.template === 'changelog') hasOpenAPIChangelog = true;
   });
 
+  // TESTING PAGE WITH AST
+  createNode({
+    id: TEST_SLUG,
+    page_id: TEST_SLUG,
+    ast: TEST_PAGE_AST.ast,
+    facets: [],
+    internal: {
+      type: 'Page',
+      contentDigest: createContentDigest(TEST_PAGE_AST),
+    },
+    componentNames: projectComponents,
+  });
+
   await createDocsetNodes({ db, createNode, createNodeId, createContentDigest });
 
   await createProductNodes({ db, createNode, createNodeId, createContentDigest });
@@ -347,6 +362,21 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
       });
     });
 
+    // TESTING DOP-5476
+    // TODO: remove before merge
+    createPage({
+      path: assertTrailingSlash(TEST_SLUG),
+      component: path.resolve(__dirname, `../../src/components/DocumentBody.js`),
+      context: {
+        page_id: TEST_SLUG,
+        slug: TEST_SLUG,
+        repoBranches,
+        options: {
+          consumables: true,
+        },
+      },
+    });
+
     resolve();
   });
 };

src/components/ComponentFactory.js

@@ -83,6 +83,7 @@ import RoleRed from './Roles/Red';
 import RoleGold from './Roles/Gold';
 import RoleRequired from './Roles/Required';
 import SeeAlso from './SeeAlso';
+import { ComposableTutorial } from './ComposableTutorial';
 
 const IGNORED_NAMES = new Set([
   'contents',
@@ -139,6 +140,7 @@ const componentMap = {
   code: Code,
   collapsible: Collapsible,
   'community-driver': CommunityPillLink,
+  'composable-tutorial': ComposableTutorial,
   'io-code-block': CodeIO,
   cond: Cond,
   container: Container,

src/components/ComposableTutorial/Composable.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ComposableNode } from '../../types/ast';
+import ComponentFactory from '../ComponentFactory';
+
+interface ComposableProps {
+  nodeData: ComposableNode;
+}
+
+const Composable = ({ nodeData: { children }, ...rest }: ComposableProps) => {
+  return (
+    <div>
+      {children.map((c, i) => (
+        <ComponentFactory nodeData={c} key={i} {...rest} />
+      ))}
+    </div>
+  );
+};
+
+export default Composable;