Skip to content

Commit d50cbcd

Browse files
aurorascharffaurorascharff
committed
Refactor section rendering to use renderSectionContent and add layout components for community, learn, and reference sections
1 parent a1e82f7 commit d50cbcd

8 files changed

Lines changed: 241 additions & 9 deletions

File tree

‎src/app/community/[[...slug]]/page.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ import type {Metadata} from 'next';
99
import sidebarCommunity from '../../../sidebarCommunity.json';
1010
import type {RouteItem} from 'components/Layout/getRouteMeta';
1111
import {collectSectionPaths} from 'lib/collectPaths';
12-
import {renderSectionPage, sectionPageMetadata} from '../../renderSectionPage';
12+
import {
13+
renderSectionContent,
14+
sectionPageMetadata,
15+
} from '../../renderSectionPage';
1316

1417
interface PageProps {
1518
params: Promise<{slug?: string[]}>;
@@ -30,7 +33,7 @@ export async function generateMetadata({params}: PageProps): Promise<Metadata> {
3033

3134
export default async function CommunityPage({params}: PageProps) {
3235
const {slug} = await params;
33-
return renderSectionPage({
36+
return renderSectionContent({
3437
section: 'community',
3538
segments: ['community', ...(slug ?? [])],
3639
routeTree: sidebarCommunity as RouteItem,

‎src/app/community/layout.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
'use client';
9+
10+
import * as React from 'react';
11+
import {usePathname} from 'next/navigation';
12+
import {SidebarNav} from 'components/Layout/SidebarNav';
13+
import {TopNav} from 'components/Layout/TopNav';
14+
import {getRouteMeta} from 'components/Layout/getRouteMeta';
15+
import type {RouteItem} from 'components/Layout/getRouteMeta';
16+
import sidebarCommunity from '../../sidebarCommunity.json';
17+
18+
export default function CommunityLayout({
19+
children,
20+
}: {
21+
children: React.ReactNode;
22+
}) {
23+
const pathname = usePathname() || '/';
24+
const routeTree = sidebarCommunity as RouteItem;
25+
const {breadcrumbs} = getRouteMeta(pathname, routeTree);
26+
return (
27+
<>
28+
<TopNav
29+
section="community"
30+
routeTree={routeTree}
31+
breadcrumbs={breadcrumbs}
32+
/>
33+
<div className="grid grid-cols-only-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc">
34+
<div className="lg:-mt-16 z-10">
35+
<div className="fixed top-0 py-0 shadow lg:pt-16 lg:sticky start-0 end-0 lg:shadow-none">
36+
<SidebarNav routeTree={routeTree} breadcrumbs={breadcrumbs} />
37+
</div>
38+
</div>
39+
{children}
40+
</div>
41+
</>
42+
);
43+
}

‎src/app/learn/[[...slug]]/page.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ import type {Metadata} from 'next';
99
import sidebarLearn from '../../../sidebarLearn.json';
1010
import type {RouteItem} from 'components/Layout/getRouteMeta';
1111
import {collectSectionPaths} from 'lib/collectPaths';
12-
import {renderSectionPage, sectionPageMetadata} from '../../renderSectionPage';
12+
import {
13+
renderSectionContent,
14+
sectionPageMetadata,
15+
} from '../../renderSectionPage';
1316

1417
interface PageProps {
1518
params: Promise<{slug?: string[]}>;
@@ -31,7 +34,7 @@ export async function generateMetadata({params}: PageProps): Promise<Metadata> {
3134

3235
export default async function LearnPage({params}: PageProps) {
3336
const {slug} = await params;
34-
return renderSectionPage({
37+
return renderSectionContent({
3538
section: 'learn',
3639
segments: ['learn', ...(slug ?? [])],
3740
routeTree: sidebarLearn as RouteItem,

‎src/app/learn/layout.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
'use client';
9+
10+
import * as React from 'react';
11+
import {usePathname} from 'next/navigation';
12+
import {SidebarNav} from 'components/Layout/SidebarNav';
13+
import {TopNav} from 'components/Layout/TopNav';
14+
import {getRouteMeta} from 'components/Layout/getRouteMeta';
15+
import type {RouteItem} from 'components/Layout/getRouteMeta';
16+
import sidebarLearn from '../../sidebarLearn.json';
17+
18+
export default function LearnLayout({children}: {children: React.ReactNode}) {
19+
const pathname = usePathname() || '/';
20+
const routeTree = sidebarLearn as RouteItem;
21+
const {breadcrumbs} = getRouteMeta(pathname, routeTree);
22+
return (
23+
<>
24+
<TopNav section="learn" routeTree={routeTree} breadcrumbs={breadcrumbs} />
25+
<div className="grid grid-cols-only-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc">
26+
<div className="lg:-mt-16 z-10">
27+
<div className="fixed top-0 py-0 shadow lg:pt-16 lg:sticky start-0 end-0 lg:shadow-none">
28+
<SidebarNav routeTree={routeTree} breadcrumbs={breadcrumbs} />
29+
</div>
30+
</div>
31+
{children}
32+
</div>
33+
</>
34+
);
35+
}

‎src/app/reference/[[...slug]]/page.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ import type {Metadata} from 'next';
99
import sidebarReference from '../../../sidebarReference.json';
1010
import type {RouteItem} from 'components/Layout/getRouteMeta';
1111
import {collectSectionPaths} from 'lib/collectPaths';
12-
import {renderSectionPage, sectionPageMetadata} from '../../renderSectionPage';
12+
import {
13+
renderSectionContent,
14+
sectionPageMetadata,
15+
} from '../../renderSectionPage';
1316

1417
interface PageProps {
1518
params: Promise<{slug?: string[]}>;
@@ -30,7 +33,7 @@ export async function generateMetadata({params}: PageProps): Promise<Metadata> {
3033

3134
export default async function ReferencePage({params}: PageProps) {
3235
const {slug} = await params;
33-
return renderSectionPage({
36+
return renderSectionContent({
3437
section: 'reference',
3538
segments: ['reference', ...(slug ?? [])],
3639
routeTree: sidebarReference as RouteItem,

‎src/app/reference/layout.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
'use client';
9+
10+
import * as React from 'react';
11+
import {usePathname} from 'next/navigation';
12+
import {SidebarNav} from 'components/Layout/SidebarNav';
13+
import {TopNav} from 'components/Layout/TopNav';
14+
import {getRouteMeta} from 'components/Layout/getRouteMeta';
15+
import type {RouteItem} from 'components/Layout/getRouteMeta';
16+
import sidebarReference from '../../sidebarReference.json';
17+
18+
export default function ReferenceLayout({
19+
children,
20+
}: {
21+
children: React.ReactNode;
22+
}) {
23+
const pathname = usePathname() || '/';
24+
const routeTree = sidebarReference as RouteItem;
25+
const {breadcrumbs} = getRouteMeta(pathname, routeTree);
26+
return (
27+
<>
28+
<TopNav
29+
section="reference"
30+
routeTree={routeTree}
31+
breadcrumbs={breadcrumbs}
32+
/>
33+
<div className="grid grid-cols-only-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc">
34+
<div className="lg:-mt-16 z-10">
35+
<div className="fixed top-0 py-0 shadow lg:pt-16 lg:sticky start-0 end-0 lg:shadow-none">
36+
<SidebarNav routeTree={routeTree} breadcrumbs={breadcrumbs} />
37+
</div>
38+
</div>
39+
{children}
40+
</div>
41+
</>
42+
);
43+
}

‎src/app/renderSectionPage.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import type {PageSection} from 'components/Layout/Page';
1212
import {readMarkdownPage} from 'lib/readMarkdownPage';
1313
import {buildPageMetadata} from 'lib/buildPageMetadata';
1414
import {DocsPage} from './DocsPage';
15+
import {DocsContent} from 'components/Layout/DocsContent';
1516

1617
interface RenderArgs {
1718
/** Segments below `src/content/`, e.g. ['learn', 'state'] or ['warnings', 'foo']. */
@@ -20,14 +21,18 @@ interface RenderArgs {
2021
routeTree: RouteItem;
2122
}
2223

24+
async function loadSection(segments: string[]) {
25+
const data = await readMarkdownPage(segments);
26+
if (!data) notFound();
27+
return {data, pathname: '/' + segments.join('/')};
28+
}
29+
2330
export async function renderSectionPage({
2431
segments,
2532
section,
2633
routeTree,
2734
}: RenderArgs) {
28-
const data = await readMarkdownPage(segments);
29-
if (!data) notFound();
30-
const pathname = '/' + segments.join('/');
35+
const {data, pathname} = await loadSection(segments);
3136
return (
3237
<DocsPage
3338
data={data}
@@ -38,6 +43,11 @@ export async function renderSectionPage({
3843
);
3944
}
4045

46+
export async function renderSectionContent({segments, routeTree}: RenderArgs) {
47+
const {data, pathname} = await loadSection(segments);
48+
return <DocsContent data={data} pathname={pathname} routeTree={routeTree} />;
49+
}
50+
4151
export async function sectionPageMetadata({
4252
segments,
4353
section,

‎src/components/Layout/DocsContent.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
'use client';
9+
10+
import {Suspense} from 'react';
11+
import * as React from 'react';
12+
import {Footer} from './Footer';
13+
import {Toc} from './Toc';
14+
import {DocsPageFooter} from 'components/DocsFooter';
15+
import PageHeading from 'components/PageHeading';
16+
import {getRouteMeta} from './getRouteMeta';
17+
import {useDeserializedMDX} from './useDeserializedMDX';
18+
import {TocContext} from '../MDX/TocContext';
19+
import {LanguagesContext} from '../MDX/LanguagesContext';
20+
import type {RouteItem} from './getRouteMeta';
21+
import type {PageData} from 'lib/readMarkdownPage';
22+
23+
import(/* webpackPrefetch: true */ '../MDX/CodeBlock/CodeBlock');
24+
25+
export function DocsContent({
26+
data,
27+
pathname,
28+
routeTree,
29+
}: {
30+
data: PageData;
31+
pathname: string;
32+
routeTree: RouteItem;
33+
}) {
34+
const {parsedContent, parsedToc} = useDeserializedMDX(data.content, data.toc);
35+
const {route, nextRoute, prevRoute, breadcrumbs} = getRouteMeta(
36+
pathname,
37+
routeTree
38+
);
39+
const title = data.meta.title || route?.title || '';
40+
const version = data.meta.version;
41+
const description = data.meta.description || route?.description || '';
42+
43+
return (
44+
<>
45+
{/* No fallback UI so need to be careful not to suspend directly inside. */}
46+
<Suspense fallback={null}>
47+
<main className="min-w-0 isolate">
48+
<article
49+
className="font-normal break-words text-primary dark:text-primary-dark"
50+
key={pathname}>
51+
<div className="ps-0">
52+
<div>
53+
<PageHeading
54+
title={title}
55+
version={version}
56+
description={description}
57+
tags={route?.tags}
58+
breadcrumbs={breadcrumbs}
59+
/>
60+
</div>
61+
<div className="px-5 sm:px-12">
62+
<div className="max-w-7xl mx-auto">
63+
<TocContext value={parsedToc}>
64+
<LanguagesContext value={data.languages}>
65+
{parsedContent}
66+
</LanguagesContext>
67+
</TocContext>
68+
</div>
69+
<DocsPageFooter
70+
route={route}
71+
nextRoute={nextRoute}
72+
prevRoute={prevRoute}
73+
/>
74+
</div>
75+
</div>
76+
</article>
77+
<div className="self-stretch w-full">
78+
<div className="w-full px-5 pt-10 mx-auto sm:px-12 md:px-12 md:pt-12 lg:pt-10">
79+
<hr className="mx-auto max-w-7xl border-border dark:border-border-dark" />
80+
</div>
81+
<div className="py-12 px-5 sm:px-12 md:px-12 sm:py-12 md:py-16 lg:py-14">
82+
<Footer />
83+
</div>
84+
</div>
85+
</main>
86+
</Suspense>
87+
<div className="hidden -mt-16 lg:max-w-custom-xs 2xl:block">
88+
{parsedToc.length > 0 && <Toc headings={parsedToc} key={pathname} />}
89+
</div>
90+
</>
91+
);
92+
}

0 commit comments

Comments
 (0)