[darkmastermindz]

Summary

On iPhone Safari, tapping the Mastodon pill (https://hansel.run/mastodon) left a blank tab behind. Here's why:

• The pill opened the link in a new tab.
• hansel.run redirected to the Mastodon profile, and iOS handed that link to the Mastodon app.
• The new tab was left empty.

The same happens with any link whose site has an app (Instagram, Messenger, LinkedIn, Strava, GitHub), and on Android too.

Links still open in a new tab. On phones and tablets, that tab first loads a small hanselwei.dev hand-off page, /out/<id>, which goes straight on to the link:

• If the link loads in the browser, nothing changes.
• If the phone hands it to an app, the tab stays on the hand-off page. Once you come back from the app, the tab closes itself, so no blank tab is left.
• Desktops open the links directly, as before.

This replaces this PR's first version, which opened the links in the same tab.

Related Issue

None. The user reported it directly.

Changes Made

• New utils/outbound.js with the social link addresses by id (github, mastodon, instagram, instagram-codes...), plus outboundFor(id) (Object.hasOwn) and outPath(id).
• New pages/out/[id].vue, the hand-off page. It shows "Opening Mastodon…" with a link back to the site, and sends the tab on to the link.
  • App takes over: if the page is hidden and then shown again while still on it, it calls window.close(). Where it can't close the tab, it goes back (or to the home page).
  • Back from the profile: it doesn't bounce into the link again. A history.state marker and the bfcache pageshow handle this.
  • Unknown id: the tab closes, or goes back.
  • It's noindex, and /out is disallowed in robots.txt.
  • Its tab title is Opening… · Hansel Wei, matching the site's title format from Tab titles end with "Hansel Wei" #239.
• nuxt.config.js prerenders one /out/<id> page per id. I used the path rather than ?to= because Nuxt briefly drops the query string while starting up.
• utils/mobileDevice.js:
  • isAppleMobile counts iPhone, iPad, iPod, and iPadOS in desktop mode.
  • handsOffToApps counts those plus Android.
• components/SocialFlipLink.vue: once the page has loaded on a phone or tablet, the pill and the Instagram menu links point at /out/<id>. The prerendered HTML (what crawlers see) keeps the real addresses.
• components/Socials.vue takes its addresses from utils/outbound.js.
• Tests:
  • tests/app/mobile-device.test.mjs: which devices count.
  • tests/security/outbound.test.mjs, with an OUTBOUND_IDS payload list: only known ids lead anywhere. URLs, javascript:, path tricks, prototype keys and XSS all give nothing, and every address is https.
• README.md: the social links paragraph.
• The Nuxt 4 fix that was ported here from Fix main on Nuxt 4: CSS minify error and CSP-blocked import map #241 is now on main, so it no longer shows in this diff.
• Ported from Accessibility: readable count on the selected Projects chip #249 (pages/projects.vue): the selected Projects chip's count is readable on the purple (#e9d5ff, 6.2:1).
  • Android touch shards 1/4 and 3/4 failed on this rule, which comes from main's a11y spec (Accessibility: fix every axe (WCAG 2.1 AA) issue, plus an a11y regression test #243), not from this PR.
  • It no-ops once Accessibility: readable count on the selected Projects chip #249 merges.

Testing

• Rebased onto current main (f0f9324, after Accessibility: fix every axe (WCAG 2.1 AA) issue, plus an a11y regression test #243, Safari and iPhone Duo fixes for the foldable layouts #246 and Celebrate iPhone Duo: a laptop lid with the site's QR, and Fold Pong #247), with the commits signed.
  • The one conflict was in nuxt.config.js: main's foldable head-script import and this PR's OUTBOUND import. Both are kept.
  • npm test: 259 pass, including with the Accessibility: readable count on the selected Projects chip #249 port. npm run generate: OK.
  • Playwright on Pixel 7, Galaxy Tab S9 landscape, Galaxy Z Fold 7 and iPhone Duo landscape (Android touch, a11y and foldable specs): 113 passed, 0 failed. That includes the a11y check of the open Instagram menu.
• Earlier, on Nuxt 4: Android touch tests from Playwright: touch scrolling tests on every Android device (100 profiles) #238: 37 passed, 5 skipped, 0 failed on Galaxy S9+ and Pixel 7. This PR's CI runs all devices.
• Playwright (Chromium), with external links stubbed. Results after tapping Mastodon:

Device	Pill href	Link loads normally	App takes over (simulated: navigation cancelled, tab hidden then shown)	Back from the profile
Desktop	https://hansel.run/mastodon	new tab at hansel.run	n/a	n/a
Pixel 7	/out/mastodon	new tab ends at hansel.run	tab showed "Opening Mastodon…", then closed	lands back on the site
iPhone 14	/out/mastodon	new tab ends at hansel.run	tab showed "Opening Mastodon…", then closed	lands back on the site

On phones, the Instagram menu links are /out/instagram and /out/instagram-codes.

Additional Information

• The real hand-off from iOS or Android to an app can't be tested here, and the sandbox can't reach hansel.run. Please tap Mastodon on an iPhone with the deploy preview.

🤖 Generated with Claude Code

https://claude.ai/code/session_01Nginuw5wmUjUSkmQB1J3pS

[darkmastermindz]

@claude rebase

[darkmastermindz]

Android touch (1/4) and (3/4) failed on ad43e66. The cause isn't this PR.

• The only failure is the a11y spec on /projects: .is-on > .chip__count is #aaa on #653496, 3.63:1.
• That spec and that chip come from main (Accessibility: fix every axe (WCAG 2.1 AA) issue, plus an a11y regression test #243). It only shows in CI, where /projects has real repos.
• The fix is Accessibility: readable count on the selected Projects chip #249. I've cherry-picked it here (eb52762), and it no-ops once Accessibility: readable count on the selected Projects chip #249 merges. CI is re-running on the new head.

---

Generated by Claude Code