From bc166a9611a2e04ec5f69a4937b805c7bb9b19c7 Mon Sep 17 00:00:00 2001 From: Marc LeBlanc <7050295+marcleblanc2@users.noreply.github.com> Date: Fri, 11 Sep 2026 04:19:09 -0600 Subject: [PATCH] Stop bundling the docs corpus into the client JS Toc.tsx imported allPosts in a 'use client' component to find the GitHub edit path, which pulled the whole contentlayer corpus into a 24 MB (2.5 MB compressed) client chunk on every page. The server page now passes the post id as an editPath prop. ContentTabs.jsx, the only other client importer, is unused by any .mdx file and is removed. Amp-Thread-ID: https://ampcode.com/threads/T-01a08e2d-682f-75dd-a050-cb9bf8888dac Co-authored-by: Amp --- src/app/[...slug]/page.tsx | 1 + src/components/ContentTabs.jsx | 68 -------------------------------- src/components/MdxComponents.tsx | 3 -- src/components/Toc.tsx | 25 ++---------- 4 files changed, 5 insertions(+), 92 deletions(-) delete mode 100644 src/components/ContentTabs.jsx diff --git a/src/app/[...slug]/page.tsx b/src/app/[...slug]/page.tsx index 4128dc0d5..ada2a241d 100644 --- a/src/app/[...slug]/page.tsx +++ b/src/app/[...slug]/page.tsx @@ -68,6 +68,7 @@ const PostLayout = ({params}: Props) => { ); diff --git a/src/components/ContentTabs.jsx b/src/components/ContentTabs.jsx deleted file mode 100644 index 81c2b0381..000000000 --- a/src/components/ContentTabs.jsx +++ /dev/null @@ -1,68 +0,0 @@ -'use client'; - -import { useState, useEffect } from 'react'; -import { getMDXComponent } from 'next-contentlayer/hooks'; -import clsx from 'clsx'; -import { useParams, useRouter } from 'next/navigation'; -import { allPosts } from 'contentlayer/generated'; -import MdxComponents from '@/components/MdxComponents'; - -export function ContentTabs({ children, name }) { - const params = useParams(); - const router = useRouter(); - const [onTab, setOnTab] = useState(true) - const [selectedTab, setSelectedTab] = useState(null); - const [postContent, setPostContent] = useState(null); - - useEffect(() => { - updateTabFromURL(); - }, []); - - const updateTabFromURL = () => { - - const path = `/${params.slug.join('/')}`; - const allPaths = children.map(child => child.props.href) - - if (!allPaths.includes(path)) { - setSelectedTab(allPaths[0]) - const selectedPost = allPosts.find(post => `/${post._raw.flattenedPath}` === allPaths[0] && name == 'main'); - - if (selectedPost) { - const Content = getMDXComponent(selectedPost.body.code); - setPostContent(); - setOnTab(false) - - const url = new URL(window.location.href); - url.pathname = allPaths[0]; - window.history.replaceState(null, null, url.toString()); - console.log('allPaths__', allPaths[0]) - } - } else setSelectedTab(path) - }; - - if (!onTab) return
{postContent}
- - return ( -
-
- {children.map((child, index) => ( - - ))} -
-
{postContent}
-
- ); -} - -export function ContentTab({ title, href, selected }) { - return null; -} diff --git a/src/components/MdxComponents.tsx b/src/components/MdxComponents.tsx index c7f2fed10..b898d58a0 100644 --- a/src/components/MdxComponents.tsx +++ b/src/components/MdxComponents.tsx @@ -1,5 +1,4 @@ import AWSOneClickLaunchForm from './AWSOneClickLaunchForm'; -import {ContentTab, ContentTabs} from './ContentTabs'; import FeatureParity from './FeatureParity'; import Accordion from './mdx/Accordion'; import {Callout} from './mdx/Callout'; @@ -23,8 +22,6 @@ const MdxComponents = (version?: string) => { ResourceEstimator, AWSOneClickLaunchForm, Accordion, - ContentTabs: (props: any) => , - ContentTab: (props: any) => , Tabs: (props: any) => , Tab: (props: any) => , QuickLinks, diff --git a/src/components/Toc.tsx b/src/components/Toc.tsx index b97adb983..9d037c197 100644 --- a/src/components/Toc.tsx +++ b/src/components/Toc.tsx @@ -1,7 +1,6 @@ 'use client'; import clsx from 'clsx'; -import {allPosts} from 'contentlayer/generated'; import Link from 'next/link'; import {useParams} from 'next/navigation'; import {useCallback, useEffect, useState} from 'react'; @@ -18,16 +17,16 @@ interface Heading { interface Props { headings: Heading[]; rawMarkdown?: string; + /** Source file path under docs/, for the "Edit this page" link. */ + editPath: string; } type ParamsType = { - version?: string; slug: string[]; }; -export function TableOfContents({headings, rawMarkdown}: Props) { +export function TableOfContents({headings, rawMarkdown, editPath}: Props) { let [currentSection, setCurrentSection] = useState(headings[0]?.id); - const [path, setPath] = useState(''); const [copied, setCopied] = useState(false); const params: ParamsType = useParams(); const basePath = process.env.NEXT_PUBLIC_DOCS_BASE_PATH || ''; @@ -63,22 +62,6 @@ export function TableOfContents({headings, rawMarkdown}: Props) { .filter((x): x is {id: string; top: number} => x !== null); }, []); - useEffect(() => { - const path = params.slug.join('/'); - - if (allPosts) { - const post = allPosts.find( - post => post._raw.flattenedPath === path - ); - if (post) { - let currentPath = post._id; - if (params?.version) - currentPath = `versioned/${params.version}/${currentPath}`; - setPath(currentPath); - } - } - }, [params]); - useEffect(() => { if (headings.length === 0) return; @@ -165,7 +148,7 @@ export function TableOfContents({headings, rawMarkdown}: Props) {