Skip to content

Commit f029074

Browse files
hasparushasparus
committed
Add FAQs component, no content
1 parent 6b515b6 commit f029074

File tree

6 files changed

+207
-1
lines changed

6 files changed

+207
-1
lines changed

‎website/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"start": "next start"
1111
},
1212
"dependencies": {
13+
"@radix-ui/react-accordion": "^1.2.2",
1314
"@theguild/components": "^7.4.0",
1415
"next": "^15.0.0",
1516
"next-sitemap": "^4.2.3",

‎website/src/components/frequently-asked-questions/attach-page-faq-schema.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
'use client';
2+
3+
import { useEffect } from 'react';
4+
5+
export function AttachPageFAQSchema() {
6+
useEffect(() => {
7+
const html = document.querySelector('html');
8+
9+
if (!html) {
10+
// This should never happen
11+
return;
12+
}
13+
14+
const path = window.location.pathname.replace('/graphql/hive', '/');
15+
16+
if (!html.hasAttribute('itemscope')) {
17+
html.setAttribute('itemscope', '');
18+
html.setAttribute('itemtype', 'https://schema.org/FAQPage');
19+
20+
return () => {
21+
html.removeAttribute('itemscope');
22+
html.removeAttribute('itemtype');
23+
};
24+
}
25+
}, []);
26+
27+
return null;
28+
}

‎website/src/components/frequently-asked-questions/index.tsx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
// TODO: Remove this module and use FrequentlyAskedQuestions from @theguild/components v8 when it's
2+
// released and Mesh is migrated to Nextra 4.
3+
4+
import { Children, ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
5+
import * as RadixAccordion from '@radix-ui/react-accordion';
6+
import { Anchor, CaretSlimIcon, cn, Heading } from '@theguild/components';
7+
import { AttachPageFAQSchema } from './attach-page-faq-schema';
8+
import MeshFAQ from './mesh-faq.mdx';
9+
10+
const a = (props: ComponentPropsWithoutRef<'a'>) => (
11+
<Anchor
12+
className="hive-focus rounded underline hover:text-blue-700"
13+
{...props}
14+
href={props.href!}
15+
>
16+
{props.children!}
17+
</Anchor>
18+
);
19+
20+
const h2 = (props: ComponentPropsWithoutRef<'h2'>) => (
21+
<Heading as="h2" size="md" className="basis-1/2" {...props} />
22+
);
23+
24+
const UnwrapChild = (props: { children?: ReactNode }) => props.children as unknown as ReactElement;
25+
26+
const Accordion = (props: ComponentPropsWithoutRef<'ul'>) => (
27+
<RadixAccordion.Root asChild type="single" collapsible>
28+
<ul className="divide-beige-400 basis-1/2 divide-y max-xl:grow" {...props} />
29+
</RadixAccordion.Root>
30+
);
31+
32+
const AccordionItem = (props: ComponentPropsWithoutRef<'li'>) => {
33+
const texts = Children.toArray(props.children).filter(child => child !== '\n');
34+
35+
if (texts.length === 0) {
36+
return null;
37+
}
38+
39+
if (texts.length < 2) {
40+
console.error(texts);
41+
throw new Error(`Expected a question and an answer, got ${texts.length} items`);
42+
}
43+
44+
const [first, ...answers] = texts;
45+
46+
const question =
47+
typeof first === 'string'
48+
? first
49+
: typeof first === 'object' && 'type' in first
50+
? (first as ReactElement<{ children?: ReactNode }>).props.children?.toString()
51+
: null;
52+
53+
if (!question) return null;
54+
55+
return (
56+
<RadixAccordion.Item
57+
asChild
58+
value={question}
59+
className="rdx-state-open:pb-4 relative pb-2 focus-within:z-10"
60+
itemScope
61+
itemProp="mainEntity"
62+
itemType="https://schema.org/Question"
63+
>
64+
<li>
65+
<RadixAccordion.Header>
66+
<RadixAccordion.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">
67+
<span itemProp="name">{question}</span>
68+
<CaretSlimIcon className="size-5 [[data-state='open']_&]:[transform:rotateX(180deg)]" />
69+
</RadixAccordion.Trigger>
70+
</RadixAccordion.Header>
71+
<RadixAccordion.Content
72+
forceMount
73+
className="overflow-hidden bg-white text-green-800 data-[state=closed]:hidden"
74+
itemScope
75+
itemProp="acceptedAnswer"
76+
itemType="https://schema.org/Answer"
77+
>
78+
<div itemProp="text" className="space-y-2">
79+
{answers.map((answer, i) => (
80+
<p key={i}>{answer}</p>
81+
))}
82+
</div>
83+
</RadixAccordion.Content>
84+
</li>
85+
</RadixAccordion.Item>
86+
);
87+
};
88+
89+
export function FrequentlyAskedQuestions({ className }: { className?: string }) {
90+
return (
91+
<>
92+
<AttachPageFAQSchema />
93+
<section
94+
className={cn(
95+
className,
96+
'text-green-1000 flex flex-col gap-x-6 gap-y-2 px-4 py-6 md:flex-row md:px-10 lg:gap-x-24 lg:px-[120px] lg:py-24',
97+
)}
98+
>
99+
<MeshFAQ
100+
components={{
101+
a,
102+
h2,
103+
p: UnwrapChild,
104+
ul: Accordion,
105+
li: AccordionItem,
106+
}}
107+
/>
108+
</section>
109+
</>
110+
);
111+
}

‎website/src/components/frequently-asked-questions/mesh-faq.mdx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
## Frequently Asked Questions
2+
3+
- What is Mesh?
4+
5+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
6+
labore et dolore magna aliqua.
7+
8+
- How do I use it?
9+
10+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
11+
labore et dolore magna aliqua.

‎website/src/components/index-page.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { ComparisonTable } from './comparison-table';
55
import { DatasourcesIllustration } from './datasources-illustration';
66
import { DatasourcesListSection } from './datasources-list-section';
77
import { ExamplesSection } from './examples-section';
8+
import { FrequentlyAskedQuestions } from './frequently-asked-questions';
89
import { InfoCardsSection } from './info-cards-section';
910
import { LandingPageContainer } from './landing-page-container';
1011
import { ManipulateDataSection } from './manipulate-data-section';
@@ -24,7 +25,7 @@ export function IndexPage(): ReactElement {
2425
<RunAnywhereSection className="mx-4 mt-6 md:mx-6" />
2526
<CapabilitiesSection className="mx-4 mt-6 md:mx-6" />
2627
<ToolsAndLibrariesCards className="mx-4 md:mx-6" />
27-
{/* TODO: Frequently Asked Questions requires a version bump of @theguild/components */}
28+
<FrequentlyAskedQuestions className="mx-4 mt-6 md:mx-6" />
2829
</LandingPageContainer>
2930
);
3031
}

‎yarn.lock‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10823,6 +10823,59 @@ __metadata:
1082310823
languageName: node
1082410824
linkType: hard
1082510825

10826+
"@radix-ui/react-accordion@npm:^1.2.2":
10827+
version: 1.2.2
10828+
resolution: "@radix-ui/react-accordion@npm:1.2.2"
10829+
dependencies:
10830+
"@radix-ui/primitive": "npm:1.1.1"
10831+
"@radix-ui/react-collapsible": "npm:1.1.2"
10832+
"@radix-ui/react-collection": "npm:1.1.1"
10833+
"@radix-ui/react-compose-refs": "npm:1.1.1"
10834+
"@radix-ui/react-context": "npm:1.1.1"
10835+
"@radix-ui/react-direction": "npm:1.1.0"
10836+
"@radix-ui/react-id": "npm:1.1.0"
10837+
"@radix-ui/react-primitive": "npm:2.0.1"
10838+
"@radix-ui/react-use-controllable-state": "npm:1.1.0"
10839+
peerDependencies:
10840+
"@types/react": "*"
10841+
"@types/react-dom": "*"
10842+
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
10843+
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
10844+
peerDependenciesMeta:
10845+
"@types/react":
10846+
optional: true
10847+
"@types/react-dom":
10848+
optional: true
10849+
checksum: 10c0/2279c24de3296714ad14e0b83e7ea55f1b0d1585650b48ddb9295a44e6f0ab4e860526e9263c8f18cbdfa702648644d1bfa50f18c22e6f9de303b4b19ebef63a
10850+
languageName: node
10851+
linkType: hard
10852+
10853+
"@radix-ui/react-collapsible@npm:1.1.2":
10854+
version: 1.1.2
10855+
resolution: "@radix-ui/react-collapsible@npm:1.1.2"
10856+
dependencies:
10857+
"@radix-ui/primitive": "npm:1.1.1"
10858+
"@radix-ui/react-compose-refs": "npm:1.1.1"
10859+
"@radix-ui/react-context": "npm:1.1.1"
10860+
"@radix-ui/react-id": "npm:1.1.0"
10861+
"@radix-ui/react-presence": "npm:1.1.2"
10862+
"@radix-ui/react-primitive": "npm:2.0.1"
10863+
"@radix-ui/react-use-controllable-state": "npm:1.1.0"
10864+
"@radix-ui/react-use-layout-effect": "npm:1.1.0"
10865+
peerDependencies:
10866+
"@types/react": "*"
10867+
"@types/react-dom": "*"
10868+
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
10869+
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
10870+
peerDependenciesMeta:
10871+
"@types/react":
10872+
optional: true
10873+
"@types/react-dom":
10874+
optional: true
10875+
checksum: 10c0/8a725539c0c259ea53a0e35d4ddd3acca42cab5113fd537758450ad1e76f0b757423f18aca29364f963bef4f0624d57feb32bf9d12a3ea6b2c084b523ba65205
10876+
languageName: node
10877+
linkType: hard
10878+
1082610879
"@radix-ui/react-collection@npm:1.1.1":
1082710880
version: 1.1.1
1082810881
resolution: "@radix-ui/react-collection@npm:1.1.1"
@@ -36794,6 +36847,7 @@ __metadata:
3679436847
version: 0.0.0-use.local
3679536848
resolution: "website@workspace:website"
3679636849
dependencies:
36850+
"@radix-ui/react-accordion": "npm:^1.2.2"
3679736851
"@theguild/components": "npm:^7.4.0"
3679836852
"@theguild/tailwind-config": "npm:0.6.2"
3679936853
"@types/node": "npm:22.10.2"

0 commit comments

Comments
 (0)