Chore: Implement lightweight build mode for local development

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

Author: leecalcote

Makefile

@@ -21,10 +21,19 @@ setup-libs:
 setup:
 	npm install --legacy-peer-deps
 
-## Run layer5.io on your local machine.
+
+# "make site" - The default lightweight build keeps the dev server fast by skipping heavy collections.
+## Run a partial build of layer5.io on your local machine.
 site:
-	npm start
-	
+	@echo "🏗️  Building lightweight site version (excluding Members and Integrations collections)..."
+	@npm run develop:lite
+
+# "make site-full" forces the dev server to include every collection.
+## Run a full build of layer5.io on your local machine.
+site-full:
+	@echo "🏗️  Building full site version (including Members and Integrations collections)..."
+	@npm run develop
+
 ## Run layer5.io on your local machine. Alternate method.
 site-fast:
 	NODE_OPTIONS=--max-old-space-size=8192 gatsby develop
@@ -51,4 +60,4 @@ features:
 	node .github/build/features-to-json.js .github/build/spreadsheet.csv src/sections/Pricing/feature_data.json
 	rm .github/build/spreadsheet.csv
 
-.PHONY: setup build site clean site-fast lint features
+.PHONY: setup build site site-full clean site-fast lint features

gatsby-config.js

@@ -1,6 +1,11 @@
 /* eslint-env node */
 
 const isProduction = process.env.NODE_ENV === "production";
