Merge branch 'master' into update-contributing-docs

Author: saurabhraghuvanshii

.env.development

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

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");
@@ -92,6 +94,12 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 
   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") {

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} />);
-};
+};

src/collections/blog/2022/2022-01-07-Recap-KubeCon-China-TAG-Network-talk/index.mdx

@@ -23,7 +23,6 @@ import Smp from "./smp-meshery.webp";
 import Smi from "./smi-meshery.webp";
 import Patterns from "./patterns.webp";
 import Catalog from "./catalog.webp";
-import slidesTAG from "../../../events/2021/kubecon-china-2021/cncf-tag-network-and-service-mesh-working-group-kubecon-china-2021-lee-calcote-ken-owens.pdf";
 import { Link } from "gatsby";
 
 <BlogWrapper>
@@ -94,7 +93,7 @@ The majority of the more detailed activities occur in the CNCF Service Mesh Work
     alt="GetNighthawk"
  />
 
-<strong>Calcote and Owens packed a great deal of information in this talk. If you are passionate about Cloud Native Networking and Service Meshes, then this talk is definitely worth your time. Find the recording below. The presentation slides are available <a href={slidesTAG}>here</a>. </strong>
+<strong>Calcote and Owens packed a great deal of information in this talk. If you are passionate about Cloud Native Networking and Service Meshes, then this talk is definitely worth your time. Find the recording below. The <a href="/static/events/2021/kubecon-china-2021/cncf-tag-network-and-service-mesh-working-group-kubecon-china-2021-lee-calcote-ken-owens.pdf">presentation slides</a> are available.</strong>
 <div className="iframe-container">
 <iframe src="https://www.youtube.com/embed/pUDm8Xx4RXg" loading="lazy" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe>
 </div>

src/collections/blog/2022/2022-05-10-dockercon-22-hashicorp-talk/index.mdx

@@ -19,7 +19,6 @@ featured: true
 
 import { BlogWrapper } from "../../Blog.style.js";
 import Blockquote from "../../../../reusecore/Blockquote";
-import slidesTAG from "../../../events/2021/kubecon-china-2021/cncf-tag-network-and-service-mesh-working-group-kubecon-china-2021-lee-calcote-ken-owens.pdf";
 import { Link } from "gatsby";
 import DDE from './docker-extension-meshery.webp';
 import developer from './developers-need.webp';

src/collections/blog/2022/2022-05-14-service-meshcon-talk-intel/index.mdx

@@ -22,8 +22,6 @@ import { BlogWrapper } from "../../Blog.style.js";
 import Blockquote from "../../../../reusecore/Blockquote";
 import { Link } from "gatsby";
 
-import slidesTAG from "../../../events/2021/kubecon-china-2021/cncf-tag-network-and-service-mesh-working-group-kubecon-china-2021-lee-calcote-ken-owens.pdf";
-
 import meshmark from './meshmark-dark-text-side.svg';
 import performanceQuestion from './performance-question.webp';
 import smp from './smp.webp';

src/collections/blog/2024/09-27-meet-the-maintainer-aisuko-li/aisuko-li-layer5-maintainer.png

@@ -27,7 +27,6 @@ import designPannelOpener from "./designs-panel-opener.png";
 import designerDockPNG from "./designer-dock.png";
 import catalogGIF from "../../../../assets/images/kanvas/gifs/catalog.gif";
 import publishToCatalogGIF from "./publish-to-catalog.gif";
-import importGIF from "./import-design-gif.gif";
 import getStartedWithDesignerGIF from "../../../../assets/images/kanvas/gifs/start-from-scratch.gif";
 
 <BlogWrapper>
@@ -73,7 +72,7 @@ Begin by creating a new design from scratch, using existing design patterns and
 
 
 -   Access the Kanvas Designer and select the "Import" button in the left Designs panel. Import your own designs from local filesystem or from a remote URL directly into the Catalog. Upload a file or provide a URL for Docker Compose, Helm Charts, Meshery Designs or Kubernetes Manifests. Choose to either import as new or merge into current design that you have open in Kanvas.
-    <img src={importGIF} />
+    <img src="/blog/2024/11-05-what-is-the-kanvas-catalog/import-design-gif.gif" />
 
 Kanvas will convert these into a usable design based on their configurations.