Skip to content

[Workshops] Fix React hydration mismatch errors on workshop pages #8101

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Maanvi212006 merged 3 commits into from
Sep 22, 2026
Merged

[Workshops] Fix React hydration mismatch errors on workshop pages #8101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
12900ca
fix(workshops): resolve React hydration mismatch errors on workshop p…
tejaswiverma121-byte Sep 20, 2026
0b1bf84
Merge branch 'master' into fix/8088-workshop-hydration
Maanvi212006 Sep 21, 2026
9f68968
Merge branch 'master' into fix/8088-workshop-hydration
Maanvi212006 Sep 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 16 additions & 3 deletions src/collections/workshops/2025_04_10_meshery_docs/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,29 @@ slack: http://slack.layer5.io
date: 2025-04-10 02:08:05 +0000
status: "delivered"
---
<h4>Contributing to Meshery Docs</h4> <br /> <p><strong>Trainer:</strong> <a href="https://layer5.io/community/members/zihan-kuang" target="_blank">Zihan Kuang</a> <br /> <strong>Technologies:</strong> Hugo, Jekyll, Markdown, HTML, CSS </p> <p> Learn how Meshery’s documentation is structured using Hugo, Jekyll, and Markdown. You’ll get tips on writing clear, consistent content, using active voice, and following Meshery's style guidelines. We’ll cover <code>make docs</code>, commit sign-offs, and how to preview your changes locally before submitting. </p>
<h4>Contributing to Meshery Docs</h4> <br />

<strong>Trainer:</strong> <a href="https://layer5.io/community/members/zihan-kuang" target="_blank">Zihan Kuang</a> <br />
<strong>Technologies:</strong> Hugo, Jekyll, Markdown, HTML, CSS

Learn how Meshery’s documentation is structured using Hugo, Jekyll, and Markdown. You’ll get tips on writing clear, consistent content, using active voice, and following Meshery's style guidelines. We’ll cover <code>make docs</code>, commit sign-offs, and how to preview your changes locally before submitting.

You will learn to:

<ul> <li>Set up your environment with <code>make docs</code></li> <li>Navigate the docs structure</li> <li>Write clean, contributor-friendly content</li> <li>Open effective, signed-off pull requests</li> </ul>
<ul>
<li>Set up your environment with <code>make docs</code></li>
<li>Navigate the docs structure</li>
<li>Write clean, contributor-friendly content</li>
<li>Open effective, signed-off pull requests</li>
</ul>

<br />
<h4 style={{ marginBottom: "1.25rem" }}><a href="https://docs.google.com/presentation/d/1kQIzSa4f-pOH8cM4SwEdbFZGI_SXVyyhc9zUZPB7bsI/edit?slide=id.g34811bf5022_0_3#slide=id.g34811bf5022_0_3">Workshop Slides</a></h4>
<br />
<h4 style={{ marginBottom: "1.25rem" }}><a href="https://docs.meshery.io/project/contributing/contributing-docs" target="_blank">Contributing to Docs Guide</a></h4>
<br />
<h4 style={{ marginBottom: "1.25rem" }}>Workshop Recording</h4>
<iframe width="50%" src="https://www.youtube.com/embed/7wRbbOSwrtI" loading="lazy" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style={{ minHeight: "315px", minWidth: "280px", margin: "auto", textAlign: "center" }} allowfullscreen></iframe>

<iframe width="50%" src="https://www.youtube.com/embed/7wRbbOSwrtI" loading="lazy" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style={{ minHeight: "315px", minWidth: "280px", margin: "auto", textAlign: "center" }} allowFullScreen></iframe>
<br />
<br />
9 changes: 4 additions & 5 deletions src/collections/workshops/2025_04_17_meshery_cli_e2e/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,11 @@ status: "delivered"
---

<h4>End-to-End Testing in Meshery CLI</h4> <br />
Comment thread
Maanvi212006 marked this conversation as resolved.
<p><strong>Trainer:</strong> <a href="https://layer5.io/community/members/riya-garg" target="_blank">Riya Garg</a> <br />
<strong>Technologies:</strong> BATS, Shell, Meshery CLI</p>

<p>
<strong>Trainer:</strong> <a href="https://layer5.io/community/members/riya-garg" target="_blank">Riya Garg</a> <br />
<strong>Technologies:</strong> BATS, Shell, Meshery CLI

This workshop was a deep dive into writing end-to-end tests for the Meshery CLI using <a href="https://github.com/bats-core/bats-core" target="_blank">BATS</a> (Bash Automated Testing System). It covered everything from pre-requisites and project setup to writing quality tests and understanding test coverage.
</p>

You will learn to:

Expand All @@ -35,6 +34,6 @@ You will learn to:
<br />
<h4 style={{ marginBottom: "1.25rem" }}>Workshop Recording</h4>

