[Workshops] Fix React hydration mismatch errors on workshop pages

[tejaswiverma121-byte]

Description

This PR fixes #8088

Root Cause

Workshop pages (/learn/workshops/...) were throwing multiple React hydration mismatch errors (Minified React error #418 and Minified React error #423) during client-side hydration:

1. Nested <p> elements from MDX: Explicit manual <p> and </p> tags wrapped around Markdown paragraphs caused the MDX v3 compiler to generate <p><_components.p>...</_components.p></p>. In standard HTML, <p> cannot appear as a descendant of <p>. The browser's HTML parser auto-closed outer paragraph tags on initial page load (<p></p><p>...</p>), leading to a DOM structure mismatch between SSR HTML and the client React tree.
2. Invalid JSX iframe attributes: Embedded YouTube <iframe> elements used HTML lowercase frameborder="0" and boolean allowfullscreen instead of standard React JSX properties frameBorder="0" and allowFullScreen.

Changes Made

• Removed manual redundant <p> tags from all 8 workshop collection files under src/collections/workshops/, allowing MDX to parse paragraphs naturally into valid, unnested HTML:
  • src/collections/workshops/2025_07_19_meshery_models/index.mdx
  • src/collections/workshops/2025_05_29_meshery_server/index.mdx
  • src/collections/workshops/2025_05_15_meshery_ui/index.mdx
  • src/collections/workshops/2025_05_08_meshery_ui_e2e/index.mdx
  • src/collections/workshops/2025_04_30_meshery_cli/index.mdx
  • src/collections/workshops/2025_04_24_meshery_build_and_release/index.mdx
  • src/collections/workshops/2025_04_17_meshery_cli_e2e/index.mdx
  • src/collections/workshops/2025_04_10_meshery_docs/index.mdx
• Updated <iframe> attributes across all workshop recordings to standard JSX camelCase properties (frameBorder="0" and allowFullScreen).

Notes for Reviewers

• Verified locally with @mdx-js/mdx compiler and browser testing: 0 hydration errors, 0 DOM nesting warnings, and identical visual appearance.

Signed commits

• Yes, I signed my commits.

Summary by CodeRabbit

• Bug Fixes
  • Improved rendering consistency for embedded workshop videos by standardizing video settings across workshop pages.
  • Refined workshop content formatting and spacing while preserving existing trainer, technology, description, and session information.
  • Standardized the presentation of workshop details and descriptions across multiple pages for a more consistent reading experience.

[coderabbitai]

Understand this PR’s impact

Explore downstream dependencies and potential security impact with Blast Radius.

View blast radius →

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: 5d2733b1-e0c3-4a54-90e8-68b3f7cb7334

📥 Commits

Reviewing files that changed from the base of the PR and between 0b1bf84 and 9f68968.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: b8e0c794-14c9-4a9f-ad40-9a0ce270dcb2

📥 Commits

Reviewing files that changed from the base of the PR and between e51d6a0 and 12900ca.

📒 Files selected for processing (2)

• src/collections/workshops/2025_04_17_meshery_cli_e2e/index.mdx
• src/collections/workshops/2025_04_24_meshery_build_and_release/index.mdx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/collections/workshops/2025_04_17_meshery_cli_e2e/index.mdx

Included review availability: Your plan provides up to 4 included reviews per hour; 3 remain after this review.

---

📝 Walkthrough

Walkthrough

Eight workshop MDX pages remove paragraph wrappers, reformat workshop content, and rename iframe attributes to JSX camelCase forms. Text content and iframe sources remain unchanged.

Changes

Workshop MDX markup

Layer / File(s)	Summary
Workshop content markup src/collections/workshops/2025_04_10_meshery_docs/index.mdx, src/collections/workshops/2025_04_17_meshery_cli_e2e/index.mdx, src/collections/workshops/2025_04_24_meshery_build_and_release/index.mdx, src/collections/workshops/2025_04_30_meshery_cli/index.mdx, src/collections/workshops/2025_05_08_meshery_ui_e2e/index.mdx, src/collections/workshops/2025_05_15_meshery_ui/index.mdx, src/collections/workshops/2025_05_29_meshery_server/index.mdx, src/collections/workshops/2025_07_19_meshery_models/index.mdx	Trainer, technology, and description content no longer uses the previous paragraph wrappers. The Meshery Docs list was also reformatted.
Embedded media and workshop links src/collections/workshops/*/index.mdx	Workshop recording iframes now use frameBorder and allowFullScreen instead of lowercase HTML attribute names.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix · Severity of issue fixed: Medium

Suggested reviewers: maanvi212006

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: fixing React hydration mismatch errors on workshop pages.
Linked Issues check	✅ Passed	Issue #8088 requires the workshop page to hydrate without React mismatch errors. The PR updates the affected Meshery Server workshop and seven related workshop MDX files. It removes redundant paragrap…
Out of Scope Changes check	✅ Passed	The changes stay within workshop page markup. The paragraph and iframe updates directly support the hydration fix in issue #8088. No unrelated changes are identified in the reviewed summary.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Preview deployment for PR #8101 removed.

This PR preview was automatically pruned because we keep only the 3 most recently updated previews on GitHub Pages to stay within deployment size limits.

If needed, push a new commit to this PR to generate a fresh preview.

[yi-nuo426]

Review: Approve

I verified this fix compiles and behaves as described. Nothing blocking.

Verified

• Reproduced the root cause with the repo's own @mdx-js/mdx (v3): the old multi-line <p> blocks compile to <p><_components.p>...</_components.p></p> - a nested <p>, which is invalid HTML. The browser auto-closes the outer tag, so SSR HTML and the client tree diverge and hydration fails with #418. The PR description is accurate.
• The new markup compiles flat: bare paragraphs become a single <_components.p>, and the unwrapped trainer lines (<strong>/<a>/<br /> runs) also compile to one flat paragraph with no new nesting. No p override exists in MDXProvider (root-wrapper.js), so default <p> rendering applies - consistent and safe.
• frameBorder / allowFullScreen are the correct JSX props.
• Coverage is complete: all 8 files under src/collections/workshops/ are fixed, and none still contain <p>, frameborder, or allowfullscreen on this branch.
• Content preserved: prose and iframe src values are unchanged; the <ul> reformat in the Meshery Docs file is whitespace-only in effect.
• Checks are green (build, DCO, triage).

Non-blocking suggestions (follow-ups, not required here)

1. Same bug patterns exist outside workshops and can throw the same hydration errors. Lowercase frameborder / allowfullscreen remain in e.g. src/collections/blog/2021/2021-10-09-an-introduction-to-meshery/index.mdx, src/collections/service-mesh-workshops/2021_02_22-istiocon/index.mdx, plus files under events, news, and resources; manual multi-line <p> blocks also appear in several blog and integration files. Suggest a follow-up issue to sweep these.
2. Nit: the recording iframes have no title attribute (accessibility). Consider title="Workshop Recording: <topic>" if these lines are touched again.
3. Nit (pre-existing): target="_blank" links in these MDX files lack rel="noopener noreferrer", while the workshop template itself uses rel="noreferrer" (src/sections/Learn/Workshop-single/index.js). Worth a follow-up sweep.
4. Optional: frameBorder="0" is deprecated in HTML5; the existing inline style prop could carry border: "0" instead. Fine to leave as-is.

LGTM - thanks for the precise root-cause writeup.

[tejaswiverma121-byte]

Thank you for the detailed review and thorough verification, @yi-nuo426!

I really appreciate the feedback and non-blocking suggestions. Once this is merged, I'd be happy to open a follow-up issue to sweep and fix the remaining files across the blog, events, and resources collections as you suggested!

[tejaswiverma121-byte]

@Maanvi212006 i have updated the changes as per requested and let me know should i add this pr into agenda item too ?

[Maanvi212006]

LGTM!