Skip to content

Commit e49d32a

Browse files
davidjerlekedavidjerleke
committed
Docs - Add site navigation routes
1 parent 49faa8c commit e49d32a

File tree

15 files changed

+172
-59
lines changed

15 files changed

+172
-59
lines changed

‎website/src/app/docs/[[...slug]]/layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { ReactNode } from 'react'
22
import { DocsPageParamsType } from '@/utils/docs-page'
3-
import { getDocsPageRoutes } from '@/utils/docs-routes'
3+
import { getDocsRoutes } from '@/utils/docs-routes'
44
import { SidebarNavigationProvider } from '@/components/SidebarNavigation/SidebarNavigationContext'
55

66
type PropType = DocsPageParamsType & {
@@ -10,7 +10,7 @@ type PropType = DocsPageParamsType & {
1010
export default async function DocsLayout(props: PropType) {
1111
const { children, params } = props
1212
const { slug } = await params
13-
const routes = await getDocsPageRoutes(slug)
13+
const routes = await getDocsRoutes(slug)
1414

1515
console.log(routes, 'layout routes')
1616

‎website/src/app/docs/[[...slug]]/page.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import { Metadata } from 'next'
22
import { filePathToMdxFrontmatter } from '@/utils/mdx'
3+
import { PageGrid } from '@/components/Page/PageGrid'
4+
import { PAGE_LAYOUTS } from '@/utils/page'
35
import {
46
type DocsPageParamsType,
57
getDocsPageContent,
68
getDocsPageFilePath
79
} from '@/utils/docs-page'
8-
import { PageGrid } from '@/components/Page/PageGrid'
9-
import { PAGE_LAYOUTS } from '@/utils/page'
10-
import { useRoutesContext } from '@/components/SidebarNavigation/SidebarNavigationContext'
1110

1211
type PropType = DocsPageParamsType
1312

‎website/src/app/layout.tsx‎

Lines changed: 27 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import { Header } from '@/components/Header/Header'
1111
import { Footer } from '@/components/Footer/Footer'
1212
import { THEME_CLASSNAME_LIGHT } from '@/utils/theme'
1313
import { RoutesLoading } from '@/components/Routes/RoutesLoading'
14+
import { getRootRoutes } from '@/utils/root-routes'
15+
import { SiteNavigationProvider } from '@/components/SiteNavigation/SiteNavigationContext'
1416

1517
const interRoman = localFont({
1618
src: '../assets/fonts/Inter-roman.var.woff2',
@@ -26,31 +28,34 @@ type PropType = {
2628
export default async function RootLayout(props: PropType) {
2729
const { children } = props
2830
const htmlClassNames = [interRoman.className, THEME_CLASSNAME_LIGHT].join(' ')
31+
const routes = await getRootRoutes()
2932

3033
return (
3134
<StyledComponentsRegistry>
32-
<ReduxProvider>
33-
<GlobalStyles />
34-
<ThemeInit />
35-
<KeyEventsInit />
36-
37-
<head>
38-
<Head />
39-
</head>
40-
41-
<html lang="en" className={htmlClassNames}>
42-
<body>
43-
<NoScript />
44-
<KeyEventsSkipToContent />
45-
<Header />
46-
<RoutesLoading />
47-
48-
{children}
49-
50-
<Footer />
51-
</body>
52-
</html>
53-
</ReduxProvider>
35+
<SiteNavigationProvider routes={routes}>
36+
<ReduxProvider>
37+
<GlobalStyles />
38+
39+
<html lang="en" className={htmlClassNames}>
40+
<head>
41+
<Head />
42+
</head>
43+
44+
<body>
45+
<ThemeInit />
46+
<KeyEventsInit />
47+
<NoScript />
48+
<KeyEventsSkipToContent />
49+
<Header />
50+
<RoutesLoading />
51+
52+
{children}
53+
54+
<Footer />
55+
</body>
56+
</html>
57+
</ReduxProvider>
58+
</SiteNavigationProvider>
5459
</StyledComponentsRegistry>
5560
)
5661
}

‎website/src/app/not-found.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
11
import { Metadata } from 'next'
22
import { filePathToMdxFrontmatter } from '@/utils/mdx'
3+
import { PageFrame } from '@/components/Page/PageFrame'
4+
import { styled } from 'styled-components'
35
import {
46
getNotFoundPageContent,
57
getNotFoundPageFilePath
68
} from '@/utils/not-found-page'
79

10+
const PageNotFoundWrapper = styled(PageFrame)`
11+
text-align: center;
12+
&:before {
13+
content: '';
14+
display: block;
15+
height: 10vw;
16+
max-height: 100px;
17+
}
18+
`
19+
820
export async function generateMetadata(): Promise<Metadata> {
921
const filePath = await getNotFoundPageFilePath()
1022
const frontmatter = filePathToMdxFrontmatter(filePath)
@@ -18,5 +30,5 @@ export async function generateMetadata(): Promise<Metadata> {
1830
export default async function NotFoundPage() {
1931
const content = await getNotFoundPageContent()
2032

21-
return <article>{content}</article>
33+
return <PageNotFoundWrapper size="SM">{content}</PageNotFoundWrapper>
2234
}

‎website/src/components/Header/HeaderActions.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import styled, { css } from 'styled-components'
2-
// import { useAppSelector } from 'hooks/useRedux'
3-
// import { selectHierarchalRoutes } from 'components/Routes/routesReducer'
42
import { ThemeToggle } from '@/components/Theme/ThemeToggle'
53
import { LinkNavigation } from '@/components/Link/LinkNavigation'
64
import { VersionBadge } from '@/components/VersionBadge/VersionBadge'
@@ -10,6 +8,7 @@ import { SPACINGS } from '@/utils/spacings'
108
import { FONT_SIZES } from '@/utils/font-sizes'
119
import { Search } from '@/components/Search/Search'
1210
import { createGapStyles } from '@/utils/create-gap-styles'
11+
import { useSiteNavigationContext } from '../SiteNavigation/SiteNavigationContext'
1312

1413
const ITEM_SPACING_DESKTOP = SPACINGS.CUSTOM(() => 2.8)
1514

@@ -45,19 +44,18 @@ const Link = styled(LinkNavigation)`
4544
`
4645

4746
export function HeaderActions() {
48-
// TODO: Replace with header routes, not docs routes
49-
// const hierarchicalRoutes = useAppSelector(selectHierarchalRoutes)
47+
const { flatRoutes } = useSiteNavigationContext()
5048

5149
return (
5250
<HeaderActionsWrapper>
5351
<Item $hiddenAtCompact>
5452
<nav aria-label="Quick Navigation Menu">
5553
<HeaderActionsWrapper>
56-
{/* {hierarchicalRoutes.map((route) => (
57-
<Item key={route.id}>
54+
{flatRoutes.map((route) => (
55+
<Item key={route.slug}>
5856
<Link slug={route.slug}>{route.title}</Link>
5957
</Item>
60-
))} */}
58+
))}
6159
</HeaderActionsWrapper>
6260
</nav>
6361
</Item>

‎website/src/components/SidebarNavigation/SidebarNavigationContext.tsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,16 @@
11
'use client'
22

33
import React, { createContext, useContext } from 'react'
4-
import { RouteType } from '@/utils/routes'
4+
import { FlatAndHierarchicalRoutesType } from '@/utils/routes'
55

6-
export type SidebarNavigationContextType = {
7-
hierarchicalRoutes: RouteType[]
8-
flatRoutes: RouteType[]
9-
}
10-
11-
const SidebarNavigationContext = createContext<SidebarNavigationContextType>({
6+
const SidebarNavigationContext = createContext<FlatAndHierarchicalRoutesType>({
127
hierarchicalRoutes: [],
138
flatRoutes: []
149
})
1510

1611
type PropType = {
1712
children: React.ReactNode
18-
routes: SidebarNavigationContextType
13+
routes: FlatAndHierarchicalRoutesType
1914
}
2015

2116
export function SidebarNavigationProvider(props: PropType) {
@@ -28,6 +23,6 @@ export function SidebarNavigationProvider(props: PropType) {
2823
)
2924
}
3025

31-
export function useSidebarNavigationContext(): SidebarNavigationContextType {
26+
export function useSidebarNavigationContext(): FlatAndHierarchicalRoutesType {
3227
return useContext(SidebarNavigationContext)
3328
}

‎website/src/components/SiteNavigation/SiteNavigationContext.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
'use client'
2+
3+
import React, { createContext, useContext } from 'react'
4+
import { FlatAndHierarchicalRoutesType } from '@/utils/routes'
5+
6+
const SiteNavigationContext = createContext<FlatAndHierarchicalRoutesType>({
7+
hierarchicalRoutes: [],
8+
flatRoutes: []
9+
})
10+
11+
type PropType = {
12+
children: React.ReactNode
13+
routes: FlatAndHierarchicalRoutesType
14+
}
15+
16+
export function SiteNavigationProvider(props: PropType) {
17+
const { routes, children } = props
18+
19+
return (
20+
<SiteNavigationContext.Provider value={routes}>
21+
{children}
22+
</SiteNavigationContext.Provider>
23+
)
24+
}
25+
26+
export function useSiteNavigationContext(): FlatAndHierarchicalRoutesType {
27+
return useContext(SiteNavigationContext)
28+
}

‎website/src/components/Theme/ThemeInit.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@ export function ThemeInit() {
3030
document.documentElement.classList.add(`${THEME_PREFIX}${theme}`)
3131

3232
if (themeMetaNode) {
33-
const nextBackgroundColor = THEME_COLORS[theme].BACKGROUND_SITE
33+
const nextTheme = THEME_COLORS[theme] || THEME_COLORS[THEME_KEYS.LIGHT]
34+
const nextBackgroundColor = nextTheme.BACKGROUND_SITE
3435
themeMetaNode.setAttribute('content', nextBackgroundColor)
3536
}
3637
}, [theme])

‎website/src/content/v8/pages/get-started/react.mdx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
1+
---
2+
title: 'v8 Get started REACT title'
3+
description: 'v8 Get started REACT description'
4+
---
5+
16
# v8 Get started REACT

‎website/src/content/v9/pages/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: 'v9 Start page title'
2+
title: 'Docs'
33
description: 'v9 Start page description'
44
---
55

0 commit comments

Comments
 (0)