feat: add feature integrations

[PavelKopecky]

Closes #70

As some integrations do not have a logo, a placeholder was created.

[coderabbitai]

Walkthrough

Adds a new CSS utility class .prevent-select in common.less. Updates tiles.less with styling for image placeholders and anchor-like header link states. Changes tiles.html to conditionally render either an <img> or a placeholder span when imgName is absent, and to render the tile header as an <a> when docsLink is provided. Updates integrations.html to insert a new "Globalping as a Feature" section, introduces a featureTiles data array with four feature entries, and renders it via the <c-tiles tilesData="{{featureTiles}}"></c-tiles> component.

Possibly related PRs

• PR #62: Also modifies the integrations page and tile data to add new integration tiles, sharing code-level edits to src/views/pages/integrations.html and the tiles component.

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change—adding feature integrations section to the site as requested.
Description check	✅ Passed	The description appropriately references the linked issue and mentions the placeholder creation for integrations without logos.
Linked Issues check	✅ Passed	The PR implements all requirements from #70: new 'Globalping as a feature' section with matching style, four specified integrations with correct links and descriptions, and placeholder support for missing logos.
Out of Scope Changes check	✅ Passed	All changes are scoped to adding the feature integrations section. CSS additions for placeholders and link behavior, HTML templates for conditional rendering, and the new feature tiles data align with #70 requirements.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch gh-70

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4e4d8f1 and 51fdca8.

📒 Files selected for processing (1)

• src/assets/less/common.less

🚧 Files skipped from review as they are similar to previous changes (1)

• src/assets/less/common.less

🧰 Additional context used

🔍 Remote MCP DeepWiki

Relevant facts for reviewing this PR

• c-tiles supports an item boolean externalLink that opens tile href with target="_blank" rel="noopener noreferrer"; no docsLink property was documented originally in c-tiles docs (,).
• Render/SSR and hydration flow: server injects @shared.assetsHost and assetsVersion; pages get hydrated from #ractive-data / #ractive-shared — confirm new integrationstilesData uses versioned assets/paths consistent with render middleware ().
• Tiles/tiles.less and common.less define visual patterns for image placeholders and anchor-like header behavior; ensure your CSS changes align with existing tile layout and responsive rules ().
• c-tiles defaultLinkText and default image dim defaults exist (defaultLinkText "Learn more", defaultImgW/H 48) — new tiles should rely on these defaults or explicitly set them ().

Files/tools I checked: DeepWiki repository docs and component pages (,,).

⏰ 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). (2)

• GitHub Check: Run e2e tests
• GitHub Check: Run e2e tests

---

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/views/components/tiles.html (1)

14-16: Add accessible label for placeholder.

The placeholder span displays only the first character of the header, which lacks context for screen reader users. Add an aria-label to improve accessibility.

🔎 Proposed fix

-				<span class="c-tiles_tile_img_placeholder prevent-select">
+				<span class="c-tiles_tile_img_placeholder prevent-select" aria-label="{{header}} logo placeholder">
 					{{header[0]}}
 				</span>

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dca0526 and 4e4d8f1.

⛔ Files ignored due to path filters (2)

• src/assets/img/integrations/feature/craftcms-cache-igniter.svg is excluded by !**/*.svg
• src/assets/img/integrations/feature/upptime.svg is excluded by !**/*.svg

📒 Files selected for processing (4)

• src/assets/less/common.less
• src/assets/less/components/tiles.less
• src/views/components/tiles.html
• src/views/pages/integrations.html

🧰 Additional context used

🔍 Remote MCP DeepWiki

Summary of Relevant Context for PR Review

Based on the DeepWiki documentation, here are the key facts relevant to reviewing this PR:

Tiles Component Structure & Properties

The c-tiles component iterates over a tilesData array to render individual tiles with properties including header, description, href, image details (baseImgSrc, imgName, imgExt), and optional docsLink support. The c-tiles component defines default values for defaultLinkText ("Learn more"), defaultImgW (48), defaultImgH (48), and supports an externalLink boolean that, if true, sets target="_blank" rel="noopener noreferrer" on links.

The PR's addition of a docsLink property aligns with the component's design for supporting multiple links per tile.

Integration Page Structure

The integrations page is organized into two main sections: "Globalping Integrations" (rendered using c-tiles with gpTiles data) and "Community Integrations" (using c-tiles-community with communityTiles data). The PR correctly inserts a new "Globalping as a Feature" section using c-tiles, maintaining consistency with existing patterns.

Image & Placeholder Handling

Images in tiles components have explicit dimensions with width and height attributes to prevent layout shifts, support retina displays via srcset when has2x is true, and use lazy loading. The PR's new CSS styling for the placeholder appearance (18px font-size, circular appearance with border and shadow) appropriately handles the case when imgName is absent, as supported by the conditional rendering logic.

CSS Styling Patterns

Images within tiles use rounded style with width: 48px, height: 48px, and border-radius: 48px. The new .prevent-select CSS class addition follows standard vendor-prefixed patterns for cross-browser compatibility, consistent with the site's approach to CSS enhancements.

Link Behavior Enhancement

When the c-tiles component header is rendered as an anchor (supporting docsLink), it should include appropriate link styling with hover/focus states. The PR's CSS modifications for anchor-like header behavior are well-aligned with this pattern.

⏰ 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). (1)

• GitHub Check: Run e2e tests

🔇 Additional comments (2)

src/assets/less/components/tiles.less (1)

49-54: Verify browser support for :has() selector.

The :has() pseudo-class is used for placeholder styling. While widely supported in modern browsers since late 2023, verify that your target audience doesn't include older browser versions that lack support (pre-2023 Safari, Chrome <105, Firefox <121).

src/views/pages/integrations.html (1)

237-278: Confirm intentional design for missing logos on UptimeFlare and Doggo DNS entries.

All URLs are accessible (all returned 200 responses). However, UptimeFlare and Doggo DNS lack imgName and baseImgSrc fields, meaning they'll display single-letter placeholders ("U" and "D") while Upptime and CraftCMS Cache Igniter have dedicated SVG logos. Confirm whether this inconsistency is intentional.