mirror of
https://github.com/hanzoai/gui.git
synced 2026-11-03 00:13:54 +00:00
zeekayandHanzo Dev
d504ef37b2
The responsive section measured itself against a second container. Its breakpoint ruler rode Container — the docs page's measure and gutter — nested in the ContainerLarge every other section stands on, so a marker labelled 500 stood 522px from the mock it measures, and below sm a hand-fitted translate put the mock 25px left of its own heading, off the page. Both take the section's own box now. The preview strip scrolled to an arithmetic copy of its padding and gap that had drifted from them by one gap per stop, so the ninth colour sat a whole card off centre. It asks the layout instead. A stop reaches the swatch, the demo, the ink and the stored accent, never the ground, and a lamp carried past the hero is the ground by another route — the wash still under the player row. The glow stays at the hero. Two footer columns had no basis to size from once stacked and drew over the next, nine swatches could not fit 390 in one row, and a title glued to its last word was split mid-word instead. Co-authored-by: Hanzo Dev <[email protected]>
129 lines
4.1 KiB
TypeScript
129 lines
4.1 KiB
TypeScript
import { ThemeTint } from '@hanzogui/logo'
|
|
import { Theme } from '@hanzo/gui'
|
|
import { getMDXComponent } from '@vxrn/mdx-rust/client'
|
|
import React, { memo } from 'react'
|
|
import type { LoaderProps } from 'one'
|
|
import { useLoader } from 'one'
|
|
import { HeadInfo } from '~/components/HeadInfo'
|
|
import { DocsPageFrame } from '~/features/docs/DocsPageFrame'
|
|
import { MDXProvider } from '~/features/docs/MDXProvider'
|
|
import { MDXTabs } from '~/features/docs/MDXTabs'
|
|
import { useDocsMenu } from '~/features/docs/useDocsMenu'
|
|
import { useIsDocsTinted } from '~/features/docs/docsTint'
|
|
import { components } from '~/features/mdx/MDXComponents'
|
|
import { getOgUrl } from '~/features/site/getOgUrl'
|
|
import { SubTitle } from '../../../../components/SubTitle'
|
|
import { HomeH1 } from '../../../../features/site/home/HomeHeaders'
|
|
|
|
export async function generateStaticParams() {
|
|
const { getAllFrontmatter } = await import('~/features/mdx/getMDXBySlug')
|
|
const frontmatters = getAllFrontmatter('data/docs/components')
|
|
const paths = frontmatters.map((frontmatter) => {
|
|
return {
|
|
subpath: frontmatter.slug.replace('data/docs/components/', ''),
|
|
}
|
|
})
|
|
|
|
const latestVersionPaths = paths.map((path) => {
|
|
const parts = path.subpath.split('/')
|
|
const withoutVersion = parts.slice(0, parts.length - 1)
|
|
return withoutVersion.join('/')
|
|
})
|
|
|
|
const deduped = [...new Set(latestVersionPaths)].map((subpath) => ({ subpath }))
|
|
|
|
const allPaths = [...paths, ...deduped]
|
|
|
|
return allPaths
|
|
}
|
|
|
|
export async function loader(props: LoaderProps) {
|
|
const { getMDXBySlug, getAllVersionsFromPath } =
|
|
await import('~/features/mdx/getMDXBySlug')
|
|
|
|
const subpath = Array.isArray(props.params.subpath)
|
|
? props.params.subpath[0]
|
|
: props.params.subpath
|
|
|
|
const { frontmatter, code } = await getMDXBySlug('data/docs/components', subpath)
|
|
const [componentName, componentVersion] = subpath.split('/')
|
|
const versions = getAllVersionsFromPath(`data/docs/components/${componentName}`)
|
|
return {
|
|
frontmatter: {
|
|
...frontmatter,
|
|
version: componentVersion || versions[0],
|
|
versions: versions,
|
|
},
|
|
code,
|
|
}
|
|
}
|
|
|
|
export function DocComponentsPage() {
|
|
const { frontmatter, code } = useLoader(loader)
|
|
const { next, previous, currentPath, documentVersionPath } = useDocsMenu()
|
|
const Component = React.useMemo(() => getMDXComponent(code), [code])
|
|
|
|
const getMDXPath = (path: string) => {
|
|
if (path.startsWith('/ui/')) {
|
|
const parts = path.split('/')
|
|
const componentName = parts[2]
|
|
return `/docs/components/${componentName}`
|
|
}
|
|
return `${path}${documentVersionPath}`
|
|
}
|
|
|
|
const GITHUB_URL = 'https://github.com'
|
|
const REPO_NAME = 'hanzogui/hanzogui'
|
|
const editUrl = `${GITHUB_URL}/${REPO_NAME}/edit/master/apps/gui.hanzo.ai/data${getMDXPath(currentPath)}.mdx`
|
|
|
|
return (
|
|
<DocsPageFrame
|
|
headings={frontmatter.headings}
|
|
editUrl={editUrl}
|
|
next={next}
|
|
previous={previous}
|
|
>
|
|
<HeadInfo
|
|
title={`${frontmatter.title} | Gui — React Native UI kit with copy-paste composable components`}
|
|
description={frontmatter.description || 'UI Kit'}
|
|
openGraph={{
|
|
images: [
|
|
{
|
|
url:
|
|
frontmatter.image ??
|
|
getOgUrl({
|
|
type: 'component',
|
|
title: frontmatter.title,
|
|
demoName: frontmatter.demoName ?? undefined,
|
|
description: frontmatter.description ?? '',
|
|
}),
|
|
width: 1200,
|
|
height: 630,
|
|
},
|
|
],
|
|
}}
|
|
/>
|
|
|
|
<HomeH1>{frontmatter.title}</HomeH1>
|
|
|
|
<SubTitle>{frontmatter.description || ''}</SubTitle>
|
|
|
|
<MDXProvider frontmatter={frontmatter}>
|
|
<DocsThemeTint>
|
|
<MDXTabs id="type" defaultValue="styled">
|
|
<Component components={components as any} />
|
|
</MDXTabs>
|
|
</DocsThemeTint>
|
|
</MDXProvider>
|
|
</DocsPageFrame>
|
|
)
|
|
}
|
|
|
|
const DocsThemeTint = memo(({ children }: { children: any }) => {
|
|
const isTinted = useIsDocsTinted()
|
|
if (!isTinted) {
|
|
return <Theme name="gray">{children}</Theme>
|
|
}
|
|
return <ThemeTint>{children}</ThemeTint>
|
|
})
|