Add recap of HAMi at KubeCon India 2026 with enhanced lightbox functionality#515
Conversation
Signed-off-by: Jimmy Song <jimmy@dynamia.ai>
…d layout Signed-off-by: Jimmy Song <jimmy@dynamia.ai>
✅ Deploy Preview for project-hami ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (4)
📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (2)
📝 WalkthroughWalkthroughAdds English and Chinese blog recaps for HAMi’s appearance at KubeCon + CloudNativeCon India 2026. Also updates the image lightbox so captions are derived from image metadata, tracked in state, and reflected in caption-aware CSS layout changes. ChangesKubeCon India 2026 Blog Post
Lightbox Caption Improvements
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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
🤖 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/css/custom.css`:
- Around line 463-465: The no-caption override for the lightbox is only updating
max-height, so `.hami-lightbox__svg` still inherits the smaller height set
earlier and won’t actually grow; update the
`.hami-lightbox[data-has-caption="false"] .hami-lightbox__svg` rule to override
the height-based sizing used by `.hami-lightbox__svg` while keeping the image
rule on max-height. Make the change in the shared no-caption block that targets
`.hami-lightbox__image` and `.hami-lightbox__svg` so captionless SVG dialogs
expand consistently with the image variant.
In `@src/theme/utils/useImageLightbox.js`:
- Around line 137-145: The getImageCaption helper currently treats a
whitespace-only figcaption as a valid caption and stops the aria-label/title/alt
fallback chain. Update getImageCaption to trim the figcaption text before
deciding whether to return it, so empty or whitespace-only captions fall through
to the existing metadata fallbacks while keeping the setCaption flow unchanged.
🪄 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: CHILL
Plan: Pro Plus
Run ID: 39963803-d72d-4e24-8c34-abb42721b7c0
⛔ Files ignored due to path filters (6)
blog/kubecon-india-2026-recap/demo-architecture.pngis excluded by!**/*.pngblog/kubecon-india-2026-recap/hami-booth.jpgis excluded by!**/*.jpgblog/kubecon-india-2026-recap/keynote-demo.jpgis excluded by!**/*.jpgi18n/zh/docusaurus-plugin-content-blog/kubecon-india-2026-recap/demo-architecture.pngis excluded by!**/*.pngi18n/zh/docusaurus-plugin-content-blog/kubecon-india-2026-recap/hami-booth.jpgis excluded by!**/*.jpgi18n/zh/docusaurus-plugin-content-blog/kubecon-india-2026-recap/keynote-demo.jpgis excluded by!**/*.jpg
📒 Files selected for processing (4)
blog/kubecon-india-2026-recap/index.mdi18n/zh/docusaurus-plugin-content-blog/kubecon-india-2026-recap/index.mdsrc/css/custom.csssrc/theme/utils/useImageLightbox.js
| .hami-lightbox[data-has-caption="false"] .hami-lightbox__image, | ||
| .hami-lightbox[data-has-caption="false"] .hami-lightbox__svg { | ||
| max-height: min(90vh, 1100px); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Use height for the SVG no-caption override.
.hami-lightbox__svg is sized with height at Line 406, so changing only max-height here does not enlarge captionless SVG dialogs. They will stay at 82vh while images grow to 90vh.
Suggested fix
-.hami-lightbox[data-has-caption="false"] .hami-lightbox__image,
-.hami-lightbox[data-has-caption="false"] .hami-lightbox__svg {
+.hami-lightbox[data-has-caption="false"] .hami-lightbox__image {
max-height: min(90vh, 1100px);
}
+
+.hami-lightbox[data-has-caption="false"] .hami-lightbox__svg {
+ height: min(90vh, 1100px);
+}📝 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.
| .hami-lightbox[data-has-caption="false"] .hami-lightbox__image, | |
| .hami-lightbox[data-has-caption="false"] .hami-lightbox__svg { | |
| max-height: min(90vh, 1100px); | |
| .hami-lightbox[data-has-caption="false"] .hami-lightbox__image { | |
| max-height: min(90vh, 1100px); | |
| } | |
| .hami-lightbox[data-has-caption="false"] .hami-lightbox__svg { | |
| height: min(90vh, 1100px); | |
| } |
🤖 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/css/custom.css` around lines 463 - 465, The no-caption override for the
lightbox is only updating max-height, so `.hami-lightbox__svg` still inherits
the smaller height set earlier and won’t actually grow; update the
`.hami-lightbox[data-has-caption="false"] .hami-lightbox__svg` rule to override
the height-based sizing used by `.hami-lightbox__svg` while keeping the image
rule on max-height. Make the change in the shared no-caption block that targets
`.hami-lightbox__image` and `.hami-lightbox__svg` so captionless SVG dialogs
expand consistently with the image variant.
| function getImageCaption(image) { | ||
| const figureCaption = image.closest("figure")?.querySelector("figcaption")?.textContent; | ||
|
|
||
| return ( | ||
| figureCaption || | ||
| image.getAttribute("aria-label") || | ||
| image.getAttribute("title") || | ||
| image.getAttribute("alt") || | ||
| "" |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Trim the figcaption before fallback selection.
At Line 138, a whitespace-only figcaption short-circuits the aria-label/title/alt fallback chain. setCaption() trims later, so the dialog can open with no visible caption even though usable metadata exists.
Suggested fix
function getImageCaption(image) {
- const figureCaption = image.closest("figure")?.querySelector("figcaption")?.textContent;
+ const figureCaption = image
+ .closest("figure")
+ ?.querySelector("figcaption")
+ ?.textContent?.trim();
return (
figureCaption ||
image.getAttribute("aria-label") ||
image.getAttribute("title") ||📝 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.
| function getImageCaption(image) { | |
| const figureCaption = image.closest("figure")?.querySelector("figcaption")?.textContent; | |
| return ( | |
| figureCaption || | |
| image.getAttribute("aria-label") || | |
| image.getAttribute("title") || | |
| image.getAttribute("alt") || | |
| "" | |
| function getImageCaption(image) { | |
| const figureCaption = image | |
| .closest("figure") | |
| ?.querySelector("figcaption") | |
| ?.textContent?.trim(); | |
| return ( | |
| figureCaption || | |
| image.getAttribute("aria-label") || | |
| image.getAttribute("title") || | |
| image.getAttribute("alt") || | |
| "" |
🤖 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/theme/utils/useImageLightbox.js` around lines 137 - 145, The
getImageCaption helper currently treats a whitespace-only figcaption as a valid
caption and stops the aria-label/title/alt fallback chain. Update
getImageCaption to trim the figcaption text before deciding whether to return
it, so empty or whitespace-only captions fall through to the existing metadata
fallbacks while keeping the setCaption flow unchanged.
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: rootsongjc, shivaylamba 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 |
|
existing kubecon recap stores images under coderabbit's points are also important |
Signed-off-by: Jimmy Song <jimmy@dynamia.ai>
you're right, I will remove the duplicated images and use the absolute path. |
…6 recap Signed-off-by: Jimmy Song <jimmy@dynamia.ai>
|
/lgtm |
|
/lgtm |
4 participants
Include a detailed recap of HAMi's participation at KubeCon India 2026, featuring images and demos. Enhance lightbox functionality to support captions and improve layout for a better user experience.
Summary by CodeRabbit