opensource/sim
3
0
Fork 0
mirror of https://github.com/simstudioai/sim.git synced 2026-09-24 15:45:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

improvement(docs): align docs UI with the platform emcn design system (#4962)

Browse Source 
* improvement(docs): align docs UI with the platform emcn design system

* improvement(docs): build language dropdown options in render scope
This commit is contained in:
Waleed
2026-06-10 19:40:31 -07:00
committed by GitHub
parent e54daf798d
commit aa39974d7b
23 changed files with 706 additions and 648 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/docs/components/docs-layout/page-footer.tsx
+10 -20
View File
@@ -33,19 +33,17 @@ const SOCIAL_LINKS = [
export function PageFooter({ previous, next }: PageFooterProps) {
return (
<div className='mt-12'>
<div className='h-px w-full bg-[rgba(0,0,0,0.08)] dark:bg-[rgba(255,255,255,0.08)]' />
<div className='h-px w-full bg-[var(--border)]' />
{(previous || next) && (
<div className='flex'>
<div className='flex gap-2 py-3'>
{previous ? (
<Link
href={previous.url}
className='group flex flex-1 flex-col gap-1 px-6 py-5 transition-colors hover:bg-[rgba(0,0,0,0.02)] dark:hover:bg-[rgba(255,255,255,0.03)]'
className='group flex flex-1 flex-col gap-1 rounded-lg px-3 py-3 transition-colors hover:bg-[var(--surface-3)]'
>
<span className='text-[rgba(0,0,0,0.4)] text-xs dark:text-[rgba(255,255,255,0.35)]'>
Previous
</span>
<span className='flex items-center gap-1.5 font-[470] text-[rgba(0,0,0,0.7)] text-sm transition-colors group-hover:text-[rgba(0,0,0,0.88)] dark:text-[rgba(255,255,255,0.7)] dark:group-hover:text-[rgba(255,255,255,0.92)]'>
<span className='text-[var(--text-muted)] text-xs'>Previous</span>
<span className='flex items-center gap-1.5 text-[var(--text-body)] text-sm transition-colors group-hover:text-[var(--text-primary)]'>
<ChevronLeft className='size-3.5 shrink-0' />
{previous.name}
</span>
@@ -54,19 +52,13 @@ export function PageFooter({ previous, next }: PageFooterProps) {
<div className='flex-1' />
)}
{previous && next && (
<div className='w-px bg-[rgba(0,0,0,0.08)] dark:bg-[rgba(255,255,255,0.08)]' />
)}
{next ? (
<Link
href={next.url}
className='group flex flex-1 flex-col items-end gap-1 px-6 py-5 transition-colors hover:bg-[rgba(0,0,0,0.02)] dark:hover:bg-[rgba(255,255,255,0.03)]'
className='group flex flex-1 flex-col items-end gap-1 rounded-lg px-3 py-3 transition-colors hover:bg-[var(--surface-3)]'
>
<span className='text-[rgba(0,0,0,0.4)] text-xs dark:text-[rgba(255,255,255,0.35)]'>
Next
</span>
<span className='flex items-center gap-1.5 font-[470] text-[rgba(0,0,0,0.7)] text-sm transition-colors group-hover:text-[rgba(0,0,0,0.88)] dark:text-[rgba(255,255,255,0.7)] dark:group-hover:text-[rgba(255,255,255,0.92)]'>
<span className='text-[var(--text-muted)] text-xs'>Next</span>
<span className='flex items-center gap-1.5 text-[var(--text-body)] text-sm transition-colors group-hover:text-[var(--text-primary)]'>
{next.name}
<ChevronRight className='size-3.5 shrink-0' />
</span>
@@ -77,9 +69,7 @@ export function PageFooter({ previous, next }: PageFooterProps) {
</div>
)}
<div className='h-px w-full bg-[rgba(0,0,0,0.08)] dark:bg-[rgba(255,255,255,0.08)]' />
<div className='flex items-center gap-4 pt-10 pb-6'>
<div className='flex items-center gap-4 pt-4 pb-6'>
{SOCIAL_LINKS.map((link) => (
<Link
key={link.label}
@@ -90,7 +80,7 @@ export function PageFooter({ previous, next }: PageFooterProps) {
>
<svg
viewBox='0 0 24 24'
className='size-5 fill-neutral-400 transition-colors hover:fill-neutral-500 dark:fill-neutral-500 dark:hover:fill-neutral-400'
className='size-[16px] fill-[var(--text-muted)] transition-colors hover:fill-[var(--text-icon)]'
>
<path d={link.icon} />
</svg>
apps/docs/components/docs-layout/page-navigation-arrows.tsx
+7 -9
View File
@@ -12,6 +12,9 @@ interface PageNavigationArrowsProps {
}
}
const ARROW_LINK_CLASS =
'flex size-[30px] items-center justify-center rounded-lg text-[var(--text-icon)] transition-colors hover:bg-[var(--surface-active)]'
export function PageNavigationArrows({ previous, next }: PageNavigationArrowsProps) {
if (!previous && !next) return null
@@ -20,21 +23,16 @@ export function PageNavigationArrows({ previous, next }: PageNavigationArrowsPro
{previous && (
<Link
href={previous.url}
className='inline-flex items-center justify-center rounded-[5px] border border-transparent px-2.5 py-2 text-foreground/40 transition-colors duration-200 hover:border-border/40 hover:bg-neutral-100 hover:text-foreground/70 dark:hover:bg-neutral-800'
className={ARROW_LINK_CLASS}
aria-label='Previous page'
title='Previous page'
>
<ChevronLeft className='size-4' />
<ChevronLeft className='size-[16px]' />
</Link>
)}
{next && (
<Link
href={next.url}
className='inline-flex items-center justify-center rounded-[5px] border border-transparent px-2.5 py-2 text-foreground/40 transition-colors duration-200 hover:border-border/40 hover:bg-neutral-100 hover:text-foreground/70 dark:hover:bg-neutral-800'
aria-label='Next page'
title='Next page'
>
<ChevronRight className='size-4' />
<Link href={next.url} className={ARROW_LINK_CLASS} aria-label='Next page' title='Next page'>
<ChevronRight className='size-[16px]' />
</Link>
)}
</div>
apps/docs/components/docs-layout/sidebar-components.tsx
+18 -20
View File
@@ -51,20 +51,18 @@ function isActive(url: string, pathname: string, nested = true): boolean {
}
const ITEM_BASE =
'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors text-fd-muted-foreground hover:bg-fd-accent/50 hover:text-fd-accent-foreground'
const ITEM_ACTIVE_MOBILE = 'bg-fd-primary/10 font-medium text-fd-primary'
'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-[var(--text-muted)] text-sm transition-colors hover:bg-[var(--surface-active)] hover:text-[var(--text-body)]'
const ITEM_ACTIVE_MOBILE = 'bg-[var(--surface-active)] font-medium text-[var(--text-primary)]'
const ITEM_DESKTOP =
'lg:mb-[0.0625rem] lg:block lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:font-normal lg:text-[13px] lg:leading-tight'
const ITEM_TEXT = 'lg:text-[#3b3b3b] lg:dark:text-[#cdcdcd]'
const ITEM_HOVER = 'lg:hover:bg-[#f2f2f2] lg:dark:hover:bg-[#262626]'
const ITEM_ACTIVE =
'lg:bg-[#ececec] lg:font-normal lg:text-[#3b3b3b] lg:dark:bg-[#2c2c2c] lg:dark:text-[#cdcdcd]'
const ITEM_TEXT = 'lg:text-[var(--text-body)]'
const ITEM_HOVER = 'lg:hover:bg-[var(--surface-3)]'
const ITEM_ACTIVE = 'lg:bg-[var(--surface-active)] lg:font-normal lg:text-[var(--text-body)]'
const FOLDER_TEXT = 'lg:text-[#3b3b3b] lg:font-medium lg:dark:text-[#cdcdcd]'
const FOLDER_HOVER = 'lg:hover:bg-[#f2f2f2] lg:dark:hover:bg-[#262626]'
const FOLDER_ACTIVE =
'lg:bg-[#ececec] lg:text-[#3b3b3b] lg:dark:bg-[#2c2c2c] lg:dark:text-[#cdcdcd]'
const FOLDER_TEXT = 'lg:text-[var(--text-body)] lg:font-medium'
const FOLDER_HOVER = 'lg:hover:bg-[var(--surface-3)]'
const FOLDER_ACTIVE = 'lg:bg-[var(--surface-active)] lg:text-[var(--text-body)]'
export function SidebarItem({ item }: { item: Item }) {
const pathname = usePathname()
@@ -138,7 +136,7 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
data-active={active}
className={cn(
'flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
'text-fd-muted-foreground hover:bg-fd-accent/50 hover:text-fd-accent-foreground',
'text-[var(--text-muted)] hover:bg-[var(--surface-active)] hover:text-[var(--text-body)]',
active && ITEM_ACTIVE_MOBILE,
'lg:block lg:flex-1 lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:text-[13px] lg:leading-tight',
FOLDER_TEXT,
@@ -152,12 +150,12 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
<button
onClick={toggleOpen}
className={cn(
'rounded p-1 hover:bg-fd-accent/50',
'lg:cursor-pointer lg:rounded lg:p-1 lg:transition-colors lg:hover:bg-[#f2f2f2] lg:dark:hover:bg-[#262626]'
'rounded-md p-1 hover:bg-[var(--surface-active)]',
'lg:cursor-pointer lg:rounded-md lg:p-1 lg:transition-colors lg:hover:bg-[var(--surface-3)]'
)}
aria-label={open ? 'Collapse' : 'Expand'}
>
<SidebarChevron open={open} className='text-[#5e5e5e] dark:text-[#939393]' />
<SidebarChevron open={open} className='text-[var(--text-icon)]' />
</button>
)}
</>
@@ -166,14 +164,14 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
onClick={toggleOpen}
className={cn(
'flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
'text-fd-muted-foreground hover:bg-fd-accent/50',
'text-[var(--text-muted)] hover:bg-[var(--surface-active)]',
'lg:flex lg:w-full lg:cursor-pointer lg:items-center lg:justify-between lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:text-left lg:text-[13px] lg:leading-tight',
FOLDER_TEXT,
FOLDER_HOVER
)}
>
<span>{item.name}</span>
<SidebarChevron open={open} className='ml-auto text-[#5e5e5e] dark:text-[#939393]' />
<SidebarChevron open={open} className='ml-auto text-[var(--text-icon)]' />
</button>
)}
</div>
@@ -186,7 +184,7 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
>
<div className='overflow-hidden'>
<div className='ml-4 flex flex-col gap-0.5 lg:hidden'>{children}</div>
<ul className='mt-0.5 ml-2 hidden space-y-[0.0625rem] border-[#ececec] border-l pl-2.5 lg:block dark:border-[#2c2c2c]'>
<ul className='mt-0.5 ml-2 hidden space-y-[0.0625rem] border-[var(--surface-active)] border-l pl-2.5 lg:block'>
{children}
</ul>
</div>
@@ -204,13 +202,13 @@ export function SidebarSeparator({ item }: { item: Separator }) {
>
<div className='separator-divider hidden'>
<div className='h-[20px]' />
<div className='h-px bg-[#ececec] dark:bg-[#2c2c2c]' />
<div className='h-px bg-[var(--surface-active)]' />
<div className='h-[20px]' />
</div>
<p
className={cn(
'font-medium text-fd-muted-foreground text-xs',
'lg:font-semibold lg:text-[#5e5e5e] lg:text-[10px] lg:uppercase lg:tracking-[0.06em] lg:dark:text-[#939393]'
'font-medium text-[var(--text-muted)] text-xs',
'lg:font-semibold lg:text-[10px] lg:text-[var(--text-muted)] lg:uppercase lg:tracking-[0.06em]'
)}
>
{item.name}