Skip to content

feat: new case study boilerplate and structures#114

Merged
oycyc merged 6 commits into
masterfrom
feat/case-study
Jun 3, 2026
Merged

feat: new case study boilerplate and structures#114
oycyc merged 6 commits into
masterfrom
feat/case-study

Conversation

@oycyc

@oycyc oycyc commented Jun 2, 2026

Copy link
Copy Markdown
Contributor

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/

  • Move the PowerDigital case study structure (one off and long) to legacy.html. No functional change.
    • Will be migrated to the newer design.

Summary by CodeRabbit

  • New Features

    • Modern case study page layout with hero sections, stat strips, and enhanced typography system
    • New case study components: callouts, figures, stat grids, before/after comparisons, testimonial pullquotes, and win cards
    • Automatic table of contents generation for case study articles
    • Added MarketSpark case study
  • Documentation

    • Added comprehensive case study authoring guide with workflow conventions and best practices
  • Updates

    • Refreshed case studies page template and index description
    • Updated legacy case study layout configuration

@oycyc oycyc requested a review from a team as a code owner June 2, 2026 21:18
@netlify

netlify Bot commented Jun 2, 2026

Copy link
Copy Markdown

Deploy Preview for masterpoint ready!

Name Link
🔨 Latest commit b978b08
🔍 Latest deploy log https://app.netlify.com/projects/masterpoint/deploys/6a1f4f0680f1dc0008d73c0b
😎 Deploy Preview https://deploy-preview-114--masterpoint.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 37
Accessibility: 86
Best Practices: 100
SEO: 79
PWA: 70
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@coderabbitai

coderabbitai Bot commented Jun 2, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Walkthrough

This 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.

Changes

Case Study System

Layer / File(s) Summary
Case Study Documentation & Guidance
CLAUDE.md, docs/case-studies.md, content/case-studies/template.md
Complete specification of case study architecture, front matter schema, shortcode authoring constraints, asset storage rules, editorial guidance, and iteration workflow. Template gallery demonstrates all cs-* shortcodes with copy-paste examples and usage instructions.
Case Study Styling & Theme
assets/css/custom.scss
SCSS implementation of .case-study-modern layout with keyframe animations, color variables, gradient mixins, and complete visual styling for hero, stat-strip, article card, TOC, client lockup, about card, figures, stat grid, callouts, pullquotes, before/after panes, win cards, CTA block, and TODO markers.
Page Layouts & TOC System
layouts/case-studies/single.html, layouts/case-studies/legacy.html, layouts/partials/case-study-toc.html
Modern case-study layout with hero background, client logo, stat-strip, and article structure that auto-injects a table-of-contents partial before the first H2. Legacy layout for banner/video-based pages. TOC partial renders navigable "In This Success Story" card from heading fragments.
Content Shortcode Components
layouts/shortcodes/cs-*.html
Eleven shortcodes (cs-about, cs-beforeafter, cs-callout, cs-figure, cs-lockup, cs-pane, cs-pullquote, cs-stats, cs-todo, cs-wins) that render client cards, comparison sections, callout boxes, stat grids, logo lockups, win cards, and other reusable content blocks.
Case Study Content & Configuration
content/case-studies/_index.md, content/case-studies/marketspark.md, content/case-studies/power-digital-case-study.md
Index page description updated. New MarketSpark case study demonstrates the modern layout with cs-about, cs-wins, and cs-pullquote shortcodes. Power Digital case study marked with legacy layout and weight.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

  • masterpointio/masterpoint.io#53: Adds the initial case study banner/video layout that this PR supersedes with the modern .case-study-modern structure and shortcode components.

Suggested reviewers

  • gberenice
  • westonplatter
  • Gowiem
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title 'feat: new case study boilerplate and structures' accurately describes the primary change: introducing a comprehensive case study system with templates, layouts, styles, shortcodes, and documentation.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/case-study

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

🧹 Nitpick comments (3)
assets/css/custom.scss (2)

3912-3920: 💤 Low value

Unused keyframe animations.

Both csHeroAsideFloat and csLockupPulse are defined but never referenced anywhere in the .case-study-modern styles. 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__aside and .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-case for 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 value

Stylelint formatting: missing empty lines.

Stylelint reports several declaration-empty-line-before violations. These are cosmetic style issues that don't affect functionality, but if the project enforces stylelint rules, consider running trunk fmt to 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 value

Consider more explicit multi-line body handling.

The current logic appends any non-field line to $body after a body: 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

📥 Commits

Reviewing files that changed from the base of the PR and between 1a735f5 and e1a51ac.

⛔ Files ignored due to path filters (3)
  • static/img/case-studies/marketspark/hero-bg.jpg is excluded by !**/*.jpg
  • static/img/case-studies/marketspark/marketspark-logo.png is excluded by !**/*.png
  • static/img/case-studies/marketspark/preview.svg is excluded by !**/*.svg
📒 Files selected for processing (20)
  • CLAUDE.md
  • assets/css/custom.scss
  • content/case-studies/_index.md
  • content/case-studies/marketspark.md
  • content/case-studies/power-digital-case-study.md
  • content/case-studies/template.md
  • docs/case-studies.md
  • layouts/case-studies/legacy.html
  • layouts/case-studies/single.html
  • layouts/partials/case-study-toc.html
  • layouts/shortcodes/cs-about.html
  • layouts/shortcodes/cs-beforeafter.html
  • layouts/shortcodes/cs-callout.html
  • layouts/shortcodes/cs-figure.html
  • layouts/shortcodes/cs-lockup.html
  • layouts/shortcodes/cs-pane.html
  • layouts/shortcodes/cs-pullquote.html
  • layouts/shortcodes/cs-stats.html
  • layouts/shortcodes/cs-todo.html
  • layouts/shortcodes/cs-wins.html

Comment thread content/case-studies/template.md Outdated
Comment thread docs/case-studies.md
Comment thread layouts/case-studies/legacy.html
Comment thread layouts/shortcodes/cs-lockup.html
@oycyc oycyc force-pushed the feat/case-study branch from 8b59299 to c691fe1 Compare June 2, 2026 21:38
Comment thread .trunk/trunk.yaml Outdated

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is a placeholder

@Gowiem Gowiem left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:shipit:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants