Skip to content

feat: add We Like Tools footer badge - #86

Merged
andrewzolotukhin merged 1 commit into
mainfrom
feat/welike-tools-footer-badge
Jul 29, 2026
Merged

feat: add We Like Tools footer badge#86
andrewzolotukhin merged 1 commit into
mainfrom
feat/welike-tools-footer-badge

Conversation

@andrewzolotukhin

@andrewzolotukhin andrewzolotukhin commented Jul 29, 2026

Copy link
Copy Markdown
Contributor

Summary

Add the We Like Tools listing badge to the public landing-page footer, using the directory's hosted light and dark assets and the existing theme-aware badge pattern.

Original request

Add a new We Like Tools badge using the PR workflow, using the supplied light and dark variants, without publishing a blog post.

What changed

  • Added a footer badge linking to https://weliketools.com/tool/xpenser-cleverbrush.
  • Rendered badge.png in light mode and badge-dark.png in dark mode at the supplied 54px height with lazy loading.
  • Preserved accessible naming, keyboard focus styling, safe new-tab link attributes, and the existing responsive footer layout.
  • Added component and Playwright coverage for the link, image attributes, and theme switching.

Reasoning

This follows the established hosted-badge implementation already used by similar directory badges in landing-page.tsx. Keeping the vendor assets remote preserves the supplied snippet, while the existing light/dark utility classes make the correct variant visible without additional client-side state. No width was invented because the supplied badge snippet specifies only height.

Blog post

Skipped: this is a small presentation-only footer addition, and the original request explicitly asks for no blog post.

Screenshots / Preview

Preview: https://xpenser-pr-086.cleverbrush.com

Light theme asset Dark theme asset
We Like Tools light badge We Like Tools dark badge

Manual preview QA at 1440×1000 confirmed:

  • The badge fits the existing responsive footer badge grid without overflow or overlap.
  • Light mode shows only badge.png; dark mode shows only badge-dark.png.
  • Both variants render at the supplied 54px height and lazy-load after the footer enters view.
  • The accessible link targets https://weliketools.com/tool/xpenser-cleverbrush with _blank and noopener noreferrer.
  • Browser runtime reported no page or console errors.

Validation

  • npm run lint — 359 files checked
  • npm run typecheck — 11 tasks passed
  • npm test — 95 files and 520 tests passed
  • Focused apps/web/components/landing-page.test.tsx — 1 test passed
  • Lint and test GitHub check
  • Deploy PR environment GitHub check
  • Playwright e2e GitHub check
  • Preview QA in light and dark themes
  • SigNoz checked for service.name = xpenser-web-pr-86 across logs, traces, and http.server.duration.count; no matching resources were available in the preview QA window, so telemetry is explicitly recorded as unavailable rather than reported as a pass.
  • PR-ready notification sent through the configured notifier.

Checklist

  • I kept the change focused.
  • I updated docs or tests where needed.
  • I checked for secrets, local env files, and generated build output.
  • API changes keep contracts, endpoint metadata, and handlers aligned (not applicable; no API changes).

@andrewzolotukhin
andrewzolotukhin temporarily deployed to pr-86 July 29, 2026 06:48 — with GitHub Actions Inactive
@andrewzolotukhin
andrewzolotukhin merged commit 765696b into main Jul 29, 2026
4 checks passed
@andrewzolotukhin
andrewzolotukhin deleted the feat/welike-tools-footer-badge branch July 29, 2026 06:57
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.

1 participant