From 33687f4890e4d08d12856cd9375b55678cf4ac9e Mon Sep 17 00:00:00 2001
From: Kamil Kisiela <kamil.kisiela@gmail.com>
Date: Wed, 13 Nov 2024 10:35:49 +0100
Subject: [PATCH] Make content of landing page visible to crawlers (#5916)

---
 .../components/ecosystem-management/index.tsx | 17 +++++++++++---
 .../web/docs/src/components/feature-tabs.tsx  | 22 ++++++++++++++++---
 .../frequently-asked-questions/index.tsx      |  9 +++++---
 3 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/packages/web/docs/src/components/ecosystem-management/index.tsx b/packages/web/docs/src/components/ecosystem-management/index.tsx
index c0cfa1335..577ae0be9 100644
--- a/packages/web/docs/src/components/ecosystem-management/index.tsx
+++ b/packages/web/docs/src/components/ecosystem-management/index.tsx
@@ -285,9 +285,20 @@ function Illustration(props: { className?: string }) {
       <p className={cn('relative text-white/80', styles.text)}>
         {/* We use the longest text to ensure we have enough space. */}
         <span className="invisible">{longestEdgeText}</span>
-        <span className="absolute inset-0">
-          {highlightedEdge !== null ? edgeTexts[highlightedEdge - 1] : null}
-        </span>
+        {edgeTexts.map((text, i) => {
+          return (
+            <span
+              key={i}
+              className={cn(
+                'absolute inset-0',
+                // Makes it accessible by crawlers.
+                highlightedEdge !== null && highlightedEdge - 1 === i ? 'visible' : 'invisible',
+              )}
+            >
+              {text}
+            </span>
+          );
+        })}
       </p>
     </div>
   );
diff --git a/packages/web/docs/src/components/feature-tabs.tsx b/packages/web/docs/src/components/feature-tabs.tsx
index 95947f27c..5f46b79c8 100644
--- a/packages/web/docs/src/components/feature-tabs.tsx
+++ b/packages/web/docs/src/components/feature-tabs.tsx
@@ -128,7 +128,13 @@ export function FeatureTabs({ className }: { className?: string }) {
         </Tabs.List>
         <div className="grid grid-cols-1 lg:grid-cols-2">
           <>
-            <Tabs.Content value="Schema Registry" tabIndex={-1}>
+            <Tabs.Content
+              value="Schema Registry"
+              // Make it accessible to crawlers, otherwise there's no DOM element to index
+              forceMount
+              className="data-[state=inactive]:hidden"
+              tabIndex={-1}
+            >
               <Feature
                 title="Schema Registry"
                 documentationLink="/docs/schema-registry"
@@ -137,7 +143,12 @@ export function FeatureTabs({ className }: { className?: string }) {
                 setActiveHighlight={setActiveHighlight}
               />
             </Tabs.Content>
-            <Tabs.Content value="GraphQL Observability" tabIndex={-1}>
+            <Tabs.Content
+              value="GraphQL Observability"
+              forceMount
+              className="data-[state=inactive]:hidden"
+              tabIndex={-1}
+            >
               <Feature
                 title="GraphQL Observability"
                 documentationLink="/docs/schema-registry/usage-reporting"
@@ -146,7 +157,12 @@ export function FeatureTabs({ className }: { className?: string }) {
                 setActiveHighlight={setActiveHighlight}
               />
             </Tabs.Content>
-            <Tabs.Content value="Schema Management" tabIndex={-1}>
+            <Tabs.Content
+              value="Schema Management"
+              forceMount
+              className="data-[state=inactive]:hidden"
+              tabIndex={-1}
+            >
               <Feature
                 title="Schema Management"
                 documentationLink="/docs/schema-registry/schema-policy"
diff --git a/packages/web/docs/src/components/frequently-asked-questions/index.tsx b/packages/web/docs/src/components/frequently-asked-questions/index.tsx
index 1a7bb2a48..16bcde4fe 100644
--- a/packages/web/docs/src/components/frequently-asked-questions/index.tsx
+++ b/packages/web/docs/src/components/frequently-asked-questions/index.tsx
@@ -54,16 +54,19 @@ export function FrequentlyAskedQuestions({ className }: { className?: string })
               <Accordion.Item
                 asChild
                 value={question}
-                className="rdx-state-open:pb-4 relative pb-0 transition-all duration-500 ease-[ease] focus-within:z-10"
+                className="rdx-state-open:pb-4 relative pb-0 focus-within:z-10"
               >
                 <li>
                   <Accordion.Header>
                     <Accordion.Trigger className="hive-focus hover:bg-beige-100/80 -mx-2 my-1 flex w-[calc(100%+1rem)] items-center justify-between rounded-xl bg-white px-2 py-3 text-left font-medium transition-colors duration-[.8s] md:my-2 md:py-4">
                       {question}
-                      <ChevronDownIcon className="size-5 transition duration-500 ease-in [[data-state='open']_&]:[transform:rotateX(180deg)]" />
+                      <ChevronDownIcon className="size-5 [[data-state='open']_&]:[transform:rotateX(180deg)]" />
                     </Accordion.Trigger>
                   </Accordion.Header>
-                  <Accordion.Content className="rdx-state-open:motion-safe:animate-accordion-down rdx-state-closed:motion-safe:animate-accordion-up overflow-hidden bg-white text-green-800 transition-all">
+                  <Accordion.Content
+                    forceMount
+                    className="overflow-hidden bg-white text-green-800 data-[state=closed]:hidden"
+                  >
                     {answer}
                   </Accordion.Content>
                 </li>