feat: add color variables for alerts and improve modal and error comp…#25
Conversation
WalkthroughThe changes introduce new CSS variables for semantic color tokens covering alerts, modal backdrops, and grayscale shades in both light and dark themes. Multiple Vue components are updated to replace hardcoded Tailwind color classes with these CSS variables for alert styling, modal backdrops, code block copy indicators, and error page elements. No logic or control flow is altered. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
⏰ 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). (3)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for dashing-licorice-c1f529 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![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
🔭 Outside diff range comments (1)
components/mdc/ProsePre.vue (1)
2-16: Destructure props reactively to avoid stale valuesProps are destructured non-reactively; if
code,language, orfilenamechange after mount the computedlanguageDisplayanduseClipboardsource will not update. Use the<script setup>reactive destructure transform ($) ortoRefs().-const { - code = '', - language = null, - filename = null, - class: className = null, -} = defineProps<{ +const { + code = '', + language = null, + filename = null, + class: className = null, +} = $(defineProps<{ // 🡅 reactive destructure /** The code content to display */ code?: string /** Programming language for syntax highlighting */ @@ class?: string | null -}>() +}>())This keeps
languageDisplayanduseClipboardin sync with prop updates.
🧹 Nitpick comments (1)
components/mdc/ProsePre.vue (1)
85-96: Minor accessibility nit – add an aria-labelScreen readers will announce “Copy” already, but adding an explicit
aria-label="Copy code to clipboard"makes intent unmistakable and future-proofs against icon-only variants.-<button +<button v-if="isSupported" type="button" class="text-xs text-text-muted font-mono px-2 py-1 rounded flex gap-1 transition-all duration-200 items-center hover:text-text hover:bg-[var(--color-backdrop-hover)] active:scale-95" + aria-label="Copy code to clipboard" @click="copy()" >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
assets/css/main.css(2 hunks)components/BaseModal.vue(1 hunks)components/CodeBlock.vue(1 hunks)components/mdc/Alert.vue(2 hunks)components/mdc/ProsePre.vue(2 hunks)error.vue(3 hunks)
🧰 Additional context used
📓 Path-based instructions (8)
components/**/*.vue
📄 CodeRabbit Inference Engine (components/CLAUDE.md)
components/**/*.vue: All component names must be multi-word (except root App components) to avoid clashes with native HTML elements.
Use parent component name as prefix for tightly coupled child components (e.g., TodoList → TodoListItem → TodoListItemButton).
Keep component names in source code PascalCase.
Name files in PascalCase (UserProfile.vue) or kebab-case (user-profile.vue).
Compose file names general → specific (SearchButtonClear.vue).
Order sections script → template → style in every Vue SFC.
Always start with <script setup lang="ts"> (Composition API).
Destructure props reactively (Vue 3.5+); never use withDefaults().
Define props and emits with explicit TypeScript generics for full type safety.
Implement every v-model (single or multiple) with defineModel()—supports modifiers, defaults, transforms.
Use camelCase in JavaScript and kebab-case in templates for both props and events.
Apply prop shorthand when the variable name matches the prop (:count).
Use slot shorthand #default (and other named slots) inside explicit tags.
Style exclusively with UnoCSS utility classes—avoid inline styles.
Suppress inevitable server-client differences (e.g., timestamps) with data-allow-mismatch.Files:
components/CodeBlock.vuecomponents/BaseModal.vuecomponents/mdc/ProsePre.vuecomponents/mdc/Alert.vuecomponents/**/*.{vue,ts}
📄 CodeRabbit Inference Engine (components/CLAUDE.md)
components/**/*.{vue,ts}: Reach for shallowRef() / shallowReactive() with very large, mostly-immutable data.
Prefer watchEffect() over watch() for automatic dependency tracking.
Defer hydration with strategies such as hydrateOnVisible() / hydrateOnIdle() in defineAsyncComponent().
Generate stable server/client IDs with useId() to avoid hydration mismatches.Files:
components/CodeBlock.vuecomponents/BaseModal.vuecomponents/mdc/ProsePre.vuecomponents/mdc/Alert.vue**/*.{js,ts,jsx,tsx,vue}
📄 CodeRabbit Inference Engine (CLAUDE.md)
**/*.{js,ts,jsx,tsx,vue}: Use relative imports for local files and prefer named imports
Variables must use camelCase by default, UPPER_SNAKE_CASE for exported/global constants, and Boolean-named variables must start with is, has, can, should, will, did, was, are, were (with exceptions: loading, enabled, disabled, open, closed, visible, hidden, active, menuOpen)
Functions must use strictCamelCase, start with verbs (get, set, fetch, load, save, delete, update, create, handle, process, validate, etc.), event handlers must start with on or handle, and composables must start with use
Function parameters must use strictCamelCase; unused parameters must have underscore prefix _
Object properties and methods must use strictCamelCase; private/protected class members must have underscore prefix _; properties with special characters (CSS properties, @context, baseURL, etc.) have no restrictions
Imported identifiers must use camelCase or PascalCase
Avoid using any, let, and else in code
Use descriptive variable names (e.g., searchQuery, userProfile)
Only use comments for complex logic; favor self-explanatory code
Always extract complex conditional logic to descriptive variables for readability (e.g., avoid if (a == b && c === z); prefer const isValidCondition = a == b && c === z; if (isValidCondition) ...)
Use standard JavaScript error handling patterns: try/catch for async operations, check for null/undefined, use optional chaining and nullish coalescingFiles:
components/CodeBlock.vuecomponents/BaseModal.vuecomponents/mdc/ProsePre.vueerror.vuecomponents/mdc/Alert.vue{uno.config.ts,components/**/*.vue}
📄 CodeRabbit Inference Engine (CLAUDE.md)
{uno.config.ts,components/**/*.vue}: Styling must use UnoCSS with Wind4 preset, typography plugin for prose, theming via CSS variables (light/dark), and uno.config.ts for configuration
Edit variables in uno.config.ts to modify styling; use UnoCSS in componentsFiles:
components/CodeBlock.vuecomponents/BaseModal.vuecomponents/mdc/ProsePre.vuecomponents/mdc/Alert.vue**/*.{ts,tsx,vue}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Never use any; if you have to, use unknown instead
Files:
components/CodeBlock.vuecomponents/BaseModal.vuecomponents/mdc/ProsePre.vueerror.vuecomponents/mdc/Alert.vue{components/**/*.vue,app.config.ts}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Use useEnhancedSeoMeta() and useStructuredData() for SEO; update app.config.ts if global
Files:
components/CodeBlock.vuecomponents/BaseModal.vuecomponents/mdc/ProsePre.vuecomponents/mdc/Alert.vuecomponents/**/Base*.vue
📄 CodeRabbit Inference Engine (components/CLAUDE.md)
Use
Baseprefix only for pure UI components (presentational, dumb, or pure components) that apply app-specific styling and conventions (e.g., BaseButton, BaseInput, BaseCard).Files:
components/BaseModal.vuecomponents/Base*.vue
📄 CodeRabbit Inference Engine (CLAUDE.md)
components/Base*.vue: Components must be located in /components/ and prefixed with Base
Components must use <script setup lang="ts">, reactive prop destructuring, TypeScript generics, no withDefaults(), and order sections as script → template → style; styled with UnoCSS onlyFiles:
components/BaseModal.vue🧠 Learnings (7)
📓 Common learnings
Learnt from: CR PR: alexanderop/NuxtPapier#0 File: CLAUDE.md:0-0 Timestamp: 2025-07-20T09:58:19.292Z Learning: Applies to {uno.config.ts,components/**/*.vue} : Edit variables in uno.config.ts to modify styling; use UnoCSS in componentsLearnt from: CR PR: alexanderop/NuxtPapier#0 File: CLAUDE.md:0-0 Timestamp: 2025-07-20T09:58:19.292Z Learning: Applies to {uno.config.ts,components/**/*.vue} : Styling must use UnoCSS with Wind4 preset, typography plugin for prose, theming via CSS variables (light/dark), and uno.config.ts for configurationLearnt from: CR PR: alexanderop/NuxtPapier#0 File: components/CLAUDE.md:0-0 Timestamp: 2025-07-19T12:02:11.783Z Learning: Applies to components/**/*.vue : Style exclusively with UnoCSS utility classes—avoid inline styles.Learnt from: CR PR: alexanderop/NuxtPapier#0 File: CLAUDE.md:0-0 Timestamp: 2025-07-20T09:58:19.292Z Learning: Applies to components/Base*.vue : Components must use <script setup lang="ts">, reactive prop destructuring, TypeScript generics, no withDefaults(), and order sections as script → template → style; styled with UnoCSS onlyLearnt from: CR PR: alexanderop/NuxtPapier#0 File: CLAUDE.md:0-0 Timestamp: 2025-07-20T09:58:19.292Z Learning: Applies to {components/**/*.vue,app.config.ts} : Use useEnhancedSeoMeta() and useStructuredData() for SEO; update app.config.ts if globalLearnt from: CR PR: alexanderop/NuxtPapier#0 File: components/CLAUDE.md:0-0 Timestamp: 2025-07-19T12:02:11.783Z Learning: Applies to components/**/*.vue : Suppress inevitable server-client differences (e.g., timestamps) with data-allow-mismatch.Learnt from: CR PR: alexanderop/NuxtPapier#0 File: components/CLAUDE.md:0-0 Timestamp: 2025-07-19T12:02:11.783Z Learning: Applies to components/**/Base*.vue : Use `Base` prefix only for pure UI components (presentational, dumb, or pure components) that apply app-specific styling and conventions (e.g., BaseButton, BaseInput, BaseCard).Learnt from: CR PR: alexanderop/NuxtPapier#0 File: CLAUDE.md:0-0 Timestamp: 2025-07-20T09:58:19.292Z Learning: Applies to **/*.{js,ts,jsx,tsx,vue} : Variables must use camelCase by default, UPPER_SNAKE_CASE for exported/global constants, and Boolean-named variables must start with is, has, can, should, will, did, was, are, were (with exceptions: loading, enabled, disabled, open, closed, visible, hidden, active, menuOpen)Learnt from: CR PR: alexanderop/NuxtPapier#0 File: components/CLAUDE.md:0-0 Timestamp: 2025-07-19T12:02:11.783Z Learning: Applies to components/**/*.vue : Implement every v-model (single or multiple) with defineModel()—supports modifiers, defaults, transforms.Learnt from: CR PR: alexanderop/NuxtPapier#0 File: components/CLAUDE.md:0-0 Timestamp: 2025-07-19T12:02:11.783Z Learning: Applies to components/**/*.vue : Destructure props reactively (Vue 3.5+); never use withDefaults().components/CodeBlock.vue (5)
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {uno.config.ts,components/**/*.vue} : Edit variables in uno.config.ts to modify styling; use UnoCSS in componentsLearnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/*.vue : Style exclusively with UnoCSS utility classes—avoid inline styles.Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {uno.config.ts,components/**/*.vue} : Styling must use UnoCSS with Wind4 preset, typography plugin for prose, theming via CSS variables (light/dark), and uno.config.ts for configurationLearnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/*.vue : Keep component names in source code PascalCase.Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/*.vue : Apply prop shorthand when the variable name matches the prop (:count).components/BaseModal.vue (5)
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {uno.config.ts,components/**/*.vue} : Edit variables in uno.config.ts to modify styling; use UnoCSS in componentsLearnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/Base*.vue : UseBaseprefix only for pure UI components (presentational, dumb, or pure components) that apply app-specific styling and conventions (e.g., BaseButton, BaseInput, BaseCard).Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {uno.config.ts,components/**/*.vue} : Styling must use UnoCSS with Wind4 preset, typography plugin for prose, theming via CSS variables (light/dark), and uno.config.ts for configurationLearnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to components/Base*.vue : Components must use <script setup lang="ts">, reactive prop destructuring, TypeScript generics, no withDefaults(), and order sections as script → template → style; styled with UnoCSS onlyLearnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/*.vue : Implement every v-model (single or multiple) with defineModel()—supports modifiers, defaults, transforms.components/mdc/ProsePre.vue (3)
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {uno.config.ts,components/**/*.vue} : Styling must use UnoCSS with Wind4 preset, typography plugin for prose, theming via CSS variables (light/dark), and uno.config.ts for configurationLearnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/*.vue : Style exclusively with UnoCSS utility classes—avoid inline styles.Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {uno.config.ts,components/**/*.vue} : Edit variables in uno.config.ts to modify styling; use UnoCSS in componentsassets/css/main.css (2)
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {uno.config.ts,components/**/*.vue} : Edit variables in uno.config.ts to modify styling; use UnoCSS in componentsLearnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {uno.config.ts,components/**/*.vue} : Styling must use UnoCSS with Wind4 preset, typography plugin for prose, theming via CSS variables (light/dark), and uno.config.ts for configurationerror.vue (10)
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {uno.config.ts,components/**/*.vue} : Edit variables in uno.config.ts to modify styling; use UnoCSS in componentsLearnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/*.vue : Style exclusively with UnoCSS utility classes—avoid inline styles.Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {uno.config.ts,components/**/*.vue} : Styling must use UnoCSS with Wind4 preset, typography plugin for prose, theming via CSS variables (light/dark), and uno.config.ts for configurationLearnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to components/Base*.vue : Components must use <script setup lang="ts">, reactive prop destructuring, TypeScript generics, no withDefaults(), and order sections as script → template → style; styled with UnoCSS onlyLearnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to **/*.{js,ts,jsx,tsx,vue} : Object properties and methods must use strictCamelCase; private/protected class members must have underscore prefix _; properties with special characters (CSS properties, @context, baseURL, etc.) have no restrictionsLearnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/*.vue : Suppress inevitable server-client differences (e.g., timestamps) with data-allow-mismatch.Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/*.{vue,ts} : Prefer watchEffect() over watch() for automatic dependency tracking.Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to **/*.{js,ts,jsx,tsx,vue} : Variables must use camelCase by default, UPPER_SNAKE_CASE for exported/global constants, and Boolean-named variables must start with is, has, can, should, will, did, was, are, were (with exceptions: loading, enabled, disabled, open, closed, visible, hidden, active, menuOpen)Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {components/**/*.vue,app.config.ts} : Use useEnhancedSeoMeta() and useStructuredData() for SEO; update app.config.ts if globalLearnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/*.vue : Keep component names in source code PascalCase.components/mdc/Alert.vue (11)
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {uno.config.ts,components/**/*.vue} : Edit variables in uno.config.ts to modify styling; use UnoCSS in componentsLearnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {uno.config.ts,components/**/*.vue} : Styling must use UnoCSS with Wind4 preset, typography plugin for prose, theming via CSS variables (light/dark), and uno.config.ts for configurationLearnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/*.vue : Style exclusively with UnoCSS utility classes—avoid inline styles.Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to components/Base*.vue : Components must use <script setup lang="ts">, reactive prop destructuring, TypeScript generics, no withDefaults(), and order sections as script → template → style; styled with UnoCSS onlyLearnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/*.{vue,ts} : Prefer watchEffect() over watch() for automatic dependency tracking.Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/*.vue : Define props and emits with explicit TypeScript generics for full type safety.Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/*.vue : Suppress inevitable server-client differences (e.g., timestamps) with data-allow-mismatch.Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to **/*.{js,ts,jsx,tsx,vue} : Variables must use camelCase by default, UPPER_SNAKE_CASE for exported/global constants, and Boolean-named variables must start with is, has, can, should, will, did, was, are, were (with exceptions: loading, enabled, disabled, open, closed, visible, hidden, active, menuOpen)Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to **/*.{js,ts,jsx,tsx,vue} : Object properties and methods must use strictCamelCase; private/protected class members must have underscore prefix _; properties with special characters (CSS properties, @context, baseURL, etc.) have no restrictionsLearnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/*.vue : Keep component names in source code PascalCase.Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/*.vue : Use slot shorthand #default (and other named slots) inside explicit tags.🔇 Additional comments (9)
assets/css/main.css (2)
28-63: Excellent addition of semantic color variables for alert system.The new alert color variables follow a consistent naming pattern and provide comprehensive coverage for all alert types (error, warning, success, info, note). The grayscale palette addition also provides valuable flexibility for component styling.
109-144: Dark theme alert variables maintain proper contrast and accessibility.The dark theme implementations use appropriate lighter colors for text (400 series) and semi-transparent backgrounds for better contrast. The consistent mapping between light and dark themes is well-maintained.
components/BaseModal.vue (1)
131-131: Perfect implementation of CSS variable for modal backdrop.The change from hardcoded backdrop colors to the
--color-backdropCSS variable maintains existing functionality while enabling proper theming support. The backdrop effects (blur, brightness, saturation) are preserved appropriately.components/mdc/Alert.vue (2)
20-34: Excellent refactoring to use semantic alert color variables.The color and text color mappings now use the new CSS variables from
main.css, providing better theming consistency. The alert type mappings are correctly maintained (caution→error colors, important→note colors, etc.).
61-61: Proper use of grayscale variables for content text.The slot content now uses the grayscale CSS variables for both light and dark modes, ensuring consistent text contrast across themes.
error.vue (1)
78-128: Comprehensive and systematic conversion to CSS variables.All hardcoded Tailwind color classes have been properly replaced with CSS variables, maintaining visual consistency while enabling proper theming. The color choices are appropriate:
- Grayscale variables for text elements
--color-backgroundfor button text (ensuring contrast)- Alert color variables for gradient effects
- Consistent dark mode support
components/CodeBlock.vue (1)
62-62: Clean implementation of success color variable.The copy button's success state now uses the semantic
--color-successvariable instead of hardcoded green colors, improving theme consistency while maintaining the same visual feedback.components/mdc/ProsePre.vue (2)
75-76: Good move to semantic color tokenReplacing hard-coded
text-green-*withtext-[var(--color-success)]keeps the component in sync with the new design-token system and removes the need for dark-mode forks.
88-89: Consistent backdrop hover colorSwitching from
hover:bg-white/5tohover:bg-[var(--color-backdrop-hover)]aligns the hover state with the new semantic variable and avoids hard-coded RGBA values.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
.github/workflows/deploy.yml (1)
20-30: Add PNPM cache & lock-file consistency for faster, deterministic buildsThe workflow installs dependencies without caching, so every run re-downloads the entire registry.
Also,pnpm installwithout--frozen-lockfilecan drift from the lock-file on CI.- - uses: pnpm/action-setup@v3 + - uses: pnpm/action-setup@v3 with: version: 8 - run_install: false + run_install: false + + # Restore & save pnpm cache + - uses: actions/setup-node@v4 + with: + node-version: '20' + cache: 'pnpm' + # Install dependencies - - run: pnpm install + - run: pnpm install --frozen-lockfileREADME.md (2)
58-60: Specify the fenced-code language for the Markdown block
markdownlintflags this block because the language is omitted.
Addbashfor proper syntax highlighting:-``` +```bash Your content here...
234-237: Replace bare URL with Markdown link to silenceMD034Bare URLs hurt readability and are flagged by markdownlint.
- - Access at: `https://<username>.github.io/<repository>/` + - Access at: [`https://<username>.github.io/<repository>/`](https://<username>.github.io/<repository>/)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
.github/workflows/deploy.yml(1 hunks)README.md(1 hunks)nuxt.config.ts(3 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,ts,jsx,tsx,vue}
📄 CodeRabbit Inference Engine (CLAUDE.md)
**/*.{js,ts,jsx,tsx,vue}: Use relative imports for local files and prefer named imports
Variables must use camelCase by default, UPPER_SNAKE_CASE for exported/global constants, and Boolean-named variables must start with is, has, can, should, will, did, was, are, were (with exceptions: loading, enabled, disabled, open, closed, visible, hidden, active, menuOpen)
Functions must use strictCamelCase, start with verbs (get, set, fetch, load, save, delete, update, create, handle, process, validate, etc.), event handlers must start with on or handle, and composables must start with use
Function parameters must use strictCamelCase; unused parameters must have underscore prefix _
Object properties and methods must use strictCamelCase; private/protected class members must have underscore prefix _; properties with special characters (CSS properties, @context, baseURL, etc.) have no restrictions
Imported identifiers must use camelCase or PascalCase
Avoid using any, let, and else in code
Use descriptive variable names (e.g., searchQuery, userProfile)
Only use comments for complex logic; favor self-explanatory code
Always extract complex conditional logic to descriptive variables for readability (e.g., avoid if (a == b && c === z); prefer const isValidCondition = a == b && c === z; if (isValidCondition) ...)
Use standard JavaScript error handling patterns: try/catch for async operations, check for null/undefined, use optional chaining and nullish coalescing
Files:
nuxt.config.ts
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Type-like constructs (classes, interfaces, types, enums) must use StrictPascalCase; interfaces can optionally start with I; type parameters: PascalCase with optional T prefix; enum members: UPPER_CASE
Files:
nuxt.config.ts
{app.config.ts,nuxt.config.ts,uno.config.ts,content.config.ts,constants.ts,types/index.d.ts}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Key configuration files: app.config.ts for site metadata, nuxt.config.ts for Nuxt modules/config, uno.config.ts for CSS config, content.config.ts for content parsing rules, constants.ts for constants, types/index.d.ts for shared types
Files:
nuxt.config.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Never use any; if you have to, use unknown instead
Files:
nuxt.config.ts
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {uno.config.ts,components/**/*.vue} : Edit variables in uno.config.ts to modify styling; use UnoCSS in components
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {uno.config.ts,components/**/*.vue} : Styling must use UnoCSS with Wind4 preset, typography plugin for prose, theming via CSS variables (light/dark), and uno.config.ts for configuration
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/*.vue : Style exclusively with UnoCSS utility classes—avoid inline styles.
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to components/Base*.vue : Components must use <script setup lang="ts">, reactive prop destructuring, TypeScript generics, no withDefaults(), and order sections as script → template → style; styled with UnoCSS only
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {components/**/*.vue,app.config.ts} : Use useEnhancedSeoMeta() and useStructuredData() for SEO; update app.config.ts if global
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/*.vue : Suppress inevitable server-client differences (e.g., timestamps) with data-allow-mismatch.
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/Base*.vue : Use `Base` prefix only for pure UI components (presentational, dumb, or pure components) that apply app-specific styling and conventions (e.g., BaseButton, BaseInput, BaseCard).
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to **/*.{js,ts,jsx,tsx,vue} : Variables must use camelCase by default, UPPER_SNAKE_CASE for exported/global constants, and Boolean-named variables must start with is, has, can, should, will, did, was, are, were (with exceptions: loading, enabled, disabled, open, closed, visible, hidden, active, menuOpen)
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/*.vue : Implement every v-model (single or multiple) with defineModel()—supports modifiers, defaults, transforms.
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/*.vue : Destructure props reactively (Vue 3.5+); never use withDefaults().
README.md (7)
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: NuxtPapier uses @nuxt/content v3, Markdown files in /content, collections: pages, posts, reading time auto-calculated, drafts via published: false, config in content.config.ts
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {app.config.ts,nuxt.config.ts,uno.config.ts,content.config.ts,constants.ts,types/index.d.ts} : Key configuration files: app.config.ts for site metadata, nuxt.config.ts for Nuxt modules/config, uno.config.ts for CSS config, content.config.ts for content parsing rules, constants.ts for constants, types/index.d.ts for shared types
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {uno.config.ts,components/**/*.vue} : Styling must use UnoCSS with Wind4 preset, typography plugin for prose, theming via CSS variables (light/dark), and uno.config.ts for configuration
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to server/{routes,api}/*.{ts,js} : Server features: RSS in /server/routes/rss.xml.ts, sitemap in /server/routes/sitemap.xml.ts, robots in /server/routes/robots.txt.ts, APIs in /server/api/
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to components/Base*.vue : Components must use <script setup lang="ts">, reactive prop destructuring, TypeScript generics, no withDefaults(), and order sections as script → template → style; styled with UnoCSS only
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/*.vue : Always start with <script setup lang="ts"> (Composition API).
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {uno.config.ts,components/**/*.vue} : Edit variables in uno.config.ts to modify styling; use UnoCSS in components
nuxt.config.ts (9)
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {app.config.ts,nuxt.config.ts,uno.config.ts,content.config.ts,constants.ts,types/index.d.ts} : Key configuration files: app.config.ts for site metadata, nuxt.config.ts for Nuxt modules/config, uno.config.ts for CSS config, content.config.ts for content parsing rules, constants.ts for constants, types/index.d.ts for shared types
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {components/**/*.vue,app.config.ts} : Use useEnhancedSeoMeta() and useStructuredData() for SEO; update app.config.ts if global
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: NuxtPapier uses @nuxt/content v3, Markdown files in /content, collections: pages, posts, reading time auto-calculated, drafts via published: false, config in content.config.ts
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to server/{routes,api}/*.{ts,js} : Server features: RSS in /server/routes/rss.xml.ts, sitemap in /server/routes/sitemap.xml.ts, robots in /server/routes/robots.txt.ts, APIs in /server/api/
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {uno.config.ts,components/**/*.vue} : Edit variables in uno.config.ts to modify styling; use UnoCSS in components
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to components/Base*.vue : Components must use <script setup lang="ts">, reactive prop destructuring, TypeScript generics, no withDefaults(), and order sections as script → template → style; styled with UnoCSS only
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to pages/**/*.{vue,ts} : Use file-based routing: catch-all route as pages/[...path].vue, homepage as pages/(home).vue, blog posts as /posts/[postSlug], and custom 404 supported
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: components/CLAUDE.md:0-0
Timestamp: 2025-07-19T12:02:11.783Z
Learning: Applies to components/**/*.vue : Always start with <script setup lang="ts"> (Composition API).
Learnt from: CR
PR: alexanderop/NuxtPapier#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-20T09:58:19.292Z
Learning: Applies to {uno.config.ts,components/**/*.vue} : Styling must use UnoCSS with Wind4 preset, typography plugin for prose, theming via CSS variables (light/dark), and uno.config.ts for configuration
🧬 Code Graph Analysis (1)
nuxt.config.ts (1)
composables/useSeo.ts (1)
AppConfig(39-48)
🪛 LanguageTool
README.md
[style] ~316-~316: Consider using a less common alternative to make your writing sound more unique and professional.
Context: ...ontributing Contributions are welcome! Please feel free to submit a Pull Request. ## 📄 License ...
(FEEL_FREE_TO_STYLE_ME)
🪛 markdownlint-cli2 (0.17.2)
README.md
58-58: Bare URL used
(MD034, no-bare-urls)
151-151: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🪛 GitHub Check: Lint
nuxt.config.ts
[failure] 7-7:
Unexpected nullable string value in conditional. Please handle the nullish/empty cases explicitly
🪛 GitHub Actions: CI
nuxt.config.ts
[error] 7-7: ESLint: Unexpected nullable string value in conditional. Please handle the nullish/empty cases explicitly (ts/strict-boolean-expressions)
⏰ 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). (3)
- GitHub Check: Redirect rules - effulgent-cocada-623976
- GitHub Check: Header rules - effulgent-cocada-623976
- GitHub Check: Pages changed - effulgent-cocada-623976
🔇 Additional comments (1)
.github/workflows/deploy.yml (1)
30-37: Confirm correct Nuxt CLI command for GitHub Pages preset
pnpm build --preset github_pagesassumes a custom--presetflag exists on thebuildscript.
For Nuxt 3 static sites the documented command is:npx nuxi generate --preset github_pagesPlease verify the current script actually triggers a static generate build; otherwise the deployed output may be incomplete.
If needed, change the step to:- run: pnpm nuxt generate --preset github_pages
1 participant
…onent styles
Summary by CodeRabbit