Skip to content

Commit 87065c4

Browse files
Sherlock113Sherlock113
authored
Merge pull request #17 from jinyang1994/main
feat: update navbar components
2 parents fb0abc8 + a8831c5 commit 87065c4

File tree

16 files changed

+530
-27
lines changed

16 files changed

+530
-27
lines changed

‎docusaurus.config.ts

Lines changed: 38 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,25 @@ const config: Config = {
7575
items: [
7676
{
7777
position: 'left',
78-
href: 'https://www.bentoml.com',
79-
label: 'Product'
78+
label: 'Product',
79+
items: [
80+
{
81+
label: 'Bento Inference Platform',
82+
description:
83+
'Full control without the complexity. Self-host anywhere. Serve any model. Optimize for performance.',
84+
text: 'Book a Demo',
85+
href: 'https://l.bentoml.com/signup-llm-inference-handbook',
86+
icon: '/img/inference-platform.svg'
87+
},
88+
{
89+
label: 'BentoML Open-Source',
90+
description:
91+
'The most flexible way to serve AI/ML models and custom inference pipelines in production',
92+
text: 'Github',
93+
href: 'https://github.com/bentoml',
94+
icon: '/img/open-source.svg'
95+
}
96+
]
8097
},
8198
{
8299
position: 'left',
@@ -85,18 +102,31 @@ const config: Config = {
85102
},
86103
{
87104
position: 'left',
88-
href: 'https://www.bentoml.com/blog',
89-
label: 'Blog'
105+
href: 'https://docs.bentoml.com/?_gl=1*m5ucq6*_gcl_au*MjA4MzA3MTQ2NS4xNzQ3OTI4MDA5',
106+
label: 'Docs'
90107
},
91108
{
92109
position: 'left',
93-
href: 'https://www.bentoml.com/customers',
94-
label: 'Customers'
110+
label: 'Learn',
111+
items: [
112+
{
113+
href: 'https://www.bentoml.com/blog',
114+
label: 'Blog'
115+
},
116+
{
117+
href: 'https://www.bentoml.com/llm',
118+
label: 'LLM Inference Handbook'
119+
},
120+
{
121+
href: 'https://docs.bentoml.com/en/latest/examples/overview.html?_gl=1*m5mrt*_gcl_au*MjA4MzA3MTQ2NS4xNzQ3OTI4MDA5',
122+
label: 'Featured Examples'
123+
}
124+
]
95125
},
96126
{
97127
position: 'left',
98-
href: 'https://l.bentoml.com/join-slack-llm-inference-handbook',
99-
label: 'Community'
128+
href: 'https://www.bentoml.com/customers',
129+
label: 'Customers'
100130
},
101131
{
102132
position: 'right',

‎src/css/custom.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,22 @@
4545
display: swap;
4646
}
4747

48+
@font-face {
49+
font-family: 'ReplicaLL';
50+
src: url('/fonts/ReplicaLL-Regular.otf') format('opentype');
51+
font-weight: 400;
52+
font-style: normal;
53+
display: swap;
54+
}
55+
56+
@font-face {
57+
font-family: 'ReplicaLL';
58+
src: url('/fonts/ReplicaLL-Bold.otf') format('opentype');
59+
font-weight: 700;
60+
font-style: normal;
61+
display: swap;
62+
}
63+
4864
/* You can override the default Infima variables here. */
4965
:root {
5066
--ifm-color-primary: #2e8555;
@@ -59,6 +75,7 @@
5975

6076
/* navbar */
6177
--ifm-navbar-height: 81px;
78+
--ifm-dropdown-hover-background-color: none;
6279

6380
/* font */
6481
--ifm-heading-font-family: 'Inter', sans-serif;
@@ -70,6 +87,9 @@
7087
--bentoml-font-family:
7188
'AtlasGrotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
7289
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
90+
--bentoml-card-font-family:
91+
'ReplicaLL', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
92+
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
7393
--bentoml-body-offset: 3rem;
7494
}
7595

‎src/theme/Navbar/Logo/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import styles from './styles.module.css'
55
export default function NavbarLogo(): ReactNode {
66
return (
77
<Logo
8+
target="_self"
89
imageClassName={styles.navbarLogo}
910
titleClassName="navbar__title text--truncate"
1011
/>

‎src/theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
import { useState, useRef, useEffect, useMemo, type ReactNode } from 'react'
2+
import clsx from 'clsx'
3+
import useBaseUrl from '@docusaurus/useBaseUrl'
4+
import NavbarNavLink, { BaseNavLink } from '@theme/NavbarItem/NavbarNavLink'
5+
import NavbarItem from '@theme/NavbarItem'
6+
import type { Props } from '@theme/NavbarItem/DropdownNavbarItem/Desktop'
7+
import styles from './styles.module.css'
8+
9+
export default function DropdownNavbarItemDesktop({
10+
items,
11+
position,
12+
className,
13+
onClick,
14+
...props
15+
}: Props): ReactNode {
16+
const dropdownRef = useRef<HTMLDivElement>(null)
17+
const [showDropdown, setShowDropdown] = useState(false)
18+
const isCardMode = useMemo(() => {
19+
console.log(
20+
items.every(
21+
(item) => item.description && item.label && item.text && item.icon
22+
)
23+
)
24+
return items.every(
25+
(item) => item.description && item.label && item.text && item.icon
26+
)
27+
}, [items])
28+
29+
useEffect(() => {
30+
const handleClickOutside = (
31+
event: MouseEvent | TouchEvent | FocusEvent
32+
) => {
33+
if (
34+
!dropdownRef.current ||
35+
dropdownRef.current.contains(event.target as Node)
36+
) {
37+
return
38+
}
39+
setShowDropdown(false)
40+
}
41+
42+
document.addEventListener('mousedown', handleClickOutside)
43+
document.addEventListener('touchstart', handleClickOutside)
44+
document.addEventListener('focusin', handleClickOutside)
45+
46+
return () => {
47+
document.removeEventListener('mousedown', handleClickOutside)
48+
document.removeEventListener('touchstart', handleClickOutside)
49+
document.removeEventListener('focusin', handleClickOutside)
50+
}
51+
}, [dropdownRef])
52+
53+
return (
54+
<div
55+
ref={dropdownRef}
56+
className={clsx(
57+
'navbar__item',
58+
'dropdown',
59+
'dropdown--hoverable',
60+
styles.dropdown,
61+
{
62+
'dropdown--right': position === 'right',
63+
'dropdown--show': showDropdown
64+
}
65+
)}
66+
>
67+
<NavbarNavLink
68+
aria-haspopup="true"
69+
aria-expanded={showDropdown}
70+
role="button"
71+
// # hash permits to make the <a> tag focusable in case no link target
72+
// See https://github.com/facebook/docusaurus/pull/6003
73+
// There's probably a better solution though...
74+
href={props.to ? undefined : '#'}
75+
className={clsx('navbar__link', styles.navbarLink, className)}
76+
hasPopup
77+
{...props}
78+
onClick={props.to ? undefined : (e) => e.preventDefault()}
79+
onKeyDown={(e) => {
80+
if (e.key === 'Enter') {
81+
e.preventDefault()
82+
setShowDropdown(!showDropdown)
83+
}
84+
}}
85+
>
86+
{props.children ?? props.label}
87+
</NavbarNavLink>
88+
<ul
89+
className={clsx('dropdown__menu', styles.dropdownMenu, {
90+
[styles.cardMode]: isCardMode
91+
})}
92+
>
93+
{isCardMode
94+
? items.map((childItemProps, i) => (
95+
<li key={i} className={styles.dropdownItem}>
96+
<BaseNavLink {...childItemProps}>
97+
<i
98+
className={styles.dropdownItemIcon}
99+
style={{
100+
background: `url(${useBaseUrl(childItemProps.icon)})`
101+
}}
102+
/>
103+
<p className={styles.dropdownItemLabel}>
104+
{childItemProps.label}
105+
</p>
106+
<p className={styles.dropdownItemDescription}>
107+
{childItemProps.description}
108+
</p>
109+
<p className={styles.dropdownItemText}>
110+
{childItemProps.text}
111+
</p>
112+
</BaseNavLink>
113+
</li>
114+
))
115+
: items.map((childItemProps, i) => (
116+
<NavbarItem
117+
isDropdownItem
118+
className={styles.dropdownItem}
119+
activeClassName="dropdown__link--active"
120+
{...childItemProps}
121+
key={i}
122+
/>
123+
))}
124+
</ul>
125+
</div>
126+
)
127+
}

‎src/theme/NavbarItem/DropdownNavbarItem/Desktop/styles.module.css

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
.dropdown {
2+
padding: 0;
3+
}
4+
5+
.dropdown .navbarLink::after {
6+
content: none;
7+
}
8+
9+
.dropdownMenu {
10+
border-radius: 1.25rem;
11+
padding: 1.25rem;
12+
border: 1px solid #d8d8d8;
13+
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
14+
}
15+
16+
.dropdownMenu > li:not(:first-child) {
17+
margin-top: 1.25rem;
18+
}
19+
20+
.dropdownItem {
21+
margin: 0 !important;
22+
}
23+
24+
.cardMode {
25+
display: flex;
26+
gap: 2.5rem;
27+
border-color: #19192c;
28+
}
29+
30+
.cardMode > .dropdownItem {
31+
font-family: var(--bentoml-card-font-family);
32+
width: 19.25rem;
33+
padding: 1.25rem;
34+
transition: background-color 0.3s ease-out;
35+
border-radius: 0.75rem;
36+
position: relative;
37+
}
38+
39+
.cardMode > .dropdownItem:not(:first-child)::before {
40+
content: '';
41+
position: absolute;
42+
width: 1px;
43+
background: #19192c;
44+
top: 1.1rem;
45+
bottom: 1.1rem;
46+
left: -1.25rem;
47+
}
48+
49+
.cardMode > .dropdownItem:hover {
50+
background: #c3ffb2;
51+
}
52+
53+
.cardMode > .dropdownItem:nth-child(even):hover {
54+
background: #b9a0ff;
55+
}
56+
57+
.dropdownItemIcon {
58+
display: flex;
59+
width: 3rem;
60+
height: 3rem;
61+
margin-bottom: 1.25rem;
62+
}
63+
64+
.dropdownItemLabel {
65+
font-size: 1.5rem;
66+
white-space: nowrap;
67+
font-weight: 400;
68+
color: #19192c;
69+
line-height: 1.25rem;
70+
margin-bottom: 1rem;
71+
}
72+
73+
.dropdownItemDescription {
74+
color: #6a6a6a;
75+
font-size: 1rem;
76+
line-height: 1.25rem;
77+
}
78+
79+
.dropdownItemText {
80+
color: #19192c;
81+
font-size: 0.875rem;
82+
line-height: 1.25rem;
83+
margin-bottom: 0;
84+
}

0 commit comments

Comments
 (0)