Summary

All 48 JavaScript snippets are extracted from inline MDX code blocks into standalone .js files, making each snippet individually addressable by path — enabling LLMs and agents to reference, read, and analyze them directly.

Changes

New: snippets/ directory

48 .js files organized by category, mirroring the pages structure:

• snippets/CoreWebVitals/ — 7 files (CLS, INP, LCP, LCP-Sub-Parts, LCP-Trail, LCP-Image-Entropy, LCP-Video-Candidate)
• snippets/Interaction/ — 8 files
• snippets/Loading/ — 27 files (including TTFB, TTFB-Sub-Parts, TTFB-Resources)
• snippets/Media/ — 3 files
• snippets/Resources/ — 1 file

Each file contains the raw, executable JavaScript as-is — valid for pasting directly into the browser DevTools console.

New: components/Snippet.jsx

React component that renders external snippet files with:

• Syntax highlighting via highlight.js (light/dark mode)
• Copy-to-clipboard button with visual feedback
• max-height: 300px with vertical scroll to avoid long pages
• Visual style matching Nextra's native code blocks

New: scripts/extract-snippets.js

One-time migration script that extracted all inline code blocks from ### Snippet sections in MDX files and rewrote them as import + <Snippet> usage. Kept in the repo for reference and future use.

Updated: all 46 MDX pages in pages/

Each page now imports its snippet(s) as raw strings and renders them via <Snippet>:

import snippet from '../../snippets/Loading/TTFB.js?raw'
import { Snippet } from '../../components/Snippet'

<Snippet code={snippet} />

For pages with multiple snippets (e.g. TTFB), each section imports its own file with a semantic name derived from the H2 heading.

Updated: next.config.js

Custom webpack rule to import .js files from snippets/ as raw strings via ?raw:

• Injected into Next.js's oneOf block to take precedence over the SWC loader
• Pre-loaders (React Fast Refresh) excluded from snippets/ to prevent HMR code injection
• Result: import foo from './snippets/X.js?raw' yields the unmodified source string

Updated: styles/globals.css

• Added highlight.js CSS for light mode (GitHub style) and dark mode (Atom One Dark)
• Override for Nextra's pre code { padding: 0 !important } using .nextra-code-block pre code

Test plan

• Check that all snippet pages render with syntax-highlighted code blocks
• Verify copy button copies the original, unmodified snippet (no SWC transforms, no HMR code)
• Confirm max-height scroll works on long snippets
• Test light mode and dark mode syntax highlighting
• Verify TTFB page renders 3 separate snippets correctly
• Check that native Nextra code blocks (non-snippet pages) are unaffected