@kentcdodds/package-app-kit

Design tokens, PWA install/update, About/version, cache helpers, and optional realtime notes sync for Kody package apps.
starter-remix/app/ui/document.tsx

68 lines · 2.2 KB · TypeScript
/** @jsxRuntime automatic */
/** @jsxImportSource remix/ui */
import type { Handle, RemixNode } from 'remix/ui'

export type DocumentProps = {
	title: string
	appBasePath: string
	assetBasePath: string
	clientModuleUrl: string | null
	runningSha?: string
	page?: string
	children?: RemixNode
}

export function Document(handle: Handle<DocumentProps>) {
	return () => {
		const appBase = handle.props.appBasePath.replace(/\/$/, '')
		const assetBase = handle.props.assetBasePath.replace(/\/$/, '')
		const icon192 = `${appBase}/icons/icon-192.png?v=4`
		const manifest = `${appBase}/manifest.webmanifest`
		const swUrl = assetBase ? `${assetBase}/sw.js` : `${appBase}/sw.js`
		const pakConfig = JSON.stringify({
			appName: '__APP_TITLE__',
			appLabel: '__APP_TITLE__',
			hintDismissKey: '__PACKAGE_ID__-install-hint-dismissed',
			versionPath: '/api/version',
			appBase,
			assetBase: assetBase || undefined,
			clientModuleUrl: handle.props.clientModuleUrl || undefined,
			swUrl,
		})

		return (
			<html
				lang="en"
				data-app-base={appBase}
				data-asset-base={assetBase || undefined}
				data-client-module={handle.props.clientModuleUrl || undefined}
				data-sw-url={swUrl}
				data-running-sha={handle.props.runningSha || ''}
				data-page={handle.props.page || ''}
				data-app-name="__APP_TITLE__"
				data-pak-config={pakConfig}
			>
				<head>
					<meta charset="utf-8" />
					<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
					<meta name="color-scheme" content="dark" />
					<meta name="theme-color" content="#0a0a0a" />
					<meta name="apple-mobile-web-app-capable" content="yes" />
					<meta name="mobile-web-app-capable" content="yes" />
					<title>{handle.props.title}</title>
					<link rel="manifest" href={manifest} crossorigin="use-credentials" />
					<link rel="icon" type="image/png" sizes="192x192" href={icon192} />
					<link rel="apple-touch-icon" href={icon192} />
					<link rel="stylesheet" href={`${assetBase}/styles.css`} />
				</head>
				<body>
					{handle.props.children}
					<div class="pak-toast-host" data-toast-host aria-live="polite" />
					{handle.props.clientModuleUrl ? (
						<script type="module" src={handle.props.clientModuleUrl}></script>
					) : null}
				</body>
			</html>
		)
	}
}