hanzoai/docs
2
0
Fork 0
mirror of https://github.com/hanzo-docs/docs.git synced 2026-10-25 04:20:02 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UI: Extend grid of docs layout to 5 columns

Browse Source
This commit is contained in:
Fuma Nama
2026-02-17 23:27:17 +08:00
parent 860550f828
commit 1c266568b2
7 changed files with 24 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/wise-rabbits-crash.md
+6
View File
@@ -0,0 +1,6 @@
---
'fumadocs-ui': patch
'@fumadocs/base-ui': patch
---
Extend grid of docs layout to 5 columns
packages/base-ui/css/lib/shiki.css
+4 -1
View File
@@ -16,11 +16,14 @@
:is(pre *):is(.shiki *):not(.not-fumadocs-codeblock *) {
.line& {
position: relative;
min-height: 1lh;
padding-left: var(--padding-left);
padding-right: var(--padding-right);
}
.line:empty& {
height: 1lh;
}
.has-focused .line&:not(.focused) {
filter: blur(2px);
transition: filter 200ms;
packages/base-ui/src/layouts/docs/client.tsx
+4 -4
View File
@@ -54,15 +54,15 @@ export function LayoutBody({ className, style, children, ...props }: ComponentPr
<div
id="nd-docs-layout"
className={cn(
'grid transition-[grid-template-columns] overflow-x-clip min-h-(--fd-docs-height) auto-cols-auto auto-rows-auto [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]',
'grid transition-[grid-template-columns] overflow-x-clip min-h-(--fd-docs-height) [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]',
className,
)}
data-sidebar-collapsed={collapsed}
style={
{
gridTemplate: `"sidebar header toc"
"sidebar toc-popover toc"
"sidebar main toc" 1fr / minmax(var(--fd-sidebar-col), 1fr) minmax(0, calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-width) - var(--fd-toc-width))) minmax(min-content, 1fr)`,
gridTemplate: `"sidebar sidebar header toc toc"
"sidebar sidebar toc-popover toc toc"
"sidebar sidebar main toc toc" 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-width) - var(--fd-toc-width))) var(--fd-toc-width) minmax(min-content, 1fr)`,
'--fd-docs-row-1': 'var(--fd-banner-height, 0px)',
'--fd-docs-row-2': 'calc(var(--fd-docs-row-1) + var(--fd-header-height))',
'--fd-docs-row-3': 'calc(var(--fd-docs-row-2) + var(--fd-toc-popover-height))',
packages/base-ui/src/layouts/docs/page/index.tsx
+1 -1
View File
@@ -138,7 +138,7 @@ export function DocsPage({
data-full={full}
className={cn(
'flex flex-col w-full max-w-[900px] mx-auto [grid-area:main] px-4 py-6 gap-4 md:px-6 md:pt-8 xl:px-8 xl:pt-14',
full ? 'max-w-[1200px]' : 'xl:layout:[--fd-toc-width:268px]',
full ? 'max-w-[1168px]' : 'xl:layout:[--fd-toc-width:268px]',
className,
)}
>
packages/radix-ui/css/lib/shiki.css
+4 -1
View File
@@ -16,11 +16,14 @@
:is(pre *):is(.shiki *):not(.not-fumadocs-codeblock *) {
.line& {
position: relative;
min-height: 1lh;
padding-left: var(--padding-left);
padding-right: var(--padding-right);
}
.line:empty& {
height: 1lh;
}
.has-focused .line&:not(.focused) {
filter: blur(2px);
transition: filter 200ms;
packages/radix-ui/src/layouts/docs/client.tsx
+4 -4
View File
@@ -54,15 +54,15 @@ export function LayoutBody({ className, style, children, ...props }: ComponentPr
<div
id="nd-docs-layout"
className={cn(
'grid transition-[grid-template-columns] overflow-x-clip min-h-(--fd-docs-height) auto-cols-auto auto-rows-auto [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]',
'grid transition-[grid-template-columns] overflow-x-clip min-h-(--fd-docs-height) [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]',
className,
)}
data-sidebar-collapsed={collapsed}
style={
{
gridTemplate: `"sidebar header toc"
"sidebar toc-popover toc"
"sidebar main toc" 1fr / minmax(var(--fd-sidebar-col), 1fr) minmax(0, calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-width) - var(--fd-toc-width))) minmax(min-content, 1fr)`,
gridTemplate: `"sidebar sidebar header toc toc"
"sidebar sidebar toc-popover toc toc"
"sidebar sidebar main toc toc" 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-width) - var(--fd-toc-width))) var(--fd-toc-width) minmax(min-content, 1fr)`,
'--fd-docs-row-1': 'var(--fd-banner-height, 0px)',
'--fd-docs-row-2': 'calc(var(--fd-docs-row-1) + var(--fd-header-height))',
'--fd-docs-row-3': 'calc(var(--fd-docs-row-2) + var(--fd-toc-popover-height))',
packages/radix-ui/src/layouts/docs/page/index.tsx
+1 -1
View File
@@ -138,7 +138,7 @@ export function DocsPage({
data-full={full}
className={cn(
'flex flex-col w-full max-w-[900px] mx-auto [grid-area:main] px-4 py-6 gap-4 md:px-6 md:pt-8 xl:px-8 xl:pt-14',
full ? 'max-w-[1200px]' : 'xl:layout:[--fd-toc-width:268px]',
full ? 'max-w-[1168px]' : 'xl:layout:[--fd-toc-width:268px]',
className,
)}
>