+const isFullSiteBuild = process.env.BUILD_FULL_SITE !== "false";
+const HEAVY_COLLECTIONS = ["members", "integrations"];
+const collectionIgnoreGlobs = isFullSiteBuild
+  ? []
+  : HEAVY_COLLECTIONS.map((name) => `**/${name}/**`);
 // const isDevelopment = process.env.NODE_ENV === "development";
 
 module.exports = {
@@ -449,10 +454,7 @@ module.exports = {
       options: {
         path: `${__dirname}/src/collections`,
         name: "collections",
-        ignore: [
-          // eslint-disable-next-line quotes
-          `src/collections/integrations/**`,
-        ],
+        ignore: collectionIgnoreGlobs,
       },
     },
     {

gatsby-node.js

@@ -15,6 +15,10 @@ const {
   componentsData,
 } = require("./src/sections/Projects/Sistent/components/content");
 
+const HEAVY_COLLECTIONS = new Set(["members", "integrations"]);
+const isFullSiteBuild = process.env.BUILD_FULL_SITE !== "false";
+const shouldIncludeCollection = (collection) => isFullSiteBuild || !HEAVY_COLLECTIONS.has(collection);
+
 if (process.env.CI === "true") {
   // All process.env.CI conditionals in this file are in place for GitHub Pages, if webhost changes in the future, code may need to be modified or removed.
   //Replacing '/' would result in empty string which is invalid
@@ -105,6 +109,31 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   const resourcePostTemplate = path.resolve("src/templates/resource-single.js");
   const integrationTemplate = path.resolve("src/templates/integrations.js");
 
+  const memberBioQuery = isFullSiteBuild
+    ? `
+      memberBio: allMdx(
+        filter: {
+          fields: { collection: { eq: "members" } }
+          frontmatter: { published: { eq: true }, executive_bio: { eq: true } }
+        }
+      ) {
+        nodes {
+          frontmatter {
+            name
+            permalink
+          }
+          fields {
+            slug
+            collection
+          }
+          internal {
+            contentFilePath
+          }
+        }
+      }
+    `
+    : "";
+
   const res = await graphql(`
     {
       allPosts: allMdx(filter: { frontmatter: { published: { eq: true } } }) {
@@ -148,26 +177,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
           fieldValue
         }
       }
-      memberBio: allMdx(
-        filter: {
-          fields: { collection: { eq: "members" } }
-          frontmatter: { published: { eq: true }, executive_bio: { eq: true } }
-        }
-      ) {
-        nodes {
-          frontmatter {
-            name
-            permalink
-          }
-          fields {
-            slug
-            collection
-          }
-          internal {
-            contentFilePath
-          }
-        }
-      }
+      ${memberBioQuery}
       singleWorkshop: allMdx(
         filter: { fields: { collection: { eq: "workshops" } } }
       ) {
@@ -223,35 +233,22 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 
   const allNodes = res.data.allPosts.nodes;
 
-  const blogs = allNodes.filter((node) => node.fields.collection === "blog");
-
-  const resources = allNodes.filter(
-    (node) => node.fields.collection === "resources"
-  );
-
-  const news = allNodes.filter((node) => node.fields.collection === "news");
-
-  const books = allNodes.filter(
-    (node) => node.fields.collection === "service-mesh-books"
-  );
-
-  const events = allNodes.filter((node) => node.fields.collection === "events");
-
-  const programs = allNodes.filter(
-    (node) => node.fields.collection === "programs"
-  );
-
-  const careers = allNodes.filter(
-    (node) => node.fields.collection === "careers"
-  );
-
-  const members = allNodes.filter(
-    (node) => node.fields.collection === "members"
-  );
+  const filterByCollection = (collection) => {
+    if (!shouldIncludeCollection(collection)) {
+      return [];
+    }
+    return allNodes.filter((node) => node.fields.collection === collection);
+  };
 
-  const integrations = allNodes.filter(
-    (nodes) => nodes.fields.collection === "integrations"
-  );
+  const blogs = filterByCollection("blog");
+  const resources = filterByCollection("resources");
+  const news = filterByCollection("news");
+  const books = filterByCollection("service-mesh-books");
+  const events = filterByCollection("events");
+  const programs = filterByCollection("programs");
+  const careers = filterByCollection("careers");
+  const members = filterByCollection("members");
+  const integrations = filterByCollection("integrations");
 
   const singleWorkshop = res.data.singleWorkshop.nodes;
   const labs = res.data.labs.nodes;
@@ -356,26 +353,30 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     });
   });
 
-  members.forEach((member) => {
-    envCreatePage({
-      path: member.fields.slug,
-      component: `${MemberTemplate}?__contentFilePath=${member.internal.contentFilePath}`,
-      context: {
-        slug: member.fields.slug,
-      },
+  if (isFullSiteBuild) {
+    members.forEach((member) => {
+      envCreatePage({
+        path: member.fields.slug,
+        component: `${MemberTemplate}?__contentFilePath=${member.internal.contentFilePath}`,
+        context: {
+          slug: member.fields.slug,
+        },
+      });
     });
-  });
+  }
 
-  const MemberBio = res.data.memberBio.nodes;
-  MemberBio.forEach((memberbio) => {
-    envCreatePage({
-      path: `${memberbio.fields.slug}/bio`,
-      component: `${MemberBioTemplate}?__contentFilePath=${memberbio.internal.contentFilePath}`,
-      context: {
-        member: memberbio.frontmatter.name,
-      },
+  const MemberBio = res.data.memberBio?.nodes || [];
+  if (isFullSiteBuild) {
+    MemberBio.forEach((memberbio) => {
+      envCreatePage({
+        path: `${memberbio.fields.slug}/bio`,
+        component: `${MemberBioTemplate}?__contentFilePath=${memberbio.internal.contentFilePath}`,
+        context: {
+          member: memberbio.frontmatter.name,
+        },
+      });
     });
-  });
+  }
 
   singleWorkshop.forEach((workshop) => {
     envCreatePage({
@@ -397,16 +398,18 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     });
   });
 
-  integrations.forEach((integration) => {
-    envCreatePage({
-      path: `/cloud-native-management/meshery${integration.fields.slug}`,
-      component: `${integrationTemplate}?__contentFilePath=${integration.internal.contentFilePath}`,
-      context: {
-        slug: integration.fields.slug,
-        name: "_images/" + integration.fields.slug.split("/")[2],
-      },
+  if (isFullSiteBuild) {
+    integrations.forEach((integration) => {
+      envCreatePage({
+        path: `/cloud-native-management/meshery${integration.fields.slug}`,
+        component: `${integrationTemplate}?__contentFilePath=${integration.internal.contentFilePath}`,
+        context: {
+          slug: integration.fields.slug,
+          name: "_images/" + integration.fields.slug.split("/")[2],
+        },
+      });
     });
-  });
+  }
 
   programs.forEach((program) => {
     envCreatePage({
@@ -418,6 +421,35 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     });
   });
 
+  if (!isFullSiteBuild) {
+    const placeholderPages = [
+      {
+        path: "/__placeholders/integration",
+        component: integrationTemplate,
+        context: {
+          slug: "/integrations/__placeholder__",
+          name: "__placeholder__",
+        },
+      },
+      {
+        path: "/__placeholders/member",
+        component: MemberTemplate,
+        context: {
+          slug: "/members/__placeholder__",
+        },
+      },
+      {
+        path: "/__placeholders/executive-bio",
+        component: MemberBioTemplate,
+        context: {
+          member: "__placeholder__",
+        },
+      },
+    ];
+
+    placeholderPages.forEach((page) => envCreatePage(page));
+  }
+
   const learnNodes = res.data.learncontent.nodes;
 
   learnNodes.forEach((node) => {
@@ -753,26 +785,60 @@ exports.createSchemaCustomization = ({ actions }) => {
      type Mdx implements Node {
        frontmatter: Frontmatter
      }
+
+     type FrontmatterComponent {
+       name: String
+       description: String
+       colorIcon: File @fileByRelativePath
+       whiteIcon: File @fileByRelativePath
+     }
+
      type Frontmatter {
-       subtitle: String,
-       abstract: String,
-       eurl: String,
-       twitter: String,
-       github: String,
-       layer5: String,
-       meshmate: String,
-       maintainer:String,
-       emeritus: String,
-       link: String,
-       labs: String,
-       slides: String,
-       slack: String,
-       video: String,
-       community_manager: String,
-       docURL: String,
-       permalink: String,
-       slug: String,
+       title: String
+       subtitle: String
+       abstract: String
+       description: String
+       eurl: String
+       twitter: String
+       github: String
+       layer5: String
+       meshmate: String
+       maintainer: String
+       emeritus: String
+       link: String
+       labs: String
+       slides: String
+       slack: String
+       video: String
+       community_manager: String
+       docURL: String
+       permalink: String
+       slug: String
        redirect_from: [String]
+       category: String
+       subcategory: String
+       registrant: String
+       featureList: [String]
+       howItWorks: String
+       howItWorksDetails: String
+       components: [FrontmatterComponent]
+       integrationIcon: File @fileByRelativePath
+       darkModeIntegrationIcon: File @fileByRelativePath
+       workingSlides: [File] @fileByRelativePath
+       name: String
+       position: String
+        email: String
+        profile: String
+       linkedin: String
+       location: String
+       badges: [String]
+       status: String
+       bio: String
+       executive_bio: String
+        executive_position: String
+        company: String
+        executive_image: File @fileByRelativePath
+       image_path: File @fileByRelativePath
      }
    `;
   createTypes(typeDefs);

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "Layer5",
+  "name": "layer5",
   "description": "Our cloud native application and infrastructure management software enables organizations to expect more from their infrastructure. At Layer5, we believe collaboration enables innovation, and infrastructure enables collaboration",
   "version": "1.0.0",
   "private": true,
@@ -13,6 +13,7 @@
     "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 gatsby build",
     "clean": "gatsby clean && rimraf node_modules",
     "develop": "cross-env NODE_OPTIONS=--max-old-space-size=8192 env-cmd -f .env.development gatsby develop",
+    "develop:lite": "cross-env BUILD_FULL_SITE=false NODE_OPTIONS=--max-old-space-size=8192 env-cmd -f .env.development gatsby develop",
     "dev": "npm run develop",
     "start": "npm run develop",
     "serve": "gatsby serve",