Add docs manifests for configuring web app versions of our sites

apps/docs/app/layout.tsx

@@ -66,6 +66,19 @@ export const viewport: Viewport = {
     maximumScale: 1,
     viewportFit: 'cover',
   }),
+  // diffshub body uses --diffshub-sidebar-bg (#f7f7f7 / #101010) rather than
+  // the plain neutral background shared by diffs and trees, so it gets its
+  // own theme-color pair for the browser chrome address bar.
+  themeColor:
+    process.env.NEXT_PUBLIC_SITE === 'diffshub'
+      ? [
+          { media: '(prefers-color-scheme: light)', color: '#f7f7f7' },
+          { media: '(prefers-color-scheme: dark)', color: '#101010' },
+        ]
+      : [
+          { media: '(prefers-color-scheme: light)', color: '#ffffff' },
+          { media: '(prefers-color-scheme: dark)', color: '#252525' },
+        ],
 };
 
 // When running in a worktree, prefix the title with a stable emoji + slug so
@@ -123,22 +136,22 @@ const description = SITE_PRODUCT.description;
 const SITE_ICONS_BY_SITE: Record<ProductId, Metadata['icons']> = {
   diffs: {
     icon: [
-      { url: '/favicon.svg', type: 'image/svg+xml' },
-      { url: '/favicon.png', type: 'image/png' },
+      { url: '/diffs-brand/icon.svg', type: 'image/svg+xml' },
+      { url: '/diffs-brand/icon.ico', sizes: '32x32' },
     ],
     apple: '/diffs-brand/apple-icon.png',
   },
   trees: {
     icon: [
       { url: '/trees-brand/icon.svg', type: 'image/svg+xml' },
-      { url: '/trees-brand/icon.ico', sizes: 'any' },
+      { url: '/trees-brand/icon.ico', sizes: '32x32' },
     ],
     apple: '/trees-brand/apple-icon.png',
   },
   diffshub: {
     icon: [
       { url: '/diffshub-brand/icon.svg', type: 'image/svg+xml' },
-      { url: '/diffshub-brand/icon.ico', sizes: 'any' },
+      { url: '/diffshub-brand/icon.ico', sizes: '32x32' },
     ],
     apple: '/diffshub-brand/apple-icon.png',
   },

apps/docs/app/manifest.ts

@@ -0,0 +1,65 @@
+import type { MetadataRoute } from 'next';
+
+import { type ProductId, PRODUCTS } from '@/lib/product-config';
+
+const SITE = (process.env.NEXT_PUBLIC_SITE ?? 'diffs') as ProductId;
+
+// All apple-icon.png assets are 640×640, satisfying Chrome's ≥192px install
+// prompt and ≥512px splash-screen requirements.
+const APPLE_ICON_SIZE = '640x640';
+
+// diffshub is a full standalone app (viewport-fit cover); diffs and trees are
+// documentation sites that benefit from keeping browser navigation visible.
+const DISPLAY_BY_SITE: Record<ProductId, MetadataRoute.Manifest['display']> = {
+  diffs: 'minimal-ui',
+  trees: 'minimal-ui',
+  diffshub: 'standalone',
+};
+
+// diffshub body uses --diffshub-sidebar-bg (#f7f7f7) rather than plain white.
+// The manifest only accepts a single theme_color, so we use the light value;
+// dark-mode tinting is handled via themeColor in the viewport export.
+const THEME_COLOR_BY_SITE: Record<ProductId, string> = {
+  diffs: '#ffffff',
+  trees: '#ffffff',
+  diffshub: '#f7f7f7',
+};
+
+export default function manifest(): MetadataRoute.Manifest {
+  const product = PRODUCTS[SITE];
+
+  return {
+    name: `${product.name}, from Pierre`,
+    short_name: product.name,
+    description: product.description,
+    id: '/',
+    start_url: '/',
+    display: DISPLAY_BY_SITE[SITE],
+    orientation: 'any',
+    lang: 'en',
+    dir: 'ltr',
+    background_color: '#ffffff',
+    theme_color: THEME_COLOR_BY_SITE[SITE],
+    categories: ['developer', 'productivity'],
+    icons: [
+      {
+        src: `/${SITE}-brand/icon.svg`,
+        type: 'image/svg+xml',
+        sizes: 'any',
+        purpose: 'any',
+      },
+      {
+        src: `/${SITE}-brand/apple-icon.png`,
+        type: 'image/png',
+        sizes: APPLE_ICON_SIZE,
+        purpose: 'any',
+      },
+      {
+        src: `/${SITE}-brand/apple-icon.png`,
+        type: 'image/png',
+        sizes: APPLE_ICON_SIZE,
+        purpose: 'maskable',
+      },
+    ],
+  };
+}