bump astro 7#280
Conversation
📝 WalkthroughWalkthroughThis PR updates Astro config (JSON logger, in-memory cache) and bumps Astro-related dependency versions, refactors the latest-topics feature into a deferred-loading component with a skeleton fallback and result limiting, adds focus-visible accessibility styling across navigation/dashboard components with a shared focus-ring utility, and applies minor seed-data and layout tweaks. ChangesConfig and Dependency Updates
Estimated code review effort: 2 (Simple) | ~10 minutes Latest Topics Streaming Refactor
Estimated code review effort: 3 (Moderate) | ~20 minutes Focus-Visible Accessibility Styling
Estimated code review effort: 2 (Simple) | ~10 minutes Grammar Seed Data and Layout Tweaks
Estimated code review effort: 1 (Trivial) | ~5 minutes Sequence Diagram(s)sequenceDiagram
participant Browser
participant LatestTopicsAstro as LatestTopics.astro
participant LatestTopicsContent
participant Actions as getLatestTopics action
Browser->>LatestTopicsAstro: Request dashboard page
LatestTopicsAstro-->>Browser: Render LatestTopicsSkeleton immediately
LatestTopicsAstro->>LatestTopicsContent: server:defer render
LatestTopicsContent->>Actions: Astro.callAction(getLatestTopics)
Actions-->>LatestTopicsContent: latestTopics.data (up to 6)
LatestTopicsContent-->>Browser: Stream topic list HTML
Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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.
Actionable comments posted: 3
♻️ Duplicate comments (2)
packages/ui/navigation-button.tsx (1)
33-34: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winReimplements the shared
focus-ringutility instead of using it.
NavButtonClasshand-codesfocus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2, which is exactly what the newfocus-ring@utility(src/styles/global.css) provides and whichITEM_CLASS(src/features/latest-topics/index.ts) already consumes. Consolidating avoids divergence if the ring styling is tweaked later.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/ui/navigation-button.tsx` around lines 33 - 34, NavButtonClass is duplicating the shared focus-ring styling instead of reusing the new utility. Update NavButtonClass in navigation-button.tsx to consume the same focus-ring `@utility` pattern used by ITEM_CLASS, and remove the hand-coded focus-visible ring classes so the navigation button stays aligned with the shared style definition.src/components/DashboardCell.astro (1)
23-27: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winSame manual focus-ring duplication as
NavButtonClass, with an inconsistent offset.This repeats the
focus:outline-none focus-visible:ring-2 ... focus-visible:ring-ringpattern already defined as thefocus-ringutility (src/styles/global.css), but usesring-offset-4instead of-2. See the consolidated comment on global.css for the broader duplication concern; if the larger offset here is intentional (bigger clickable cell), consider extendingfocus-ringto support an offset variant rather than diverging silently.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/DashboardCell.astro` around lines 23 - 27, The anchor in DashboardCell is duplicating the manual focus-ring classes instead of using the shared focus-ring utility, and it also uses a different ring offset. Update the class list in DashboardCell.astro to rely on the existing focus-ring helper used elsewhere (like NavButtonClass), or if the larger offset is intentional, add a dedicated offset variant to the shared utility in global.css and use that symbol here so the focus styling stays centralized and consistent.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/features/latest-topics/LatestTopicsSkeleton.astro`:
- Around line 5-9: The skeleton placeholders in LatestTopicsSkeleton.astro need
a loading-state accessibility hint for assistive tech. Update the skeleton
rendering inside the Array.from(...).map block so the loading container
announces status with appropriate live-region semantics, or mark the individual
pulsing bars as decorative if they should be ignored. Use the existing
LatestTopicsSkeleton and ITEM_CLASS structure to add the accessible attributes
without changing the visual skeleton.
- Around line 6-8: The placeholder count in LatestTopicsSkeleton and the
`slice(0, 6)` limit in the latest-topics action are duplicated magic numbers
that can drift apart. Extract the limit into a shared constant used by both the
skeleton’s `Array.from({ length: ... })` and the filtering logic in actions.ts
so the UI and data count always stay aligned. Use the existing latest-topics
symbols (LatestTopicsSkeleton and the action that applies slice) to wire both
places to the same source of truth.
In `@src/styles/global.css`:
- Around line 25-32: The new focus-ring utility should be consumed instead of
duplicated, and the Tailwind v4 syntax must be accepted by lint tooling. Update
the call sites in NavButtonClass and the DashboardCell.astro anchor to use the
shared focus-ring utility rather than hand-rolled focus-visible classes, so ring
styling stays centralized. Also verify Biome and Stylelint configuration for
Tailwind v4 nesting/@utility support, or adjust the global.css block only if
required so the `@utility` definition passes CI lint checks.
---
Duplicate comments:
In `@packages/ui/navigation-button.tsx`:
- Around line 33-34: NavButtonClass is duplicating the shared focus-ring styling
instead of reusing the new utility. Update NavButtonClass in
navigation-button.tsx to consume the same focus-ring `@utility` pattern used by
ITEM_CLASS, and remove the hand-coded focus-visible ring classes so the
navigation button stays aligned with the shared style definition.
In `@src/components/DashboardCell.astro`:
- Around line 23-27: The anchor in DashboardCell is duplicating the manual
focus-ring classes instead of using the shared focus-ring utility, and it also
uses a different ring offset. Update the class list in DashboardCell.astro to
rely on the existing focus-ring helper used elsewhere (like NavButtonClass), or
if the larger offset is intentional, add a dedicated offset variant to the
shared utility in global.css and use that symbol here so the focus styling stays
centralized and consistent.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: dbc38d2d-7074-4980-9b49-bc7cff0e0cbd
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (14)
astro.config.mjslibs/db/seed.tspackage.jsonpackages/ui/navigation-button.tsxpackages/ui/navigation-menu.tsxsrc/components/DashboardCell.astrosrc/components/solid/grammar-point/StructureDisplay.tsxsrc/features/latest-topics/LatestTopics.astrosrc/features/latest-topics/LatestTopicsContent.astrosrc/features/latest-topics/LatestTopicsSkeleton.astrosrc/features/latest-topics/actions.tssrc/features/latest-topics/index.tssrc/pages/dashboard/index.astrosrc/styles/global.css
| { | ||
| Array.from({ length: 6 }).map(() => ( | ||
| <div class={`${ITEM_CLASS} animate-pulse bg-secondary/20 h-17`} /> | ||
| )) | ||
| } |
There was a problem hiding this comment.
🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick win
Add loading-state accessibility hint to the skeleton.
The pulsing placeholders don't announce a loading state to assistive tech (no role="status"/aria-live or aria-hidden on decorative bars). Given this PR's broader focus on accessibility, worth adding here too.
♿ Proposed fix
---
import { ITEM_CLASS } from ".";
---
-{
+<div role="status" aria-label="Loading latest topics">
+{
Array.from({ length: 6 }).map(() => (
- <div class={`${ITEM_CLASS} animate-pulse bg-secondary/20 h-17`} />
+ <div aria-hidden="true" class={`${ITEM_CLASS} animate-pulse bg-secondary/20 h-17`} />
))
-}
+}
+</div>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| { | |
| Array.from({ length: 6 }).map(() => ( | |
| <div class={`${ITEM_CLASS} animate-pulse bg-secondary/20 h-17`} /> | |
| )) | |
| } | |
| <div role="status" aria-label="Loading latest topics"> | |
| { | |
| Array.from({ length: 6 }).map(() => ( | |
| <div aria-hidden="true" class={`${ITEM_CLASS} animate-pulse bg-secondary/20 h-17`} /> | |
| )) | |
| } | |
| </div> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/features/latest-topics/LatestTopicsSkeleton.astro` around lines 5 - 9,
The skeleton placeholders in LatestTopicsSkeleton.astro need a loading-state
accessibility hint for assistive tech. Update the skeleton rendering inside the
Array.from(...).map block so the loading container announces status with
appropriate live-region semantics, or mark the individual pulsing bars as
decorative if they should be ignored. Use the existing LatestTopicsSkeleton and
ITEM_CLASS structure to add the accessible attributes without changing the
visual skeleton.
| Array.from({ length: 6 }).map(() => ( | ||
| <div class={`${ITEM_CLASS} animate-pulse bg-secondary/20 h-17`} /> | ||
| )) |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
Extract shared "6" limit into a constant.
The placeholder count here and the slice(0, 6) in actions.ts are two independent magic numbers that must stay in sync manually. If the limit changes in one place, the skeleton will silently mismatch the real item count.
♻️ Proposed fix: shared constant
+// src/features/latest-topics/index.ts
+export const LATEST_TOPICS_LIMIT = 6;-import { ITEM_CLASS } from ".";
+import { ITEM_CLASS, LATEST_TOPICS_LIMIT } from ".";
---
{
- Array.from({ length: 6 }).map(() => (
+ Array.from({ length: LATEST_TOPICS_LIMIT }).map(() => (
<div class={`${ITEM_CLASS} animate-pulse bg-secondary/20 h-17`} />
))
}And in actions.ts:
- const topics = (await getLatestTopics()).slice(0, 6);
+ const topics = (await getLatestTopics()).slice(0, LATEST_TOPICS_LIMIT);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| Array.from({ length: 6 }).map(() => ( | |
| <div class={`${ITEM_CLASS} animate-pulse bg-secondary/20 h-17`} /> | |
| )) | |
| Array.from({ length: LATEST_TOPICS_LIMIT }).map(() => ( | |
| <div class={`${ITEM_CLASS} animate-pulse bg-secondary/20 h-17`} /> | |
| )) |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/features/latest-topics/LatestTopicsSkeleton.astro` around lines 6 - 8,
The placeholder count in LatestTopicsSkeleton and the `slice(0, 6)` limit in the
latest-topics action are duplicated magic numbers that can drift apart. Extract
the limit into a shared constant used by both the skeleton’s `Array.from({
length: ... })` and the filtering logic in actions.ts so the UI and data count
always stay aligned. Use the existing latest-topics symbols
(LatestTopicsSkeleton and the action that applies slice) to wire both places to
the same source of truth.
| @utility focus-ring { | ||
| &:focus-visible { | ||
| @apply ring-2 ring-ring ring-offset-2 focus-visible:ring-ring focus-visible:ring-offset-2; | ||
| } | ||
| &:focus { | ||
| outline: none; | ||
| } | ||
| } |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
focus-ring utility not consumed by other manual focus-visible declarations; also check linter compatibility.
Two things:
NavButtonClass(packages/ui/navigation-button.tsx) and the<a>inDashboardCell.astrore-implement the samefocus:outline-none+focus-visible:ring-2 ring-ring ring-offset-*pattern by hand instead of applying this newfocus-ringutility. This creates drift risk — if the ring color/offset here changes, those two call sites won't pick it up automatically.- Static analysis reports errors on this block (Biome: "Tailwind-specific syntax is disabled"; Stylelint: unknown at-rule
@utility, missing nesting scoping root). This is consistent with tooling not yet configured for Tailwind v4's@utility/nesting syntax rather than a real bug, but it may still fail CI lint gates.
♻️ Consider consolidating the duplicated call sites
- "inline-flex w-full disabled:pointer-events-none cursor-pointer gap-1 px-2 py-2 font-bold text-foregrounds-primary text-xl disabled:cursor-help disabled:opacity-50 lg:items-center lg:text-primary-foreground lg:hover:bg-secondary/20 lg:hover:shadow-md active:shadow-sm active:bg-secondary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
+ "inline-flex w-full disabled:pointer-events-none cursor-pointer gap-1 px-2 py-2 font-bold text-foregrounds-primary text-xl disabled:cursor-help disabled:opacity-50 lg:items-center lg:text-primary-foreground lg:hover:bg-secondary/20 lg:hover:shadow-md active:shadow-sm active:bg-secondary/10 focus-ring";Please confirm whether Biome/Stylelint configs need updating for Tailwind v4 @utility syntax so this doesn't fail CI checks.
🧰 Tools
🪛 Biome (2.5.1)
[error] 25-32: Tailwind-specific syntax is disabled.
(parse)
🪛 Stylelint (17.14.0)
[error] 26-26: Missing scoping root (nesting-selector-no-missing-scoping-root)
(nesting-selector-no-missing-scoping-root)
[error] 29-29: Missing scoping root (nesting-selector-no-missing-scoping-root)
(nesting-selector-no-missing-scoping-root)
[error] 25-25: Unexpected unknown at-rule "@utility" (scss/at-rule-no-unknown)
(scss/at-rule-no-unknown)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/styles/global.css` around lines 25 - 32, The new focus-ring utility
should be consumed instead of duplicated, and the Tailwind v4 syntax must be
accepted by lint tooling. Update the call sites in NavButtonClass and the
DashboardCell.astro anchor to use the shared focus-ring utility rather than
hand-rolled focus-visible classes, so ring styling stays centralized. Also
verify Biome and Stylelint configuration for Tailwind v4 nesting/@utility
support, or adjust the global.css block only if required so the `@utility`
definition passes CI lint checks.
Source: Linters/SAST tools
1 participant
Summary by CodeRabbit
New Features
Bug Fixes
Chores