diff --git a/.changeset/@theguild_components-1927-dependencies.md b/.changeset/@theguild_components-1927-dependencies.md new file mode 100644 index 000000000..8854fd6e2 --- /dev/null +++ b/.changeset/@theguild_components-1927-dependencies.md @@ -0,0 +1,7 @@ +--- +"@theguild/components": patch +--- +dependencies updates: + - Added dependency [`@radix-ui/react-accordion@^1.2.2` ↗︎](https://www.npmjs.com/package/@radix-ui/react-accordion/v/1.2.2) (to `dependencies`) + - Added dependency [`@radix-ui/react-icons@^1.3.2` ↗︎](https://www.npmjs.com/package/@radix-ui/react-icons/v/1.3.2) (to `dependencies`) + - Added dependency [`unist-util-visit@5.0.0` ↗︎](https://www.npmjs.com/package/unist-util-visit/v/5.0.0) (to `dependencies`) diff --git a/.changeset/three-jeans-impress.md b/.changeset/three-jeans-impress.md new file mode 100644 index 000000000..6708861b4 --- /dev/null +++ b/.changeset/three-jeans-impress.md @@ -0,0 +1,9 @@ +--- +'@theguild/components': minor +--- + +- add `` component +- add `` component +- add `` component +- move `` styles from Tailwind CSS classes to `style.css` because in Yoga we use `` +- add `remarkLinkRewrite` plugin diff --git a/packages/components/package.json b/packages/components/package.json index 3f49f8275..d6f887222 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -52,6 +52,8 @@ "dependencies": { "@giscus/react": "3.1.0", "@next/bundle-analyzer": "15.1.4", + "@radix-ui/react-accordion": "^1.2.2", + "@radix-ui/react-icons": "^1.3.2", "@radix-ui/react-navigation-menu": "^1.2.0", "clsx": "2.1.1", "fuzzy": "0.1.3", @@ -60,13 +62,15 @@ "react-paginate": "8.2.0", "react-player": "2.16.0", "semver": "^7.3.8", - "tailwind-merge": "^2.5.2" + "tailwind-merge": "^2.5.2", + "unist-util-visit": "5.0.0" }, "devDependencies": { - "@svgr/babel-plugin-remove-jsx-attribute": "^8.0.0", + "@svgr/plugin-svgo": "^8.1.0", "@theguild/editor": "workspace:*", "@theguild/tailwind-config": "0.6.2", "@types/dedent": "0.7.2", + "@types/mdast": "4.0.4", "@types/react": "18.3.18", "@types/react-dom": "18.3.5", "@types/semver": "7.5.8", diff --git a/packages/components/src/components/comparison-table/index.tsx b/packages/components/src/components/comparison-table/index.tsx new file mode 100644 index 000000000..9b376cbcd --- /dev/null +++ b/packages/components/src/components/comparison-table/index.tsx @@ -0,0 +1,45 @@ +import { ComponentProps, FC } from 'react'; +import { cn } from '@theguild/components'; + +const Table: FC> = ({ className, ...props }) => { + return ( + + ); +}; + +const TableRow: FC & { highlight?: boolean }> = ({ + highlight, + className, + ...props +}) => { + return ; +}; + +const cellStyle = cn( + 'border border-green-200 p-4 first:border-l-0 last:border-r-0', + '[tbody_&]:border-b-0 [thead_&]:border-t-0', + 'first:sticky', + 'first:left-0', + 'max-sm:first:drop-shadow-2xl', + 'first:bg-[rgb(var(--nextra-bg))]', +); + +const TableHeader: FC> = ({ className, ...props }) => { + return
; +}; + +const TableCell: FC> = ({ className, ...props }) => { + return ; +}; + +export const ComparisonTable = Object.assign(Table, { + Row: TableRow, + Header: TableHeader, + Cell: TableCell, +}); diff --git a/packages/components/src/components/explore-main-product-cards.tsx b/packages/components/src/components/explore-main-product-cards.tsx index c666e12eb..8f92daaa0 100644 --- a/packages/components/src/components/explore-main-product-cards.tsx +++ b/packages/components/src/components/explore-main-product-cards.tsx @@ -29,7 +29,7 @@ export function ExploreMainProductCards({ Learn more diff --git a/packages/components/src/components/faq/attach-page-faq-schema.ts b/packages/components/src/components/faq/attach-page-faq-schema.ts new file mode 100644 index 000000000..a7fb88876 --- /dev/null +++ b/packages/components/src/components/faq/attach-page-faq-schema.ts @@ -0,0 +1,23 @@ +'use client'; + +import { FC, useEffect } from 'react'; +import { usePathname } from 'next/navigation'; + +export const AttachPageFAQSchema: FC<{ faqPages: string[] }> = ({ faqPages }) => { + const pathname = usePathname(); + + useEffect(() => { + const html = document.querySelector('html')!; + if (faqPages.includes(pathname) && !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/packages/components/src/components/faq/index.tsx b/packages/components/src/components/faq/index.tsx new file mode 100644 index 000000000..c793806f4 --- /dev/null +++ b/packages/components/src/components/faq/index.tsx @@ -0,0 +1,122 @@ +import { + Children, + cloneElement, + ComponentProps, + ComponentPropsWithoutRef, + FC, + ReactElement, + ReactNode, +} from 'react'; +import * as RadixAccordion from '@radix-ui/react-accordion'; +import { ChevronDownIcon } from '@radix-ui/react-icons'; +import { cn } from '../../cn'; +import { Anchor } from '../anchor'; +import { Heading } from '../heading'; +import { AttachPageFAQSchema } from './attach-page-faq-schema'; + +const UnwrapChild: FC<{ children?: ReactNode }> = props => props.children; + +const a: FC> = props => ( + + {props.children} + +); + +const h2: FC> = props => ( + +); + +export const FrequentlyAskedQuestions: FC< + ComponentProps & { + className?: string; + children: ReactElement; + } +> = ({ className, faqPages, children }) => { + return ( +
+ + {cloneElement(children, { + components: { + a, + h2, + p: UnwrapChild, + ul: Accordion, + li: AccordionItem, + }, + })} +
+ ); +}; + +const Accordion: FC> = props => ( + +
    + +); + +const AccordionItem: FC> = props => { + const texts = Children.toArray(props.children).filter(child => child !== '\n'); + + if (texts.length === 0) { + return null; + } + + if (texts.length < 2) { + // eslint-disable-next-line no-console + 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.props.children + : null; + + if (!question) return null; + + return ( + +
  • + + + {question} + + + + +
    + {answers.map((answer, i) => ( +

    {answer}

    + ))} +
    +     +
    • +     + ); +}; diff --git a/packages/components/src/components/giscus.tsx b/packages/components/src/components/giscus.tsx index 7a350d9d6..8408b642d 100644 --- a/packages/components/src/components/giscus.tsx +++ b/packages/components/src/components/giscus.tsx @@ -2,14 +2,13 @@ import { FC } from 'react'; import { useTheme } from 'nextra-theme-docs'; -import { default as _Giscus, GiscusProps } from '@giscus/react'; +import { default as Giscus_, GiscusProps } from '@giscus/react'; -export const Giscus: FC = props => { +export const Giscus: FC< + Omit & { + mapping?: GiscusProps['mapping']; + } +> = props => { const { resolvedTheme } = useTheme(); - return ( - <> -
    - <_Giscus theme={resolvedTheme} {...props} /> - - ); + return ; }; diff --git a/packages/components/src/components/hive-navigation/index.tsx b/packages/components/src/components/hive-navigation/index.tsx index 3599d1811..1a59a4811 100644 --- a/packages/components/src/components/hive-navigation/index.tsx +++ b/packages/components/src/components/hive-navigation/index.tsx @@ -5,6 +5,7 @@ import React, { FC, forwardRef, Fragment, + ReactElement, ReactNode, useEffect, useRef, @@ -55,6 +56,7 @@ export type HiveNavigationProps = { logo?: ReactNode; navLinks?: { href: string; children: ReactNode }[]; developerMenu: DeveloperMenuProps['developerMenu']; + search?: ReactElement; searchProps?: ComponentProps; }; @@ -83,7 +85,7 @@ export function HiveNavigation({ }, ], developerMenu, - searchProps, + search = , }: HiveNavigationProps) { const containerRef = useRef(null!); @@ -152,10 +154,7 @@ export function HiveNavigation({ {children} - + {search} + diff --git a/packages/components/src/components/index.ts b/packages/components/src/components/index.ts index 4c6a43fff..f30520db4 100644 --- a/packages/components/src/components/index.ts +++ b/packages/components/src/components/index.ts @@ -32,3 +32,5 @@ export { Giscus } from './giscus'; export * from './product-card'; export * from './version-dropdown'; export * from './dropdown'; +export { FrequentlyAskedQuestions } from './faq'; +export { ComparisonTable } from './comparison-table'; diff --git a/packages/components/src/components/legacy-package-cmd.tsx b/packages/components/src/components/legacy-package-cmd.tsx index 1dc7c3f2b..a19b639e2 100644 --- a/packages/components/src/components/legacy-package-cmd.tsx +++ b/packages/components/src/components/legacy-package-cmd.tsx @@ -76,7 +76,7 @@ export const LegacyPackageCmd = ({ 
                 
               {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
-              {commands[index]}
+              {commands[index]}
    diff --git a/packages/components/src/server/body.client.tsx b/packages/components/src/server/body.client.tsx new file mode 100644 index 000000000..c569a33e3 --- /dev/null +++ b/packages/components/src/server/body.client.tsx @@ -0,0 +1,15 @@ +'use client'; + +import { FC, ReactNode } from 'react'; +import { usePathname } from 'next/navigation'; + +export const Body: FC<{ + lightOnlyPages: string[]; + children: ReactNode; +}> = ({ lightOnlyPages, children }) => { + const pathname = usePathname(); + + const isLightOnlyPage = lightOnlyPages.includes(pathname); + + return {children}; +}; diff --git a/packages/components/src/server/index.ts b/packages/components/src/server/index.ts index ad75b93f9..91bcd3ba9 100644 --- a/packages/components/src/server/index.ts +++ b/packages/components/src/server/index.ts @@ -14,7 +14,9 @@ export { } from 'nextra/page-map'; export { evaluate } from 'nextra/evaluate'; export { fetchPackageInfo } from './npm.js'; -export { sharedMetaItems } from './shared-meta-items'; +export { sharedMetaItems } from './shared-meta-items.js'; +export { Body } from './body.client.js'; +export { remarkLinkRewrite } from './remark-link-rewrite.js'; /** * Contain `getPageMap` import which imports `metadata` from pages, in case importing from diff --git a/packages/components/src/server/next.config.ts b/packages/components/src/server/next.config.ts index 9897d8015..6a7405082 100644 --- a/packages/components/src/server/next.config.ts +++ b/packages/components/src/server/next.config.ts @@ -72,7 +72,7 @@ const rehypeCheckFrontMatter: Plugin<[], any> = () => (ast, file) => { } }; -export const defaultNextraOptions: NextraConfig = { +export const defaultNextraOptions = { defaultShowCopyCode: true, whiteListTagsStyling: ['iframe', 'video', 'source'], search: { @@ -83,7 +83,7 @@ export const defaultNextraOptions: NextraConfig = { // Should be rehype since frontMatter is attached in remark plugins rehypePlugins: process.env.NODE_ENV === 'production' ? [rehypeCheckFrontMatter] : [], }, -}; +} satisfies NextraConfig; // this won't be emitted if it's inline in parens export interface WithGuildDocsOptions extends NextConfig { diff --git a/packages/components/src/server/remark-link-rewrite.ts b/packages/components/src/server/remark-link-rewrite.ts new file mode 100644 index 000000000..af1c0ccc9 --- /dev/null +++ b/packages/components/src/server/remark-link-rewrite.ts @@ -0,0 +1,21 @@ +import { Root } from 'mdast'; +import { Plugin } from 'unified'; +import { visit } from 'unist-util-visit'; + +const EXTERNAL_URL_RE = /^https?:\/\//; + +export type RemarkLinkRewriteOptions = { + pattern: RegExp; + replace: string; +}; + +export const remarkLinkRewrite: Plugin<[RemarkLinkRewriteOptions], Root> = + ({ pattern, replace }) => + ast => { + visit(ast, 'link', node => { + if (EXTERNAL_URL_RE.test(node.url)) { + return; + } + node.url = node.url.replace(pattern, replace); + }); + }; diff --git a/packages/components/src/server/theme-layout.tsx b/packages/components/src/server/theme-layout.tsx index d3fccb8ac..596111340 100644 --- a/packages/components/src/server/theme-layout.tsx +++ b/packages/components/src/server/theme-layout.tsx @@ -1,4 +1,4 @@ -import { ComponentProps, FC, ReactNode } from 'react'; +import { ComponentProps, FC, ReactElement, ReactNode } from 'react'; import { Metadata } from 'next'; import { PageMapItem } from 'nextra'; import { Layout, Navbar } from 'nextra-theme-docs'; @@ -9,6 +9,7 @@ import { HiveFooter } from '../components/hive-footer'; import { HiveNavigation } from '../components/hive-navigation'; import { siteOrigin, siteUrl } from '../constants'; import { PRODUCTS } from '../products'; +import { Body } from './body.client'; type LP = ComponentProps; @@ -74,6 +75,8 @@ export const GuildLayout: FC<{ */ navbarProps: NavbarProps; pageMap?: PageMapItem[]; + search?: ReactElement; + lightOnlyPages: ComponentProps['lightOnlyPages']; }> = async ({ children, websiteName, @@ -83,6 +86,8 @@ export const GuildLayout: FC<{ logo, layoutProps, navbarProps, + search, + lightOnlyPages, ...props }) => { const [meta, ...pageMap] = props.pageMap || (await getPageMap()); @@ -112,8 +117,32 @@ export const GuildLayout: FC<{ suppressHydrationWarning {...htmlProps} > - - + + + + } + search={search} navbar={ {children} - + ); }; diff --git a/packages/components/style.css b/packages/components/style.css index 443f9bcda..d3fa6ab45 100644 --- a/packages/components/style.css +++ b/packages/components/style.css @@ -127,7 +127,23 @@ :root { --nextra-navbar-height: 82px; } - +@media (min-width: 768px) { + .nextra-search { + @apply ml-3 basis-64; + input, + kbd { + @apply text-green-700 dark:text-neutral-300; + } + input { + @apply h-12 w-full rounded-lg border border-green-200 bg-white pl-4 pr-8; + @apply ring-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_32%/var(--tw-ring-opacity))]; + @apply ring-offset-[rgb(var(--nextra-bg))] dark:border-neutral-800 dark:bg-inherit; + } + kbd { + @apply absolute right-4 top-1/2 my-0 -translate-y-1/2 border-none bg-green-200 dark:bg-neutral-700; + } + } +} @media (max-width: 767px) { :root { --nextra-navbar-height: 64px; diff --git a/packages/components/tsup.config.ts b/packages/components/tsup.config.ts index 7ae92debe..f238e73cf 100644 --- a/packages/components/tsup.config.ts +++ b/packages/components/tsup.config.ts @@ -28,17 +28,10 @@ export default defineConfig({ svgr({ exportType: 'named', typescript: true, - jsx: { - // svgo's removeXMLNS plugin doesn't work for some reason... - babelConfig: { - plugins: [ - [ - '@svgr/babel-plugin-remove-jsx-attribute', - { elements: ['svg'], attributes: ['xmlns'] }, - ], - ], - }, + svgoConfig: { + plugins: ['removeXMLNS'], }, + plugins: ['@svgr/plugin-svgo'], }), ], plugins: [ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5f541b1bb..a8d1ab821 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -159,6 +159,12 @@ importers: '@next/bundle-analyzer': specifier: 15.1.4 version: 15.1.4 + '@radix-ui/react-accordion': + specifier: ^1.2.2 + version: 1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-icons': + specifier: ^1.3.2 + version: 1.3.2(react@18.3.1) '@radix-ui/react-navigation-menu': specifier: ^1.2.0 version: 1.2.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -186,10 +192,13 @@ importers: tailwind-merge: specifier: ^2.5.2 version: 2.6.0 + unist-util-visit: + specifier: 5.0.0 + version: 5.0.0 devDependencies: - '@svgr/babel-plugin-remove-jsx-attribute': - specifier: ^8.0.0 - version: 8.0.0(@babel/core@7.26.0) + '@svgr/plugin-svgo': + specifier: ^8.1.0 + version: 8.1.0(@svgr/core@8.1.0(typescript@5.7.3))(typescript@5.7.3) '@theguild/editor': specifier: workspace:* version: link:../editor @@ -199,6 +208,9 @@ importers: '@types/dedent': specifier: 0.7.2 version: 0.7.2 + '@types/mdast': + specifier: 4.0.4 + version: 4.0.4 '@types/react': specifier: 18.3.18 version: 18.3.18 @@ -2074,6 +2086,32 @@ packages: '@radix-ui/primitive@1.1.1': resolution: {integrity: sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==} + '@radix-ui/react-accordion@1.2.2': + resolution: {integrity: sha512-b1oh54x4DMCdGsB4/7ahiSrViXxaBwRPotiZNnYXjLha9vfuURSAZErki6qjDoSIV0eXx5v57XnTGVtGwnfp2g==} + 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 + + '@radix-ui/react-collapsible@1.1.2': + resolution: {integrity: sha512-PliMB63vxz7vggcyq0IxNYk8vGDrLXVWw4+W4B8YnwI1s18x7YZYqlG9PLX7XxAJUi0g2DxP4XKJMFHh/iVh9A==} + 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 + '@radix-ui/react-collection@1.1.1': resolution: {integrity: sha512-LwT3pSho9Dljg+wY2KN2mrrh6y3qELfftINERIzBUO9e0N+t0oMTyn3k9iv+ZqgrwGkRnLpNJrsMv9BZlt2yuA==} peerDependencies: @@ -2127,6 +2165,11 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-icons@1.3.2': + resolution: {integrity: sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==} + peerDependencies: + react: ^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc + '@radix-ui/react-id@1.1.0': resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==} peerDependencies: @@ -11199,6 +11242,39 @@ snapshots: '@radix-ui/primitive@1.1.1': {} + '@radix-ui/react-accordion@1.2.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/primitive': 1.1.1 + '@radix-ui/react-collapsible': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-collection': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1) + '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1) + '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1) + '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1) + '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.18 + '@types/react-dom': 18.3.5(@types/react@18.3.18) + + '@radix-ui/react-collapsible@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/primitive': 1.1.1 + '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1) + '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1) + '@radix-ui/react-id': 1.1.0(@types/react@18.3.18)(react@18.3.1) + '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1) + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.18 + '@types/react-dom': 18.3.5(@types/react@18.3.18) + '@radix-ui/react-collection@1.1.1(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.18)(react@18.3.1) @@ -11242,6 +11318,10 @@ snapshots: '@types/react': 18.3.18 '@types/react-dom': 18.3.5(@types/react@18.3.18) + '@radix-ui/react-icons@1.3.2(react@18.3.1)': + dependencies: + react: 18.3.1 + '@radix-ui/react-id@1.1.0(@types/react@18.3.18)(react@18.3.1)': dependencies: '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.18)(react@18.3.1) diff --git a/website/app/layout.tsx b/website/app/layout.tsx index 1ceed1a7f..6cea35a07 100644 --- a/website/app/layout.tsx +++ b/website/app/layout.tsx @@ -56,6 +56,7 @@ const RootLayout = async ({ children }: { children: ReactNode }) => { }, ], }} + lightOnlyPages={['/']} > {children}