feat: callout support and default theme improvements#14
Open
Conversation
Add heading margins, list padding, table overflow handling, TOC nav margin, and max-width constraint to article. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add className to Theme interface, export Inter font from default theme, and apply it in page and API layouts. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add **/*.md to source config files glob and register Apsara Tabs in mdxComponents for use in documentation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add remark-directive and remarkDirectiveAdmonition plugins to transform :::note/:::warning/:::caution syntax into Apsara Callout components. Plain blockquotes render as grey callouts. Fix invalid CSS font vars in code blocks. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
📝 WalkthroughSummary by CodeRabbit
WalkthroughThe PR introduces styling enhancements and MDX plugin configuration to the Chronicle documentation framework. Changes include adding remark-directive support for blockquote/admonition processing, font configuration with Inter, extending the theme system to support className properties, refactoring the Callout component into a wrapper hierarchy, updating CSS styling for article layout and typography, and integrating these changes across layout components and MDX component mappings. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). 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 (2)
.gitignore (1)
136-136: Remove duplicateddistignore entry.
distis already ignored at Line 96, so this duplicate entry can be dropped to keep the file clean.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.gitignore at line 136, Remove the duplicate "dist" entry from .gitignore (the later occurrence) so only the existing "dist" ignore remains (the earlier entry already present), i.e., delete the redundant "dist" line to keep the file clean.packages/chronicle/src/components/common/callout.tsx (1)
7-9: Consider prop spread order forclassNamepreservation.Currently
{...props}comes afterclassName={styles.callout}, which means a caller-providedclassNamewould completely replace the module styles rather than being merged. If the intent is to allow customization while preserving base styles, consider usingcxto merge classNames:♻️ Optional: Merge classNames instead of replacing
+import { cx } from 'class-variance-authority' + -function CalloutContainer(props: React.ComponentProps<typeof Callout>) { - return <Callout outline width="100%" className={styles.callout} {...props} /> +function CalloutContainer({ className, ...props }: React.ComponentProps<typeof Callout>) { + return <Callout outline width="100%" className={cx(styles.callout, className)} {...props} /> }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/chronicle/src/components/common/callout.tsx` around lines 7 - 9, The CalloutContainer currently lets caller className overwrite module styles because {...props} comes after className={styles.callout}; change it to merge class names instead: compute a combined className using cx(styles.callout, props.className) (or import a classnames/clsx util) and pass className={combined} while still spreading the rest of props to Callout (ensure you reference CalloutContainer, Callout, styles.callout and props.className when making the change).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In @.gitignore:
- Line 136: Remove the duplicate "dist" entry from .gitignore (the later
occurrence) so only the existing "dist" ignore remains (the earlier entry
already present), i.e., delete the redundant "dist" line to keep the file clean.
In `@packages/chronicle/src/components/common/callout.tsx`:
- Around line 7-9: The CalloutContainer currently lets caller className
overwrite module styles because {...props} comes after
className={styles.callout}; change it to merge class names instead: compute a
combined className using cx(styles.callout, props.className) (or import a
classnames/clsx util) and pass className={combined} while still spreading the
rest of props to Callout (ensure you reference CalloutContainer, Callout,
styles.callout and props.className when making the change).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: d949fa83-7c83-468e-80ca-cf4c375d4454
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (14)
.gitignorepackages/chronicle/package.jsonpackages/chronicle/source.config.tspackages/chronicle/src/app/[[...slug]]/page.tsxpackages/chronicle/src/app/apis/[[...slug]]/layout.tsxpackages/chronicle/src/components/common/callout.module.csspackages/chronicle/src/components/common/callout.tsxpackages/chronicle/src/components/mdx/code.module.csspackages/chronicle/src/components/mdx/index.tsxpackages/chronicle/src/themes/default/Page.module.csspackages/chronicle/src/themes/default/Toc.module.csspackages/chronicle/src/themes/default/font.tspackages/chronicle/src/themes/default/index.tspackages/chronicle/src/types/theme.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
remark-directive+remarkDirectiveAdmonitionfor:::note/:::warning/:::cautioncallout syntax mapped to Apsara Callout components--rs-font-size-2→--rs-font-size-small,--rs-font-family-mono→--rs-font-mono)Test plan
:::warning/:::note/:::cautionrender as styled Apsara Callouts>blockquotes render as grey callouts🤖 Generated with Claude Code