Chore: Add LitePlaceholder component for lightweight build mode

Signed-off-by: Lee Calcote <lee.calcote@layer5.io>

Author: leecalcote

gatsby-node.js

@@ -58,7 +58,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 
   const envCreatePage = (props) => {
     if (process.env.CI === "true") {
-      const { path, ...rest } = props;
+      const { path, matchPath, ...rest } = props;
 
       createRedirect({
         fromPath: `/${path}/`,
@@ -69,7 +69,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 
       return createPage({
         path: `${path}.html`,
-        matchPath: path,
+        matchPath: matchPath || path,
         ...rest,
       });
     }
@@ -108,6 +108,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 
   const resourcePostTemplate = path.resolve("src/templates/resource-single.js");
   const integrationTemplate = path.resolve("src/templates/integrations.js");
+  const LitePlaceholderTemplate = path.resolve("src/templates/lite-placeholder.js");
 
   const memberBioQuery = isFullSiteBuild
     ? `
@@ -422,7 +423,47 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   });
 
   if (!isFullSiteBuild) {
-    const placeholderPages = [
+    const litePlaceholderPages = [
+      {
+        path: "/community/members/__lite__",
+        matchPath: "/community/members/*",
+        context: {
+          entity: "member profile",
+          heading: "Member profiles disabled in lite mode",
+          description:
+            "The members collection is intentionally skipped when BUILD_FULL_SITE=false to keep local builds fast.",
+        },
+      },
+      {
+        path: "/community/members/__lite__/bio",
+        matchPath: "/community/members/*/bio",
+        context: {
+          entity: "executive bio",
+          heading: "Executive bios disabled in lite mode",
+          description:
+            "Executive bios rely on the members collection, which is skipped while BUILD_FULL_SITE=false.",
+        },
+      },
+      {
+        path: "/cloud-native-management/meshery/__lite__",
+        matchPath: "/cloud-native-management/meshery/*",
+        context: {
+          entity: "integration",
+          heading: "Integrations disabled in lite mode",
+          description:
+            "Integrations are heavy to source, so this route shows a placeholder during lightweight builds.",
+        },
+      },
+    ];
+
+    litePlaceholderPages.forEach((page) =>
+      envCreatePage({
+        ...page,
+        component: LitePlaceholderTemplate,
+      })
+    );
+
+    const graphqlPlaceholderPages = [
       {
         path: "/__placeholders/integration",
         component: integrationTemplate,
@@ -447,7 +488,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
       },
     ];
 
-    placeholderPages.forEach((page) => envCreatePage(page));
+    graphqlPlaceholderPages.forEach((page) => envCreatePage(page));
   }
 
   const learnNodes = res.data.learncontent.nodes;

src/templates/lite-placeholder.js

@@ -0,0 +1,48 @@
+import React from "react";
+import SEO from "../components/seo";
+
+const LitePlaceholder = ({ pageContext, location }) => {
+  const {
+    entity = "page",
+    heading = "Content disabled in lite mode",
+    description = "This route is intentionally skipped when BUILD_FULL_SITE=false.",
+  } = pageContext;
+
+  const instructions =
+    "Run `make site-full` (or set BUILD_FULL_SITE=true) to source the full dataset, then reload this path.";
+
+  return (
+    <>
+      <SEO title={heading} description={`${description} ${instructions}`} />
+      <main
+        style={{
+          padding: "4rem 1.5rem",
+          textAlign: "center",
+          maxWidth: "640px",
+          margin: "0 auto",
+        }}
+      >
+        <p style={{ fontWeight: 600, textTransform: "capitalize" }}>{heading}</p>
+        <p style={{ marginTop: "1rem", lineHeight: 1.5 }}>{description}</p>
+        <p style={{ marginTop: "0.75rem", fontStyle: "italic" }}>{instructions}</p>
+        {location?.pathname && (
+          <p style={{ marginTop: "1.5rem", color: "#555" }}>
+            Requested path: <code>{location.pathname}</code>
+          </p>
+        )}
+      </main>
+    </>
+  );
+};
+
+export default LitePlaceholder;
+
+export const Head = ({ pageContext }) => {
+  const { heading = "Content disabled in lite mode", description = "" } = pageContext;
+  const instructions =
+    "Run make site-full or set BUILD_FULL_SITE=true to include heavy collections in development.";
+
+  return (
+    <SEO title={heading} description={`${description} ${instructions}`.trim()} />
+  );
+};