From 633b7a224339bdec21169740fc3077442d66d6db Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Tue, 16 Jul 2024 07:54:28 +0800
Subject: [PATCH 1/4] feat: add ios app webview dynamic type support

---
 src/app/App.svelte                    | 68 +++++++++++++--------------
 src/app/app.css                       | 30 ++++++++++++
 xcode/App-Shared/ViewController.swift |  2 +-
 3 files changed, 63 insertions(+), 37 deletions(-)

diff --git a/src/app/App.svelte b/src/app/App.svelte
index ea20d80c..7d4c50c6 100644
--- a/src/app/App.svelte
+++ b/src/app/App.svelte
@@ -31,33 +31,36 @@
 	<div class="logo">
 		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 		{@html logo}
-		<span>
-			{#if import.meta.env.GIT_TAG && import.meta.env.GIT_COMMIT}
-				<a
-					href="https://github.com/quoid/userscripts/releases/tag/{import.meta
-						.env.GIT_TAG}"
-				>
-					{import.meta.env.GIT_TAG}
-				</a>
-				(<a
-					href="https://github.com/quoid/userscripts/commit/{import.meta.env
-						.GIT_COMMIT}"
-				>
-					{import.meta.env.GIT_COMMIT.slice(0, 7)}
-				</a>)
-			{:else}
-				<span>{version}</span>
-				<span>{build}</span>
-			{/if}
-		</span>
 	</div>
+	<div class="version">
+		{#if import.meta.env.GIT_TAG && import.meta.env.GIT_COMMIT}
+			<a
+				href="https://github.com/quoid/userscripts/releases/tag/{import.meta.env
+					.GIT_TAG}"
+			>
+				{import.meta.env.GIT_TAG}
+			</a>
+			(<a
+				href="https://github.com/quoid/userscripts/commit/{import.meta.env
+					.GIT_COMMIT}"
+			>
+				{import.meta.env.GIT_COMMIT.slice(0, 7)}
+			</a>)
+		{:else}
+			<span>{version}</span>
+			<span>{build}</span>
+		{/if}
+	</div>
+	<br />
 	<p>
-		You can turn on the Userscripts iOS Safari extension in Settings.
+		You can turn on the Userscripts iOS Safari extension in Settings or Safari,
+		then use the extension in Safari.
+		<br />
 		<a
 			href="https://github.com/quoid/userscripts/blob/{import.meta.env
 				.GIT_TAG ?? 'main'}/README.md"
 		>
-			Read the docs.
+			Read online documentation
 		</a>
 	</p>
 	<button id="change-directory" on:click={changeDirectory}>
@@ -76,7 +79,7 @@
 		flex-direction: column;
 		height: 100%;
 		justify-content: center;
-		padding: 0 1rem;
+		padding: 16px;
 		text-align: center;
 		-webkit-touch-callout: none;
 		user-select: none;
@@ -87,27 +90,22 @@
 	}
 
 	.icon {
-		height: 8rem;
-		width: 8rem;
+		margin-top: 80px;
+		height: min(8rem, 256px);
+		width: min(8rem, 256px);
 	}
 
 	.logo {
 		align-items: flex-end;
 		display: flex;
-		margin: 1rem 0;
+		margin: min(1rem, 32px) 0;
 	}
 
 	.logo :global(svg) {
-		height: 1.5rem;
-	}
-
-	.logo > span {
-		text-align: left;
-		min-width: 3.5rem;
-		margin-left: 0.5rem;
+		height: min(1.5rem, 32px);
 	}
 
-	.logo span,
+	.version,
 	.current {
 		color: var(--text-color-disabled);
 		font: var(--text-small);
@@ -123,7 +121,7 @@
 		font: var(--text-default);
 		font-weight: 500;
 		letter-spacing: var(--letter-spacing-default);
-		margin: 2rem 0 1rem;
+		margin: 2rem 0;
 		padding: 0.5rem 1rem;
 	}
 
@@ -137,8 +135,6 @@
 		font-size: 0.875rem;
 		font-weight: 400;
 		word-break: break-all;
-		min-height: 7rem;
-		max-height: 10rem;
 	}
 
 	#directory button {
diff --git a/src/app/app.css b/src/app/app.css
index 2eaa3de0..a5d041a3 100644
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -15,6 +15,36 @@ body {
 	-webkit-font-smoothing: antialiased;
 }
 
