import * as react from 'react'; import { FC } from 'react'; import { z } from 'zod'; import { HeadProps } from '../../types.generated.js'; import 'rehype-pretty-code'; import '@mdx-js/mdx'; import 'rehype-katex'; import 'better-react-mathjax'; declare const HeadPropsSchema: z.ZodObject<{ color: z.ZodDefault]>>; saturation: z.ZodDefault]>>; lightness: z.ZodDefault]>>; }, z.core.$strict>>; faviconGlyph: z.ZodOptional; backgroundColor: z.ZodDefault, z.ZodTransform>; light: z.ZodPipe, z.ZodTransform>; }, z.core.$strict>>; children: z.ZodOptional>; }, z.core.$strict>; /** * Configure the `` tags, primary color, background color and favicon glyph * of the website. * * @usage * ### Static head tags * * If you have static head tags, they should be put as `children` in `Head`. For * example: * * ```jsx filename="app/layout.jsx" {8} * import { Layout } from 'my-nextra-theme' * import { Head } from 'nextra/components' * * export default function MyLayout({ children, ...props }) { * return ( * * * * * * {children} * * * ) * } * ``` * * ### Dynamic tags based on page * * You can dynamically generate the head tags based on the current page's front * matter. For example: * * #### via Markdown front matter * * ```mdx filename="my-page/page.mdx" * --- * title: My title * description: My description * --- * ``` * * #### via exporting `metadata` object * * ```mdx filename="my-page/page.mdx" * export const metadata = { * title: 'My title', * description: 'My description' * } * ``` * * #### in [dynamic routes with catch-all segment](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#catch-all-segments) * * ```jsx filename="app/[[...mdxPath]]/page.jsx" * import { importPage } from 'nextra/pages' * * export async function generateMetadata(props) { * const { mdxPath } = await props.params * const { metadata } = await importPage(mdxPath) * return { * title: metadata.title || 'Nextra', * description: metadata.description || 'The next site builder' * } * } * ``` * * ### Theme color * * You can adjust the theme color of the website by setting primary Hue, Saturation * and Lightness (HSL) values for light and dark themes. Try it out for this * website: * * | Hue (H) | Saturation (S) | Lightness (L) | Background Color | * | -------------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------- | ------------------ | * | | | | | * * > [!TIP] * > * > You can adjust the lightness independently for dark or light mode to increase * > legibility. E.g. to have a neutral primary color you can set the primary color * > to be white `HSL(0, 0%, 100%)` on dark theme and gray `HSL(0, 0%, 50%)` for * > light theme. * > * > ```jsx filename="app/layout.jsx" * > color={{ * > hue: 0, * > saturation: 0, * > lightness: { * > light: 50, * > dark: 100 * > } * > }} * > /> * > ``` * * ### Favicon glyph * * This isn't supported by all browsers, but it's a nice way to customize the * favicon of the website simply by using an emoji or character. * * ```jsx filename="app/layout.jsx" * * ``` */ declare const Head: FC; export { Head, HeadPropsSchema };