Merge branch 'master' into mobile-view

Author: Namanv0509

.github/workflows/slack.yml

@@ -15,22 +15,27 @@ jobs:
       - name: Get current star count
         run: |
           echo "STARS=$(curl --silent 'https://api.github.com/repos/${{ github.repository }}' -H 'Accept: application/vnd.github.preview' | jq '.stargazers_count')" >> $GITHUB_ENV
+
       - name: Notify Slack
-        env:
-          SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
-        uses: pullreminders/slack-action@master
+        uses: slackapi/slack-github-action@v2.1.1
         with:
-          args: '{\"channel\":\"CSK7N9TGX\",\"text\":\"${{ github.actor }} just starred ${{ github.repository }}! (https://github.com/${{ github.repository }}/stargazers) Total ⭐️: ${{ env.STARS }}\"}'
+          method: chat.postMessage
+          token: ${{ secrets.SLACK_BOT_TOKEN }}
+          payload: |
+            channel: CSK7N9TGX
+            type: "mrkdwn"
+            text: "<https://github.com/${{ github.actor }}|${{ github.actor }}> just starred <https://github.com/${{ github.repository }}/stargazers|${{ github.repository }}> bringing the total ⭐️ count up to: ${{ env.STARS }}"
 
   good-first-issue-notify:
     if: github.event_name == 'issues' && (github.event.label.name == 'good first issue' || github.event.label.name == 'first-timers-only')
     name: Notify Slack for new good-first-issue
     runs-on: ubuntu-latest
     steps:
       - name: Notify Slack
-        env:
-          SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
-        uses: pullreminders/slack-action@master
+        uses: slackapi/slack-github-action@v2.1.1
         with:
-          args: '{\"channel\":\"C019426UBNY\",\"type\":\"section\",\"text\":\":new: Good first issue up for grabs: ${{ github.event.issue.title }} - ${{ github.event.issue.html_url }} \"}'
-                                                                            
+          method: chat.postMessage
+          token: ${{ secrets.SLACK_BOT_TOKEN }}
+          payload: |
+            channel: C019426UBNY
+            text: ":new: Good first issue up for grabs: <${{ github.event.issue.html_url }}|${{ github.event.issue.title }}>"

AGENTS.md

