Skip to content

add: changelogs page in docs#1887

Merged
kotAPI merged 6 commits intomainfrom
docs/changelog-page
Apr 13, 2026
Merged

add: changelogs page in docs#1887
kotAPI merged 6 commits intomainfrom
docs/changelog-page

Conversation

@kotAPI
Copy link
Copy Markdown
Collaborator

@kotAPI kotAPI commented Apr 13, 2026

Summary by CodeRabbit

  • New Features

    • Paginated Changelog page in the docs with rendered markdown and highlighted code blocks
    • “Edit changelog” link surfaced in the docs editing UI
  • Documentation

    • Streamlined CHANGELOG content for readability
    • Added a security workflow doc for dependency/vulnerability updates
  • Style

    • Revamped documentation syntax styles and adjusted TOC/badge color accents
  • Chores

    • Added markdown rendering dependency for docs

kotAPI and others added 5 commits April 13, 2026 12:33
- Parse root CHANGELOG.md via existing getSourceCodeFromPath (local + raw GitHub on Vercel)
- Show five releases per page with Previous/Next and npm link per version
- Add Changelog under First Steps in docs nav; GitHub edit link targets CHANGELOG.md
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Apr 13, 2026

⚠️ No Changeset found

Latest commit: 314b82d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 13, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 91ad65b2-51cf-4606-9be8-2c83b925a129

📥 Commits

Reviewing files that changed from the base of the PR and between 50d693b and 314b82d.

📒 Files selected for processing (3)
  • agents/security/fix-vulnerabilities.md
  • docs/components/docsHelpers/EditPageOnGithub.tsx
  • docs/utils/changelog/parseChangelog.ts
✅ Files skipped from review due to trivial changes (1)
  • agents/security/fix-vulnerabilities.md
🚧 Files skipped from review as they are similar to previous changes (2)
  • docs/components/docsHelpers/EditPageOnGithub.tsx
  • docs/utils/changelog/parseChangelog.ts

📝 Walkthrough

Walkthrough

Adds a paginated changelog page and markdown renderer to the docs, updates changelog content, introduces changelog parsing/highlighting utilities, refactors docs syntax styling and color tokens, adjusts docs layout/TOC/edit-link behavior, and adds a vulnerability-fix workflow doc.

Changes

Cohort / File(s) Summary
Changelog Core
docs/utils/changelog/parseChangelog.ts, docs/package.json
Add changelog parser (ChangelogRelease, parseChangelogMarkdown, CHANGELOG_PAGE_SIZE) and add react-markdown dependency.
Changelog Page Components
docs/app/docs/first-steps/changelog/page.tsx, docs/app/docs/first-steps/changelog/ChangelogMarkdown.tsx, docs/app/docs/first-steps/changelog/highlightChangelogCode.tsx
New Next.js changelog page with pagination, custom React markdown renderer, and Refractor-based syntax highlighting utility.
Navigation & Edit Links
docs/app/docs/docsNavigationSections.tsx, docs/components/docsHelpers/EditPageOnGithub.tsx
Add “Changelog” nav item and special-case Edit link to point at CHANGELOG.md.
Layout & Hydration
docs/app/docs/layout.tsx, docs/app/layout.js
Remove unused docs callout/chunks; add suppressHydrationWarning to html/body in RootLayout.
Styling & Code Blocks
docs/app/globals.scss, docs/components/layout/Documentation/helpers/CodeBlock.js, docs/components/layout/Documentation/DocsTableOfContents.tsx, docs/components/layout/Documentation/utils.js, docs/components/navigation/NavItem.js
Refactor global syntax/token styles to scoped selectors and dark palette; replace toolbar/classnames for code blocks; migrate several amber token usages to red and adjust TOC/Badge styles.
Docs Utilities / Workflow
agents/security/fix-vulnerabilities.md, CHANGELOG.md
Add a repo workflow doc for consolidating dependency/security bot updates; trim and condense CHANGELOG.md release entries and sections.

Sequence Diagram

