feat: homepage rework #2 to compare to #1 #93
Conversation
✅ Deploy Preview for masterpoint ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughThis PR redesigns the homepage with extensive CSS enhancements (new components like numbered-list, btn-gradient, platform tiles), reorganizes content sections with adjusted weights, introduces a new three-step workflow (audit/innovate/operate), and refactors layout templates to update banner/button styling and change the services shortcode to iterate over steps instead of services. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
assets/css/custom.scss (1)
723-756: Fix invalid CSS values / media query syntax (can cause styles to be skipped).-@media (min-width: 1200px) and(max-width: 1300px) { +@media (min-width: 1200px) and (max-width: 1300px) { -@media (min-width: 1200px) and(max-width:1330px) { +@media (min-width: 1200px) and (max-width: 1330px) { - border-bottom: solid 1px rgba(255, 0255, 255, 0.1); + border-bottom: solid 1px rgba(255, 255, 255, 0.1);Also applies to: 933-933
🧹 Nitpick comments (1)
content/sections/home-turn-chaos.md (1)
49-49: Consider parameterizing the Calendly URL.The hardcoded Calendly URL on line 49 makes future updates difficult. Consider moving this to front matter or site config instead.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (5)
static/img/bg_audit_home.pngis excluded by!**/*.pngstatic/img/bg_make_infrastructure.pngis excluded by!**/*.pngstatic/img/noun-cycle-7222105.svgis excluded by!**/*.svgstatic/img/noun-developer-7187679.svgis excluded by!**/*.svgstatic/img/noun-reduction-7894266.svgis excluded by!**/*.svg
📒 Files selected for processing (14)
assets/css/custom.scss(14 hunks)content/_index.md(1 hunks)content/sections/home-efficient-platforms.md(1 hunks)content/sections/home-join-clients.md(1 hunks)content/sections/home-make-infrastructure.md(1 hunks)content/sections/home-our-word.md(1 hunks)content/sections/home-specialized-services.md(1 hunks)content/sections/home-turn-chaos.md(1 hunks)content/sections/home-what-is-masterpoint.md(1 hunks)content/steps/audit.md(1 hunks)content/steps/innovate.md(1 hunks)content/steps/operate.md(1 hunks)layouts/index.html(4 hunks)layouts/shortcodes/services.html(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
content/**/*.md
📄 CodeRabbit inference engine (CLAUDE.md)
content/**/*.md: Place all site content in Markdown files under /content/
Use absolute URLs in content (paths should start with "/", e.g., /blog/ not blog/)
Reference images in content using the /img/ path (which maps to /static/img/)
Use front matter draft: true to hide in-progress content from production
Use provided Hugo shortcodes (button, buttonout, form, testimonials, faqs, team, services, process, supports, client-logos) in content instead of duplicating HTML
Files:
content/sections/home-what-is-masterpoint.mdcontent/steps/innovate.mdcontent/steps/audit.mdcontent/sections/home-make-infrastructure.mdcontent/sections/home-efficient-platforms.mdcontent/sections/home-our-word.mdcontent/steps/operate.mdcontent/sections/home-join-clients.mdcontent/sections/home-turn-chaos.mdcontent/_index.mdcontent/sections/home-specialized-services.md
🧠 Learnings (3)
📚 Learning: 2025-08-11T18:01:10.378Z
Learnt from: westonplatter
Repo: masterpointio/masterpoint.io PR: 73
File: content/blog/ai-meets-tf-prompt-strategies-for-test-generation.md:2-3
Timestamp: 2025-08-11T18:01:10.378Z
Learning: For the masterpointio/masterpoint.io repository, blog post visibility is controlled by the publish date rather than the draft flag in the front matter. The draft flag can be set to false even for unpublished posts, as the publish date determines when content becomes visible.
Applied to files:
content/sections/home-what-is-masterpoint.md
📚 Learning: 2025-09-19T19:21:07.260Z
Learnt from: CR
Repo: masterpointio/masterpoint.io PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-09-19T19:21:07.260Z
Learning: Applies to content/**/*.md : Use front matter draft: true to hide in-progress content from production
Applied to files:
content/sections/home-what-is-masterpoint.mdcontent/sections/home-specialized-services.md
📚 Learning: 2025-09-19T19:21:07.260Z
Learnt from: CR
Repo: masterpointio/masterpoint.io PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-09-19T19:21:07.260Z
Learning: Applies to assets/css/style.scss : Place custom styles in assets/css/style.scss (requires Hugo Extended for SCSS compilation)
Applied to files:
assets/css/custom.scss
🪛 GitHub Check: Trunk Check
content/steps/innovate.md
[failure] 1-1: prettier
Incorrect formatting, autoformat by running 'trunk fmt'
content/steps/audit.md
[failure] 1-1: prettier
Incorrect formatting, autoformat by running 'trunk fmt'
content/sections/home-make-infrastructure.md
[failure] 1-1: prettier
Incorrect formatting, autoformat by running 'trunk fmt'
content/sections/home-efficient-platforms.md
[notice] 21-21: markdownlint(MD045)
[new] Images should have alternate text (alt text)
[notice] 30-30: markdownlint(MD045)
[new] Images should have alternate text (alt text)
[notice] 39-39: markdownlint(MD045)
[new] Images should have alternate text (alt text)
[failure] 1-1: prettier
Incorrect formatting, autoformat by running 'trunk fmt'
content/steps/operate.md
[failure] 1-1: prettier
Incorrect formatting, autoformat by running 'trunk fmt'
content/sections/home-turn-chaos.md
[failure] 1-1: prettier
Incorrect formatting, autoformat by running 'trunk fmt'
🪛 markdownlint-cli2 (0.18.1)
content/sections/home-efficient-platforms.md
21-21: Images should have alternate text (alt text)
(MD045, no-alt-text)
30-30: Images should have alternate text (alt text)
(MD045, no-alt-text)
39-39: Images should have alternate text (alt text)
(MD045, no-alt-text)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - masterpoint
- GitHub Check: Header rules - masterpoint
- GitHub Check: Pages changed - masterpoint
🔇 Additional comments (11)
content/sections/home-specialized-services.md (1)
1-12: Good use ofdraft: trueto keep this section out of production until ready.content/sections/home-what-is-masterpoint.md (1)
1-12:draft: trueis appropriate here to prevent unintended publication of the reworked homepage section.content/sections/home-our-word.md (1)
1-11: Weight-only change looks fine (homepage ordering).content/sections/home-join-clients.md (1)
1-17: Content/layout tweak looks good; text reads stronger and the responsive width change is reasonable.assets/css/custom.scss (1)
115-161: New components/section hooks are cohesive and appear consistent with the homepage rework direction.(Separately, trunk/prettier is failing—worth running the formatter after the correctness fixes.)
Also applies to: 274-282, 1059-1078, 1593-1726, 1759-1782
content/steps/innovate.md (1)
1-7: Step metadata looks good; please re-run formatter to satisfy the prettier/trunk check.content/steps/audit.md (1)
1-7: Step metadata looks good; please re-run formatter to satisfy the prettier/trunk check.content/sections/home-efficient-platforms.md (1)
38-38: Verify third platform tile CSS class.The third tile reuses
platform-tile-2(same as the second tile on line 29). Confirm if this is intentional or if it should use a distinct class likeplatform-tile-3.content/_index.md (1)
8-11: Verify CTA link destinations.Lines 9 and 11 both use
/#as the link destination, which won't anchor to a meaningful location. Confirm whether these should link to specific sections (e.g.,/#turn-chaos-operations) or pages (e.g.,/services/).layouts/index.html (2)
21-25: Verify tagline repositioning doesn't break styling.The banner tagline was moved from before the H3 to after it (lines 21-25). Confirm that CSS selectors and styling still apply correctly with this new DOM order.
31-31: CSS classesbtn-gradientandbtn-outline-gradientare properly defined.Both classes are defined in assets/css/custom.scss (btn-gradient at line 274, btn-outline-gradient at lines 285, 294, and 340).
|
|
||
| <div class="col col-12 col-md-4"> | ||
| <div class="platform-tile platform-tile-1"> | ||
| <div class="platformIcon"><img src="img/noun-developer-7187679.svg"/></div> |
There was a problem hiding this comment.
Fix image paths to use absolute URLs and add alt text.
Per coding guidelines, image references must use absolute paths starting with /, not relative paths. Additionally, all images need alt text for accessibility.
-<div class="platformIcon"><img src="img/noun-developer-7187679.svg"/></div>
+<div class="platformIcon"><img src="/img/noun-developer-7187679.svg" alt="Developer icon"/></div>-<div class="platformIcon"><img src="img/noun-cycle-7222105.svg"/></div>
+<div class="platformIcon"><img src="/img/noun-cycle-7222105.svg" alt="Cycle icon"/></div>-<div class="platformIcon"><img src="img/noun-reduction-7894266.svg"/></div>
+<div class="platformIcon"><img src="/img/noun-reduction-7894266.svg" alt="Reduction icon"/></div>Also applies to: 30-30, 39-39
🧰 Tools
🪛 GitHub Check: Trunk Check
[notice] 21-21: markdownlint(MD045)
[new] Images should have alternate text (alt text)
🪛 markdownlint-cli2 (0.18.1)
21-21: Images should have alternate text (alt text)
(MD045, no-alt-text)
🤖 Prompt for AI Agents
In content/sections/home-efficient-platforms.md around lines 21, 30, and 39, the
<img> tags use relative src paths and lack alt attributes; update each image tag
so src uses an absolute path beginning with "/" (e.g., "/img/...svg") and add a
meaningful alt="" attribute for accessibility (e.g., alt="developer icon") to
each image reference.
| --- | ||
| title: Make Infrastructure | ||
| weight: 2 | ||
| position: justify-content-end | ||
| size: col-12 col-md-6 | ||
| #section_image: /img/bg_make_infrastructure.png | ||
| image: /img/bg_make_infrastructure.png | ||
| section_categories: | ||
| - Home | ||
| id: make-infrastructure | ||
| --- | ||
|
|
||
| ### Make Infrastructure <span class="text-gradient">Your Competitive Edge</span> {.groupTitle .text-white .mb-1} | ||
|
|
||
| Code is easy to come by. But cheap code doesn’t make for an efficient platform. Workflows and automations do. Our IaC workshops and Workflow Library provide the expertise, training, and foundations needed to build the workflows that lead to efficient operations. | ||
|
|
||
| <a href="/#" class="button btn-outline-gradient btn-big">See Our Results ￫</a> No newline at end of file |
There was a problem hiding this comment.
Replace placeholder CTA target (href="/#"). This will feel broken/unfinished in production even if the section is later un-drafted.
Suggested change (pick the real destination):
-<a href="/#" class="button btn-outline-gradient btn-big">See Our Results ￫</a>
+<a href="/case-studies/" class="button btn-outline-gradient btn-big">See Our Results ￫</a>📝 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: Make Infrastructure | |
| weight: 2 | |
| position: justify-content-end | |
| size: col-12 col-md-6 | |
| #section_image: /img/bg_make_infrastructure.png | |
| image: /img/bg_make_infrastructure.png | |
| section_categories: | |
| - Home | |
| id: make-infrastructure | |
| --- | |
| ### Make Infrastructure <span class="text-gradient">Your Competitive Edge</span> {.groupTitle .text-white .mb-1} | |
| Code is easy to come by. But cheap code doesn’t make for an efficient platform. Workflows and automations do. Our IaC workshops and Workflow Library provide the expertise, training, and foundations needed to build the workflows that lead to efficient operations. | |
| <a href="/#" class="button btn-outline-gradient btn-big">See Our Results ￫</a> | |
| --- | |
| title: Make Infrastructure | |
| weight: 2 | |
| position: justify-content-end | |
| size: col-12 col-md-6 | |
| #section_image: /img/bg_make_infrastructure.png | |
| image: /img/bg_make_infrastructure.png | |
| section_categories: | |
| - Home | |
| id: make-infrastructure | |
| --- | |
| ### Make Infrastructure <span class="text-gradient">Your Competitive Edge</span> {.groupTitle .text-white .mb-1} | |
| Code is easy to come by. But cheap code doesn't make for an efficient platform. Workflows and automations do. Our IaC workshops and Workflow Library provide the expertise, training, and foundations needed to build the workflows that lead to efficient operations. | |
| <a href="/case-studies/" class="button btn-outline-gradient btn-big">See Our Results ￫</a> |
🧰 Tools
🪛 GitHub Check: Trunk Check
[failure] 1-1: prettier
Incorrect formatting, autoformat by running 'trunk fmt'
🤖 Prompt for AI Agents
In content/sections/home-make-infrastructure.md lines 1-17 the CTA anchor uses a
placeholder href="/#", which appears broken/unfinished; replace that href with
the real destination route (for example /results, /case-studies, /workshops, or
the canonical page that shows your outcomes), ensure the chosen route exists in
the site, update the link to use that URL (relative or absolute as appropriate)
and confirm the anchor text/aria-label still accurately describes the target.
| </div> | ||
|
|
||
| <div class="audit-home-tile"> | ||
| <div class="bg-image"><img src="img/bg_audit_home.png" alt="Masterpoint Thread Backround"/></div> |
There was a problem hiding this comment.
Fix image path to use absolute URL.
Per coding guidelines, image references must use absolute paths starting with /.
-<div class="bg-image"><img src="img/bg_audit_home.png" alt="Masterpoint Thread Backround"/></div>
+<div class="bg-image"><img src="/img/bg_audit_home.png" alt="Masterpoint Thread Background"/></div>(Note: Also fixed typo "Backround" → "Background" in alt text.)
📝 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.
| <div class="bg-image"><img src="img/bg_audit_home.png" alt="Masterpoint Thread Backround"/></div> | |
| <div class="bg-image"><img src="/img/bg_audit_home.png" alt="Masterpoint Thread Background"/></div> |
🤖 Prompt for AI Agents
In content/sections/home-turn-chaos.md around line 30, the image src uses a
relative path and the alt text has a typo; update the src to an absolute path by
prefixing it with a leading slash (e.g., /img/bg_audit_home.png) and correct the
alt text from "Masterpoint Thread Backround" to "Masterpoint Thread Background".
| title: Platform Engineering as a Service | ||
| title: Operate |
There was a problem hiding this comment.
Fix duplicate YAML front matter key.
Line 3 uses title: Operate but this conflicts with line 2's title. Based on the enriched summary, line 3 should be sub_title: Operate.
---
title: Platform Engineering as a Service
-title: Operate
+sub_title: Operate
description: >-
Learn proven workflows and skills, empowering your engineers to confidently scale and own your infra going forward.
weight: 3
icon: /img/services/icon_engineering.svg
---📝 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: Platform Engineering as a Service | |
| title: Operate | |
| --- | |
| title: Platform Engineering as a Service | |
| sub_title: Operate | |
| description: >- | |
| Learn proven workflows and skills, empowering your engineers to confidently scale and own your infra going forward. | |
| weight: 3 | |
| icon: /img/services/icon_engineering.svg | |
| --- |
🤖 Prompt for AI Agents
In content/steps/operate.md around lines 2 to 3, the YAML front matter contains
a duplicate key "title": change the second occurrence (line 3) from "title:
Operate" to "sub_title: Operate" so the front matter keys are unique and match
the intended enriched summary field.
| {{ range where (.Site.RegularPages.ByWeight) "Type" "services" }} | ||
| <div class="col col-12 col-md-6"> | ||
| <div class="services-row row"> | ||
| {{ range where (.Site.RegularPages.ByWeight) "Type" "steps" }} |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify the concerns raised in the review comment
# 1. Check all step files for home_description parameter
echo "=== Checking step files for home_description parameter ==="
if fd -e md 'content/steps' 2>/dev/null | head -20; then
fd -e md 'content/steps' 2>/dev/null | xargs grep -l "home_description" 2>/dev/null | wc -l
fd -e md 'content/steps' 2>/dev/null | wc -l
else
echo "No content/steps directory found or no .md files in it"
fi
# 2. Find all {{<services>}} shortcode usages in the repository
echo -e "\n=== Finding all {{<services>}} shortcode usages ==="
rg '{{<\s*services\s*>}}' --type md 2>/dev/null | head -50
# 3. Check if CSS classes are defined
echo -e "\n=== Checking for CSS classes bg-gradient and homeServiceTitle ==="
rg 'bg-gradient|homeServiceTitle' 2>/dev/null | head -30
# 4. Get the services.html shortcode content to understand line 17 requirement
echo -e "\n=== Content of services.html shortcode ==="
if [ -f "layouts/shortcodes/services.html" ]; then
cat -n layouts/shortcodes/services.html
fiRepository: masterpointio/masterpoint.io
Length of output: 2069
🏁 Script executed:
#!/bin/bash
# Deeper investigation of the shortcode change
# 1. Search for services shortcode usage across all files (not just markdown)
echo "=== Searching for services shortcode usage across all file types ==="
rg '{{<\s*services\s*>}}' 2>/dev/null || echo "No shortcode usages found"
# 2. Check content directory structure
echo -e "\n=== Content directory structure ==="
if [ -d "content" ]; then
find content -type d | head -30
echo -e "\n=== Content types available (directories in content/) ==="
ls -la content/ 2>/dev/null
fi
# 3. Check for "services" type content files
echo -e "\n=== Looking for files with Type 'services' ==="
rg 'type:\s*services|Type.*services' --type md --type yaml 2>/dev/null | head -20 || echo "No 'services' type content found"
# 4. Check for "steps" type content files
echo -e "\n=== Looking for files with Type 'steps' ==="
rg 'type:\s*steps|Type.*steps' --type md --type yaml 2>/dev/null | head -20 || echo "No 'steps' type content found"
# 5. Check where the shortcode is actually used
echo -e "\n=== Searching for services shortcode in all templates and includes ==="
rg 'services' layouts/ 2>/dev/null | grep -i 'shortcode\|include\|partial' | head -20Repository: masterpointio/masterpoint.io
Length of output: 2202
🏁 Script executed:
#!/bin/bash
# Examine content files in services and steps directories
echo "=== Files in content/services/ ==="
ls -la content/services/
echo -e "\n=== Content of services files ==="
cat -n content/services/*.md
echo -e "\n=== Files in content/steps/ ==="
ls -la content/steps/
echo -e "\n=== Content of steps files ==="
cat -n content/steps/*.mdRepository: masterpointio/masterpoint.io
Length of output: 6547
Breaking change confirmed: Missing required home_description parameter in step files.
The shortcode was changed from iterating over Type "services" to Type "steps". This is a breaking change, but more critically: step files lack the home_description parameter that the shortcode requires on line 17. The steps (audit.md, innovate.md, operate.md) only have description, not home_description, so line 17 will render empty values if the shortcode is used.
Additionally, while the CSS classes bg-gradient and homeServiceTitle are properly defined in assets/css/custom.scss, the shortcode currently has no active usage in templates.
🤖 Prompt for AI Agents
In layouts/shortcodes/services.html around line 2, the range was switched to
Type "steps" but the shortcode expects a frontmatter param home_description
(used at line 17) which the step pages don't provide; either revert the range to
Type "services" if you intended to render service pages, or make the shortcode
robust by falling back to .Params.description when .Params.home_description is
missing and update the three step files (audit.md, innovate.md, operate.md) to
include home_description if you want bespoke text; also verify any templates
that should include this shortcode actually call it so the CSS classes are used.
|
Closing as #85 supersedes. |
|
Reopening as I need to test this again... got something wrong. |
what
Summary by CodeRabbit
New Features
Content Updates
Style
✏️ Tip: You can customize this high-level summary in your review settings.