feat(case-study): home page slider cards for the stories - #156
Conversation
✅ Deploy Preview for masterpoint ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning Review limit reached
Next review available in: 29 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
WalkthroughAdds a homepage case-study highlights section with front-matter-driven slides, shortcode rendering, keyboard/touch navigation, autoplay controls, accessibility state updates, responsive styling, and supporting documentation. ChangesHomepage case study slider
Estimated code review effort: 4 (Complex) | ~45 minutes Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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 |
oycyc
changed the title
9de7b35 to
4f4993e
Compare
New homepage section between Efficient Platforms and the testimonials: one dark pine card per case study (client logo pill, category eyebrow, short title, blurb, two headline metrics, CTA, photo) on a sliding track, navigated by a client-logo tab strip with an autoplay progress bar — the Microsoft-customer-stories pattern in Masterpoint's theme. - layouts/shortcodes/case-study-slider.html: markup + self-contained vanilla JS (the global flexslider init would fight logo-tab nav). Autoplay advances on the progress bar's animationend, pauses on hover/focus (tracked independently so mouse-leave can't resume while keyboard focus is inside), has a persistent pause/play rotation control (WCAG 2.2.2), only runs while ≥25% on screen, and is fully disabled under prefers-reduced-motion. Touch swipe + arrow keys. - Card content comes from a new optional `highlight:` front-matter map on each case study (eyebrow/title/blurb/image/logo/2 stats), with fallbacks to title/description/preview_image/stat_bar/client_logo; `highlight: false` opts out, non-map values can't crash the build (reflect.IsMap guard). Single-slide mode drops tab ARIA + autoplay. - Styles in custom.scss (.csh-*), echoing the case-study hero (pine gradient, dot grid, mint/pink glows, brand-gradient stat values). - Docs: new "Homepage highlights slider" section in docs/case-studies.md. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UrsnEwWx53uzzFEyD5coNs
Simplify the homepage highlight cards: drop the eyebrow and the two-stat row, reuse each study's gradient hero title, and render the client logo directly on the pine card (white variant, sized via client_logo_height) instead of inside a white pill.
4f4993e to
1afd5bf
Compare
![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
🧹 Nitpick comments (2)
layouts/shortcodes/case-study-slider.html (1)
18-21: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDuplicated
$h/$clientresolution between the track loop and the nav-tabs loop.The
reflect.IsMapguard,$h := dictfallback, and$client := ...computation are repeated verbatim in bothrangeblocks. Consider computing an ordered slice of per-slide dicts ({page, h, client, logo, ...}) once, then ranging over that in both places, to avoid drift if the fallback logic changes later.Also applies to: 80-83
🤖 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 `@layouts/shortcodes/case-study-slider.html` around lines 18 - 21, Deduplicate slide metadata resolution in the shortcode by building one ordered slice of per-slide dictionaries before the track and nav-tabs loops. Move the $h reflect.IsMap guard, $client fallback, and related fields such as page and logo into that preparation step, then range over the shared slice in both rendering blocks so both outputs use identical metadata.content/sections/home-case-studies.md (1)
12-12: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueHeading-increment lint warning (h3 used, h2 expected).
markdownlint flags this as skipping a heading level. If this matches the established pattern across other
content/sections/*.mdpartials (each spliced into the homepage without its own h1/h2), it's likely intentional and can be ignored; otherwise consider bumping to##.As per coding guidelines,
**/*.{md,yaml,yml,json,scss,js,html,toml}: "Use Trunk for linting and formatting, including markdownlint, yamllint, prettier, checkov, gitleaks, oxipng, and svgo where applicable."🤖 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 `@content/sections/home-case-studies.md` at line 12, Resolve the heading-level lint warning for the “Real Engagements, Real Results” heading by first matching the established heading pattern in the other content/sections partials. If these partials intentionally begin with h3 headings because they are embedded under the homepage structure, preserve the current heading and apply the repository’s documented lint suppression; otherwise change it to h2 while retaining the existing classes and formatting.Sources: Coding guidelines, Linters/SAST tools
🤖 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 `@assets/css/custom.scss`:
- Line 4541: Rename the cshProgress animation reference and its corresponding
`@keyframes` declaration to a kebab-case name, updating both the animation
property and keyframe identifier consistently.
- Line 4277: In assets/css/custom.scss, add a blank line immediately before each
of the eight flagged inline // comments at the listed locations, including the
comment beginning “Keep off-screen slides…”. Preserve the surrounding SCSS and
apply the scss/double-slash-comment-empty-line-before style consistently across
the block.
In `@layouts/shortcodes/case-study-slider.html`:
- Around line 201-215: Align the visibility check in the IntersectionObserver
callback with the documented 25% cutoff by changing the entry.intersectionRatio
comparison in the root.classList.toggle logic to use 0.25, matching the observer
thresholds and comment.
---
Nitpick comments:
In `@content/sections/home-case-studies.md`:
- Line 12: Resolve the heading-level lint warning for the “Real Engagements,
Real Results” heading by first matching the established heading pattern in the
other content/sections partials. If these partials intentionally begin with h3
headings because they are embedded under the homepage structure, preserve the
current heading and apply the repository’s documented lint suppression;
otherwise change it to h2 while retaining the existing classes and formatting.
In `@layouts/shortcodes/case-study-slider.html`:
- Around line 18-21: Deduplicate slide metadata resolution in the shortcode by
building one ordered slice of per-slide dictionaries before the track and
nav-tabs loops. Move the $h reflect.IsMap guard, $client fallback, and related
fields such as page and logo into that preparation step, then range over the
shared slice in both rendering blocks so both outputs use identical metadata.
🪄 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: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 230f4e93-ba2d-4036-ba80-3d9434061f2a
📒 Files selected for processing (8)
assets/css/custom.scsscontent/case-studies/cursor.mdcontent/case-studies/marketspark.mdcontent/case-studies/power-digital.mdcontent/sections/home-case-studies.mdcontent/sections/home-our-word.mddocs/case-studies.mdlayouts/shortcodes/case-study-slider.html
3 participants
Adds a featured case-study slider to the homepage and streamlines its cards to a clean, logo-tab layout.
Summary by CodeRabbit