fix(home): isSvg handles URLs with query strings and fragments

[PierreBrisorgueil]

Summary

• Fix isSvg() in home.img.component.vue to strip ?query and #fragment before the .endsWith('.svg') extension check.
• Cache-busted URLs like /images/foo.svg?v=2 are now inlined via v-html (the documented /svg-generator behaviour), so SVGs referencing Vuetify theme CSS vars (rgb(var(--v-theme-surface))) resolve correctly in both light and dark mode.
• Adds 8 unit tests covering .svg, .svg?v=2, .svg?v=2&t=3, .svg#frag, .svg?v=2#frag, absolute URLs with query, .png, and .png?v=2.

Root cause

'foo.svg?v=3'.endsWith('.svg') is false, so the inline branch was skipped and the file fell through to <v-img> — rendering the SVG as a raster-like <img> where internal CSS custom property references never resolve. The result: SVGs that depend on rgb(var(--v-theme-...)) showed solid black in light mode. Hit while polishing the trawl.me landing page (trawl-dev-pipeline.svg, trawl-business-alert.svg).

This was fixed once in #471 but lost during the stack update in #474.

Fix

isSvg() {
  if (!this.img) return false;
  const pathOnly = this.img.split('?')[0].split('#')[0].toLowerCase();
  return pathOnly.endsWith('.svg') && LOCAL_URL_RE.test(this.img);
},

3-line change, no behaviour change for URLs without a query string.

Downstream

comes-io/trawl_vue PR #475 carries an identical hotfix on the feat/landing-polish-v4 branch. Once this devkit PR merges, the downstream copy can be reverted and picked up from the next stack update.

Test plan

• npm run lint
• npm run test:coverage — 941/941 passing, coverage thresholds intact
• npm run build

Fixes #3949

Summary by CodeRabbit

• Bug Fixes

  • Improved SVG detection: local SVGs with query strings or fragments are correctly inlined; absolute SVG URLs and non‑SVG images are not treated as inline SVGs. Falsy/empty image values are handled safely.

• Tests

  • Added tests covering SVG detection across local vs absolute URLs, query parameters, fragments, and non‑SVG cases.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 8732761a-7b93-4a14-8e70-1b9ea795207f

📥 Commits

Reviewing files that changed from the base of the PR and between 8750fbd and 7aa6f8f.

📒 Files selected for processing (1)

• src/modules/home/tests/home.img.component.unit.tests.js

---

Walkthrough

The isSvg() method in the home image component is updated to detect local SVGs when URLs include query strings or fragments by stripping them before the .svg suffix check; local URL validation is preserved. Unit tests were added to cover these URL patterns.

Changes

Cohort / File(s)	Summary
SVG URL detection logic src/modules/home/components/utils/home.img.component.vue	Updated isSvg() to return false for falsy img, strip query strings/fragments before checking the .svg extension, and still validate locality against the original img.
Unit tests src/modules/home/tests/home.img.component.unit.tests.js	Added isSvg URL detection test suite with cases for local .svg URLs (with/without query strings and fragments), absolute .svg URLs, and non-SVG local paths.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• fix(home): use homeImgComponent for about section SVGs #3930 — Related changes affecting SVG inlining behavior and integration with the home image component.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely summarizes the main fix: isSvg() now handles URLs with query strings and fragments.
Description check	✅ Passed	The PR description is comprehensive and covers all required sections including summary, root cause, fix, downstream impact, and test validation.
Linked Issues check	✅ Passed	The PR fully addresses issue #3949 by implementing the exact fix specified: stripping query/fragment from URLs before checking .svg extension.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the isSvg() logic for cache-busted URLs and adding comprehensive test coverage, with no unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/home-img-issvg-cache-buster

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.46%. Comparing base (a5f38e7) to head (7aa6f8f).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #3950   +/-   ##
=======================================
  Coverage   99.46%   99.46%           
=======================================
  Files          29       29           
  Lines         940      940           
  Branches      252      252           
=======================================
  Hits          935      935           
  Misses          5        5           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull request overview

This PR fixes HomeImgComponent’s isSvg() detection so local SVG URLs with ?query strings and/or #fragments are still treated as SVGs and rendered inline (via v-html), preserving Vuetify theme CSS variable resolution.

Changes:

• Update isSvg() to strip query string + fragment before checking for the .svg extension.
• Add unit tests covering local SVG URLs with query/fragment variations and ensuring non-SVG / absolute URLs are not inlined.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/modules/home/components/utils/home.img.component.vue	Adjusts SVG detection logic to ignore ?/# when determining file extension.
src/modules/home/tests/home.img.component.unit.tests.js	Adds test coverage for the updated SVG URL detection behavior.