use proper components

Author: aurorascharff

src/app/renderSectionPage.tsx src/app/SectionPage.tsxsrc/app/renderSectionPage.tsx renamed to src/app/SectionPage.tsx

@@ -14,24 +14,30 @@ import {buildPageMetadata} from 'lib/buildPageMetadata';
 import {DocsPage} from './DocsPage';
 import {DocsContent} from 'components/Layout/DocsContent';
 
-interface RenderArgs {
+interface SectionPageProps {
   /** Segments below `src/content/`, e.g. ['learn', 'state'] or ['warnings', 'foo']. */
   segments: string[];
   section: PageSection;
   routeTree: RouteItem;
 }
 
+interface SectionContentProps {
+  /** Segments below `src/content/`, e.g. ['learn', 'state']. */
+  segments: string[];
+  routeTree: RouteItem;
+}
+
 async function loadSection(segments: string[]) {
   const data = await readMarkdownPage(segments);
   if (!data) notFound();
   return {data, pathname: '/' + segments.join('/')};
 }
 
-export async function renderSectionPage({
+export async function SectionPage({
   segments,
   section,
   routeTree,
-}: RenderArgs) {
+}: SectionPageProps) {
   const {data, pathname} = await loadSection(segments);
   return (
     <DocsPage
@@ -43,7 +49,10 @@ export async function renderSectionPage({
   );
 }
 
-export async function renderSectionContent({segments, routeTree}: RenderArgs) {
+export async function SectionContent({
+  segments,
+  routeTree,
+}: SectionContentProps) {
   const {data, pathname} = await loadSection(segments);
   return <DocsContent data={data} pathname={pathname} routeTree={routeTree} />;
 }

src/app/blog/[[...slug]]/page.tsx

@@ -9,7 +9,7 @@ import type {Metadata} from 'next';
 import sidebarBlog from '../../../sidebarBlog.json';
 import type {RouteItem} from 'components/Layout/getRouteMeta';
 import {collectSectionPaths} from 'lib/collectPaths';
-import {renderSectionPage, sectionPageMetadata} from '../../renderSectionPage';
+import {SectionPage, sectionPageMetadata} from '../../SectionPage';
 
 interface PageProps {
   params: Promise<{slug?: string[]}>;
@@ -31,9 +31,11 @@ export async function generateMetadata({params}: PageProps): Promise<Metadata> {
 
 export default async function BlogPage({params}: PageProps) {
   const {slug} = await params;
-  return renderSectionPage({
-    section: 'blog',
-    segments: ['blog', ...(slug ?? [])],
-    routeTree: sidebarBlog as RouteItem,
-  });
+  return (
+    <SectionPage
+      section="blog"
+      segments={['blog', ...(slug ?? [])]}
+      routeTree={sidebarBlog as RouteItem}
+    />
+  );
 }

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

@@ -9,10 +9,7 @@ import type {Metadata} from 'next';
 import sidebarCommunity from '../../../sidebarCommunity.json';
 import type {RouteItem} from 'components/Layout/getRouteMeta';
 import {collectSectionPaths} from 'lib/collectPaths';
-import {
-  renderSectionContent,
-  sectionPageMetadata,
-} from '../../renderSectionPage';
+import {SectionContent, sectionPageMetadata} from '../../SectionPage';
 
 interface PageProps {
   params: Promise<{slug?: string[]}>;
@@ -33,9 +30,10 @@ export async function generateMetadata({params}: PageProps): Promise<Metadata> {
 
 export default async function CommunityPage({params}: PageProps) {
   const {slug} = await params;
-  return renderSectionContent({
-    section: 'community',
-    segments: ['community', ...(slug ?? [])],
-    routeTree: sidebarCommunity as RouteItem,
-  });
+  return (
+    <SectionContent
+      segments={['community', ...(slug ?? [])]}
+      routeTree={sidebarCommunity as RouteItem}
+    />
+  );
 }

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

@@ -9,10 +9,7 @@ import type {Metadata} from 'next';
 import sidebarLearn from '../../../sidebarLearn.json';
 import type {RouteItem} from 'components/Layout/getRouteMeta';
 import {collectSectionPaths} from 'lib/collectPaths';
-import {
-  renderSectionContent,
-  sectionPageMetadata,
-} from '../../renderSectionPage';
+import {SectionContent, sectionPageMetadata} from '../../SectionPage';
 
 interface PageProps {
   params: Promise<{slug?: string[]}>;
@@ -34,9 +31,10 @@ export async function generateMetadata({params}: PageProps): Promise<Metadata> {
 
 export default async function LearnPage({params}: PageProps) {
   const {slug} = await params;
-  return renderSectionContent({
-    section: 'learn',
-    segments: ['learn', ...(slug ?? [])],
-    routeTree: sidebarLearn as RouteItem,
-  });
+  return (
+    <SectionContent
+      segments={['learn', ...(slug ?? [])]}
+      routeTree={sidebarLearn as RouteItem}
+    />
+  );
 }

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

@@ -9,10 +9,7 @@ import type {Metadata} from 'next';
 import sidebarReference from '../../../sidebarReference.json';
 import type {RouteItem} from 'components/Layout/getRouteMeta';
 import {collectSectionPaths} from 'lib/collectPaths';
-import {
-  renderSectionContent,
-  sectionPageMetadata,
-} from '../../renderSectionPage';
+import {SectionContent, sectionPageMetadata} from '../../SectionPage';
 
 interface PageProps {
   params: Promise<{slug?: string[]}>;
@@ -33,9 +30,10 @@ export async function generateMetadata({params}: PageProps): Promise<Metadata> {
 
 export default async function ReferencePage({params}: PageProps) {
   const {slug} = await params;
-  return renderSectionContent({
-    section: 'reference',
-    segments: ['reference', ...(slug ?? [])],
-    routeTree: sidebarReference as RouteItem,
-  });
+  return (
+    <SectionContent
+      segments={['reference', ...(slug ?? [])]}
+      routeTree={sidebarReference as RouteItem}
+    />
+  );
 }

src/app/versions/page.tsx

@@ -8,16 +8,18 @@
 import type {Metadata} from 'next';
 import sidebarHome from '../../sidebarHome.json';
 import type {RouteItem} from 'components/Layout/getRouteMeta';
-import {renderSectionPage, sectionPageMetadata} from '../renderSectionPage';
+import {SectionPage, sectionPageMetadata} from '../SectionPage';
 
 export async function generateMetadata(): Promise<Metadata> {
   return sectionPageMetadata({section: 'unknown', segments: ['versions']});
 }
 
 export default async function VersionsPage() {
-  return renderSectionPage({
-    section: 'unknown',
-    segments: ['versions'],
-    routeTree: sidebarHome as RouteItem,
-  });
+  return (
+    <SectionPage
+      section="unknown"
+      segments={['versions']}
+      routeTree={sidebarHome as RouteItem}
+    />
+  );
 }

src/app/warnings/[slug]/page.tsx

@@ -9,7 +9,7 @@ import type {Metadata} from 'next';
 import sidebarHome from '../../../sidebarHome.json';
 import type {RouteItem} from 'components/Layout/getRouteMeta';
 import {collectFlatSectionSlugs} from 'lib/collectPaths';
-import {renderSectionPage, sectionPageMetadata} from '../../renderSectionPage';
+import {SectionPage, sectionPageMetadata} from '../../SectionPage';
 
 interface PageProps {
   params: Promise<{slug: string}>;
@@ -30,9 +30,11 @@ export async function generateMetadata({params}: PageProps): Promise<Metadata> {
 
 export default async function WarningPage({params}: PageProps) {
   const {slug} = await params;
-  return renderSectionPage({
-    section: 'unknown',
-    segments: ['warnings', slug],
-    routeTree: sidebarHome as RouteItem,
-  });
+  return (
+    <SectionPage
+      section="unknown"
+      segments={['warnings', slug]}
+      routeTree={sidebarHome as RouteItem}
+    />
+  );
 }