<iframe width="50%" src="https://www.youtube.com/embed/mRQAvR9-P1o" loading="lazy" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style={{ minHeight: "315px", minWidth: "280px", margin: "auto", textAlign: "center" }} allowfullscreen></iframe>
<iframe width="50%" src="https://www.youtube.com/embed/mRQAvR9-P1o" loading="lazy" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style={{ minHeight: "315px", minWidth: "280px", margin: "auto", textAlign: "center" }} allowFullScreen></iframe>
<br />
<br />
11 changes: 4 additions & 7 deletions src/collections/workshops/2025_04_24_meshery_build_and_release/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,13 @@ status: "delivered"
---

<h4>Contributing to Meshery Build and Release</h4> <br />
Comment thread
Maanvi212006 marked this conversation as resolved.
<p><strong>Trainer:</strong> <a href="https://layer5.io/community/members/sangram-rath" target="_blank">Sangram Rath</a> <br />
<strong>Technologies:</strong> GitHub Actions, Docker, Kubernetes, CI/CD</p>

<p>
<strong>Trainer:</strong> <a href="https://layer5.io/community/members/sangram-rath" target="_blank">Sangram Rath</a> <br />
<strong>Technologies:</strong> GitHub Actions, Docker, Kubernetes, CI/CD

This workshop offered a walkthrough of Meshery’s CI/CD pipelines and release process. It began with foundational concepts like CI (Continuous Integration) and CD (Continuous Delivery), then walked through Meshery’s GitHub Actions-based workflows, including their triggers and execution modes.
</p>

<p>
Participants got a complete overview of the release process, including changelog generation, semantic versioning, and publishing release notes. The session also explored how Docker and Kubernetes are used in Meshery’s workflows and how contributors can get involved in initiatives like the Security Slam event.
</p>

You will learn to:

Expand All @@ -40,6 +37,6 @@ You will learn to:
<br />
<h4 style={{ marginBottom: "1.25rem" }}>Workshop Recording</h4>

<iframe width="50%" src="https://www.youtube.com/embed/dlr_nzJV16Q" loading="lazy" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style={{ minHeight: "315px", minWidth: "280px", margin: "auto", textAlign: "center" }} allowfullscreen></iframe>
<iframe width="50%" src="https://www.youtube.com/embed/dlr_nzJV16Q" loading="lazy" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style={{ minHeight: "315px", minWidth: "280px", margin: "auto", textAlign: "center" }} allowFullScreen></iframe>
<br />
<br />
7 changes: 2 additions & 5 deletions src/collections/workshops/2025_04_30_meshery_cli/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,14 @@ date: 2025-04-30 02:08:05 +0000
status: "delivered"
---
<h4>Contributing to Meshery CLI</h4> <br />
<p>

<strong>Trainers:</strong>
<a href="https://layer5.io/community/members/matthieu-evrin" target="_blank">Matthieu EVRIN</a>,
<a href="https://layer5.io/community/members/aadhitya-amarendiran" target="_blank">Aadhitya Amarendiran</a>
<br />
<strong>Technologies:</strong> Golang, Cobra
</p>

<p>
ICYMI, this session focused on contributing to Meshery’s CLI—<code>mesheryctl</code>. Attendees were introduced to the CLI’s architecture, learned how to set it up locally, and explored the fundamentals of writing and documenting CLI commands using Go and Cobra.
</p>

You will learn to:

Expand All @@ -37,6 +34,6 @@ You will learn to:
<br />
<h4 style={{ marginBottom: "1.25rem" }}>Workshop Recording</h4>

<iframe width="50%" src="https://www.youtube.com/embed/ijunTqSqSbg" loading="lazy" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style={{ minHeight: "315px", minWidth: "280px", margin: "auto", textAlign: "center" }} allowfullscreen></iframe>
<iframe width="50%" src="https://www.youtube.com/embed/ijunTqSqSbg" loading="lazy" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style={{ minHeight: "315px", minWidth: "280px", margin: "auto", textAlign: "center" }} allowFullScreen></iframe>
<br />
<br />
9 changes: 2 additions & 7 deletions src/collections/workshops/2025_05_08_meshery_ui_e2e/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,13 @@ status: "delivered"
---

<h4>Contributing to Meshery UI End-to-End Tests</h4> <br />
<p>

<strong>Trainer:</strong> <a href="https://layer5.io/community/members/ian-whitney" target="_blank">Ian Whitney</a> <br />
<strong>Technologies:</strong> Playwright
</p>

<p>
This workshop provided a hands-on walkthrough of contributing End-to-End (E2E) tests for the Meshery UI using <a href="https://playwright.dev/" target="_blank">Playwright</a>. It introduced attendees to the purpose and structure of UI testing in Meshery, including both local and remote provider test cases.
</p>

<p>
Participants learned about the best practices, contribution workflow, and where to find help-wanted issues related to UI testing. The session also pointed out how to navigate the issue board to get tasks assigned and track ongoing efforts.
</p>

You will learn to:

Expand All @@ -41,6 +36,6 @@ You will learn to:
<br />
<h4 style={{ marginBottom: "1.25rem" }}>Workshop Recording</h4>