sequenceDiagram
    actor User
    participant Browser as Browser
    participant NextPage as Next.js Page
    participant Parser as parseChangelogMarkdown
    participant Renderer as ChangelogMarkdown Component
    participant Markdown as react-markdown / remarkGfm

    User->>Browser: Request /docs/first-steps/changelog?page=1
    Browser->>NextPage: Load page (server/client)
    NextPage->>NextPage: getSourceCodeFromPath("CHANGELOG.md")
    NextPage->>Parser: parseChangelogMarkdown(rawMarkdown)
    Parser-->>NextPage: ChangelogRelease[] (versions + bodies)
    NextPage->>NextPage: compute pagination slice & metadata
    NextPage->>Renderer: render releases for current page
    Renderer->>Markdown: render(markdown fragment)
    Markdown-->>Renderer: parsed AST (headings, lists, code)
    Renderer->>Browser: final HTML/JSX for page
    Browser->>User: display paginated changelog
Loading

Estimated Code Review Effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly Related PRs

Suggested Reviewers

  • GoldGroove06

Poem

🐇 I nibbled thru changelogs late at night,
Red badges gleam where amber lost its light,
Pages paginate and code blocks softly glow,
I hopped, I parsed, I rendered row by row —
Hooray for tidy notes and docs done right! 🎉

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 30.77% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title 'add: changelogs page in docs' accurately describes the main change: adding a new changelog page feature to the documentation with pagination, markdown parsing, and SEO metadata.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/changelog-page

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (2)
agents/security/fix-vulnerabilities.md (1)

15-15: Clarify validation scope for dependency-only integration branches.

This line mandates build/lint/test for all relevant workspaces; for this repo’s dependency/security-only flow, consider explicitly allowing omission of non-required checks (e.g., lint/Chromatic) to avoid unnecessary CI churn.