@@ -0,0 +1,141 @@
+# AGENTS.md
+
+This document provides instructions for Large Language Models (LLMs) contributing to the Layer5 website, hosted at https://github.com/layer5io/layer5, built with Gatsby.js. These guidelines ensure consistency, quality, and alignment with the project's goals of promoting cloud native infrastructure management through clear documentation and user-friendly content.
+
+## Project Overview
+
+The Layer5 website (https://layer5.io) is a Gatsby.js-based static site that serves as the primary interface for the Layer5 community. It showcases projects like Meshery, Kanvas, and Cloud Native Patterns, and provides resources for contributors, users, and cloud native enthusiasts. The site emphasizes clean design, fast performance, and accessibility.
+
+## Instructions for LLMs
+
+### 1. Content Generation Guidelines
+
+- **Tone and Style**: Use a professional yet approachable tone. Content should be clear, concise, and welcoming to both technical and non-technical audiences. Align with Layer5's mission of empowering engineers to "expect more from their infrastructure."
+- **Markdown Usage**: All content must be written in Markdown, adhering to Gatsby's content structure (e.g., MDX files in `src/pages` or `src/content`).
+- **Frontmatter**: Include appropriate frontmatter in MDX files. Example:
+
+  ```yaml
+  ---
+  title: "Page Title"
+  path: "/path/to/page"
+  date: "2025-09-23"
+  description: "Short description for SEO."
+  ---
+  ```
+- **SEO Optimization**: Ensure all generated content includes meta descriptions, relevant keywords (e.g., "cloud native," "Meshery," "service mesh"), and proper heading structures (H1, H2, etc.).
+- **Consistency**: Use American English spelling and grammar. Follow the Layer5 Writing Style Guide for terminology (e.g., "Meshery" not "meshery").
+
+### 2. Code Contributions
+
+- **Gatsby.js Structure**: Familiarize yourself with the repository structure:
+  - `src/components`: Reusable React components.
+  - `src/pages`: Page templates and MDX content.
+  - `gatsby-config.js`: Site metadata and plugins.
+  - `gatsby-node.js`: Dynamic page generation logic.
+- **React Components**: When generating components, use functional components with modern JavaScript (ES6+). Example:
+
+  ```jsx
+  import React from 'react';
+  
+  const MyComponent = ({ title }) => (
+    <div className="my-component">
+      <h2>{title}</h2>
+    </div>
+  );
+  
+  export default MyComponent;
+  ```
+- **Styling**: Use CSS modules or styled-components as per the project's conventions. Prefer Tailwind CSS classes if integrated. Example:
+
+  ```jsx
+  <div className="bg-blue-500 text-white p-4">Content</div>
+  ```
+- **Accessibility**: Ensure all components meet WCAG 2.1 standards (e.g., alt text for images, ARIA labels where needed).
+
+### 3. Contribution Workflow
+
+- **Pull Requests**: All changes must be submitted as pull requests (PRs) to the `master` branch. Follow the Layer5 Contributing Guidelines.
+- **Commit Messages**: Use clear, descriptive commit messages following the Conventional Commits format:
+
+  ```
+  feat: add new Meshery feature page
+  fix: correct broken link in footer
+  docs: update AGENTS.md with LLM instructions
+  ```
+- **Testing**: Ensure generated code passes `make setup` and `make site` without errors. Test for responsiveness across devices.
+- Verifying your fix: The website takes a long time to build. Don't interrupt the build when checking terminal output. Don't hail victory on a fix before you have ACTUALLY verified the solution. Wait for the website to be running, for you to actually \`curl\` a page and verify rendered content.
+
+### 4. Content Restrictions
+
+- **No External Images**: Do not include external image URLs in Markdown or components. Use local assets in `src/images`.
+- **No Placeholder Text**: Avoid placeholders like `[Your Name]` or `[Insert Content]`. Provide complete, usable content.
+- **No Sensitive Data**: Do not include API keys, credentials, or personal information in generated content.
+
+### 5. Specific Tasks for LLMs
+
+- **Documentation Updates**: Generate or update MDX files in `src/content` for tutorials, blog posts, or project documentation. Ensure alignment with Layer5's Documentation Guidelines.
+- **Blog Posts**: Create blog posts about cloud native topics, Meshery features, or community events. Example structure:
+
+  ```markdown
+  ---
+  title: "Exploring Meshery's New Features in 2025"
+  path: "/blog/meshery-new-features-2025"
+  date: "2025-09-23"
+  description: "Discover the latest updates to Meshery, the cloud native management platform."
+  ---
+  # Exploring Meshery's New Features in 2025
+  ## Introduction
+  Meshery continues to evolve as the leading platform for...
+  ```
+- **Component Generation**: Create reusable React components for UI elements like buttons, cards, or modals, ensuring they match the site's design system.
+
+### 6. Validation and Testing
+
+- **Linting**: Run `npm run lint` to ensure code adheres to ESLint and Prettier rules.
+- **Build Testing**: Verify that `gatsby build` completes successfully.
+- **Preview**: Test changes locally with `gatsby develop` and check for visual/functional issues.
+
+### 7. Community Alignment
+
+- **CNCF Code of Conduct**: All contributions must adhere to the CNCF Code of Conduct.
+- **Engage with MeshMates**: For guidance, reference the MeshMates program in the Layer5 Community Handbook.
+
+## Example Contribution
+
+Below is an example of a new MDX page for the Layer5 website:
+
+```markdown
+---
+title: "Getting Started with Meshery"
+path: "/learn/getting-started"
+date: "2025-09-23"
+description: "A beginner's guide to setting up Meshery for cloud native management."
+---
+# Getting Started with Meshery
+Meshery is an open-source cloud native management platform that simplifies...
+
+## Installation
+1. Install Meshery CLI using:
+   ```bash
+   curl -L https://meshery.io/install | bash -
+```
+
+2. Verify installation:
+
+   ```bash
+   mesheryctl system check
+   ```
+
+## Next Steps
+
+Explore Meshery Docs for advanced configurations.
+
+```
+
+## Troubleshooting
+- **Build Errors**: Check `gatsby-config.js` for plugin misconfigurations.
+- **Content Issues**: Validate MDX syntax using `npm run develop`.
+- **Community Support**: Reach out via the [Layer5 Slack](https://slack.layer5.io) for assistance.
+
+By following these guidelines, LLMs can contribute high-quality content and code to the Layer5 website, enhancing its role as a hub for the cloud native community.
+```

content-learn/mastering-meshery/introduction-to-meshery/meshery/deploying-meshery-designs.mdx

@@ -61,7 +61,7 @@ There are two modes on the Actions button:
 In this chapter, we focus on utilizing the first option to provide a comprehensive view of the deployment process.
 
 <a href={action}>
-  <img src={action} width="100%" align="center" />
+  <img src={action} class="chapter-image" style={{ margin: "0 auto" }}/>
 </a>
 
 <h2 class="chapter-sub-heading">Design Validation</h2>
@@ -85,15 +85,15 @@ This comprehensive validation ensures that:
 1. Click on the **Validate** Icon.
 
     <a href={performingValidation} >
-      <img src={performingValidation} width="100%" align="center" />
+      <img src={performingValidation} class="chapter-image" style={{ margin: "0 auto" }}/>
     </a>
 
    If the validation is successful, you will see a modal displaying the number of components validated and the number of annotations, similar to the one shown below:
 
-   {" "}
+
 
    <a href={successfulValidation} >
-      <img src={successfulValidation} width="100%" align="center" />
+      <img src={successfulValidation} class="chapter-image" style={{ margin: "0 auto" }}/>
     </a>
 
 <h3 class="chapter-sub-heading">Handling Validation Errors</h3>
@@ -107,7 +107,7 @@ A common validation error is:
 1. **Missing Required Field**: This happens when a required field is not provided. For example, in the image below, the first error indicates that the field ".spec.template.spec.containers.0.env.0" must have a value.
 
    <a href={validationError} >
-      <img src={validationError} width="100%" align="center" />
+      <img src={validationError} class="chapter-image" style={{ margin: "0 auto" }}/>
     </a>
 
 To troubleshoot and remediate validation issues:
@@ -132,7 +132,7 @@ A dry run in Meshery simulates the deployment of your design in the selected tar
 1. Re-run the dry run to ensure all issues have been resolved.
 
    <a href={successfulDryRun} >
-      <img src={successfulDryRun} width="100%" align="center" />
+      <img src={successfulDryRun} class="chapter-image" style={{ margin: "0 auto" }}/>
     </a>
 
 <h3 class="chapter-sub-heading">Examples of Dry Run Errors</h3>
@@ -142,25 +142,25 @@ Some examples of dry run errors are:
 1. **Invalid Field Value**: The error message indicates that a field has an invalid value. For instance, in the image below, the fields "spec > ports[0] > port" and "spec > ports[0] > targetPort" have invalid values of 0. These values must be between 1 and 65535, inclusive.
 
    <a href={drInvalidField1}>
-    <img src={drInvalidField1} width="100%" align="center" style="margin-bottom:20px;"/>
+    <img src={drInvalidField1} class="chapter-image" style={{ margin: "0 auto 20px" }} />
    </a>
 
    <a href={drInvalidField2}>
-    <img src={drInvalidField2} width="100%" align="center" />
+    <img src={drInvalidField2} class="chapter-image" style={{ margin: "0 auto" }}/>
    </a>
 
 1. **Missing Required Field**
 
    <a href={missingField}>
-    <img src={missingField} width="100%" align="center" />
+    <img src={missingField} class="chapter-image" style={{ margin: "0 auto" }}/>
    </a>
 
 1. **Missing Dependencies**: In this case, the error occurs because a Kubernetes [Custom Resource Definition](https://kubernetes.io/docs/concepts/extend-kubernetes/api-extension/custom-resources/) (CRD) should have been deployed first before attempting to deploy this component.
 
    To resolve this, ensure that all necessary dependencies, such as CRDs, are deployed before deploying the components that rely on them.
 
    <a href={missingResource}>
-    <img src={missingResource} width="100%" align="center" />
+    <img src={missingResource} class="chapter-image" style={{ margin: "0 auto" }}/>
    </a>
 
 <h2 class="chapter-sub-heading">Environment Selection</h2>
@@ -176,25 +176,25 @@ You can add an environment through the deployment modal by following these steps
 1. Click on **Add Environments**
 
    <a href={addEnv}>
-    <img src={addEnv} width="100%" align="center" />
+    <img src={addEnv} class="chapter-image" style={{ margin: "0 auto" }}/>
    </a>
 
 1. Select **Create** and put in a name for the environment, _e.g.Development_, and **Save**.
 
    <a href={createEnv}>
-    <img src={createEnv} width="100%" align="center" />
+    <img src={createEnv} class="chapter-image" style={{ margin: "0 auto" }}/>
    </a>
 
 1. After creating the environment you add connections to the environment, here we want to add a Kubernetes cluster. Click on the **arrows** icon to open the Development Resources modal.
 
    <a href={assignConn}>
-    <img src={assignConn} width="100%" align="center" />
+    <img src={assignConn} class="chapter-image" style={{ margin: "0 auto" }}/>
    </a>
 
    **Available Connections** on the left side shows a list of Kubernetes clusters that are currently managed by Meshery.
 
    <a href={kubeConn}>
-    <img src={kubeConn} width="100%" align="center" />
+    <img src={kubeConn} class="chapter-image" style={{ margin: "0 auto" }}/>
    </a>
 
 
@@ -207,7 +207,7 @@ You can add an environment through the deployment modal by following these steps
 During the deployment, if a connection has not yet been added to your environment, it will appear as shown below.
 
 <a href={missingCon}>
-  <img src={missingCon} width="100%" align="center" />
+  <img src={missingCon} class="chapter-image" style={{ margin: "0 auto" }}/>
 </a>
 
 In this scenario, to add a new environment.
@@ -225,7 +225,7 @@ Another way to add a connection to an Environment is by selecting an environment
 1. Identify the desired connection. Under the **Environment** section, click the dropdown menu to add and select the environment you want to associate with your connection.
 
    <a href={envConn}>
-     <img src={envConn} width="100%" align="center" />
+     <img src={envConn} class="chapter-image" style={{ margin: "0 auto" }}/>
    </a>
 
 <h3 class="chapter-sub-heading">Verifying Kubernetes Connections</h3>
@@ -234,15 +234,15 @@ The Kubernetes connection icon at the top right corner of the screen shows the l
 Clicking on the icon will invoke an ad hoc connectivity test between your Meshery Server and the specific Kubernetes cluster. Should this check fail, verify the health of your Meshery Operator deployment within that cluster.
 
 <a href={connList}>
-  <img src={connList} width="100%" align="center" />
+  <img src={connList} class="chapter-image" style={{ margin: "0 auto" }}/>
 </a>
 
 <h3 class="chapter-sub-heading">Environment Error</h3>
 
 If your environment is not properly set up before deployment, you may encounter the error below.
 
 <a href={envError}>
-  <img src={envError} width="100%" align="center" />
+  <img src={envError} class="chapter-image" style={{ margin: "0 auto" }}/>
 </a>
 
 To handle this error follow the suitable steps for adding a connection to your environment as previously discussed.
@@ -278,21 +278,21 @@ You have the option of using the live cluster provided by Meshery Playground or
 1. Click **Finish**.
 
    <a href={successDeploy}>
-    <img src={successDeploy} width="100%" align="center" />
+    <img src={successDeploy} class="chapter-image" style={{ margin: "0 auto" }}/>
    </a>
 
 <h3 class="chapter-sub-heading">Deployment Errors</h3>
 
 1. **Missing Namespace**: This error occurs when you attempt to create a Kubernetes resource without specifying a namespace. Kubernetes requires that all resources have an associated namespace.
 
    <a href={missingNs}>
-    <img src={missingNs} width="100%" align="center" />
+    <img src={missingNs} class="chapter-image" style={{ margin: "0 auto" }}/>
    </a>
 
 1. **Empty Label Selector**: This error indicates an empty label selector.
 
    <a href={emptyLs}>
-    <img src={emptyLs} width="100%" align="center" />
+    <img src={emptyLs} class="chapter-image" style={{ margin: "0 auto" }}/>
    </a>
 
 <h3 class="chapter-sub-heading">Troubleshooting Errors</h3>
@@ -306,7 +306,7 @@ For the comprehensive list of error codes refer to [Error Code Reference](https:
 If you encounter persistent issues, consider consulting the [Meshery Community forum](https://discuss.layer5.io/c/meshery/5).
 
 <a href={errorCode}>
-  <img src={errorCode} width="100%" align="center" />
+  <img src={errorCode} class="chapter-image" style={{ margin: "0 auto" }}/>
 </a>
 
 <h3 class="chapter-sub-heading">Using the Notification Center for Troubleshooting</h3>
@@ -322,11 +322,11 @@ The Notification Center in Meshery helps manage events during the deployment pro
 1. Keeps a log of past notifications, allowing you to track and review previous errors and their resolutions.
 
 <a href={notification}>
-  <img src={notification} width="100%" align="center" style="margin-bottom:30px;" />
+  <img src={notification} class="chapter-image" style={{ margin: "0 auto" }}/>
 </a>
 
 <a href={notificationCenter}>
-  <img src={notificationCenter} width="100%" align="center" />
+  <img src={notificationCenter} class="chapter-image" style={{ margin: "10px auto" }} />
 </a>
 
 By actively monitoring the Notification Center, you can promptly address issues as they arise, ensuring a smoother deployment process. Learn more about [Managing Events with the Notification Center](https://docs.meshery.io/guides/events-management).
@@ -339,7 +339,7 @@ To undeploy the resources
 1. Click on the **Undeploy** icon.
 
    <a href={undeploy}>
-    <img src={undeploy} width="100%" align="center" />
+    <img src={undeploy} class="chapter-image" style={{ margin: "0 auto" }}/>
    </a>