bourdon/simple-react-app-kit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(docs): stabilize shared layout rendering

Browse Source
This commit is contained in:
Maofeng
2026-09-21 16:17:06 +08:00
parent df5bbc739c
commit 4d3892a5ea
2 changed files with 40 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/components/layout.tsx
+39 -40
View File
@@ -38,7 +38,7 @@ export function HomeButton({
return (
<a
href={href}
className="flex items-center gap-2 py-1 transition-colors hover:text-indigo-500 dark:hover:text-indigo-400"
className="flex items-center gap-2 py-1 transition-colors hover:text-indigo-500 dark:hover:text-indigo-400 shrink-0"
>
<Icon name="tabler:smart-home" className="size-5" />
{label ?? t({ zh: "首页", us: "Home" })}
@@ -138,51 +138,50 @@ function HeaderInner({
const hasLeading = React.Children.count(leading) > 0
const hasSubleading = React.Children.count(subleading) > 0
const children = []
if (hasLeading || hasSubleading) {
children.push(
hasLeading ? (
leading
) : hasSubleading ? (
<HomeButton href={getDocsHomeHref(resolvedLocale)} />
) : null,
hasSubleading && <SlashLine />,
subleading
)
} else {
children.push(
<h1 className="min-w-0 text-2xl font-semibold sm:text-3xl">
<span>S</span>
<span className="text-slate-300 dark:text-slate-400">imple</span>
<span>&nbsp;</span>
<span>R</span>
<span className="text-slate-300 dark:text-slate-400">eact</span>
<span>&nbsp;</span>
<span>A</span>
<span className="text-slate-300 dark:text-slate-400">pp</span>
<span>&nbsp;</span>
<span>K</span>
<span className="text-slate-300 dark:text-slate-400">it</span>
</h1>
)
}
if (actions != null) {
children.push(
<div className="-mr-2 ml-auto inline-flex items-center gap-2">
{actions}
</div>
)
}
return (
<Container className="flex size-full items-center gap-4">
{children}
{hasLeading || hasSubleading ? (
<>
{hasLeading ? (
leading
) : (
<HomeButton href={getDocsHomeHref(resolvedLocale)} />
)}
{hasSubleading ? (
<>
<SlashLine />
{subleading}
</>
) : null}
</>
) : (
<h1 className="min-w-0 text-2xl font-semibold sm:text-3xl">
<span>S</span>
<span className="text-slate-300 dark:text-slate-400">imple</span>
<span>&nbsp;</span>
<span>R</span>
<span className="text-slate-300 dark:text-slate-400">eact</span>
<span>&nbsp;</span>
<span>A</span>
<span className="text-slate-300 dark:text-slate-400">pp</span>
<span>&nbsp;</span>
<span>K</span>
<span className="text-slate-300 dark:text-slate-400">it</span>
</h1>
)}
{actions != null ? (
<div className="-mr-2 ml-auto inline-flex items-center gap-2">
{actions}
</div>
) : null}
</Container>
)
}
export function SiteFooter({ className, ...rest }: React.ComponentProps<"footer">) {
export function SiteFooter({
className,
...rest
}: React.ComponentProps<"footer">) {
return (
<footer className={cn("py-8", className)} {...rest}>
<Container className="text-center text-slate-500 dark:text-slate-400">
docs/src/index.css
+1 -1
View File
@@ -74,7 +74,7 @@
body,
#root {
@apply min-h-dvh;
@apply min-h-dvh min-w-80;
}
body {