Added additional blog improvements#912
Conversation
|
@n-boshnakov: The label(s) DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. |
✅ Deploy Preview for gardener-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
gardener-prow
bot
added
do-not-merge/needs-kind
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
gardener-prow
bot
added
the
cla: yes
📝 WalkthroughWalkthroughAdds multi-parameter blog filtering (tags, authors, years), moves blog meta into an aside slot, adjusts blog meta styling, disables outlines for blog pages, and updates blog index/post frontmatter and index aggregation. Changes
Sequence Diagram(s)sequenceDiagram
participant User as User
participant BI as BlogIndex Component
participant URL as URL / Query State
participant DS as Post Data Source
User->>BI: Open blog page / interact (click author/year/tag)
BI->>URL: Read query params (`tag`/`tags`,`author`,`year`)
URL-->>BI: Return parsed filter values
BI->>DS: Derive post fields (visibleAuthors, year) and request filter
DS-->>BI: Return filtered post list
BI->>URL: Sync selected filters back to query params
BI->>User: Render filtered posts and updated UI
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 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 |
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
.vitepress/theme/components/BlogIndex.vue (1)
687-701:⚠️ Potential issue | 🟠 MajorUse a theme token for the author chip background.
These pills still inherit theme text colors, so hard-coding
#ffffffmakes the inactive state unreadable in dark mode. Use a theme surface token here instead so the default state follows both palettes.🎨 Proposed fix
.author-filter { display: flex; align-items: center; gap: 0.4rem; height: 100%; color: var(--vp-c-text-1); box-sizing: border-box; border: 1px solid var(--vp-c-divider); border-radius: 999px; - background: `#ffffff`; + background: var(--vp-c-bg); padding: 0.2rem 0.6rem 0.2rem 0.2rem; font-family: inherit; position: relative;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.vitepress/theme/components/BlogIndex.vue around lines 687 - 701, The .author-filter CSS uses a hard-coded white background (`#ffffff`) which breaks dark theme readability; replace that literal with the theme surface token (e.g. use var(--vp-c-surface) or the project's equivalent) in the .author-filter rule so the chip follows light/dark palettes, keeping the rest of the properties (color, border, etc.) unchanged and ensuring the inactive state remains readable in dark mode.
🧹 Nitpick comments (1)
.vitepress/config.mts (1)
24-26: Prefer a default here instead of a hard override.This makes any explicit
outlinesetting on a blog page unreachable. If a specific page needs an outline later,transformPageDatawill still force it off.♻️ Proposed refactor
- if (pageData.relativePath.startsWith('blog/')) { + if (pageData.relativePath.startsWith('blog/') && pageData.frontmatter.outline === undefined) { pageData.frontmatter.outline = false }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.vitepress/config.mts around lines 24 - 26, The blog pages block in transformPageData currently hard-overwrites pageData.frontmatter.outline unconditionally; update it so you only set a default when no explicit frontmatter outline was provided: check that pageData.frontmatter exists and that pageData.frontmatter.outline is undefined (or absent) before assigning false for pages where pageData.relativePath.startsWith('blog/'), leaving any explicit outline values intact.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.vitepress/theme/components/BlogPostMeta.vue:
- Around line 150-161: The .blog-post-meta CSS rule causes the element to exceed
its container because padding and border are added to width: 100% under the
default content-box model; update the .blog-post-meta rule to use box-sizing:
border-box so padding and border are included in the declared width (add
box-sizing: border-box to the .blog-post-meta selector).
In `@website/blog/2026/03/_index.md`:
- Around line 1-5: The monthly archive frontmatter is missing the navigation
flags used on the main blog index, causing docs navigation chrome to appear;
update the frontmatter block in website/blog/2026/03/_index.md to include the
same navigation-related flags used in website/blog/index.md (copy the
navigation/hide/sidebar/pager flags from that file) so the archive uses the same
blog-list rendering without the docs sidebar/pager UI.
---
Outside diff comments:
In @.vitepress/theme/components/BlogIndex.vue:
- Around line 687-701: The .author-filter CSS uses a hard-coded white background
(`#ffffff`) which breaks dark theme readability; replace that literal with the
theme surface token (e.g. use var(--vp-c-surface) or the project's equivalent)
in the .author-filter rule so the chip follows light/dark palettes, keeping the
rest of the properties (color, border, etc.) unchanged and ensuring the inactive
state remains readable in dark mode.
---
Nitpick comments:
In @.vitepress/config.mts:
- Around line 24-26: The blog pages block in transformPageData currently
hard-overwrites pageData.frontmatter.outline unconditionally; update it so you
only set a default when no explicit frontmatter outline was provided: check that
pageData.frontmatter exists and that pageData.frontmatter.outline is undefined
(or absent) before assigning false for pages where
pageData.relativePath.startsWith('blog/'), leaving any explicit outline values
intact.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 877329f9-c13f-4b1f-9faa-feff5dd5995a
📒 Files selected for processing (7)
.vitepress/config.mts.vitepress/theme/components/BlogIndex.vue.vitepress/theme/components/BlogPostMeta.vue.vitepress/theme/index.tswebsite/blog/2026/03/03-18-say-goodbye-to-provider-extensions-introducing-the-new-remote-setup.mdwebsite/blog/2026/03/_index.mdwebsite/blog/index.md
| --- | ||
| title: March | ||
| layout: blog-list | ||
| aggregate: true | ||
| --- No newline at end of file |
There was a problem hiding this comment.
Mirror the preview-page navigation flags on archive indexes.
This page uses the same blog-list layout as website/blog/index.md, but without the same frontmatter flags it will still render docs navigation chrome on the monthly archive. That brings back the sidebar / pager UI this PR is trying to remove from blog listing pages.
🧭 Proposed fix
---
title: March
layout: blog-list
aggregate: true
+sidebar: false
+prev: false
+next: false
---📝 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.
| --- | |
| title: March | |
| layout: blog-list | |
| aggregate: true | |
| --- | |
| --- | |
| title: March | |
| layout: blog-list | |
| aggregate: true | |
| sidebar: false | |
| prev: false | |
| next: false | |
| --- |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@website/blog/2026/03/_index.md` around lines 1 - 5, The monthly archive
frontmatter is missing the navigation flags used on the main blog index, causing
docs navigation chrome to appear; update the frontmatter block in
website/blog/2026/03/_index.md to include the same navigation-related flags used
in website/blog/index.md (copy the navigation/hide/sidebar/pager flags from that
file) so the archive uses the same blog-list rendering without the docs
sidebar/pager UI.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
.vitepress/theme/components/BlogIndex.vue (1)
206-210: Verify the multi-author filter semantics.
every(selectedAuthor => ...)means picking two authors only keeps posts that list both authors. If this facet is supposed to behave like a standard same-group filter, this should besome(...)instead. Please confirm the intended UX before shipping.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.vitepress/theme/components/BlogIndex.vue around lines 206 - 210, The multi-author filter currently uses normalizedSelectedAuthors.value.every(...) in matchesSelectedAuthors, which requires a post to contain all selected authors; change the predicate to normalizedSelectedAuthors.value.some(...) if the intended UX is to include posts that match any selected author (i.e., same-group/OR semantics). Update the logic around matchesSelectedAuthors and keep references to normalizedSelectedAuthors, selectedAuthor, and post.visibleAuthors consistent; if AND semantics were intended, add a comment clarifying that behavior instead of changing the code.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.vitepress/theme/components/BlogIndex.vue:
- Around line 171-176: The year is computed via extractPostYear(post.date) but
is not included in the tag data structures or matching logic, so typing or
linking to a year won't match posts; update the code that builds post tag info
(the .map that sets visibleTags and visibleAuthors) to fold the computed year
into the tag list (e.g., include post.year in visibleTags and in the source
array used for datalist options), and also update the tag-filtering/matching
logic that currently only checks post.tags to also check post.year (or the
augmented tag array) so both the UI pill and tag search/filtering use the same
unified tag set (refer to visibleTags, extractPostYear, and the
tag-matching/filtering function).
- Around line 541-544: The .card-link focus ring is being clipped by
.blog-card's overflow:hidden and border-radius on small viewports; update the
focus treatment for .card-link (or move it to the non-clipped ancestor
.blog-card) to avoid clipping by using an inset visual (e.g., a box-shadow focus
style or negative outline-offset) or apply the focus styling to .blog-card
instead of .card-link so the visible focus is not clipped; ensure you change the
CSS selectors referencing .card-link:focus-visible and/or .blog-card to
implement the inset box-shadow (or move the focusable attribute) so keyboard
users retain a full visible focus state on mobile.
---
Nitpick comments:
In @.vitepress/theme/components/BlogIndex.vue:
- Around line 206-210: The multi-author filter currently uses
normalizedSelectedAuthors.value.every(...) in matchesSelectedAuthors, which
requires a post to contain all selected authors; change the predicate to
normalizedSelectedAuthors.value.some(...) if the intended UX is to include posts
that match any selected author (i.e., same-group/OR semantics). Update the logic
around matchesSelectedAuthors and keep references to normalizedSelectedAuthors,
selectedAuthor, and post.visibleAuthors consistent; if AND semantics were
intended, add a comment clarifying that behavior instead of changing the code.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: c3aa1a33-5ee9-4820-9d1d-fc2bdb418c3e
📒 Files selected for processing (3)
.vitepress/config.mts.vitepress/theme/components/BlogIndex.vue.vitepress/theme/components/BlogPostMeta.vue
🚧 Files skipped from review as they are similar to previous changes (2)
- .vitepress/config.mts
- .vitepress/theme/components/BlogPostMeta.vue
| .map(post => ({ | ||
| ...post, | ||
| visibleTags: visibleTags(post.tags) | ||
| visibleTags: visibleTags(post.tags), | ||
| visibleAuthors: post.authors.map(toVisibleAuthor), | ||
| year: extractPostYear(post.date) | ||
| })) |
There was a problem hiding this comment.
Year looks like a tag, but the tag filter never matches it.
The new year pill is rendered in the same tag list, yet visibleTags, the datalist options, and the tag-matching logic only look at post.tags. Typing 2026 into the tag box or linking to ?tag=2026 therefore won't find these posts even though the UI presents the year as a tag. Either fold post.year into the tag facet or surface it as a clearly separate filter.
Also applies to: 179-192, 198-215
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.vitepress/theme/components/BlogIndex.vue around lines 171 - 176, The year
is computed via extractPostYear(post.date) but is not included in the tag data
structures or matching logic, so typing or linking to a year won't match posts;
update the code that builds post tag info (the .map that sets visibleTags and
visibleAuthors) to fold the computed year into the tag list (e.g., include
post.year in visibleTags and in the source array used for datalist options), and
also update the tag-filtering/matching logic that currently only checks
post.tags to also check post.year (or the augmented tag array) so both the UI
pill and tag search/filtering use the same unified tag set (refer to
visibleTags, extractPostYear, and the tag-matching/filtering function).
| .card-link:focus-visible { | ||
| outline: 2px solid var(--vp-c-brand-1); | ||
| outline-offset: 3px; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's locate and inspect the BlogIndex.vue file
fd "BlogIndex.vue" --type fRepository: gardener/documentation
Length of output: 48
🏁 Script executed:
# Check if the file exists and read its content
ls -la .vitepress/theme/components/ 2>/dev/null | head -20Repository: gardener/documentation
Length of output: 842
🏁 Script executed:
# Read the BlogIndex.vue file around lines 541-544 with context
sed -n '530,560p' .vitepress/theme/components/BlogIndex.vue | cat -nRepository: gardener/documentation
Length of output: 850
🏁 Script executed:
# Search for .blog-card styles in the file
sed -n '1,600p' .vitepress/theme/components/BlogIndex.vue | grep -n -A 10 "\.blog-card\s*{" | head -50Repository: gardener/documentation
Length of output: 367
🏁 Script executed:
# Get full .blog-card rule
sed -n '518,550p' .vitepress/theme/components/BlogIndex.vue | cat -nRepository: gardener/documentation
Length of output: 1001
🏁 Script executed:
# Search for overflow in the entire BlogIndex.vue file
grep -n "overflow" .vitepress/theme/components/BlogIndex.vueRepository: gardener/documentation
Length of output: 228
🏁 Script executed:
# Check the context around line 802
sed -n '795,810p' .vitepress/theme/components/BlogIndex.vue | cat -nRepository: gardener/documentation
Length of output: 402
🏁 Script executed:
# Search backwards for the media query
sed -n '780,805p' .vitepress/theme/components/BlogIndex.vue | cat -nRepository: gardener/documentation
Length of output: 652
🏁 Script executed:
# Search for all focus-related styles in the file
grep -n "focus" .vitepress/theme/components/BlogIndex.vueRepository: gardener/documentation
Length of output: 236
The card-link focus ring is clipped on mobile viewports.
On screens ≤640px, .blog-card has overflow: hidden, which clips the outline with outline-offset: 3px. Keyboard users will lose the visible focus state on the primary link. The border-radius also contributes to clipping. Use an inset focus treatment (box-shadow, negative outline-offset, or outline-width only), or move focus styling to a non-clipped ancestor.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.vitepress/theme/components/BlogIndex.vue around lines 541 - 544, The
.card-link focus ring is being clipped by .blog-card's overflow:hidden and
border-radius on small viewports; update the focus treatment for .card-link (or
move it to the non-clipped ancestor .blog-card) to avoid clipping by using an
inset visual (e.g., a box-shadow focus style or negative outline-offset) or
apply the focus styling to .blog-card instead of .card-link so the visible focus
is not clipped; ensure you change the CSS selectors referencing
.card-link:focus-visible and/or .blog-card to implement the inset box-shadow (or
move the focusable attribute) so keyboard users retain a full visible focus
state on mobile.
1 participant
How to categorize this PR?
/kind documentation
What this PR does / why we need it:
This PR implements additional improvements to the blogs:
Which issue(s) this PR fixes:
Fixes #907
Special notes for your reviewer:
Main Blogs page:
Individual Blogs:
Summary by CodeRabbit
New Features
Style