feat: add narrative, pull quote, and side note components with terminal styling #8
Conversation
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
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Reviewer's GuideRefactors the Rust ownership blog post to use new narrative and content components, introduces new content presentation components and terminal-style code block styling, tweaks blog layout grid for better mobile behavior, and wires the new styles and components into the Astro config and base layout. Class diagram for new content presentation componentsclassDiagram
direction LR
class NarrativeSection {
<<AstroComponent>>
+slot content
}
class PullQuote {
<<AstroComponent>>
+slot content
}
class SideNote {
<<AstroComponent>>
+type note|tip|warning
+slot content
}
class BaseLayout {
<<AstroLayout>>
+title string
+description string
+imports terminal_css
}
class BlogPostLayout {
<<AstroLayout>>
+layout_grid minmax_0_1fr_on_mobile
}
class RustOwnershipPost {
<<MDXContent>>
+uses NarrativeSection
+uses SideNote
+uses PullQuote
}
class AstroConfigAutoImport {
<<Config>>
+register NarrativeSection
+register SideNote
+register PullQuote
}
RustOwnershipPost ..> NarrativeSection : uses
RustOwnershipPost ..> SideNote : uses
RustOwnershipPost ..> PullQuote : uses
AstroConfigAutoImport ..> NarrativeSection : auto_imports
AstroConfigAutoImport ..> SideNote : auto_imports
AstroConfigAutoImport ..> PullQuote : auto_imports
class terminal_css
BaseLayout ..> terminal_css : imports
BlogPostLayout ..> RustOwnershipPost : wraps
BaseLayout ..> BlogPostLayout : wraps
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
📝 WalkthroughWalkthroughAdds three new Astro content components (NarrativeSection, PullQuote, SideNote), a Shiki transformer dependency, terminal-style code block CSS, minor layout tweaks, and a substantial rewrite of a Rust ownership blog post to use the new components and prose-focused structure. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 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 |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've found 1 issue
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location> `src/styles/terminal.css:121-122` </location>
<code_context>
+}
+
+/* Shiki theme compatibility */
+.prose pre.shiki,
+.prose pre.shiki code {
+ background: unset !important;
+ color: unset !important;
</code_context>
<issue_to_address>
**issue:** Unsetting background on `.shiki` blocks may unintentionally override the terminal styling you just defined.
`.prose pre` gets the new dark terminal background, but `.prose pre.shiki, .prose pre.shiki code { background: unset !important; }` removes it for Shiki blocks, so they lose the terminal styling. If you only want to avoid Shiki’s own background, consider unsetting just `background-color` and drop `!important`, or only unset it on the `code` element so the `pre` terminal frame remains.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Comment on lines
+121
to
+122
| .prose pre.shiki, | ||
| .prose pre.shiki code { |
There was a problem hiding this comment.
issue: Unsetting background on .shiki blocks may unintentionally override the terminal styling you just defined.
.prose pre gets the new dark terminal background, but .prose pre.shiki, .prose pre.shiki code { background: unset !important; } removes it for Shiki blocks, so they lose the terminal styling. If you only want to avoid Shiki’s own background, consider unsetting just background-color and drop !important, or only unset it on the code element so the pre terminal frame remains.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@package.json`:
- Line 22: Remove the unused dependency entry "@shikijs/transformers" from
package.json, ensure no files import or configure it (search for
"@shikijs/transformers" or any Shiki transformer references), then update the
lockfile by running your package manager install (e.g., npm/yarn/pnpm) so
package-lock.json/yarn.lock is regenerated and the dependency is fully removed
from the project.
In `@src/styles/terminal.css`:
- Around line 26-59: The CSS uses double-quoted strings in the pseudo-element
content properties (.prose pre::before and .prose pre::after); update those
content declarations to use single quotes ('RxDev Man' and '' respectively) to
satisfy Prettier/CI formatting rules and run the formatter to confirm no other
style issues remain.
🧹 Nitpick comments (2)
src/components/content/PullQuote.astro (1)
46-58: Consider adjusting the closing quote position.The
bottom: -1rempositions the closing quote mark outside the container, which could overlap with subsequent content depending on the surrounding layout's margins.💡 Suggested adjustment
.pull-quote::after { content: """; position: absolute; - bottom: -1rem; + bottom: 0.5rem; right: 1.5rem;src/components/content/NarrativeSection.astro (1)
60-71: Consider specifying transition properties explicitly.Using
transition: allcan cause unexpected animations and is less performant than specifying exact properties.💡 More specific transition
.narrative-section :global(a) { color: var(--brand-color); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; - transition: all 0.2s ease; + transition: color 0.2s ease; }
pharmacist-sabot
changed the title
github-actions bot
pushed a commit
that referenced
this pull request
Feb 1, 2026
## [1.6.0](v1.5.0...v1.6.0) (2026-02-01) ### 🚀 New Features * add narrative, pull quote, and side note components with terminal styling ([#8](#8)) ([4cbe3df](4cbe3df))
|
🎉 This PR is included in version 1.6.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
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 by Sourcery
Refine blog post content and storytelling structure for the Rust ownership article while introducing new narrative UI components and terminal-style code block styling, alongside a small mobile layout tweak.
New Features:
Enhancements:
Build:
Summary by CodeRabbit
New Features
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.