feat: homepage rework from @kristopherray #85
Conversation
✅ Deploy Preview for masterpoint ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughHomepage and styling updates: new CSS components and visual refinements; new content sections and step definitions; banner copy and CTA adjusted; templates updated to render Changes
Sequence Diagram(s)sequenceDiagram
participant Template as layouts/index.html
participant Shortcode as layouts/shortcodes/services.html
participant Content as content/*
participant Browser as Client
Note over Template, Shortcode: New flow - homepage renders with steps and updated CTA
Template->>Content: load page front-matter (banner_title, banner_tagline, banner_btn, links)
Template->>Shortcode: render services shortcode (now sources `steps`)
Shortcode->>Content: query content where type == "steps"
Shortcode->>Shortcode: build 3-column grid, use `home_title` / `home_description`
Template->>Browser: emit banner (title → tagline → CTA anchors)
Shortcode->>Browser: emit platform/step tiles (icons, titles, descriptions)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ 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: 7
📜 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-efficient-platforms.mdcontent/steps/operate.mdcontent/steps/innovate.mdcontent/sections/home-make-infrastructure.mdcontent/sections/home-what-is-masterpoint.mdcontent/sections/home-specialized-services.mdcontent/_index.mdcontent/sections/home-turn-chaos.mdcontent/sections/home-our-word.mdcontent/steps/audit.mdcontent/sections/home-join-clients.md
🧠 Learnings (3)
📚 Learning: 2025-08-11T18:01:10.378Z
Learnt from: westonplatter
PR: masterpointio/masterpoint.io#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
PR: masterpointio/masterpoint.io#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
PR: masterpointio/masterpoint.io#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/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/steps/innovate.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-turn-chaos.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'
🪛 LanguageTool
content/steps/operate.md
[grammar] ~1-~1: Hier könnte ein Fehler sein.
Context: --- title: Platform Engineering as a Service 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 ---
(QB_NEW_DE)
content/steps/innovate.md
[grammar] ~1-~1: Hier könnte ein Fehler sein.
Context: --- title: Innovate description: >- Our team tackles the heavy lifting, turning recommendations into real platform improvements. weight: 2 icon: /img/services/icon_masterpoint.svg ---
(QB_NEW_DE)
content/steps/audit.md
[grammar] ~1-~1: Hier könnte ein Fehler sein.
Context: --- title: Audit description: >- Uncover the inefficiencies in your platform and get practical recommendations to fix them. weight: 1 icon: /img/services/icon_assessment.svg ---
(QB_NEW_DE)
🪛 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 (17)
content/sections/home-specialized-services.md (1)
1-19: Verify draft status is intentional.Line 8 marks this entire "Get support at every level" section as draft, which will hide it from the production homepage. Confirm this is intentional—is this section temporarily disabled during the rework, or permanently removed from the new design?
content/sections/home-what-is-masterpoint.md (1)
1-18: Verify draft status for core "who we are" section.Line 8 marks the "What is Masterpoint?" section as draft, which will hide this foundational company introduction from the production homepage. This appears to be core content—confirm this is intentional and not an accidental suppression during the rework.
content/sections/home-our-word.md (1)
1-14: LGTM.Weight adjustment is consistent with the homepage section reordering strategy. Shortcode usage is appropriate.
content/steps/innovate.md (1)
1-7: Front matter structure is correct.The step definition follows Hugo conventions and image path uses the correct absolute URL format per guidelines. Run
trunk fmtto auto-fix the prettier formatting notice.content/steps/audit.md (1)
1-7: LGTM.Front matter structure follows Hugo conventions correctly, and image path uses the proper absolute URL format per guidelines. Run
trunk fmtto auto-fix the prettier formatting notice.content/sections/home-join-clients.md (1)
1-17: LGTM.The weight adjustment is consistent with the homepage section reordering, and the updated responsive breakpoint (col-xl-6) and content refinements align well with the design rework objectives. The use of the provided
client-logosshortcode is appropriate per guidelines.content/sections/home-make-infrastructure.md (1)
17-17: Verify placeholder link destination.The CTA button links to
/#, which appears to be a placeholder. Confirm this is the intended destination or update to the actual URL. Based on the coding guidelines, all site links should use absolute URLs starting with "/".layouts/index.html (2)
21-25: ✓ Tagline rendering properly conditional.The bannerTagline block is correctly wrapped in a conditional check for
.Params.banner_tagline, which prevents rendering errors if the field is not present in front matter.
29-35: Button markup refactoring verified; CSS styling is complete and responsive.The
.rowLinksCSS definition correctly implements:
- Flex layout with center alignment for desktop
- Responsive stacking (flex-direction: column) at 575px
- Appropriate button margins across all viewports (1.4em desktop, 0.7em at 767px, 10px at 575px)
The simplified anchor structure is well-supported by the CSS, and all concerns regarding flex layout, responsive behavior, and button styling are properly addressed.
content/_index.md (2)
3-3: HTML in front matter properly sanitized in templates.The banner_title contains inline HTML with a span element and CSS class. Verify that the template renders this with
safeHTMLto prevent XSS issues. ✓ Confirmed in layouts/index.html line 16 uses|safeHTML.
8-11: Verify placeholder link destinations.Both
banner_btn_link: /#andbanner_link: /#are placeholder URLs. Confirm these should be actual destination URLs. Per the coding guidelines, all site links should use absolute paths starting with "/".assets/css/custom.scss (6)
115-161: ✓ Numbered list component well-implemented with CSS counters.The
.numbered-listcomponent uses CSS counters and pseudo-elements effectively. Gradient background on numbers uses consistent color values, responsive sizing is appropriate, and media queries handle smaller screens well.
274-282: ✓ Button gradient styling consistent with theme.The
.btn-gradientmodifier applies the same gradient used across the design (ede497→2ad9c2→d891ce) with appropriate text color for contrast. This maintains visual consistency.
1059-1078: ✓ Responsive button layout with .rowLinks.The
.rowLinksflexbox layout properly handles:
- Desktop: buttons in row with right margin
- Tablet (≤767px): centered with reduced margin
- Mobile (≤575px): stacked vertically with consistent margin
This aligns with button rendering changes in layouts/index.html.
1593-1644: ✓ Audit home tile styling supports complex layout.The
.audit-home-tilecomponent properly handles:
- Layered background with opacity control
- Positioned button at bottom center with transform
- Responsive border-radius and padding
- Proper z-index stacking (content at z-index 9, image behind)
Button positioning with negative margin-bottom creates the overlay effect correctly.
1645-1725: ✓ Platform row and tile styling well-designed.The
.platform-rowand.platform-tilecomponents:
- Use consistent gradient system (3 variants)
- Include decorative ::before line element
- Responsive padding/sizing at all breakpoints
- Proper color contrast for text on gradient backgrounds (#0f393b text on light gradients)
Three gradient variants provide good visual variety.
1759-1782: Verify #make-infrastructure gradient overlay works on mobile.The
#make-infrastructuresection uses a complex gradient overlay (lines 1766-1770) that differs on mobile (lines 1778-1779). On mobile, the overlay changes from horizontal gradient to vertical. Verify this provides adequate contrast for readability on all image sizes.Visually test the section on mobile devices to confirm text remains readable over the background image with the new vertical gradient overlay.
|
|
||
| <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 relative image paths and add alt text.
Per coding guidelines, image paths must be absolute URLs starting with /. Also, all three images (lines 21, 30, 39) are missing alt text for accessibility.
Apply this diff:
<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>
+<div class="platformIcon"><img src="/img/noun-developer-7187679.svg" alt="Developer icon"/></div>
<div class="platformCount">1+</div>
<div class="platformCTA">Full-time engineer of hours saved</div>
</div>
</div>
<div class="col col-12 col-md-4">
<div class="platform-tile platform-tile-2">
-<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="platformCount">10x</div>
<div class="platformCTA">Faster Plan & Apply Cycles</div>
</div>
</div>
<div class="col col-12 col-md-4">
<div class="platform-tile platform-tile-2">
-<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>
<div class="platformCount">10x</div>
<div class="platformCTA">Reduction in Infrastructure </div>
</div>
</div>As per coding guidelines: "Reference images in content using the /img/ path (which maps to /static/img/)"
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
image tags use relative paths ("img/...") and lack alt attributes; update each
img tag to use absolute paths beginning with "/img/..." (which maps to
/static/img/) and add descriptive alt text for each image (e.g., alt="developer
icon", alt="designer icon", alt="manager icon" or other context-appropriate
descriptions) so all three image elements use the correct /img/ path and include
meaningful alt text.
| --- | ||
| 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 | ||
| --- |
There was a problem hiding this comment.
Fix prettier formatting error.
The static analysis flagged a prettier formatting issue. Run trunk fmt to auto-format the file according to project conventions.
🧰 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 around lines 1 to 11 the file
fails project formatting (Prettier) — run the project's formatter (trunk fmt) to
auto-fix the file, review the changed whitespace/linebreaks, save the file and
include the formatted file in your commit (stage and commit the updated file) so
the CI static analysis passes.
| --- | ||
| title: Turn Chaos into Reliable Operations | ||
| weight: 3 | ||
| #position: justify-content-start reverse flex | ||
| #size: col-12 col-md-6 | ||
| #section_image: /img/diverse_group_of_doctors.jpg | ||
| #image: /img/bg_featured_video.jpg | ||
| section_categories: | ||
| - Home | ||
| id: turn-chaos-operations | ||
| --- |
There was a problem hiding this comment.
Fix prettier formatting error.
The static analysis flagged a prettier formatting issue. Run trunk fmt to auto-format the file according to project conventions.
🧰 Tools
🪛 GitHub Check: Trunk Check
[failure] 1-1: prettier
Incorrect formatting, autoformat by running 'trunk fmt'
🤖 Prompt for AI Agents
In content/sections/home-turn-chaos.md around lines 1 to 11 the file fails
project prettier/formatting checks; run the project's formatter (trunk fmt) and
commit the updated file so it matches the repository's formatting conventions,
then re-run the static checks to verify the issue is resolved.
| </div> | ||
| </div> | ||
|
|
||
| {{<services>}} |
There was a problem hiding this comment.
🧩 Analysis chain
Verify {{<services>}} shortcode renders steps correctly.
The shortcode invocation relies on the updated layouts/shortcodes/services.html template, which now filters by "steps" type instead of "services". Ensure that step content files exist at content/steps/ with appropriate frontmatter (Type: steps).
🏁 Script executed:
#!/bin/bash
# Verify that step content files exist and have correct Type
fd 'steps' content/ --type f --extension md | xargs grep -l "^Type.*steps" 2>/dev/null || echo "No steps found"Length of output: 14
I'll investigate further to understand the issue completely.
</script>🏁 Script executed:
#!/bin/bash
# Check 1: Does content/steps directory exist?
echo "=== Checking content/steps directory ==="
if [ -d "content/steps" ]; then
echo "Directory exists"
echo "Files in content/steps:"
ls -la content/steps/ || echo "Cannot list"
else
echo "Directory does not exist"
fi
# Check 2: Search for ANY files with Type: steps anywhere in content
echo ""
echo "=== Searching for Type: steps in all content ==="
rg "^Type.*steps" content/ --type md -n || echo "No matches found"
# Check 3: Inspect the services.html shortcode
echo ""
echo "=== Inspecting layouts/shortcodes/services.html ==="
if [ -f "layouts/shortcodes/services.html" ]; then
cat layouts/shortcodes/services.html
else
echo "services.html not found"
fiLength of output: 1191
</script>
🏁 Script executed:
#!/bin/bash
# Inspect frontmatter of each step file
echo "=== Frontmatter in content/steps/audit.md ==="
head -20 content/steps/audit.md
echo ""
echo "=== Frontmatter in content/steps/innovate.md ==="
head -20 content/steps/innovate.md
echo ""
echo "=== Frontmatter in content/steps/operate.md ==="
head -20 content/steps/operate.mdLength of output: 762
Add Type: steps frontmatter field to step content files.
Step content files exist at content/steps/ but are missing the Type: steps frontmatter required by the updated shortcode filter. Add Type: steps to the frontmatter of:
content/steps/audit.mdcontent/steps/innovate.mdcontent/steps/operate.md
Without this field, the shortcode will render empty because Hugo's where filter will not match any pages.
🤖 Prompt for AI Agents
In content/sections/home-turn-chaos.md around line 23, the shortcode
{{<services>}} expects step pages with a frontmatter field "Type: steps" but the
step files under content/steps/ are missing that field; open and update the
frontmatter of content/steps/audit.md, content/steps/innovate.md, and
content/steps/operate.md to include a top-level line "Type: steps" (matching
case) so Hugo's where filter will find them and the shortcode will render
correctly.
There was a problem hiding this comment.
@gberenice, thanks for confirming! This issue will prevent the {{<services>}} shortcode from rendering any content on the homepage until the Type: steps frontmatter is added to those three step files.
Would you like me to create a GitHub issue to track adding the missing Type: steps frontmatter field to the step content files?
| --- | ||
| title: Platform Engineering as a Service | ||
| 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 | ||
| --- No newline at end of file |
There was a problem hiding this comment.
Fix duplicate title field in front matter.
Lines 2–3 contain two title fields—the second will override the first, causing data loss. Based on the pattern of other steps (audit.md, innovate.md), the short title "Operate" is likely intended. Remove the longer "Platform Engineering as a Service" title.
Apply this diff to fix the front matter:
---
-title: Platform Engineering as a Service
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
---Run trunk fmt to auto-fix the prettier formatting notice afterward.
📝 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 | |
| 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 | |
| --- | |
| --- | |
| 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 | |
| --- |
🧰 Tools
🪛 GitHub Check: Trunk Check
[failure] 1-1: prettier
Incorrect formatting, autoformat by running 'trunk fmt'
🪛 LanguageTool
[grammar] ~1-~1: Hier könnte ein Fehler sein.
Context: --- title: Platform Engineering as a Service 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 ---
(QB_NEW_DE)
🤖 Prompt for AI Agents
In content/steps/operate.md around lines 1 to 8 there are two front-matter title
fields; remove the first longer title "Platform Engineering as a Service" so
only title: Operate remains (matching other steps), save the file, then run
`trunk fmt` to fix formatting/prettier notices.
| {{ 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
Verify step content exists with correct Type.
The filter changed from "services" to "steps", which means this shortcode now requires step content files (e.g., content/steps/audit.md, content/steps/innovate.md, content/steps/operate.md) with Type: steps in their frontmatter.
🏁 Script executed:
#!/bin/bash
# Verify step content exists with Type field
echo "=== Checking for step content files ==="
fd --type f --extension md content/steps 2>/dev/null | head -20 || echo "No steps directory found"
# Check that steps have Type: steps
echo -e "\n=== Checking Type field in steps ==="
fd --type f --extension md content/steps 2>/dev/null | xargs grep -l "^Type:" | head -5 || echo "No Type field found in steps"Length of output: 77
🏁 Script executed:
#!/bin/bash
# Check directory structure
echo "=== Directory listing: content/ ==="
ls -la content/ 2>/dev/null | head -20 || echo "content/ not found"
# Check if steps directory exists specifically
echo -e "\n=== Checking for steps directory ==="
[ -d content/steps ] && echo "content/steps exists" || echo "content/steps does NOT exist"
# Look for services content as reference
echo -e "\n=== Checking for services directory and content ==="
ls -la content/services 2>/dev/null | head -20 || echo "content/services not found"
# Search for any Type: field usage (broader search)
echo -e "\n=== Searching for Type: field in content ==="
rg "^Type:" content/ 2>/dev/null | head -10 || echo "No Type: field found"
# Check for recent changes or PR files
echo -e "\n=== Checking for any markdown files in content/ ==="
find content -name "*.md" -type f 2>/dev/null | head -20 || echo "No markdown files found"Length of output: 3035
🏁 Script executed:
#!/bin/bash
# Check actual files in steps directory
echo "=== Files in content/steps ==="
ls -la content/steps/ 2>/dev/null || echo "Could not list steps directory"
# Show content of step files if they exist
echo -e "\n=== Examining step files (first 50 lines each) ==="
find content/steps -type f 2>/dev/null | while read file; do
echo "--- $file ---"
head -50 "$file"
done
# Also check services frontmatter for comparison
echo -e "\n=== Examining services files for reference structure ==="
find content/services -type f -name "*.md" 2>/dev/null | head -1 | xargs head -50Length of output: 1949
Fix malformed YAML frontmatter in operate.md—duplicate title fields will cause parsing errors.
Step content does exist with the required structure (content/steps/audit.md, innovate.md, operate.md). However, content/steps/operate.md has a critical YAML syntax error: two consecutive title: fields in the frontmatter. YAML will only preserve the second one, but this malformed structure may cause unexpected rendering or validation failures. Remove the duplicate and keep only one title field.
---
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
content/steps/operate.md frontmatter (approx. lines 1-8): the YAML frontmatter
contains two consecutive "title:" fields which causes parsing errors; open
content/steps/operate.md, remove the duplicate title line so only a single
title: Operate remains, ensure the remaining frontmatter includes description,
weight, and icon exactly as shown, and save the file so the frontmatter is valid
YAML.
| <h3 class="serviceTitle homeServiceTitle"> | ||
| {{if .Params.home_title}} | ||
| {{.Params.home_title}} | ||
| {{else}} | ||
| {{.Title}} | ||
| {{end}} | ||
| </h3> | ||
| <div class="serviceDesc">{{.Description}}</div> | ||
| <div class="serviceDesc">{{.Params.home_description}}</div> |
There was a problem hiding this comment.
🧩 Analysis chain
Verify home_title and home_description parameters exist in all step content.
The template now expects .Params.home_title and .Params.home_description fields. Ensure these are present in all step content files; otherwise, the fallback to .Title and missing .home_description will cause rendering issues.
🏁 Script executed:
#!/bin/bash
# Verify required parameters in step content
echo "=== Checking step content for home_title and home_description ==="
fd --type f --extension md content/steps 2>/dev/null | while read file; do
echo "--- $file ---"
grep -E "^(home_title|home_description|title|Type):" "$file" | head -5
doneLength of output: 65
I need to explore the repository structure to understand where step content is located and how parameters are defined.
---
🏁 Script executed:
```shell
#!/bin/bash
# Explore repository structure
echo "=== Repository structure ==="
find . -type d -name content -o -name steps 2>/dev/null | head -20
echo ""
echo "=== Top-level directories ==="
ls -la | grep -E '^d' | head -20
echo ""
echo "=== Content directory structure ==="
find content -type f -name "*.md" 2>/dev/null | head -20
echo ""
echo "=== Check for services.html file ==="
find . -name "services.html" -type f 2>/dev/null
Length of output: 1909
---
🏁 Script executed:
```shell
#!/bin/bash
# Check what's actually in the steps directories
echo "=== Files in content/steps ==="
ls -la content/steps/ 2>/dev/null || echo "Directory empty or doesn't exist"
echo ""
echo "=== Files in layouts/steps ==="
ls -la layouts/steps/ 2>/dev/null || echo "Directory empty or doesn't exist"
echo ""
echo "=== Content of services.html ==="
cat layouts/shortcodes/services.html
echo ""
echo "=== Check git diff to see what changed ==="
git show HEAD:layouts/shortcodes/services.html 2>/dev/null | head -30
Length of output: 2059
---
🏁 Script executed:
```shell
#!/bin/bash
# Read all step files to check parameters
echo "=== audit.md ==="
cat content/steps/audit.md
echo ""
echo "=== innovate.md ==="
cat content/steps/innovate.md
echo ""
echo "=== operate.md ==="
cat content/steps/operate.md
Length of output: 675
Add home_title and home_description parameters to all step content files.
The template references .Params.home_title and .Params.home_description, but none of the step files (audit.md, innovate.md, operate.md) define these parameters. While home_title falls back to .Title, home_description has no fallback and will render as empty. Add both parameters to all step files:
home_title: <optional; defaults to title if omitted>
home_description: <required; no fallback exists>🤖 Prompt for AI Agents
In layouts/shortcodes/services.html around lines 10-17 the template uses
.Params.home_title and .Params.home_description but the step content files
(audit.md, innovate.md, operate.md) do not define them; add YAML front-matter
entries to each of those files: include home_description with a non-empty string
value, and optionally include home_title (or omit it to let the template fall
back to .Title); ensure the new keys are added at the top-level of each file's
front matter with proper YAML formatting and no empty values.
There was a problem hiding this comment.
Love it, very clean. My two cents on one aspect: "1+ Full time engineer of hours saved". I don't think I like that language, it feels awkward. Not sure what the alternative is or if this was already planned out language and we're past that part of the language review.
I tend to agree. Feel free to suggest some different language if you think of any. Maybe we change this to "160+ engineer hours / month saved" or something along those lines? |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
assets/css/custom.scss (1)
2700-2730: Services row centering is appropriate but formatting is slightly unconventional.The
justify-content: center;on line 2701 centers service columns in the "how it works" section, which is a sensible layout choice. However, the comment placement (same line with trailing space) is unconventional—consider moving to the line above for consistency..services-row { - justify-content: center; + justify-content: center; .col { padding-top: 1.38rem;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
assets/css/custom.scss(14 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 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
⏰ 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 (8)
assets/css/custom.scss (8)
115-161: Well-designed numbered list component with CSS counters.The
.numbered-listimplementation correctly uses CSS counters and provides responsive sizing. The gradient marker styling is consistent with the site's design system. No issues identified.
274-282: Verify text contrast on gradient button background.The
.btn-gradientuses a bright multi-color gradient with#033text. Please verify this meets WCAG AA contrast requirements for accessibility. If contrast is insufficient, consider a darker text color or semi-transparent overlay.
1059-1078: Banner link row styling looks solid.The
.rowLinkscomponent provides responsive button grouping with appropriate centering and stacking behavior. Mobile-first approach via flexbox is appropriate. No concerns identified.
1286-1314: Cloud architecture and logo styling adjustments are reasonable.Padding and margin updates appear to fine-tune spacing. The negative margin in the tablet media query (line 1297) may be intentional for visual balance but warrants confirmation that this doesn't cause unexpected side effects on adjacent elements.
Confirm the
margin: 0 -1rem;at line 1297 is intentional and doesn't create unintended layout shifts on wider tablets (768–990px).
1322-1410: Service row decorative lines need viewport overflow verification.The
.serviceIcon:beforepseudo-elements use125vwwidth to create gradient dividers (lines 1333, 1373). While usingz-index: -1hides overflow, this may cause horizontal scrolling on narrow viewports. Consider constraining withoverflow: hiddenon the parent or using100%width with proper positioning.Test that the 125vw decorative lines don't trigger horizontal scrollbars on mobile (< 575px) and tablet (576–767px) viewports.
1593-1644: Audit home tile requires mobile verification and positioning clarity.The
.audit-home-tileuses absolute positioning for the button (lines 1631–1643) with a margin-bottom: -26px to float it beyond the tile. On mobile (max-width: 575px), the text-align: center and width: 280px constraints may conflict with the transform and centering logic. Verify that the button positioning works correctly on all mobile viewports and doesn't overflow the container.Test the
.audit-home-btnpositioning on mobile devices (320px–575px viewports) to ensure it renders correctly and doesn't overflow the tile or create unexpected spacing.
1645-1720: Platform row/tile components need viewport overflow verification.The
.platform-row:beforepseudo-element uses100vwwidth (line 1650) to create a full-viewport decorative line. Like earlier decorative lines (serviceIcon, etc.), this may cause horizontal scrolling on constrained viewports. Additionally, verify that the three gradient variations for.platform-tile,.platform-tile-2, and.platform-tile-3(lines 1671–1693) are intentional and visually distinct.
- Test that the 100vw decorative line doesn't trigger horizontal scrollbars on mobile and tablet.
- Confirm the three gradient tile variations are visually distinct and appropriate for their content.
1759-1782: Make infrastructure section responsive adjustments needed.The
#make-infrastructuresection (lines 1759–1782) uses a.bg-imagewithwidth: 49.6%on desktop. On mobile (line 1775), it switches towidth: 100%; height: 50vw;. Verify that the 50vw height doesn't create unexpected spacing on very short mobile devices or landscape orientations.Confirm that the 50vw height on mobile (
max-width: 767px) doesn't cause layout issues on landscape-oriented phones or very tall narrow screens (e.g., aspect ratios > 1:1).
what
why
references
Summary by CodeRabbit
New Features
Style
Documentation