<iframe width="50%" src="https://www.youtube.com/embed/9d0n37eTSkI" loading="lazy" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style={{ minHeight: "315px", minWidth: "280px", margin: "auto", textAlign: "center" }} allowfullscreen></iframe>
<iframe width="50%" src="https://www.youtube.com/embed/9d0n37eTSkI" loading="lazy" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style={{ minHeight: "315px", minWidth: "280px", margin: "auto", textAlign: "center" }} allowFullScreen></iframe>
<br />
<br />
9 changes: 2 additions & 7 deletions src/collections/workshops/2025_05_15_meshery_ui/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,13 @@ status: "delivered"
---

<h4>Contributing to Meshery UI</h4> <br />
<p>

<strong>Trainer:</strong> <a href="https://layer5.io/community/members/amit-amrutiya" target="_blank">Amit Amrutiya</a> <br />
<strong>Technologies:</strong> React, Sistent, CASL
</p>

<p>
This Contributor Training Series session offers a walkthrough on how to contribute to the Meshery UI. It introduces key architectural concepts like Providers and Extension Points and explores the major libraries used across the Meshery UI, including <a href="https://sistent.layer5.io" target="_blank">Sistent</a> and CASL.
</p>

<p>
Participants gain insights into Meshery's schema-driven approach to building consistent, dynamic, and maintainable user interfaces. The session wraps up by highlighting key contribution areas and resources to help you get started.
</p>

You will learn to:

Expand All @@ -40,6 +35,6 @@ You will learn to:
<br />
<h4 style={{ marginBottom: "1.25rem" }}>Workshop Recording</h4>

<iframe width="50%" src="https://www.youtube.com/embed/ia7kvnHCurs" loading="lazy" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style={{ minHeight: "315px", minWidth: "280px", margin: "auto", textAlign: "center" }} allowfullscreen></iframe>
<iframe width="50%" src="https://www.youtube.com/embed/ia7kvnHCurs" loading="lazy" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style={{ minHeight: "315px", minWidth: "280px", margin: "auto", textAlign: "center" }} allowFullScreen></iframe>
<br />
<br />
9 changes: 2 additions & 7 deletions src/collections/workshops/2025_05_29_meshery_server/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,13 @@ date: 2025-05-29 02:08:05 +0000
status: "delivered"
---
<h4>Contributing to Meshery Server</h4> <br />
<p>

<strong>Trainer:</strong> <a href="https://layer5.io/community/members/shlok-mishra" target="_blank">Shlok Mishra</a> <br />
<strong>Technologies:</strong> Golang, Gorilla, OpenAPI Schema
</p>

<p>
This Contributor Training Series session provides a detailed walkthrough on how to contribute to the Meshery Server. Attendees were introduced to the architecture of Meshery and its key components like Meshkit, MeshSync, and <code>meshery/schemas</code>.
</p>

<p>
The session also covered important backend concepts such as custom error handling, logging mechanisms, and Meshery’s schema-driven design philosophy. Key areas to contribute, relevant repositories, and community resources were also highlighted.
</p>

You will learn to:

Expand All @@ -40,6 +35,6 @@ You will learn to:
<br />
<h4 style={{ marginBottom: "1.25rem" }}>Workshop Recording</h4>

<iframe width="50%" src="https://www.youtube.com/embed/9iRRd4RJOXE" loading="lazy" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style={{ minHeight: "315px", minWidth: "280px", margin: "auto", textAlign: "center" }} allowfullscreen></iframe>
<iframe width="50%" src="https://www.youtube.com/embed/9iRRd4RJOXE" loading="lazy" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style={{ minHeight: "315px", minWidth: "280px", margin: "auto", textAlign: "center" }} allowFullScreen></iframe>
<br />
<br />
9 changes: 2 additions & 7 deletions src/collections/workshops/2025_07_19_meshery_models/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,13 @@ date: 2025-07-19 02:08:05 +0000
status: "delivered"
---
<h4>Contributing to Meshery Models</h4> <br />
<p>

<strong>Trainer:</strong> <a href="https://layer5.io/community/members/aabid-sofi" target="_blank">Aabid Sofi</a> <br />
<strong>Technologies:</strong> All cloud native tech
</p>

<p>
This Contributor Training Series session walks you through how to contribute to Meshery Models. The session introduces the concept and purpose of Meshery Models and breaks down the elements that compose a model, including its structure, supported formats, and packaging for distribution.
</p>

<p>
Attendees gained hands-on knowledge of tools such as the Model Build Wizard and CLI-based model creation, as well as guidance on contribution areas and accessing key documentation and resources.
</p>

You will learn to:

Expand All @@ -41,6 +36,6 @@ You will learn to:
<br />
<h4 style={{ marginBottom: "1.25rem" }}>Workshop Recording</h4>

<iframe width="50%" src="https://www.youtube.com/embed/K2gmdIlGXNo" loading="lazy" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style={{ minHeight: "315px", minWidth: "280px", margin: "auto", textAlign: "center" }} allowfullscreen></iframe>
<iframe width="50%" src="https://www.youtube.com/embed/K2gmdIlGXNo" loading="lazy" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style={{ minHeight: "315px", minWidth: "280px", margin: "auto", textAlign: "center" }} allowFullScreen></iframe>
<br />
<br />
Loading