diff --git a/website/package.json b/website/package.json index 34f1270250fcb..17b338cbec4ae 100644 --- a/website/package.json +++ b/website/package.json @@ -10,6 +10,7 @@ "start": "next start" }, "dependencies": { + "@radix-ui/react-accordion": "^1.2.2", "@theguild/components": "^7.6.0", "next": "^15.0.0", "next-sitemap": "^4.2.3", diff --git a/website/src/components/frequently-asked-questions/attach-page-faq-schema.tsx b/website/src/components/frequently-asked-questions/attach-page-faq-schema.tsx new file mode 100644 index 0000000000000..6e45816aaf1b4 --- /dev/null +++ b/website/src/components/frequently-asked-questions/attach-page-faq-schema.tsx @@ -0,0 +1,28 @@ +'use client'; + +import { useEffect } from 'react'; + +export function AttachPageFAQSchema() { + useEffect(() => { + const html = document.querySelector('html'); + + if (!html) { + // This should never happen + return; + } + + const path = window.location.pathname.replace('/graphql/hive', '/'); + + if (!html.hasAttribute('itemscope')) { + html.setAttribute('itemscope', ''); + html.setAttribute('itemtype', 'https://schema.org/FAQPage'); + + return () => { + html.removeAttribute('itemscope'); + html.removeAttribute('itemtype'); + }; + } + }, []); + + return null; +} diff --git a/website/src/components/frequently-asked-questions/index.tsx b/website/src/components/frequently-asked-questions/index.tsx new file mode 100644 index 0000000000000..fdde44a56e479 --- /dev/null +++ b/website/src/components/frequently-asked-questions/index.tsx @@ -0,0 +1,111 @@ +// TODO: Remove this module and use FrequentlyAskedQuestions from @theguild/components v8 when it's +// released and Mesh is migrated to Nextra 4. + +import { Children, ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react'; +import * as RadixAccordion from '@radix-ui/react-accordion'; +import { Anchor, CaretSlimIcon, cn, Heading } from '@theguild/components'; +import { AttachPageFAQSchema } from './attach-page-faq-schema'; +import MeshFAQ from './mesh-faq.mdx'; + +const a = (props: ComponentPropsWithoutRef<'a'>) => ( + + {props.children!} + +); + +const h2 = (props: ComponentPropsWithoutRef<'h2'>) => ( + +); + +const UnwrapChild = (props: { children?: ReactNode }) => props.children as unknown as ReactElement; + +const Accordion = (props: ComponentPropsWithoutRef<'ul'>) => ( + + + +); + +const AccordionItem = (props: ComponentPropsWithoutRef<'li'>) => { + const texts = Children.toArray(props.children).filter(child => child !== '\n'); + + if (texts.length === 0) { + return null; + } + + if (texts.length < 2) { + console.error(texts); + throw new Error(`Expected a question and an answer, got ${texts.length} items`); + } + + const [first, ...answers] = texts; + + const question = + typeof first === 'string' + ? first + : typeof first === 'object' && 'type' in first + ? (first as ReactElement<{ children?: ReactNode }>).props.children?.toString() + : null; + + if (!question) return null; + + return ( + + + + + {question} + + + + + + {answers.map((answer, i) => ( + {answer} + ))} + + + + + ); +}; + +export function FrequentlyAskedQuestions({ className }: { className?: string }) { + return ( + <> + + + + + > + ); +} diff --git a/website/src/components/frequently-asked-questions/mesh-faq.mdx b/website/src/components/frequently-asked-questions/mesh-faq.mdx new file mode 100644 index 0000000000000..b63a92e2a8c0b --- /dev/null +++ b/website/src/components/frequently-asked-questions/mesh-faq.mdx @@ -0,0 +1,11 @@ +## Frequently Asked Questions + +- What is Mesh? + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. + +- How do I use it? + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. diff --git a/website/src/components/index-page.tsx b/website/src/components/index-page.tsx index c9a772a655129..990f8bbe6d05f 100644 --- a/website/src/components/index-page.tsx +++ b/website/src/components/index-page.tsx @@ -5,6 +5,7 @@ import { ComparisonTable } from './comparison-table'; import { DatasourcesIllustration } from './datasources-illustration'; import { DatasourcesListSection } from './datasources-list-section'; import { ExamplesSection } from './examples-section'; +import { FrequentlyAskedQuestions } from './frequently-asked-questions'; import { InfoCardsSection } from './info-cards-section'; import { LandingPageContainer } from './landing-page-container'; import { ManipulateDataSection } from './manipulate-data-section'; @@ -24,7 +25,7 @@ export function IndexPage(): ReactElement { - {/* TODO: Frequently Asked Questions requires a version bump of @theguild/components */} + ); } diff --git a/yarn.lock b/yarn.lock index 0fd6e7c6e159f..84dc1acd0cad7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10913,6 +10913,59 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-accordion@npm:^1.2.2": + version: 1.2.2 + resolution: "@radix-ui/react-accordion@npm:1.2.2" + dependencies: + "@radix-ui/primitive": "npm:1.1.1" + "@radix-ui/react-collapsible": "npm:1.1.2" + "@radix-ui/react-collection": "npm:1.1.1" + "@radix-ui/react-compose-refs": "npm:1.1.1" + "@radix-ui/react-context": "npm:1.1.1" + "@radix-ui/react-direction": "npm:1.1.0" + "@radix-ui/react-id": "npm:1.1.0" + "@radix-ui/react-primitive": "npm:2.0.1" + "@radix-ui/react-use-controllable-state": "npm:1.1.0" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10c0/2279c24de3296714ad14e0b83e7ea55f1b0d1585650b48ddb9295a44e6f0ab4e860526e9263c8f18cbdfa702648644d1bfa50f18c22e6f9de303b4b19ebef63a + languageName: node + linkType: hard + +"@radix-ui/react-collapsible@npm:1.1.2": + version: 1.1.2 + resolution: "@radix-ui/react-collapsible@npm:1.1.2" + dependencies: + "@radix-ui/primitive": "npm:1.1.1" + "@radix-ui/react-compose-refs": "npm:1.1.1" + "@radix-ui/react-context": "npm:1.1.1" + "@radix-ui/react-id": "npm:1.1.0" + "@radix-ui/react-presence": "npm:1.1.2" + "@radix-ui/react-primitive": "npm:2.0.1" + "@radix-ui/react-use-controllable-state": "npm:1.1.0" + "@radix-ui/react-use-layout-effect": "npm:1.1.0" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10c0/8a725539c0c259ea53a0e35d4ddd3acca42cab5113fd537758450ad1e76f0b757423f18aca29364f963bef4f0624d57feb32bf9d12a3ea6b2c084b523ba65205 + languageName: node + linkType: hard + "@radix-ui/react-collection@npm:1.1.1": version: 1.1.1 resolution: "@radix-ui/react-collection@npm:1.1.1" @@ -16021,21 +16074,7 @@ __metadata: languageName: node linkType: hard -"browserslist@npm:^4.0.0, browserslist@npm:^4.18.1, browserslist@npm:^4.19.1, browserslist@npm:^4.21.4, browserslist@npm:^4.23.3, browserslist@npm:^4.24.0": - version: 4.24.4 - resolution: "browserslist@npm:4.24.4" - dependencies: - caniuse-lite: "npm:^1.0.30001688" - electron-to-chromium: "npm:^1.5.73" - node-releases: "npm:^2.0.19" - update-browserslist-db: "npm:^1.1.1" - bin: - browserslist: cli.js - checksum: 10c0/db7ebc1733cf471e0b490b4f47e3e2ea2947ce417192c9246644e92c667dd56a71406cc58f62ca7587caf828364892e9952904a02b7aead752bc65b62a37cfe9 - languageName: node - linkType: hard - -"browserslist@npm:^4.24.2": +"browserslist@npm:^4.0.0, browserslist@npm:^4.18.1, browserslist@npm:^4.19.1, browserslist@npm:^4.21.4, browserslist@npm:^4.23.3, browserslist@npm:^4.24.0, browserslist@npm:^4.24.2": version: 4.24.3 resolution: "browserslist@npm:4.24.3" dependencies: @@ -36935,6 +36974,7 @@ __metadata: version: 0.0.0-use.local resolution: "website@workspace:website" dependencies: + "@radix-ui/react-accordion": "npm:^1.2.2" "@theguild/components": "npm:^7.6.0" "@theguild/tailwind-config": "npm:0.6.2" "@types/node": "npm:22.10.6"
{answer}