From 55a075598f9f1c0bd60f23ac136c4b41abfcc3a1 Mon Sep 17 00:00:00 2001
From: Darius Cepulis <dcepulis@mux.com>
Date: Mon, 6 Apr 2026 10:55:19 -0500
Subject: [PATCH] fix(site): true conditional rendering in FrameworkCase
 (#1223)

Co-authored-by: Claude <noreply@anthropic.com>
---
 site/src/components/docs/FrameworkCase.astro | 24 ++------------------
 1 file changed, 2 insertions(+), 22 deletions(-)

diff --git a/site/src/components/docs/FrameworkCase.astro b/site/src/components/docs/FrameworkCase.astro
index 5a01ea2e..f3058d01 100644
--- a/site/src/components/docs/FrameworkCase.astro
+++ b/site/src/components/docs/FrameworkCase.astro
@@ -11,27 +11,7 @@ const { framework } = Astro.params;
 
 // Only render if current framework matches, or if no frameworks specified (all frameworks)
 const shouldRender = !frameworks || frameworks.includes(framework as SupportedFramework);
+const html = shouldRender ? await Astro.slots.render('default') : '';
 ---
 
-{
-  /*
-    What I WANT to do is
-    ```
-    {shouldRender && <slot />}
-    ```
-
-    But I'm running into some crazy problems with hydration.
-    Putting client:* in one of these conditionals causes Astro to just give up hydrating the whole app for some reason.
-    TODO: fix this
-
-    So, while I debug those... let's do this
-  */
-}
-<div
-  class="contents"
-  hidden={!shouldRender}
-  data-search-ignore={shouldRender ? undefined : "all"}
-  data-llms-ignore={shouldRender ? undefined : "all"}
->
-  <slot />
-</div>
+{shouldRender && <Fragment set:html={html} />}