feat: new case study boilerplate and structures#114
Conversation
✅ Deploy Preview for masterpoint ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughThis PR introduces a complete case study content system for masterpoint.io, including modern styling, dual page layouts, reusable shortcode components, comprehensive documentation, and example content demonstrating the full workflow. ChangesCase Study System
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (3)
assets/css/custom.scss (2)
3912-3920: 💤 Low valueUnused keyframe animations.
Both
csHeroAsideFloatandcsLockupPulseare defined but never referenced anywhere in the.case-study-modernstyles. Dead code should be removed to reduce maintenance burden, or if these are intended for future use, apply them to the relevant elements (.cs-hero__asideand.cs-lockup?).🧹 Suggested cleanup
If these animations are not needed, remove them:
-@keyframes csHeroAsideFloat { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(-8px); } -} - -@keyframes csLockupPulse { - 0%, 100% { transform: scale(1); opacity: 1; } - 50% { transform: scale(1.08); opacity: 0.82; } -} -Or if they're intended for future use, apply them:
.cs-hero__aside { animation: csHeroAsideFloat 4s ease-in-out infinite; } .cs-lockup { animation: csLockupPulse 3s ease-in-out infinite; }Note: Stylelint also prefers
kebab-casefor keyframe names (e.g.,cs-hero-aside-float), but this is a low-priority style convention.🤖 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 `@assets/css/custom.scss` around lines 3912 - 3920, Remove or use the two unused keyframe animations csHeroAsideFloat and csLockupPulse: either delete the `@keyframes` blocks (csHeroAsideFloat and csLockupPulse) to eliminate dead code, or apply them to the intended selectors by adding animation declarations to .cs-hero__aside (e.g., csHeroAsideFloat with a 4s ease-in-out infinite) and .cs-lockup (e.g., csLockupPulse with a 3s ease-in-out infinite). Optionally rename keyframes to kebab-case (cs-hero-aside-float, cs-lockup-pulse) and update the animation properties accordingly to satisfy stylelint conventions.
3942-3942: 💤 Low valueStylelint formatting: missing empty lines.
Stylelint reports several
declaration-empty-line-beforeviolations. These are cosmetic style issues that don't affect functionality, but if the project enforces stylelint rules, consider runningtrunk fmtto auto-fix them. Based on learnings, Trunk is used for linting and formatting in this repo.Also applies to: 4214-4214, 4349-4349, 4463-4463, 4780-4780, 5059-5059
🤖 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 `@assets/css/custom.scss` at line 3942, Stylelint is flagging declaration-empty-line-before violations for certain CSS declarations (e.g., -webkit-background-clip: text;) in assets/css/custom.scss; fix by inserting the required empty line(s) before those declarations or simply run the repo's formatter (trunk fmt) to auto-apply the stylelint formatting; ensure you handle all reported occurrences (including other instances of the same pattern) so the file conforms to the declaration-empty-line-before rule.layouts/shortcodes/cs-wins.html (1)
26-27: 💤 Low valueConsider more explicit multi-line body handling.
The current logic appends any non-field line to
$bodyafter abody:line is encountered. This works but could capture unexpected content if the block format varies slightly.Consider documenting that all lines after
body:are part of the body, or add more explicit multi-line indicators.🤖 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/cs-wins.html` around lines 26 - 27, The current handler that appends non-field lines to $body (the else-if branch using $line and $body) is too permissive; update the parsing in the cs-wins shortcode so multi-line bodies are explicit — either treat only indented lines or lines after a "body:" marker until an explicit terminator as part of the body, or document the rule clearly. Concretely, change the logic around the $line/$body accumulation to only append lines when they match your chosen multi-line indicator (e.g., leading whitespace, a continuation marker, or until the next field pattern like "^[a-zA-Z0-9_-]+:") and ensure the "body:" handling and its terminator are documented in the shortcode comment.
🤖 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 `@content/case-studies/template.md`:
- Around line 36-38: The fenced code block containing the command "hugo serve
-D" is missing a language identifier, triggering MD040; update the code fence to
declare a language (e.g., change the opening ``` to ```bash) in the template.md
fenced block so the block is language-specified and Trunk/MD040 is satisfied.
In `@docs/case-studies.md`:
- Line 190: The fenced code block that currently starts with triple backticks
(``` ) is missing a language tag and triggers MD040; update that opening fence
to include a language identifier such as ```text (or ```bash if the block is
executable) so markdownlint stops flagging it and the block is properly
recognized.
In `@layouts/case-studies/legacy.html`:
- Line 35: Replace the hardcoded Vimeo ID in the legacy.html iframe with a
front-matter-driven variable (use the front-matter key video_id) so each case
study can supply its own video; update the iframe src to interpolate that
video_id value and remove the duplicated frameborder="0" attribute from the
<iframe> element so it’s valid HTML.
In `@layouts/shortcodes/cs-lockup.html`:
- Around line 6-12: The template uses the shortcode parameter "client_logo"
(stored in $client) without validation; update the cs-lockup.html shortcode to
check whether $client is non-empty and only render the <img> element when it
exists (or render a sensible fallback/placeholder SVG or class when absent).
Specifically, in cs-lockup.html around where $client and $clientName are defined
and where the <img src="{{ $client }}" ...> is output, conditionally output the
<img> using an if/else on $client (or set $client to a default placeholder URL)
so you avoid rendering an empty src and broken image while preserving alt text
via $clientName.
---
Nitpick comments:
In `@assets/css/custom.scss`:
- Around line 3912-3920: Remove or use the two unused keyframe animations
csHeroAsideFloat and csLockupPulse: either delete the `@keyframes` blocks
(csHeroAsideFloat and csLockupPulse) to eliminate dead code, or apply them to
the intended selectors by adding animation declarations to .cs-hero__aside
(e.g., csHeroAsideFloat with a 4s ease-in-out infinite) and .cs-lockup (e.g.,
csLockupPulse with a 3s ease-in-out infinite). Optionally rename keyframes to
kebab-case (cs-hero-aside-float, cs-lockup-pulse) and update the animation
properties accordingly to satisfy stylelint conventions.
- Line 3942: Stylelint is flagging declaration-empty-line-before violations for
certain CSS declarations (e.g., -webkit-background-clip: text;) in
assets/css/custom.scss; fix by inserting the required empty line(s) before those
declarations or simply run the repo's formatter (trunk fmt) to auto-apply the
stylelint formatting; ensure you handle all reported occurrences (including
other instances of the same pattern) so the file conforms to the
declaration-empty-line-before rule.
In `@layouts/shortcodes/cs-wins.html`:
- Around line 26-27: The current handler that appends non-field lines to $body
(the else-if branch using $line and $body) is too permissive; update the parsing
in the cs-wins shortcode so multi-line bodies are explicit — either treat only
indented lines or lines after a "body:" marker until an explicit terminator as
part of the body, or document the rule clearly. Concretely, change the logic
around the $line/$body accumulation to only append lines when they match your
chosen multi-line indicator (e.g., leading whitespace, a continuation marker, or
until the next field pattern like "^[a-zA-Z0-9_-]+:") and ensure the "body:"
handling and its terminator are documented in the shortcode comment.
🪄 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: cc0b9036-65d6-4e36-8fbf-0fcbbece8c20
⛔ Files ignored due to path filters (3)
static/img/case-studies/marketspark/hero-bg.jpgis excluded by!**/*.jpgstatic/img/case-studies/marketspark/marketspark-logo.pngis excluded by!**/*.pngstatic/img/case-studies/marketspark/preview.svgis excluded by!**/*.svg
📒 Files selected for processing (20)
CLAUDE.mdassets/css/custom.scsscontent/case-studies/_index.mdcontent/case-studies/marketspark.mdcontent/case-studies/power-digital-case-study.mdcontent/case-studies/template.mddocs/case-studies.mdlayouts/case-studies/legacy.htmllayouts/case-studies/single.htmllayouts/partials/case-study-toc.htmllayouts/shortcodes/cs-about.htmllayouts/shortcodes/cs-beforeafter.htmllayouts/shortcodes/cs-callout.htmllayouts/shortcodes/cs-figure.htmllayouts/shortcodes/cs-lockup.htmllayouts/shortcodes/cs-pane.htmllayouts/shortcodes/cs-pullquote.htmllayouts/shortcodes/cs-stats.htmllayouts/shortcodes/cs-todo.htmllayouts/shortcodes/cs-wins.html
… cs-about in markdown
… cs-about in markdown

Some of this (like placeholders images) will change when we do the full release.
But wanted to get this merged first to unblock other work (and avoid merge conflicts / stacked PRs) while I work on other case studies / other areas of the website.
Currently, no other case studies will show, they are all in draft mode so it is not visible. (see this other PR's preview if you want to see what this does https://deploy-preview-115--masterpoint.netlify.app/case-studies/marketspark/ && https://deploy-preview-115--masterpoint.netlify.app/case-studies/template/
legacy.html. No functional change.Summary by CodeRabbit
New Features
Documentation
Updates