+/* ios */
+@supports (-webkit-touch-callout: none) {
+	html {
+		height: auto;
+		overflow: visible;
+		overscroll-behavior: none;
+	}
+
+	/**
+	 * Dynamic Type
+	 * https://support.apple.com/102453
+	 * https://webkit.org/blog/3709/using-the-system-font-in-web-content/
+	 * https://developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_7_0.html#//apple_ref/doc/uid/TP40014305-CH5-SW10
+	 * https://github.com/w3c/csswg-drafts/issues/3708
+	 */
+	@supports (font: -apple-system-body) {
+		html {
+			/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+			font: -apple-system-body; /* default 17px */
+		}
+	}
+
+	/* Avoid page zoom */
+	input,
+	textarea,
+	select {
+		font-size: max(1rem, 16px);
+	}
+}
+
 @media screen and (height <= 400px) {
 	html {
 		font-size: 80%;
diff --git a/xcode/App-Shared/ViewController.swift b/xcode/App-Shared/ViewController.swift
index 15430135..ff51fb9d 100644
--- a/xcode/App-Shared/ViewController.swift
+++ b/xcode/App-Shared/ViewController.swift
@@ -27,7 +27,7 @@ class ViewController: UIViewController, WKNavigationDelegate, WKScriptMessageHan
 		logger?.debug("\(#function, privacy: .public) - DEBUG mode: isInspectable = true")
 #endif
 		view = webView
-		self.webView.scrollView.isScrollEnabled = false
+//		self.webView.scrollView.isScrollEnabled = false
 		self.webView.isOpaque = false
 		let backgroundColor = UIColor.init(red: (47/255.0), green: (51/255.0), blue: (55/255.0), alpha: 1.0)
 		view.setValue(backgroundColor, forKey: "backgroundColor")

From eacf635b5f2273091644b51ebbafbed6dae49b68 Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Tue, 16 Jul 2024 19:49:24 +0800
Subject: [PATCH 2/4] feat: add footer links and improve phrase

---
 src/app/App.svelte | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/app/App.svelte b/src/app/App.svelte
index 7d4c50c6..ccd6efb1 100644
--- a/src/app/App.svelte
+++ b/src/app/App.svelte
@@ -54,14 +54,11 @@
 	<br />
 	<p>
 		You can turn on the Userscripts iOS Safari extension in Settings or Safari,
-		then use the extension in Safari.
-		<br />
+		then use the extension in Safari. Please refer to the "Usage" section in the
 		<a
 			href="https://github.com/quoid/userscripts/blob/{import.meta.env
-				.GIT_TAG ?? 'main'}/README.md"
-		>
-			Read online documentation
-		</a>
+				.GIT_TAG ?? 'main'}/README.md#usage">README of this version</a
+		>.
 	</p>
 	<button id="change-directory" on:click={changeDirectory}>
 		Change Userscripts Directory
@@ -70,6 +67,20 @@
 	<div id="directory">
 		<button class="link" on:click={openDirectory}>{directory}</button>
 	</div>
+	<div class="footer">
+		<a
+			href="https://github.com/quoid/userscripts/blob/{import.meta.env
+				.GIT_TAG ?? 'main'}/README.md">Documentation</a
+		>
+		|
+		<a href="https://github.com/quoid/userscripts/discussions">Discussions</a>
+		|
+		<a href="https://github.com/quoid/userscripts/issues">Report an Issue</a>
+		|
+		<a href="https://github.com/quoid/userscripts#privacy-policy"
+			>Privacy Policy</a
+		>
+	</div>
 </main>
 
 <style>
@@ -105,6 +116,7 @@
 		height: min(1.5rem, 32px);
 	}
 
+	.footer,
 	.version,
 	.current {
 		color: var(--text-color-disabled);
@@ -141,4 +153,8 @@
 		color: inherit;
 		text-decoration: none;
 	}
+
+	.footer {
+		margin-top: 80px;
+	}
 </style>

From fee7589e02a0982a70ed9c9b8fe9fd45853c9cfb Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Wed, 17 Jul 2024 03:38:07 +0800
Subject: [PATCH 3/4] refactor: completely re-layout the entire page

---
 src/app/App.svelte | 145 +++++++++++++++++++++++----------------------
 1 file changed, 74 insertions(+), 71 deletions(-)

diff --git a/src/app/App.svelte b/src/app/App.svelte
index ccd6efb1..7c17951c 100644
--- a/src/app/App.svelte
+++ b/src/app/App.svelte
@@ -2,6 +2,8 @@
 	import icon from "./img/icon.png";
 	import logo from "./img/logo.svg?raw";
 
