Make content of landing page visible to crawlers (#5916)

This commit is contained in:
Kamil Kisiela 2024-11-13 10:35:49 +01:00 committed by GitHub
parent e151213a68
commit 33687f4890
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 39 additions and 9 deletions

View file

@ -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>
);

View file

@ -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"

View file

@ -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>