Skip to content

Conversation

@frano-m
Copy link
Contributor

@frano-m frano-m commented Oct 21, 2025

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

  • Added utilities and types to support static generation of documentation pages, including functions to map file paths to slugs (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]
  • Created a new dynamic Next.js page at pages/learn/[...slug].tsx that uses these utilities to statically render documentation content for any slug under the "learn" section. (pages/learn/[...slug].tsxR1-R34)

Frontmatter and Content Parsing

  • Defined new types and utilities for parsing frontmatter from MDX files, including support for breadcrumbs, outlines, and overview links. This enables richer metadata and navigation for docs pages. [1] [2]

MDX Components and Rendering

  • Introduced custom MDX components, such as SectionOverview and AnchorLink, and registered them for use in MDX content. This allows for interactive and styled components within documentation pages. [1] [2] [3] [4] [5]
  • Updated the content view (LearnContentView) to render documentation pages using the new static props and MDX components, wrapped in the appropriate layout.

Plugins for Headings and Outline Generation

  • Added custom remark and rehype plugins to automatically generate heading slugs, anchor links, and outlines from MDX content. This improves navigation and accessibility within documentation pages. [1] [2]

Example Documentation Page

  • Added an example MDX documentation page (featured-analyses.mdx) that demonstrates usage of the new overview and breadcrumb features.
image

Copy link
Contributor

Copilot AI left a 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.

@frano-m frano-m moved this to Ready for Review in BRC development tasks Oct 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

Status: Ready for Review

Development

Successfully merging this pull request may close these issues.

Add top level "Learn" section

2 participants