Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit 75a8a32

Browse filesBrowse files
committed
docs: improve code syntax
1 parent 492a20b commit 75a8a32
Copy full SHA for 75a8a32

File tree

2 files changed

+84
-55
lines changed
Filter options

2 files changed

+84
-55
lines changed

‎packages/docs/src/components/Sidebar.tsx

Copy file name to clipboardExpand all lines: packages/docs/src/components/Sidebar.tsx
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const Sidebar: FC = () => {
2424
size="lg"
2525
visible={context.sidebarVisible}
2626
onVisibleChange={(value: boolean) => {
27-
context.setSidebarVisible && context.setSidebarVisible(value)
27+
context.setSidebarVisible?.(value)
2828
}}
2929
>
3030
<CSidebarBrand className="justify-content-start ps-3">

‎packages/docs/src/templates/DocsLayout.tsx

Copy file name to clipboardExpand all lines: packages/docs/src/templates/DocsLayout.tsx
+83-54Lines changed: 83 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,36 @@ interface OtherFrameworks {
4949
}
5050
}
5151

52+
interface Fields {
53+
slug: string
54+
}
55+
56+
interface Node {
57+
id: string
58+
fields: Fields
59+
}
60+
61+
interface Item {
62+
node: Node
63+
}
64+
65+
const findShortestSlug = (items: Item[]): string | undefined => {
66+
if (items.length === 0) {
67+
return undefined
68+
}
69+
70+
let shortestSlug = items[0].node.fields.slug
71+
72+
for (const item of items) {
73+
const currentSlug = item.node.fields.slug
74+
if (currentSlug.length < shortestSlug.length) {
75+
shortestSlug = currentSlug
76+
}
77+
}
78+
79+
return shortestSlug
80+
}
81+
5282
const humanize = (text: string): string => {
5383
return text
5484
.split('-')
@@ -57,44 +87,62 @@ const humanize = (text: string): string => {
5787
}
5888

5989
const DocsNav: FC<{
60-
route: string
6190
locationPathname: string
62-
hasNavAPI: boolean
63-
hasNavStyling: boolean
64-
hasNavAccessibility: boolean
65-
}> = ({ route, locationPathname, hasNavAPI, hasNavStyling, hasNavAccessibility }) => (
66-
<CNav className="ms-lg-4 docs-nav bg-body" variant="underline-border">
67-
<CNavItem>
68-
<CNavLink href={route} active={route === locationPathname}>
69-
Features
70-
</CNavLink>
71-
</CNavItem>
72-
{hasNavAPI && (
73-
<CNavItem>
74-
<CNavLink href={`${route}api/`} active={`${route}api/` === locationPathname}>
75-
API
76-
</CNavLink>
77-
</CNavItem>
78-
)}
79-
{hasNavStyling && (
80-
<CNavItem>
81-
<CNavLink href={`${route}styling/`} active={`${route}styling/` === locationPathname}>
82-
Styling
83-
</CNavLink>
84-
</CNavItem>
85-
)}
86-
{hasNavAccessibility && (
91+
nodes: Item[]
92+
}> = ({ locationPathname, nodes }) => {
93+
const parentPathname = findShortestSlug(nodes)
94+
const hasNavAccessibility = useMemo(
95+
() => nodes.some((edge) => edge.node.fields.slug.includes('accessibility')),
96+
[nodes],
97+
)
98+
const hasNavAPI = useMemo(
99+
() => nodes.some((edge) => edge.node.fields.slug.includes('api')),
100+
[nodes],
101+
)
102+
const hasNavStyling = useMemo(
103+
() => nodes.some((edge) => edge.node.fields.slug.includes('styling')),
104+
[nodes],
105+
)
106+
return (
107+
<CNav className="ms-lg-4 docs-nav bg-body" variant="underline-border">
87108
<CNavItem>
88-
<CNavLink
89-
href={`${route}accessibility/`}
90-
active={`${route}accessibility/` === locationPathname}
91-
>
92-
Accessibility
109+
<CNavLink href={parentPathname} active={parentPathname === locationPathname}>
110+
Features
93111
</CNavLink>
94112
</CNavItem>
95-
)}
96-
</CNav>
97-
)
113+
{hasNavAPI && (
114+
<CNavItem>
115+
<CNavLink
116+
href={`${parentPathname}api/`}
117+
active={`${parentPathname}api/` === locationPathname}
118+
>
119+
API
120+
</CNavLink>
121+
</CNavItem>
122+
)}
123+
{hasNavStyling && (
124+
<CNavItem>
125+
<CNavLink
126+
href={`${parentPathname}styling/`}
127+
active={`${parentPathname}styling/` === locationPathname}
128+
>
129+
Styling
130+
</CNavLink>
131+
</CNavItem>
132+
)}
133+
{hasNavAccessibility && (
134+
<CNavItem>
135+
<CNavLink
136+
href={`${parentPathname}accessibility/`}
137+
active={`${parentPathname}accessibility/` === locationPathname}
138+
>
139+
Accessibility
140+
</CNavLink>
141+
</CNavItem>
142+
)}
143+
</CNav>
144+
)
145+
}
98146

99147
const DocsLayout: FC<DocsLayoutProps> = ({ children, data, location, pageContext }) => {
100148
const frontmatter = pageContext.frontmatter || {}
@@ -113,33 +161,14 @@ const DocsLayout: FC<DocsLayoutProps> = ({ children, data, location, pageContext
113161
)
114162
const otherFrameworks: OtherFrameworks = useMemo(() => ({ ...jsonData }), [])
115163
const hasNav = useMemo(() => data?.allMdx?.edges.length > 1, [data])
116-
const hasNavAccessibility = useMemo(
117-
() =>
118-
hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('accessibility')),
119-
[hasNav, data],
120-
)
121-
const hasNavAPI = useMemo(
122-
() => hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('api')),
123-
[hasNav, data],
124-
)
125-
const hasNavStyling = useMemo(
126-
() => hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('styling')),
127-
[hasNav, data],
128-
)
129164

130165
return (
131166
<>
132167
<Seo title={title} description={description} name={name} />
133168
<CContainer lg className="my-md-4 flex-grow-1">
134169
<main className="docs-main order-1">
135170
{hasNav && (
136-
<DocsNav
137-
route={route}
138-
locationPathname={location.pathname}
139-
hasNavAPI={hasNavAPI}
140-
hasNavStyling={hasNavStyling}
141-
hasNavAccessibility={hasNavAccessibility}
142-
/>
171+
<DocsNav locationPathname={location.pathname} nodes={data?.allMdx?.edges as Item[]} />
143172
)}
144173
<div className="docs-intro ps-lg-4">
145174
{name && name !== title ? (

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.