Tweaks

source/pages/[...apps]/[slug].astro

@@ -45,6 +45,13 @@ const tagClass = 'text-[10px] inline-flex items-center font-bold leading-sm px-1
 				<h2 class="text-2xl md:text-3xl tracking-tight mb-8">
 					{app.subtitle}
 				</h2>
+				<div id="another-random-app" class="flex justify-center hidden">
+					<a href="/apps/random"
+						class="flex items-center gap-2 px-4 py-2 mb-6 font-semibold text-white bg-gradient-to-r from-primary-500 to-secondary-500 rounded-full shadow-sm hover:shadow-md hover:from-primary-600 hover:to-secondary-600 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800">
+						<Icon name="tabler:arrows-shuffle" class="w-5 h-5"/>
+						Another Random App
+					</a>
+				</div>
 				{app.isArchived &&
 					<span class={`${tagClass} bg-orange-100 dark:bg-orange-200 text-[16px] mb-10`}>archived</span>
 				}
@@ -124,3 +131,12 @@ const tagClass = 'text-[10px] inline-flex items-center font-bold leading-sm px-1
 		});
 	}
 </script>
+
+<script type="module" is:inline>
+	const url = new URL(window.location);
+	if (url.searchParams.has('from-random')) {
+		url.searchParams.delete('from-random');
+		window.history.replaceState({}, '', url);
+		document.querySelector('#another-random-app').style.display = 'flex';
+	}
+</script>

source/pages/_apps-extra.md

@@ -8,6 +8,7 @@
 - [Apple Watch Apps](/apps/watchos) - Apps that run on Apple Watch
 - [Apple Vision Apps](/apps/visionos) - Apps that run on Apple Vision
 - [Open Source Apps](https://github.com/search?q=user%3Asindresorhus+language%3Aswift+topic%3Aapp+archived%3Afalse&type=repositories) - Apps with the source code available
+- [Random App](/apps/random) - Show a random app
 
 ## More
 

source/pages/apps/random.astro

@@ -0,0 +1,19 @@
+---
+import Layout from '~/layouts/SimplePageLayout.astro';
+import {fetchApps} from '~/utils/apps.js';
+
+const apps = await fetchApps();
+const appSlugs = apps.map(app => app.slug);
+---
+
+<Layout>
+	<script type="module" define:vars={{appSlugs}}>
+		const randomItem = items => items[Math.floor(Math.random() * items.length)];
+		window.location.href = `/${randomItem(appSlugs)}?from-random`;
+	</script>
+	<div class="flex items-center justify-center min-h-[50vh] text-center">
+		<noscript>
+			<p class="text-center">JavaScript is required show a random app. You can always browse the <a href="/apps">app list</a> manually.</p>
+		</noscript>
+	</div>
+</Layout>