polen
Version:
A framework for delightful GraphQL developer portals
137 lines • 6.82 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { createRoute } from '#lib/react-router-aid/react-router-aid';
import { SidebarLayout } from '#template/layouts/index';
import { MDXProvider } from '@mdx-js/react';
import { Badge, Box, Button, Callout, Card, Code, DataList, Em, Flex, Heading, Link, Quote, Separator, Strong, Table, Tabs, Text, Theme, Tooltip, } from '@radix-ui/themes';
import { Link as LinkReactRouter, useLocation } from 'react-router';
import { Outlet, ScrollRestoration } from 'react-router';
import logoSrc from 'virtual:polen/project/assets/logo.svg';
import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper';
import PROJECT_DATA_PAGES_CATALOG from 'virtual:polen/project/data/pages-catalog.jsonsuper';
import { routes } from 'virtual:polen/project/routes.jsx';
import { templateVariables } from 'virtual:polen/template/variables';
import { GraphQLSchemaProvider } from '../../lib/graphql-document/schema-context.js';
import { CodeBlock } from '../components/CodeBlock.js';
import { Pre } from '../components/CodeHikePre.js';
import { Link as PolenLink } from '../components/Link.js';
import { Logo } from '../components/Logo.js';
import { NotFound } from '../components/NotFound.js';
import { ThemeToggle } from '../components/ThemeToggle.js';
import { ThemeProvider, useTheme } from '../contexts/ThemeContext.js';
import { changelog } from './changelog.js';
import { index } from './index.js';
import { reference } from './reference.js';
export const Component = () => {
const schema = PROJECT_DATA.schema?.versions[0]?.after || null;
// Make schema available globally for MDX components
if (typeof window !== `undefined` && schema) {
;
window.__POLEN_GRAPHQL_SCHEMA__ = schema;
}
return (_jsxs(_Fragment, { children: [_jsx(ThemeProvider, { children: _jsx(GraphQLSchemaProvider, { schema: schema, children: _jsx(Layout, {}) }) }), _jsx(ScrollRestoration, {})] }));
};
const Layout = () => {
const { appearance } = useTheme();
const header = (_jsxs(Flex, { align: 'center', gap: { initial: `4`, md: `8` }, pb: '4', mb: { initial: `4`, md: `8` }, style: {
borderBottom: `1px solid var(--gray-3)`,
}, children: [_jsx(LinkReactRouter, { to: '/', style: { color: `inherit`, textDecoration: `none` }, children: _jsx(Box, { display: { initial: `block`, md: `block` }, children: _jsx(Logo, { src: logoSrc, title: templateVariables.title, height: 30, showTitle: true }) }) }), _jsx(Flex, { direction: 'row', gap: '4', style: { flex: 1 }, children: PROJECT_DATA.navbar.map((item, key) => (_jsx(PolenLink, { color: 'gray', to: item.pathExp, children: item.title }, key))) }), _jsx(ThemeToggle, {})] }));
return (_jsx(Theme, { asChild: true, appearance: appearance, children: _jsxs(Box, { width: { initial: `100%`, sm: `100%`, md: `var(--container-4)` }, maxWidth: '100vw', my: { initial: `0`, sm: `0`, md: `8` }, mx: 'auto', px: { initial: `4`, sm: `4`, md: `0` }, py: { initial: `4`, sm: `4`, md: `0` }, children: [header, _jsx(MDXProvider, { components: {
// Map markdown elements to Radix with spacing
p: (props) => _jsx(Text, { as: 'p', mb: '4', ...props }),
h1: (props) => _jsx(Heading, { size: '8', mt: '6', mb: '4', ...props }),
h2: (props) => _jsx(Heading, { size: '7', mt: '6', mb: '3', ...props }),
h3: (props) => _jsx(Heading, { size: '6', mt: '5', mb: '3', ...props }),
h4: (props) => _jsx(Heading, { size: '5', mt: '5', mb: '2', ...props }),
h5: (props) => _jsx(Heading, { size: '4', mt: '4', mb: '2', ...props }),
h6: (props) => _jsx(Heading, { size: '3', mt: '4', mb: '2', ...props }),
strong: Strong,
em: Em,
code: Code,
blockquote: (props) => _jsx(Quote, { my: '4', ...props }),
a: Link,
hr: (props) => _jsx(Separator, { my: '6', ...props }),
pre: Pre,
table: Table.Root,
thead: Table.Header,
tbody: Table.Body,
tr: Table.Row,
th: Table.ColumnHeaderCell,
td: Table.Cell,
// Lists need spacing too
ul: (props) => _jsx(Box, { as: 'ul', mb: '4', style: { paddingLeft: '1.5rem' }, ...props }),
ol: (props) => _jsx(Box, { as: 'ol', mb: '4', style: { paddingLeft: '1.5rem' }, ...props }),
li: (props) => _jsx(Box, { as: 'li', mb: '2', ...props }),
// Direct Radix components for MDX
Badge,
Button,
// @ts-expect-error
Callout,
Card,
// @ts-expect-error
DataList,
// @ts-expect-error
Tabs,
Tooltip,
// Code Hike component
CodeBlock,
}, children: _jsx(Outlet, {}) })] }) }));
};
const PagesLayout = () => {
const location = useLocation(); // Add this line
// Build sidebar from pages catalog
// Get the top-level path segment (e.g., '/guide/foo' -> '/guide')
const pathSegments = location.pathname.split('/').filter(Boolean);
const topLevelPath = pathSegments[0] ? `/${pathSegments[0]}` : '/';
// Get the sidebar for this section
const sidebar = PROJECT_DATA_PAGES_CATALOG.sidebarIndex[topLevelPath]?.items || [];
return (_jsx(SidebarLayout, { sidebar: sidebar, children: _jsx(Outlet, {}) }));
};
const children = [
index,
{
// Pathless layout route - doesn't affect URL paths
Component: PagesLayout,
children: [...routes], // All MDX page routes go here
},
];
//
//
//
//
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • Project Routes
//
//
//
if (PROJECT_DATA.schema) {
children.push(changelog);
children.push(reference);
}
//
//
//
//
// ━━━━━━━━━━━━━━ • Not Found Route
//
//
//
const notFoundRoute = createRoute({
id: `*_not_found`,
path: `*`,
Component: NotFound,
handle: {
statusCode: 404,
},
});
children.push(notFoundRoute);
//
//
//
// ━━━━━━━━━━━━━━ • Root Route
//
//
export const root = createRoute({
path: `/`,
Component,
children,
});
//# sourceMappingURL=root.js.map