feat(mdx): add Image component to MDX rendering#2032
feat(mdx): add Image component to MDX rendering#2032ComputelessComputer merged 1 commit intomainfrom
Conversation
✅ Deploy Preview for hyprnote ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughAdds Image component support to MDX content rendering across five route pages (changelog, company-handbook, docs, legal, roadmap) by importing the Image component and mapping it to MDXContent components, with both Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
✅ Deploy Preview for hyprnote-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/web/src/routes/_view/roadmap/$slug.tsx (1)
151-161: Roadmap prose styling and Image mapping are consistent with docsThe expanded prose classes (notably the
prose-pre:prose-code:*overrides andprose-img:*image styling) should give consistent MDX rendering, and wiring{ Image, img: Image, mermaid: Mermaid, Mermaid, Tweet }mirrors the other routes without removing existing functionality.If you find these long prose class strings diverging across pages over time, consider extracting a shared constant or utility for the common prose config to reduce drift.
apps/web/src/routes/_view/docs/-components.tsx (1)
107-133: Docs MDX article styling and components map are well‑structuredThe updated prose classes (including
prose-pre:prose-code:*overrides andprose-img:*rules) look coherent, and consolidating all MDX components—includingCtaCard,DeeplinksList,HooksList,OpenAPIDocs, andImage/img: Image—into a singlecomponentsobject removes duplication while expanding capabilities.Given docs, roadmap, and handbook now share very similar prose configurations, you might later factor the common Tailwind prose class string into a shared constant to avoid subtle divergence across pages.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/web/src/routes/_view/changelog/$slug.tsx(2 hunks)apps/web/src/routes/_view/company-handbook/-components.tsx(2 hunks)apps/web/src/routes/_view/docs/-components.tsx(2 hunks)apps/web/src/routes/_view/legal/$slug.tsx(2 hunks)apps/web/src/routes/_view/roadmap/$slug.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Avoid creating a bunch of types/interfaces if they are not shared. Especially for function props, just inline them instead.
Never do manual state management for form/mutation. Use useForm (from tanstack-form) and useQuery/useMutation (from tanstack-query) instead for 99% of cases. Avoid patterns like setError.
If there are many classNames with conditional logic, usecn(import from@hypr/utils). It is similar toclsx. Always pass an array and split by logical grouping.
Usemotion/reactinstead offramer-motion.
Files:
apps/web/src/routes/_view/legal/$slug.tsxapps/web/src/routes/_view/company-handbook/-components.tsxapps/web/src/routes/_view/roadmap/$slug.tsxapps/web/src/routes/_view/changelog/$slug.tsxapps/web/src/routes/_view/docs/-components.tsx
🧠 Learnings (4)
📚 Learning: 2025-11-24T16:32:23.055Z
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:23.055Z
Learning: Applies to **/*.{ts,tsx} : If there are many classNames with conditional logic, use `cn` (import from `hypr/utils`). It is similar to `clsx`. Always pass an array and split by logical grouping.
Applied to files:
apps/web/src/routes/_view/roadmap/$slug.tsx
📚 Learning: 2025-11-24T16:32:19.706Z
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:19.706Z
Learning: Applies to **/*.{ts,tsx} : If there are many classNames with conditional logic, use `cn` (import from `hypr/utils`), similar to `clsx`. Always pass an array and split by logical grouping.
Applied to files:
apps/web/src/routes/_view/roadmap/$slug.tsx
📚 Learning: 2025-11-24T16:32:29.314Z
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: apps/web/content/changelog/AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:29.314Z
Learning: Applies to apps/web/content/changelog/** : Only keep desktop-related changes when maintaining changelog entries from commits and diffs
Applied to files:
apps/web/src/routes/_view/changelog/$slug.tsx
📚 Learning: 2025-11-24T16:32:30.770Z
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: apps/web/content/changelog/AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:30.770Z
Learning: Applies to apps/web/content/changelog/** : Only include desktop-related changes in the changelog when reading through commits and diffs
Applied to files:
apps/web/src/routes/_view/changelog/$slug.tsx
🧬 Code graph analysis (4)
apps/web/src/routes/_view/legal/$slug.tsx (3)
apps/web/src/components/image.tsx (1)
Image(4-24)apps/web/src/components/mdx/index.ts (1)
Mermaid(1-1)apps/web/src/components/mdx/mermaid.tsx (1)
Mermaid(5-7)
apps/web/src/routes/_view/company-handbook/-components.tsx (1)
apps/web/src/components/image.tsx (1)
Image(4-24)
apps/web/src/routes/_view/roadmap/$slug.tsx (1)
apps/web/src/components/image.tsx (1)
Image(4-24)
apps/web/src/routes/_view/changelog/$slug.tsx (2)
apps/web/src/components/image.tsx (1)
Image(4-24)apps/web/src/components/mdx/mermaid.tsx (1)
Mermaid(5-7)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Redirect rules - hyprnote
- GitHub Check: Header rules - hyprnote
- GitHub Check: Pages changed - hyprnote
- GitHub Check: ci
- GitHub Check: fmt
🔇 Additional comments (8)
apps/web/src/routes/_view/legal/$slug.tsx (2)
5-6: Image import wiring looks correctThe new
Imageimport is straightforward and used below; nothing unused or cyclic here.
59-62: MDX components map extension is consistent and non‑breakingAdding
{ Image, img: Image, mermaid: Mermaid, Mermaid, Tweet }keeps existing MDX components intact while enabling both<Image>and<img>to go through the shared Image component; consistent with the other routes in this PR.apps/web/src/routes/_view/company-handbook/-components.tsx (2)
17-18: Image import added appropriatelyThe
Imageimport is local, side‑effect free, and only used in the MDX components map; no issues here.
102-121: Handbook MDX prose and Image integration look goodThe updated
<article>prose classes (includingprose-img:rounded-sm prose-img:my-8 max-w-none) are coherent, and passing bothImageandimg: ImageintoMDXContentaligns this layout with the other MDX views.apps/web/src/routes/_view/roadmap/$slug.tsx (1)
8-9: Roadmap Image import usage is clean
Imageis imported once and consumed directly in the MDX components map; no dead code or layering concerns.apps/web/src/routes/_view/docs/-components.tsx (1)
20-23: Image import aligns with new MDX usageThe docs layout now imports
Imagealongside the other MDX helpers; import order and usage are consistent with the rest of the codebase.apps/web/src/routes/_view/changelog/$slug.tsx (2)
29-32: Changelog Image import is straightforward
Imageis imported once and used only in the MDXcomponentsmap; no side effects or unused imports.
577-583: Changelog MDX body now consistently supports ImageThe new prose configuration (especially
prose-pre:prose-code:*andprose-img:*classes) should align changelog MDX rendering with docs/roadmap, and mapping{ Image, img: Image, mermaid: Mermaid, Mermaid, Tweet }gives MDX content the same Image behavior without altering existing Mermaid/Tweet support.
1 participant
No description provided.