Preserve Pages redirect query/hash and welcome UTM visitors (#292)

Co-Authored-By: Taromati2 <taromati2@outlook.com>

Author: steve02081504

.github/pages/index.html

@@ -21,7 +21,9 @@
 	<link rel="stylesheet" href="./base.css" type="text/css" />
 	<script type="module">
 		// load 后再跳，给跨文档 VT 留下 old snapshot（未就绪瞬跳容易被 skip）
-		(f => document.readyState === 'complete' ? f() : window.addEventListener('load', f))(() => { location.href = './wait/install/' })
+		(f => document.readyState === 'complete' ? f() : window.addEventListener('load', f))(() => {
+			location.href = './wait/install/' + location.search + location.hash
+		})
 	</script>
 </head>
 

.github/pages/test/frontend/smoke.spec.mjs

@@ -9,6 +9,11 @@ test.describe('GitHub Pages smoke', () => {
 		await expect(page.locator('.hero-content.visible-after-intro')).toBeVisible({ timeout: 30_000 })
 	})
 
+	test('root redirect keeps search and hash', async ({ page, baseUrl }) => {
+		await page.goto(`${baseUrl}/?utm_source=linux.sb&rid=smoke1#welcome`, { waitUntil: 'domcontentloaded' })
+		await expect(page).toHaveURL(/\/wait\/install\/\?utm_source=linux\.sb&rid=smoke1#welcome$/, { timeout: 30_000 })
+	})
+
 	test('install wait screen loads base + test watch', async ({ page, baseUrl }) => {
 		await page.goto(`${baseUrl}/wait/install/`, { waitUntil: 'domcontentloaded' })
 		await expect(page.locator('#launchButton')).toBeVisible({ timeout: 30_000 })
@@ -19,6 +24,25 @@ test.describe('GitHub Pages smoke', () => {
 		await expect(page.locator('h1').first()).toBeAttached()
 	})
 
+	test('utm_source shows welcome dialog after hero intro', async ({ page, baseUrl }) => {
+		const dialog = page.locator('#utm-welcome-dialog')
+		const openWelcome = async () => {
+			await page.goto(`${baseUrl}/wait/install/?utm_source=linux.sb`, { waitUntil: 'domcontentloaded' })
+			await expect(page.locator('.hero-content.visible-after-intro')).toBeVisible({ timeout: 30_000 })
+			await expect(dialog).toBeVisible({ timeout: 5_000 })
+			await expect(page.locator('#utm-welcome-message')).toContainText('linux.sb')
+		}
+
+		await openWelcome()
+		await dialog.locator('.modal-action button').click()
+		await expect(dialog).toBeHidden()
+
+		await openWelcome()
+		// DaisyUI 的 backdrop button 铺满全屏，中心被 modal-box 挡住；点角落才是真实关闭路径
+		await dialog.locator('.modal-backdrop').click({ position: { x: 8, y: 8 } })
+		await expect(dialog).toBeHidden()
+	})
+
 	test('protocol shows offline dialog; badges render', async ({ page, baseUrl }) => {
 		await page.goto(`${baseUrl}/protocol/`, { waitUntil: 'domcontentloaded' })
 		await expect(page.locator('#offline_dialog')).toBeVisible({ timeout: 30_000 })

.github/pages/wait/install/index.css

@@ -260,3 +260,39 @@ body.scroll-lock {
 .shaking {
 	animation: shake 0.5s ease-in-out infinite;
 }
+
+/* UTM welcome：入场 + 来源标签（i18n 插入的 code，原子类够不着） */
+.utm-welcome-box {
+	background-image: radial-gradient(120% 80% at 50% -10%, color-mix(in oklab, var(--color-primary) 16%, transparent), transparent 55%);
+}
+
+#utm-welcome-dialog[open] .utm-welcome-box {
+	animation: utm-welcome-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes utm-welcome-in {
+	from {
+		opacity: 0;
+		transform: translateY(1rem) scale(0.96);
+	}
+
+	to {
+		opacity: 1;
+		transform: none;
+	}
+}
+
+.utm-welcome-message code {
+	display: inline-block;
+	padding: 0.1em 0.45em;
+	border-radius: 0.4em;
+	font-weight: 600;
+	color: var(--color-primary);
+	background: color-mix(in oklab, var(--color-primary) 12%, var(--color-base-200));
+}
+
+@media (prefers-reduced-motion: reduce) {
+	#utm-welcome-dialog[open] .utm-welcome-box {
+		animation: none;
+	}
+}

.github/pages/wait/install/index.html

@@ -294,6 +294,22 @@ <h2 class="text-4xl font-bold mb-4" data-i18n="installer_wait_screen.mini_game.t
 		</div>
 	</footer>
 
+	<dialog id="utm-welcome-dialog" class="modal">
+		<div class="modal-box utm-welcome-box max-w-md border border-base-content/10 bg-base-100 text-center shadow-2xl">
+			<div class="mx-auto mb-5 grid h-14 w-14 place-items-center rounded-2xl bg-primary/10 ring-1 ring-primary/20" aria-hidden="true">
+				<img src="https://steve02081504.github.io/fount/imgs/icon.svg" alt="" class="h-8 w-8" width="32" height="32" />
+			</div>
+			<h2 class="text-2xl font-bold tracking-wide" data-i18n="installer_wait_screen.utm_welcome.title"></h2>
+			<p id="utm-welcome-message" class="utm-welcome-message py-4 text-base leading-relaxed text-base-content/80"></p>
+			<div class="modal-action mt-2 justify-center">
+				<form method="dialog">
+					<button type="submit" class="btn btn-primary min-w-40" data-i18n="installer_wait_screen.utm_welcome.dismiss"></button>
+				</form>
+			</div>
+		</div>
+		<form method="dialog" class="modal-backdrop backdrop-blur-sm"><button type="submit" data-i18n="util.common.close"></button></form>
+	</dialog>
+
 	<script type="module" src="index.mjs"></script>
 
 </body>

.github/pages/wait/install/index.mjs

@@ -6,7 +6,7 @@ import { makeSearchable } from '../../scripts/components/search.mjs'
 import { renderTemplate, usingTemplates } from '../../scripts/features/template.mjs'
 import { showToastI18n } from '../../scripts/features/toast.mjs'
 import { waitForFountService, saveFountHostUrl, getFountHostUrl, pingFount } from '../../scripts/fountHostGetter.mjs'
-import { initTranslations, geti18n, console, getAvailableLocales, getLocaleNames, setLocales, onLanguageChange } from '../../scripts/i18n/index.mjs'
+import { initTranslations, geti18n, console, getAvailableLocales, getLocaleNames, setLocales, onLanguageChange, setElementI18n } from '../../scripts/i18n/index.mjs'
 import { escapeHtml } from '../../scripts/lib/escapeHtml.mjs'
 import { viewTransition } from '../../scripts/lib/viewTransition.mjs'
 import {
@@ -45,6 +45,8 @@ const starThankYouEl = document.getElementById('star-thank-you')
 const testimonialsBlock = document.getElementById('testimonials-block')
 const testimonialCurrent = document.getElementById('testimonial-current')
 const testimonialNext = document.getElementById('testimonial-next')
+const utmWelcomeDialog = document.getElementById('utm-welcome-dialog')
+const utmWelcomeMessage = document.getElementById('utm-welcome-message')
 
 /**
  * 从指定 URL 获取 JSON 数据。
@@ -159,6 +161,19 @@ async function playHeroAnimation() {
 	}
 }
 
+/**
+ * 若 URL 带 utm_source，在 hero 入场结束后弹出欢迎对话框。
+ * @returns {void}
+ */
+function maybeShowUtmWelcome() {
+	const source = new URLSearchParams(location.search).get('utm_source')?.trim()
+	if (!source) return
+	setElementI18n(utmWelcomeMessage, 'installer_wait_screen.utm_welcome.message', {
+		source: escapeHtml(source),
+	})
+	utmWelcomeDialog.showModal()
+}
+
 /**
  * 渲染主题预览。
  */
@@ -700,6 +715,7 @@ async function main() {
 		initTranslations('installer_wait_screen'),
 		playHeroAnimation()
 	])
+	maybeShowUtmWelcome()
 
 	adjectiveRotator = createRotatingText(rotatingAdjectiveEl, [], 2500)
 	nounRotator = createRotatingText(rotatingNounEl, [], 2500)

src/decl/locale_data.ts

@@ -527,6 +527,11 @@ export type LocaleData = {
 			nouns: string[]
 			platforms: string[]
 		}
+		utm_welcome: {
+			title: string
+			message: string
+			dismiss: string
+		}
 		footer: {
 			ready_text: string
 			wait_text: string
@@ -6181,6 +6186,7 @@ export type LocaleKeyParams = {
 	'import.errors.textImportFailed': { message: string | number }
 	'installer_wait_screen.features.aiSources.description': { atlasCloudLink: string | number; evolinkLink: string | number }
 	'installer_wait_screen.footer.error_message': { error: string | number }
+	'installer_wait_screen.utm_welcome.message': { source: string | number }
 	'log_viewer.logs.openSourceFailed': { message: string | number }
 	'login_info.modal.retrieve_error': { error: string | number }
 	'login_info.modal.transfer_error': { error: string | number }

src/public/locales/ar-SA.json

@@ -559,6 +559,11 @@
 				"مشغّل"
 			]
 		},
+		"utm_welcome": {
+			"title": "من بعيد",
+			"message": "أهلاً بضيوف `${source}`!\nلا شاي ولا ضيافة هنا — مجرد تحية :)",
+			"dismiss": "شكراً، سألقي نظرة"
+		},
 		"footer": {
 			"ready_text": "هل أنت مستعد لبدء رحلتك؟",
 			"wait_text": "يرجى الانتظار لحظة...",

src/public/locales/de-DE.json

@@ -559,6 +559,11 @@
 				"Laufzeitumgebung"
 			]
 		},
+		"utm_welcome": {
+			"title": "Von weit her",
+			"message": "Willkommen, Gäste von `${source}`!\nTee und Snacks haben wir leider nicht — nur einen herzlichen Gruß :)",
+			"dismiss": "Danke, ich schaue mich um"
+		},
 		"footer": {
 			"ready_text": "Bereit, Ihre Reise zu beginnen?",
 			"wait_text": "Bitte warten Sie einen Moment...",

src/public/locales/emoji.json

@@ -559,6 +559,11 @@
 				"🏃‍♂️"
 			]
 		},
+		"utm_welcome": {
+			"title": "🛤️✨",
+			"message": "👋 ⬅️ ${source}\n🍵❌ 🍪❌ 👋 :)",
+			"dismiss": "👌👀"
+		},
 		"footer": {
 			"ready_text": "🚀❓",
 			"wait_text": "⏳…",

src/public/locales/en-UK.json

@@ -559,6 +559,11 @@
 				"runtime"
 			]
 		},
+		"utm_welcome": {
+			"title": "From afar",
+			"message": "Welcome, visitors from `${source}`!\nWe've no tea or biscuits on offer — just a friendly hello :)",
+			"dismiss": "Thanks, I'll have a look around"
+		},
 		"footer": {
 			"ready_text": "Ready to start your journey?",
 			"wait_text": "Please wait a moment...",