+	const baseUrl = "https://github.com/quoid/userscripts";
+
 	let version = "v0.0.0";
 	let build = "(0)";
 	let directory = "init";
@@ -27,96 +29,106 @@
 </script>
 
 <main>
-	<img class="icon" src={icon} alt="Userscripts App Icon" draggable="false" />
-	<div class="logo">
+	<div class="section icons">
+		<img class="icon" src={icon} alt="Userscripts App Icon" draggable="false" />
 		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-		{@html logo}
+		<div class="logo">{@html logo}</div>
+		<div class="version">
+			{#if import.meta.env.GIT_TAG && import.meta.env.GIT_COMMIT}
+				<a href="${baseUrl}/releases/tag/{import.meta.env.GIT_TAG}">
+					{import.meta.env.GIT_TAG}
+				</a>
+				(<a href="${baseUrl}/commit/{import.meta.env.GIT_COMMIT}">
+					{import.meta.env.GIT_COMMIT.slice(0, 7)}
+				</a>)
+			{:else}
+				<span>{version}</span>
+				<span>{build}</span>
+			{/if}
+		</div>
 	</div>
-	<div class="version">
-		{#if import.meta.env.GIT_TAG && import.meta.env.GIT_COMMIT}
+	<div class="section guide">
+		<p>
+			You can turn on the Userscripts iOS Safari extension in Settings or
+			Safari, then use the extension in Safari. Please refer to the "Usage"
+			section in the
 			<a
-				href="https://github.com/quoid/userscripts/releases/tag/{import.meta.env
-					.GIT_TAG}"
-			>
-				{import.meta.env.GIT_TAG}
-			</a>
-			(<a
-				href="https://github.com/quoid/userscripts/commit/{import.meta.env
-					.GIT_COMMIT}"
-			>
-				{import.meta.env.GIT_COMMIT.slice(0, 7)}
-			</a>)
-		{:else}
-			<span>{version}</span>
-			<span>{build}</span>
-		{/if}
+				href="${baseUrl}/blob/{import.meta.env.GIT_TAG ??
+					'main'}/README.md#usage">README of this version</a
+			>.
+		</p>
 	</div>
-	<br />
-	<p>
-		You can turn on the Userscripts iOS Safari extension in Settings or Safari,
-		then use the extension in Safari. Please refer to the "Usage" section in the
-		<a
-			href="https://github.com/quoid/userscripts/blob/{import.meta.env
-				.GIT_TAG ?? 'main'}/README.md#usage">README of this version</a
-		>.
-	</p>
-	<button id="change-directory" on:click={changeDirectory}>
-		Change Userscripts Directory
-	</button>
-	<div class="current">CURRENT DIRECTORY:</div>
-	<div id="directory">
-		<button class="link" on:click={openDirectory}>{directory}</button>
+	<div class="section action">
+		<button id="changedir" on:click={changeDirectory}>
+			Change Userscripts Directory
+		</button>
+		<div class="current">CURRENT DIRECTORY:</div>
+		<button id="directory" class="link" on:click={openDirectory}>
+			{directory}
+		</button>
 	</div>
-	<div class="footer">
-		<a
-			href="https://github.com/quoid/userscripts/blob/{import.meta.env
-				.GIT_TAG ?? 'main'}/README.md">Documentation</a
-		>
-		|
-		<a href="https://github.com/quoid/userscripts/discussions">Discussions</a>
-		|
-		<a href="https://github.com/quoid/userscripts/issues">Report an Issue</a>
-		|
-		<a href="https://github.com/quoid/userscripts#privacy-policy"
-			>Privacy Policy</a
-		>
+	<div class="section footer">
+		<div class="links">
+			<a href="${baseUrl}/blob/{import.meta.env.GIT_TAG ?? 'main'}/README.md"
+				>Documentation</a
+			>
+			<a href="${baseUrl}/discussions">Discussions</a>
+			<a href="${baseUrl}/issues">Report an Issue</a>
+			<a href="${baseUrl}#privacy-policy">Privacy Policy</a>
+		</div>
 	</div>
 </main>
 
 <style>
 	main {
-		align-items: center;
 		display: flex;
 		flex-direction: column;
-		height: 100%;
-		justify-content: center;
+		place-items: center;
+		place-content: center;
+		gap: min(2rem, 32px);
+		min-height: 100svh;
+		min-height: -webkit-fill-available;
 		padding: 16px;
 		text-align: center;
 		-webkit-touch-callout: none;
 		user-select: none;
 	}
 
