feat: display yaml frontmatter as a table#2166
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
📝 WalkthroughWalkthroughThe PR refactors Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 1✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
server/utils/readme.ts (1)
436-444: Consider logging frontmatter parsing errors for debugging.The silent catch block provides graceful fallback, but logging the error would aid debugging when frontmatter fails to parse unexpectedly.
📝 Optional: Add error logging
- } catch { + } catch (error) { // If frontmatter parsing fails, render the full content as-is + console.warn('[readme] Failed to parse frontmatter:', error) }
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 6d62cafc-c618-4556-a7c0-aadbc2345a03
📒 Files selected for processing (1)
server/utils/readme.ts
…x.dev into feat/yaml-frontmatter
| const { data, content: body } = matter(content) | ||
| if (data && Object.keys(data).length > 0) { | ||
| frontmatterHtml = renderFrontmatterTable(data) | ||
| markdownBody = body | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
In gray-matter, for input starting with empty YAML frontmatter (---\n---\nBody), does matter(content)returndata = {}andcontent stripped of delimiters?
💡 Result:
Yes, in gray-matter, for input starting with empty YAML frontmatter (---\n---\nBody), matter(content) returns an object with data = {} (empty object) and content stripped of the frontmatter delimiters (i.e., content = "Body"). The frontmatter between the delimiters is empty (all whitespace/nothing), so the YAML parser returns an empty object, and the delimiters are removed from the content. Additionally, the result includes isEmpty: true (or a truthy value for empty matter, as per v4.0+) and possibly empty property with the original matter string.
Citations:
- 1: Handle empty matter jonschlinkert/gray-matter#65
- 2: https://www.npmjs.com/package/gray-matter
- 3: https://github.com/jonschlinkert/gray-matter
- 4: Invalid front-matter should not be cached jonschlinkert/gray-matter#166
Always strip frontmatter delimiters even when metadata is empty.
When matter(content) parses an empty YAML frontmatter block (---\n---\nBody), it returns data = {} with the delimiters removed from content. However, the current code only assigns markdownBody = body when Object.keys(data).length > 0, leaving the delimiters in place if the frontmatter is empty. These delimiters will then render as horizontal rules (<hr>) when passed to marked. The table generation should remain conditional, but the body assignment must happen unconditionally after a successful parse.
🔧 Proposed fix
try {
const { data, content: body } = matter(content)
- if (data && Object.keys(data).length > 0) {
- frontmatterHtml = renderFrontmatterTable(data)
- markdownBody = body
- }
+ markdownBody = body
+ if (data && Object.keys(data).length > 0) {
+ frontmatterHtml = renderFrontmatterTable(data)
+ }
} catch {
2 participants
🔗 Linked issue
🧭 Context
On npmx.dev, the YAML Frontmatter within
.mdfiles—specifically the key-value blocks enclosed by---symbols—is incorrectly rendered bymarkedas a horizontal rule (<hr>), while the key-value pairs are erroneously rendered as<h3>tags. In contrast, GitHub renders this content as a neat key-value table.📚 Description
Use
gray-matterto parse the frontmatter, render it as a GitHub-style key-value table, and prepend it to the main HTML content.Inspired by GitHub
before
after
