-
Notifications
You must be signed in to change notification settings - Fork 8
feat: add top level "learn" section (#331) #927
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR introduces a new "Learn" section to the documentation site with a comprehensive framework for rendering MDX-based documentation pages. The implementation includes static generation utilities, frontmatter parsing, custom MDX components, and plugins for heading management and outline generation.
Key changes:
- Added static site generation infrastructure for dynamically routing and rendering MDX documentation pages
- Implemented remark/rehype plugins for automatic heading ID generation and anchor link insertion
- Created reusable MDX components (SectionOverview, AnchorLink) for enhanced documentation layouts
Reviewed Changes
Copilot reviewed 22 out of 22 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| site-config/brc-analytics/local/config.ts | Added "Learn" navigation menu item |
| routes/constants.ts | Added LEARN route constant pointing to featured-analyses page |
| plugins/utils.ts | Created utility functions for generating unique IDs and slugifying headings |
| plugins/remarkHeadings.ts | Implemented remark plugin to extract heading outlines from MDX content |
| plugins/rehypeSlug.ts | Implemented rehype plugin to add IDs and anchor links to headings |
| pages/learn/[...slug].tsx | Created dynamic Next.js page for rendering learn section documentation |
| app/views/LearnContentView/learnContentView.tsx | Created view component for rendering MDX content with layout |
| app/docs/learn/featured-analyses.mdx | Added example MDX documentation page with frontmatter |
| app/docs/common/staticGeneration/utils.ts | Added utility to build page slugs from static props context |
| app/docs/common/staticGeneration/types.ts | Defined StaticProps type for documentation pages |
| app/docs/common/staticGeneration/staticProps.ts | Implemented function to build static props from MDX files |
| app/docs/common/staticGeneration/staticPaths.ts | Implemented function to generate static paths for all MDX files |
| app/docs/common/mdx/constants.ts | Registered custom MDX components for use in documentation |
| app/docs/common/frontmatter/utils.ts | Created utilities for extracting and sanitizing frontmatter from MDX files |
| app/docs/common/frontmatter/types.ts | Defined TypeScript types for frontmatter structure |
| app/docs/common/files/utils.ts | Implemented utilities for mapping file paths to slugs and resolving paths |
| app/components/Docs/components/common/Typography/Heading/heading.tsx | Created reusable Heading component with optional anchor links |
| app/components/Docs/components/SectionOverview/utils.ts | Added utility to split links into two-column layout |
| app/components/Docs/components/SectionOverview/types.ts | Defined types for section overview structure |
| app/components/Docs/components/SectionOverview/sectionOverview.tsx | Implemented SectionOverview component for displaying categorized links |
| app/components/Docs/components/SectionOverview/sectionOverview.styles.ts | Added styled components for section overview layout |
| app/components/Docs/components/Content/content.styles.ts | Created styled component for MDX content with heading hover effects |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
Closes #331.
This pull request introduces a new framework for handling documentation pages in the "Learn" section, including static generation, frontmatter parsing, MDX rendering, and custom components for improved layout and navigation. The changes add utilities for mapping file paths to slugs, extracting frontmatter, generating static paths/props, and rendering content with custom MDX components. The most important changes are grouped below:
Static Generation and Routing for Docs Pages
mapSlugByFilePaths,resolveRelativePath), build static paths (buildStaticPaths), and generate static props (buildStaticProps). These ensure all MDX files in the docs directory are discoverable and rendered as static pages. [1] [2] [3] [4] [5]pages/learn/[...slug].tsxthat uses these utilities to statically render documentation content for any slug under the "learn" section. (pages/learn/[...slug].tsxR1-R34)Frontmatter and Content Parsing
MDX Components and Rendering
SectionOverviewandAnchorLink, and registered them for use in MDX content. This allows for interactive and styled components within documentation pages. [1] [2] [3] [4] [5]LearnContentView) to render documentation pages using the new static props and MDX components, wrapped in the appropriate layout.Plugins for Headings and Outline Generation
Example Documentation Page
featured-analyses.mdx) that demonstrates usage of the new overview and breadcrumb features.