Merge branch 'master' into update-kanvas-logos

Author: Rajesh-Nagarajan-11

.env.development

@@ -1 +1 @@
-GATSBY_GRAPHQL_IDE=playground
+# GATSBY_GRAPHQL_IDE=playground

CONTRIBUTING.md

@@ -500,6 +500,30 @@ Make sure you have the following prerequisites installed on your operating syste
 
 ## Set up your Local Development Environment
 
+### Make Targets
+
+Layer5 uses a `Makefile` that defines a set of rules and instructions (called **targets**) for creating, updating, and running parts of the project. Each target abstracts the underlying commands and logic, allowing  to execute complex workflows using a simple `make <target>` command.
+
+> **Note:** While using the make command on Windows, there sometimes arises an error in identifying the command even after it is installed (unrecognized command), this is because the PATH for the binary might not be set correctly.
+
+To see the complete and current list of available make targets along with a short description of what each one does, simply run the following command from the root of the project:
+
+```bash
+make
+```
+
+### Environment Variables
+
+Environment variables are named values used to configure how an application behaves in different environments without modifying the code.
+
+| Variable | Possible Values | Description |
+|---------|----------------|------------|
+| `BUILD_FULL_SITE` | `true`, `false` | When set to `true`, enables a full site build including all collections. If not explicitly set to `true`, the project defaults to a lightweight build. |
+| `NODE_ENV` | `development`, `production` | Determines the build and rendering mode used by Gatsby. This is automatically set by Gatsby. <br><br>• `development` - Uses **Deferred Static Generation (DSG)** i.e pages built on demand for faster startup.  <br>• `production` - Uses **Server-Side Rendering (SSR)** i.e pages rendered on each request for fresh content. |
+| `CI` | `true`, `false` | Indicates that the build is running in a **Continuous Integration (CI)** environment (e.g., GitHub Actions). When set to `true`, special logic is applied to page paths and redirects for GitHub Pages compatibility. This is typically set automatically by the CI system and does not need to be configured manually. |
+
+---
+
 Follow the following instructions to start contributing.
 
 **1.** Fork [this](https://github.com/layer5io/layer5) repository.
@@ -554,7 +578,7 @@ make setup
 make site
 ```
 
-This will run a local webserver with "live reload" conveniently enabled. ( **NOTE**: while using the make command on Windows, there sometimes arises an error in identifying the command even after it is installed (unrecognized command), this is because the PATH for the binary might not be set correctly ).
+This will run a local webserver with "live reload" conveniently enabled.
 
 **11.** Track your changes.
 

content-learn/mastering-meshery/introduction-to-meshery/index.mdx

@@ -8,6 +8,13 @@ courseTitle: "Introduction to Meshery"
 themeColor: "#00B39F"
 order: 1
 cardImage: '../../../src/assets/images/meshery/icon-only/meshery-logo-white.svg'
+meshesYouLearn:
+  [
+    {
+      imagepath: "../../../src/assets/images/meshery/icon-only/meshery-logo.svg",
+      name: "Meshery",
+    },
+  ]
 toc:
   [
     "meshery-concepts",

gatsby-config.js

@@ -1,13 +1,23 @@
 /* eslint-env node */
 
+const isDevelopment = process.env.NODE_ENV === "development";
 const isProduction = process.env.NODE_ENV === "production";
 const isFullSiteBuild = process.env.BUILD_FULL_SITE === "true";
 const HEAVY_COLLECTIONS = ["members", "integrations"];
 const collectionIgnoreGlobs = isFullSiteBuild
   ? []
   : HEAVY_COLLECTIONS.map((name) => `**/${name}/**`);
-// const isDevelopment = process.env.NODE_ENV === "development";
-
+const devFlags = isDevelopment
+  ? {
+    PARALLEL_SOURCING: false,
+    PRESERVE_FILE_DOWNLOAD_CACHE: true,
+  }
+  : {};
+console.info(`Build Environment: "${process.env.NODE_ENV}"`);
+collectionIgnoreGlobs == [] ?
+  console.info(`Build Scope exludes: "${process.env.BUILD_FULL_SITE}"`)
+  :
+  console.info("Build Scope includes all collections");
 module.exports = {
   siteMetadata: {
     title: "Layer5 - Expect more from your infrastructure",
@@ -20,9 +30,9 @@ module.exports = {
     twitterUsername: "@layer5",
   },
   flags: {
-    FAST_DEV: true,
-    PARALLEL_SOURCING: false, // Disable parallel sourcing to reduce memory pressure
+    FAST_DEV: false,
     DEV_SSR: false,
+    ...devFlags,
   },
   trailingSlash: "never",
   plugins: [
@@ -518,4 +528,4 @@ module.exports = {
     "gatsby-plugin-meta-redirect",
     // make sure this is always the last one
   ],
-};
+};

gatsby-node.js

@@ -11,6 +11,8 @@ const slugify = require("./src/utils/slugify");
 const { paginate } = require("gatsby-awesome-pagination");
 const { createFilePath } = require("gatsby-source-filesystem");
 const config = require("./gatsby-config");
+const isDevelopment = process.env.NODE_ENV === "development";
+const isProduction = process.env.NODE_ENV === "production";
 const {
   componentsData,
 } = require("./src/sections/Projects/Sistent/components/content");
@@ -34,6 +36,7 @@ if (process.env.CI === "true") {
     if (page.path !== oldPage.path) {
       // Replace new page with old page
       deletePage(oldPage);
+      page.slices = { ...DEFAULT_SLICES, ...(page.slices || {}) };
       createPage(page);
 
       createRedirect({
@@ -49,16 +52,58 @@ if (process.env.CI === "true") {
 
 const { loadRedirects } = require("./src/utils/redirects.js");
 
+const DEFAULT_SLICES = {
+  "site-header": "site-header",
+  "site-footer": "site-footer",
+  "cta-bottom": "cta-bottom",
+  "cta-fullwidth": "cta-fullwidth",
+  "cta-imageonly": "cta-imageonly",
+};
+
 exports.createPages = async ({ actions, graphql, reporter }) => {
-  const { createRedirect } = actions;
+  const { createRedirect, createSlice } = actions;
   const redirects = loadRedirects();
   redirects.forEach(redirect => createRedirect(redirect)); // Handles all hardcoded ones dynamically
   // Create Pages
   const { createPage } = actions;
 
+  createSlice({
+    id: "site-header",
+    component: path.resolve("./src/slices/site-header.js"),
+  });
+
+  createSlice({
+    id: "site-footer",
+    component: path.resolve("./src/slices/site-footer.js"),
+  });
+
+  createSlice({
+    id: "cta-bottom",
+    component: path.resolve("./src/slices/cta-bottom.js"),
+  });
+
+  createSlice({
+    id: "cta-fullwidth",
+    component: path.resolve("./src/slices/cta-fullwidth.js"),
+  });
+
+  createSlice({
+    id: "cta-imageonly",
+    component: path.resolve("./src/slices/cta-imageonly.js"),
+  });
+
   const envCreatePage = (props) => {
+    const pageConfig = { ...props };
+
+    if (isDevelopment) {
+      pageConfig.defer = true;
+    } else if (isProduction) {
+      pageConfig.mode = "SSR";
+    }
+    pageConfig.slices = { ...DEFAULT_SLICES, ...(pageConfig.slices || {}) };
+
     if (process.env.CI === "true") {
-      const { path, matchPath, ...rest } = props;
+      const { path, matchPath, ...rest } = pageConfig;
 
       createRedirect({
         fromPath: `/${path}/`,
@@ -73,7 +118,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
         ...rest,
       });
     }
-    return createPage(props);
+    return createPage(pageConfig);
   };
 
   const blogPostTemplate = path.resolve("src/templates/blog-single.js");
@@ -510,7 +555,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   });
 
   const components = componentsData.map((component) => component.src.replace("/", ""));
-  const createComponentPages = (createPage, components) => {
+  const createComponentPages = (envCreatePage, components) => {
     const pageTypes = [
       { suffix: "", file: "index.js" },
       { suffix: "/guidance", file: "guidance.js" },
@@ -523,7 +568,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
         const componentPath = `./src/sections/Projects/Sistent/components/${name}/${file}`;
         if (fs.existsSync(path.resolve(componentPath))) {
           try {
-            createPage({
+            envCreatePage({
               path: pagePath,
               component: require.resolve(componentPath),
             });
@@ -537,7 +582,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     });
   };
 
-  createComponentPages(createPage, components);
+  createComponentPages(envCreatePage, components);
 };
 
 // slug starts and ends with '/' so parts[0] and parts[-1] will be empty

onRenderBody.js

@@ -7,23 +7,31 @@ const themes = { light: lighttheme, dark: darktheme };
 const MagicScriptTag = (props) => {
   const codeToRunOnClient = `
       (function() {
+          // 1. Keeps SYSTEM as the priority preference
           const themeFromLocalStorage = localStorage.getItem('${DarkThemeKey}') || '${ThemeSetting.SYSTEM}';
-          const systemDarkModeSetting = () => window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
-          const isDarkModeActive = () => {
-              return !!systemDarkModeSetting()?.matches;
+
+          // 2. We change the check to look for LIGHT mode explicitly
+          const systemLightModeSetting = () => window.matchMedia ? window.matchMedia('(prefers-color-scheme: light)') : null;
+          
+          const isLightModeActive = () => {
+              return !!systemLightModeSetting()?.matches;
           };
+
           let colorMode;
           switch (themeFromLocalStorage) {
               case '${ThemeSetting.SYSTEM}':
-                colorMode = isDarkModeActive() ? '${ThemeSetting.DARK}' : '{ThemeSetting.LIGHT}'
+                // LOGIC CHANGE: If Light is active -> Light. Otherwise (Dark, No Preference, or Error) -> Dark.
+                colorMode = isLightModeActive() ? '${ThemeSetting.LIGHT}' : '${ThemeSetting.DARK}'
                 break
               case '${ThemeSetting.DARK}':
               case '${ThemeSetting.LIGHT}':
                 colorMode = themeFromLocalStorage
                 break
               default:
-                  colorMode = '${ThemeSetting.LIGHT}'
+                  // 3. Fallback to DARK in case of error
+                  colorMode = '${ThemeSetting.DARK}'
             }
+
           const root = document.documentElement;
           const iterate = (obj) => {
             if (!obj) return;
@@ -46,4 +54,4 @@ const MagicScriptTag = (props) => {
 
 export const onRenderBody = ( { setPreBodyComponents }) => {
   setPreBodyComponents(<MagicScriptTag key="theme-injection" theme={themes} />);
-};
+};

root-wrapper.js

@@ -1,9 +1,7 @@
 import React from "react";
 import { MDXProvider } from "@mdx-js/react";
 import Code from "./src/components/CodeBlock";
-import CTA_ImageOnly from "./src/components/Call-To-Actions/CTA_ImageOnly";
-import CTA_FullWidth from "./src/components/Call-To-Actions/CTA_FullWidth";
-import CTA_Bottom from "./src/components/Call-To-Actions/CTA_Bottom";
+import { Slice } from "gatsby";
 import { ContextWrapper } from "./context-wrapper";
 
 // Custom image component for better CLS scores
@@ -41,9 +39,9 @@ const components = {
     }
   },
   img: OptimizedImage,
-  CTA_ImageOnly,
-  CTA_FullWidth,
-  CTA_Bottom
+  CTA_ImageOnly: (props) => <Slice alias="cta-imageonly" sliceContext={props} />, // slice to avoid page rebuilds on CTA tweaks
+  CTA_FullWidth: (props) => <Slice alias="cta-fullwidth" sliceContext={props} />, // slice to avoid page rebuilds on CTA tweaks
+  CTA_Bottom: (props) => <Slice alias="cta-bottom" sliceContext={props} />
 };
 
 export const wrapRootElement = ({ element }) => (