+	.section {
+		display: flex;
+		place-items: center;
+		flex-direction: column;
+		gap: min(0.5rem, 16px);
+	}
+
+	.section.icons,
+	.section.footer {
+		flex: 1;
+		place-content: flex-end;
+	}
+
+	.section.footer .links {
+		display: flex;
+		flex-flow: row wrap;
+		place-content: center;
+		gap: min(0.5rem, 16px);
+	}
+
 	a {
 		color: var(--color-blue);
 	}
 
 	.icon {
-		margin-top: 80px;
 		height: min(8rem, 256px);
 		width: min(8rem, 256px);
 	}
 
-	.logo {
-		align-items: flex-end;
-		display: flex;
-		margin: min(1rem, 32px) 0;
-	}
-
 	.logo :global(svg) {
+		display: flex;
 		height: min(1.5rem, 32px);
 	}
 
-	.footer,
+	.links,
 	.version,
 	.current {
 		color: var(--text-color-disabled);
@@ -125,7 +137,7 @@
 		letter-spacing: var(--letter-spacing-small);
 	}
 
-	button#change-directory {
+	button#changedir {
 		background-color: var(--color-blue);
 		border: none;
 		border-radius: var(--border-radius);
@@ -133,28 +145,19 @@
 		font: var(--text-default);
 		font-weight: 500;
 		letter-spacing: var(--letter-spacing-default);
-		margin: 2rem 0;
 		padding: 0.5rem 1rem;
 	}
 
-	button#change-directory:active {
+	button#changedir:active {
 		background-color: #6296c7;
 	}
 
-	#directory {
+	button#directory {
 		color: var(--editor-default);
 		font-family: var(--editor-font);
 		font-size: 0.875rem;
 		font-weight: 400;
 		word-break: break-all;
-	}
-
-	#directory button {
-		color: inherit;
 		text-decoration: none;
 	}
-
-	.footer {
-		margin-top: 80px;
-	}
 </style>

From 3e747b04324233118a4bff45482886143e01288e Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Wed, 17 Jul 2024 04:12:19 +0800
Subject: [PATCH 4/4] fix: correct the strings of the links

---
 src/app/App.svelte | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/App.svelte b/src/app/App.svelte
index 7c17951c..47d4f995 100644
--- a/src/app/App.svelte
+++ b/src/app/App.svelte
@@ -35,10 +35,10 @@
 		<div class="logo">{@html logo}</div>
 		<div class="version">
 			{#if import.meta.env.GIT_TAG && import.meta.env.GIT_COMMIT}
-				<a href="${baseUrl}/releases/tag/{import.meta.env.GIT_TAG}">
+				<a href="{baseUrl}/releases/tag/{import.meta.env.GIT_TAG}">
 					{import.meta.env.GIT_TAG}
 				</a>
-				(<a href="${baseUrl}/commit/{import.meta.env.GIT_COMMIT}">
+				(<a href="{baseUrl}/commit/{import.meta.env.GIT_COMMIT}">
 					{import.meta.env.GIT_COMMIT.slice(0, 7)}
 				</a>)
 			{:else}
@@ -53,7 +53,7 @@
 			Safari, then use the extension in Safari. Please refer to the "Usage"
 			section in the
 			<a
-				href="${baseUrl}/blob/{import.meta.env.GIT_TAG ??
+				href="{baseUrl}/blob/{import.meta.env.GIT_TAG ??
 					'main'}/README.md#usage">README of this version</a
 			>.
 		</p>
@@ -69,12 +69,12 @@
 	</div>
 	<div class="section footer">
 		<div class="links">
-			<a href="${baseUrl}/blob/{import.meta.env.GIT_TAG ?? 'main'}/README.md"
+			<a href="{baseUrl}/blob/{import.meta.env.GIT_TAG ?? 'main'}/README.md"
 				>Documentation</a
 			>
-			<a href="${baseUrl}/discussions">Discussions</a>
-			<a href="${baseUrl}/issues">Report an Issue</a>
-			<a href="${baseUrl}#privacy-policy">Privacy Policy</a>
+			<a href="{baseUrl}/discussions">Discussions</a>
+			<a href="{baseUrl}/issues">Report an Issue</a>
+			<a href="{baseUrl}#privacy-policy">Privacy Policy</a>
 		</div>
 	</div>
 </main>