Based on learnings: In the rad-ui/ui repository, the security-fixes branch only updates dependencies, so linting and Chromatic workflows are not required for this branch.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@agents/security/fix-vulnerabilities.md` at line 15, The verification step
"Verify: Run the project’s install, build, lint, and test commands (whatever
this repo documents in package.json scripts / CI) until they pass for all
relevant workspaces." is too strict for dependency/security-only branches;
update this line to allow skipping non-required checks for such branches by
adding an exception: specify that for dependency/security-only integration
branches (e.g., branch names matching "security-*" or "dependabot/*") only
install and the minimal build/test steps required by package.json must be run,
and that linting and Chromatic may be omitted unless the PR changes code; also
add a short note with the detection heuristic (branch name or a manifest of
changed files) so CI maintainers can enforce the relaxed validation.
docs/app/layout.js (1)

112-112: Scope hydration warning suppression more narrowly.

Using suppressHydrationWarning on both root tags can mask unrelated hydration bugs across the docs app. Prefer keeping it only on the element that is known to mismatch.

Suggested adjustment
-      <body className="h-screen overflow-hidden" suppressHydrationWarning>
+      <body className="h-screen overflow-hidden">

Also applies to: 150-150

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@docs/app/layout.js` at line 112, Remove suppressHydrationWarning from the
root <html> tag in docs/app/layout.js and instead apply it only to the specific
element that actually mismatches during hydration (e.g., the body or the smaller
component that renders dynamic content); locate the two occurrences of
suppressHydrationWarning on the <html> tag (the one shown with
className={`${manrope.variable} ${jetbrainsMono.variable}`} and the other
occurrence noted in the comment) and move the attribute to the narrower element
that triggers the mismatch so the global <html> tag no longer suppresses
unrelated hydration warnings.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@agents/security/fix-vulnerabilities.md`:
- Line 25: Fix the typos and clarity in the final summary instruction sentence:
change "relevan" to "relevant", "arent" to "aren't" (or "are not"), and reword
the sentence in agents/security/fix-vulnerabilities.md so it reads clearly — for
example: "Once all the relevant changes are done, provide a summary telling the
user which PRs can be closed, which are pending, and which were not addressed,
including relevant details and any blockers." Update the existing sentence in
the file to this corrected phrasing.

In `@docs/components/docsHelpers/EditPageOnGithub.tsx`:
- Around line 6-7: The default CHANGELOG edit constant CHANGELOG_EDIT_HREF
points to "rad-ui/ui" but other docs edit links are built for "rad-ui/rad-ui",
causing broken links; update the default edit URL used in EditPageOnGithub
(reference CHANGELOG_EDIT_HREF and the function that builds per-page edit links)
so both use the same repository ("rad-ui/ui") or make the per-page builder use
the CHANGELOG_EDIT_HREF base so all edit links consistently target "rad-ui/ui".

In `@docs/utils/changelog/parseChangelog.ts`:
- Around line 13-25: The parser currently turns any preamble text before the
first "##" into a synthetic "unknown" release; update the logic in
parseChangelog.ts to only produce entries for actual release headings by
filtering the chunks (the array produced by
withoutTitle.split(...).map(...).filter(Boolean)) to keep only items whose
headerLine matches /^##\s+(.+)$/ before mapping to { version, body } — i.e.,
detect the header via the same regex used in headerLine.match(...) and drop
non-matching chunks so no "unknown" version is emitted.

---

Nitpick comments:
In `@agents/security/fix-vulnerabilities.md`:
- Line 15: The verification step "Verify: Run the project’s install, build,
lint, and test commands (whatever this repo documents in package.json scripts /
CI) until they pass for all relevant workspaces." is too strict for
dependency/security-only branches; update this line to allow skipping
non-required checks for such branches by adding an exception: specify that for
dependency/security-only integration branches (e.g., branch names matching
"security-*" or "dependabot/*") only install and the minimal build/test steps
required by package.json must be run, and that linting and Chromatic may be
omitted unless the PR changes code; also add a short note with the detection
heuristic (branch name or a manifest of changed files) so CI maintainers can
enforce the relaxed validation.

In `@docs/app/layout.js`:
- Line 112: Remove suppressHydrationWarning from the root <html> tag in
docs/app/layout.js and instead apply it only to the specific element that
actually mismatches during hydration (e.g., the body or the smaller component
that renders dynamic content); locate the two occurrences of
suppressHydrationWarning on the <html> tag (the one shown with
className={`${manrope.variable} ${jetbrainsMono.variable}`} and the other
occurrence noted in the comment) and move the attribute to the narrower element
that triggers the mismatch so the global <html> tag no longer suppresses
unrelated hydration warnings.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: cb78086c-def5-4c0c-9971-ec8efe6bc88a

📥 Commits

Reviewing files that changed from the base of the PR and between 119b949 and 50d693b.

⛔ Files ignored due to path filters (1)
  • docs/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (17)
  • CHANGELOG.md
  • agents/documentation/building-ui.md
  • agents/security/fix-vulnerabilities.md
  • docs/app/docs/docsNavigationSections.tsx
  • docs/app/docs/first-steps/changelog/ChangelogMarkdown.tsx
  • docs/app/docs/first-steps/changelog/highlightChangelogCode.tsx
  • docs/app/docs/first-steps/changelog/page.tsx
  • docs/app/docs/layout.tsx
  • docs/app/globals.scss
  • docs/app/layout.js
  • docs/components/docsHelpers/EditPageOnGithub.tsx
  • docs/components/layout/Documentation/DocsTableOfContents.tsx
  • docs/components/layout/Documentation/helpers/CodeBlock.js
  • docs/components/layout/Documentation/utils.js
  • docs/components/navigation/NavItem.js
  • docs/package.json
  • docs/utils/changelog/parseChangelog.ts
💤 Files with no reviewable changes (1)
  • docs/app/docs/layout.tsx
👮 Files not reviewed due to content moderation or server errors (6)
  • docs/app/docs/first-steps/changelog/highlightChangelogCode.tsx
  • docs/app/globals.scss
  • docs/components/layout/Documentation/helpers/CodeBlock.js
  • docs/app/docs/first-steps/changelog/page.tsx
  • docs/app/docs/first-steps/changelog/ChangelogMarkdown.tsx
  • CHANGELOG.md

Comment thread agents/security/fix-vulnerabilities.md Outdated
Comment thread docs/components/docsHelpers/EditPageOnGithub.tsx Outdated
Comment thread docs/utils/changelog/parseChangelog.ts
… copy

- Use shared rad-ui/ui edit base for changelog and MDX edit links
- Drop changelog preamble chunks without a ## release heading (no unknown version)
- Fix wording in fix-vulnerabilities agent summary instruction
@github-actions
Copy link
Copy Markdown
Contributor

Coverage

This report compares the PR with the base branch. "Δ" shows how the PR affects each metric.

Metric PR Δ
Statements 81.57% +0.00%
Branches 63.14% +0.00%
Functions 69.44% +0.00%
Lines 82.91% +0.00%

Coverage improved or stayed the same. Great job!

Run npm run coverage locally for detailed reports and target untested areas to raise these numbers.

@kotAPI kotAPI merged commit c0f76d9 into main Apr 13, 2026
7 checks passed
@kotAPI kotAPI deleted the docs/changelog-page branch April 13, 2026 09:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant