feat(404): adds a 404 page, adds imagery to thank-you pages, updates client logos, fixes some styling - #71
Conversation
✅ Deploy Preview for masterpoint ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
## Walkthrough
This update introduces a new 404 error page layout and associated styling, adds several new client logo metadata files, and refines how client logos are displayed using a new shortcode. Several logo entries are updated to include links or change their visibility. The Netlify configuration is updated to route all unmatched requests to the new 404 page.
## Changes
| File(s) | Summary |
|------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------|
| layouts/404.html | Added a new custom 404 error page layout with image, message, and latest news section. |
| assets/css/custom.scss | Updated selectors for 404 page styling, added `.masterpoint-dog-img` class, and made formatting tweaks. |
| layouts/thank-you/single.html | Added dog image, switched container to `<main>`, and included "schedule-assessment.html" partial. |
| layouts/partials/latest-news.html | Changed intro text, now shows latest blog (not update), updated link to blog. |
| layouts/partials/clientLogos.html | Removed the clientLogos partial layout file. |
| layouts/shortcodes/clientlogos.html | Deleted old clientlogos shortcode file. |
| layouts/shortcodes/client-logos.html | Added new shortcode template for displaying client logo carousel with link and visibility support. |
| content/sections/home-join-clients.md | Cleaned up front matter, updated text, and changed shortcode from `clientlogos` to `client-logos`. |
| content/logos/asmeds.md<br>content/logos/formation-bio.md | Added new logo metadata files for ASMeds and Formation Bio. |
| content/logos/duos.md<br>content/logos/power-digital.md<br>content/logos/strategus.md<br>content/logos/stuzo.md<br>content/logos/thinaer.md<br>content/logos/watermark.md<br>content/logos/we_the_collective.md | Added or updated `link` fields and title capitalization in several logo metadata files. |
| content/logos/allma.md<br>content/logos/rs_regattasport.md | Changed visibility flags from true to false for Allma and RS Regattasport logos. |
| netlify.toml | Added redirect to serve custom 404 page for all unmatched routes. |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant User
participant Browser
participant Netlify
participant Site
User->>Browser: Request unknown page
Browser->>Netlify: GET /unknown-page
Netlify-->>Browser: Redirect to /404.html (status 404)
Browser->>Site: Load /404.html
Site->>Browser: Render custom 404 layout with dog image, message, and latest blogsequenceDiagram
participant Page
participant Shortcode (client-logos.html)
participant Data (logos)
Page->>Shortcode: Invoke {{<client-logos>}}
Shortcode->>Data: Query logos (type: logos, sorted by weight)
Shortcode->>Shortcode: For each logo: if visible==true
alt link present
Shortcode->>Page: Render logo image wrapped in anchor tag
else no link
Shortcode->>Page: Render logo image only
end
Shortcode->>Page: Output carousel HTML
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Suggested reviewers
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (7)
content/logos/we_the_collective.md (1)
2-4: Quote the URL to avoid edge-case YAML parsing issuesUnquoted URLs normally work, but a colon can trip up some YAML parsers when followed by certain characters. Quoting is the safest cross-tool option.
- link: https://www.wethecollective.com/ + link: "https://www.wethecollective.com/"content/logos/thinaer.md (1)
4-4: Wrap the URL in quotes for YAML robustnessSame rationale as above—quoting future-proofs the front-matter.
- link: https://thinaer.io/ + link: "https://thinaer.io/"content/logos/duos.md (1)
4-4: Quote the newly added URL- link: https://www.getduos.com/ + link: "https://www.getduos.com/"content/logos/stuzo.md (1)
4-4: Quote the URL for consistency & YAML safety- link: https://www.parretail.com/ + link: "https://www.parretail.com/"layouts/thank-you/single.html (2)
12-15: Move inline styling into SCSSInline
style="max-width: 400px"breaks the site’s separation of concerns and makes future theming harder.- class="img-fluid masterpoint-dog-img" - style="max-width: 400px" /> + class="img-fluid masterpoint-dog-img" />and add to
assets/css/custom.scss(class already exists):.masterpoint-dog-img { max-width: 400px; /* was inline */ }
25-30: Keep related content inside the<main>landmark
schedule-assessment.htmlsits outside<main>, which can confuse assistive technologies. Consider moving the include inside the<main>element to keep all primary content grouped.-</main> -{{ partial "schedule-assessment.html" . }} + + {{ partial "schedule-assessment.html" . }} +</main>layouts/404.html (1)
10-17: Consider moving inline styles to CSS classes.The inline
style="max-width: 400px"should be moved to the CSS class for better maintainability and consistency with existing styling patterns.- <img - src="/img/404-dog.png" - alt="404 Error - Page Not Found" - class="img-fluid masterpoint-dog-img" - style="max-width: 400px" - /> + <img + src="/img/404-dog.png" + alt="404 Error - Page Not Found" + class="img-fluid masterpoint-dog-img" + />Then add the max-width to the
.masterpoint-dog-imgclass in your CSS file.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
static/img/404-dog.pngis excluded by!**/*.pngstatic/img/logos/formation-bio-logo.pngis excluded by!**/*.pngstatic/img/thank-you-dog.pngis excluded by!**/*.png
📒 Files selected for processing (20)
assets/css/custom.scss(5 hunks)content/logos/allma.md(1 hunks)content/logos/asmeds.md(1 hunks)content/logos/duos.md(1 hunks)content/logos/formation-bio.md(1 hunks)content/logos/power-digital.md(1 hunks)content/logos/rs_regattasport.md(1 hunks)content/logos/strategus.md(1 hunks)content/logos/stuzo.md(1 hunks)content/logos/thinaer.md(1 hunks)content/logos/watermark.md(1 hunks)content/logos/we_the_collective.md(1 hunks)content/sections/home-join-clients.md(1 hunks)layouts/404.html(1 hunks)layouts/partials/clientLogos.html(0 hunks)layouts/partials/latest-news.html(1 hunks)layouts/shortcodes/client-logos.html(1 hunks)layouts/shortcodes/clientlogos.html(0 hunks)layouts/thank-you/single.html(2 hunks)netlify.toml(1 hunks)
💤 Files with no reviewable changes (2)
- layouts/partials/clientLogos.html
- layouts/shortcodes/clientlogos.html
🧰 Additional context used
🪛 GitHub Check: Trunk Check
content/logos/asmeds.md
[failure] 1-1: prettier
Incorrect formatting, autoformat by running 'trunk fmt'
content/logos/formation-bio.md
[failure] 1-1: prettier
Incorrect formatting, autoformat by running 'trunk fmt'
⏰ 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 (23)
content/logos/strategus.md (1)
4-4: LGTM: URL link addition enhances logo functionality.This change adds a clickable link field that integrates well with the new
client-logosshortcode, improving the user experience by allowing visitors to navigate directly to the client's website.assets/css/custom.scss (4)
2775-2778: LGTM: Well-structured CSS class for the dog image.The new
.masterpoint-dog-imgclass provides appropriate styling with margin and border-radius. The naming convention is clear and the values are reasonable for image presentation.
2844-2878: LGTM: Improved list styling with proper formatting.The ordered list styling has been cleaned up with proper spacing and alignment. The custom counter implementation with gradient background is visually appealing and maintains consistency with the site's design system.
2880-2910: LGTM: Consistent unordered list styling with proper spacing.The unordered list implementation uses Font Awesome icons with gradient backgrounds, maintaining visual consistency with the ordered lists. The spacing and alignment are well-structured.
2529-2529: Double-check all pages using the #003333 (rgb(0, 51, 51)) backgroundI found these blocks in assets/css/custom.scss:
• The combined selector you updated:
#thank-you, #page-404 { background: rgb(0, 51, 51); /* … */ }• A separate signup block with the same background but custom padding:
#signup { padding: 0; background: rgb(0, 51, 51); }If the goal is to unify this styling across all “dark-teal” pages, consider merging
#signupinto your combined selector (and adjust its padding as needed). Otherwise, confirm that the signup page should remain separate due to its unique layout.• assets/css/custom.scss – lines around
#thank-you, #page-404
• assets/css/custom.scss – lines around#signupcontent/logos/watermark.md (1)
4-4: LGTM: Valid URL link addition for client navigation.The addition of the link field with the Watermark Insights URL follows the same pattern as other logo files and integrates properly with the new client-logos shortcode functionality.
content/logos/power-digital.md (1)
4-4: LGTM: Consistent URL link addition for client website.The link field addition follows the established pattern and provides a proper URL for the Power Digital Marketing website, enhancing the client logo carousel functionality.
content/logos/allma.md (1)
5-5: LGTM: Logo visibility toggle implemented correctly.The visibility change from
truetofalsewill properly hide the Allma logo from the client carousel display, which aligns with the newclient-logosshortcode that filters by thevisibleparameter.content/logos/rs_regattasport.md (1)
5-5: Visibility flag change looks goodSetting
visible: falsecleanly removes this logo from the new carousel without impacting anything else.content/logos/formation-bio.md (1)
1-7: Runtrunk fmt/ Prettier to quiet CI noiseStatic-analysis flagged formatting.
Usually this is just a missing trailing newline or inconsistent front-matter spacing. A quicktrunk fmt(orprettier --write) on the file will silence the warning without touching the actual content.content/logos/asmeds.md (1)
1-7: Fix Prettier violation the same way as aboveSame formatting finding as in
formation-bio.md. Run the formatter so the check pipeline passes.netlify.toml (1)
41-44: Confirm redirect precedencePlacing the catch-all rule after specific rules is correct, but Netlify stops at the first match. If more path-specific redirects are added later, ensure they are inserted above this block; otherwise they will never fire.
No code changes needed—just a heads-up for future edits.
content/sections/home-join-clients.md (1)
17-17: Double-check shortcode rename propagationThe call was updated to
{{<client-logos>}}, matching the new shortcode file. Make sure no residual{{<clientlogos>}}invocations remain elsewhere; otherwise Hugo will error at build.No action required if the global search comes back clean.
layouts/partials/latest-news.html (3)
6-7: LGTM! Clear content structure improvement.The split into two separate paragraphs improves readability and creates a better flow from general context to specific content introduction.
10-10: LGTM! Content type alignment with site structure.The change from "updates" to "blog" type aligns with the updated navigation link and creates consistency across the site content structure.
15-15: LGTM! Navigation consistency maintained.The link update properly corresponds to the content type change, maintaining navigation consistency throughout the site.
layouts/404.html (3)
1-3: LGTM! Proper HTML structure and semantic body ID.The layout follows Hugo templating best practices with proper partials inclusion and a semantic body ID for styling purposes.
28-28: LGTM! Good integration of latest news partial.The integration of the
latest-news.htmlpartial within the main content area provides helpful content for users who encounter the 404 page.
12-12: 404-dog.png Verified
The imagestatic/img/404-dog.pngexists in the static assets directory, so the reference inlayouts/404.htmlis correct. No further action needed.layouts/shortcodes/client-logos.html (4)
1-2: LGTM! Proper carousel structure.The HTML structure correctly implements the Owl Carousel pattern that matches the JavaScript initialization in
assets/js/plugins.js(lines 200-216).
3-4: LGTM! Efficient content filtering and visibility control.The Hugo templating logic efficiently filters logos by type and weight, with proper visibility checking to control which logos are displayed.
7-13: LGTM! Proper conditional link handling with security attributes.The conditional logic properly handles both linked and non-linked logos, and the security attributes (
target="_blank"withrel="noopener noreferrer") follow best practices for external links.
9-12: All logo front-matter parameters are present; alt text is consistent.Verified that every Markdown file in
content/logos/includes both animageandtitleparameter. The template’salt="{{ .Title }} Logo"will therefore render correctly for all existing logos. No changes required.
oycyc
left a comment
oycyc
left a comment
There was a problem hiding this comment.
Looks good to me. Assuming you're going to need to do an bypass merge since the trunk checks and the commit message saying that it breaks things?
2 participants
what
why
references
Summary by CodeRabbit
New Features
Enhancements
Bug Fixes
Chores