Tweaks

package.json

@@ -71,7 +71,8 @@
 			"jsx-quotes": [
 				"error",
 				"prefer-double"
-			]
+			],
+			"unicorn/prevent-abbreviations": "off"
 		}
 	}
 }

source/components/widgets/OverflowMenu.astro

@@ -0,0 +1,37 @@
+---
+import {Icon} from 'astro-iconify';
+
+export type OverflowItemProps = {
+	title: string;
+	url: string;
+};
+
+export type OverflowMenuProps = {
+	overflowItems?: readonly OverflowItemProps[];
+};
+
+const {overflowItems} = Astro.props;
+---
+
+<div class="relative flex items-center" style="padding-top:2px">
+	<select class="overflow-menu-component absolute inset-0 w-full h-full opacity-0 cursor-pointer" style="font-weight: initial; font-family: system-ui;">
+		<option value="" disabled selected>…</option>
+		{overflowItems?.map(item => (
+			<option value={item.url}>{item.title}</option>
+		))}
+		<slot />
+	</select>
+	<Icon name="tabler:dots-circle-horizontal" class="w-5 h-5 text-primary-600 dark:text-primary-400 pointer-events-none"/>
+</div>
+
+<script is:inline>
+document.addEventListener('change', event => {
+	if (event.target?.matches('.overflow-menu-component')) {
+		const selectedValue = event.target.value;
+		if (selectedValue) {
+			event.target.value = ''; // Clear selection
+			window.location.href = selectedValue;
+		}
+	}
+});
+</script>

source/content/apps/caprine.md

@@ -10,4 +10,4 @@ platforms:
 repoUrl: https://github.com/sindresorhus/caprine
 ---
 
-Caprine is an open-source, cross-platform, and privacy-focused Facebook Messenger desktop app.
+An open-source, cross-platform, and privacy-focused Facebook Messenger desktop app.

source/content/config.ts

@@ -24,6 +24,7 @@ const appsCollection = defineCollection({
 		isMenuBarApp: z.boolean().default(false),
 		mainLinks: z.record(z.string().url()).optional(),
 		links: z.record(z.string().url()).optional(),
+		overflowLinks: z.record(z.string().url()).optional(),
 		showSupportLink: z.boolean().default(true),
 		redirectUrl: z.string().url().optional(),
 		forceHasIosAppIcon: z.boolean().optional(), // // We can use `forceHasIosAppIcon` for both true/false override.

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

@@ -2,6 +2,7 @@
 import {Icon} from 'astro-iconify';
 import {SITE} from '~/config.mjs';
 import Layout from '~/layouts/PageLayout.astro';
+import OverflowMenu from '~/components/widgets/OverflowMenu.astro';
 import {fetchApps, proseCSS} from '~/utils/apps.js';
 
 export async function getStaticPaths() {
@@ -45,6 +46,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>
 				}
@@ -86,6 +94,16 @@ const tagClass = 'text-[10px] inline-flex items-center font-bold leading-sm px-1
 								<a href={url} class="hover:text-primary-400 dark:text-primary-400 dark:hover:text-primary-200">{title}</a>
 							))}
 						</>
+						<OverflowMenu>
+							{Object.entries(app.overflowLinks ?? []).map(([title, url]) => (
+								<a href={url} class="hover:text-primary-400 dark:text-primary-400 dark:hover:text-primary-200">{title}</a>
+							))}
+							{!app.isArchived && app.appStoreId && (
+								<option value={app.appStoreUrl}>What’s New</option>
+							)}
+							<option value="/apps/terms">Terms of Use</option>
+							{app.isPaid && <option value="/apps#free">Student Discount</option>}
+						</OverflowMenu>
 					</nav>
 				}
 			</header>
@@ -124,3 +142,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,22 @@
+---
+import Layout from '~/layouts/SimplePageLayout.astro';
+import {fetchApps} from '~/utils/apps.js';
+
+const apps = await fetchApps();
+
+const appSlugs = apps
+	.filter(app => !app.unlisted)
+	.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>