fix a bunch of ssr things

a-type · Feb 13, 2025 · 9308887 · 9308887
1 parent b845d40
commit 9308887
Show file tree

Hide file tree

Showing 9 changed files with 206 additions and 58 deletions.
diff --git a/apps/gnocchi/hub/index.html b/apps/gnocchi/hub/index.html
@@ -1,52 +1,52 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover"
-    />
-    <title>Gnocchi Recipes</title>
-    <meta name="description" content="Your grocery list, done better" />
-    <link rel="icon" href="/favicon.ico" />
-    <!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" /> -->
-    <!-- <link rel="mask-icon" href="/mask-icon.svg" color="#ffffff" /> -->
-    <meta name="theme-color" content="#fdfdff" />
-    <meta charset="utf-8" />
-    <meta property="og:image" content="/og-image.png" />
-    <meta property="og:image:type" content="image/png" />
-    <meta property="og:image:width" content="1200" />
-    <meta property="og:image:height" content="630" />
-    <meta
-      property="og:image:alt"
-      content="A screenshot of a grocery list app transposed over a frying pan with various produce floating above it"
-    />
-    <meta property="og:title" content="Gnocchi" />
-    <meta property="og:description" content="Your grocery list, done better" />
-    <meta property="og:url" content="https://gnocchi.biscuits.club" />
-    <meta property="og:site_name" content="Gnocchi" />
+	<head>
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover"
+		/>
+		<title>Gnocchi Recipes</title>
+		<meta name="description" content="Your grocery list, done better" />
+		<link rel="icon" href="/favicon.ico" />
+		<!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" /> -->
+		<!-- <link rel="mask-icon" href="/mask-icon.svg" color="#ffffff" /> -->
+		<meta name="theme-color" content="#fdfdff" />
+		<meta charset="utf-8" />
+		<meta property="og:image" content="/og-image.png" />
+		<meta property="og:image:type" content="image/png" />
+		<meta property="og:image:width" content="1200" />
+		<meta property="og:image:height" content="630" />
+		<meta
+			property="og:image:alt"
+			content="A screenshot of a grocery list app transposed over a frying pan with various produce floating above it"
+		/>
+		<meta property="og:title" content="Gnocchi" />
+		<meta property="og:description" content="Your grocery list, done better" />
+		<meta property="og:url" content="https://gnocchi.biscuits.club" />
+		<meta property="og:site_name" content="Gnocchi" />
 
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta
-      name="twitter:image:alt"
-      content="A screenshot of a grocery list app transposed over a frying pan with various produce floating above it"
-    />
-    <meta name="twitter:title" content="Gnocchi" />
-    <meta name="twitter:description" content="Your grocery list, done better" />
-    <meta
-      name="twitter:image"
-      content="https://gnocchi.biscuits.club/og-image.png"
-    />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-  </head>
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta
+			name="twitter:image:alt"
+			content="A screenshot of a grocery list app transposed over a frying pan with various produce floating above it"
+		/>
+		<meta name="twitter:title" content="Gnocchi" />
+		<meta name="twitter:description" content="Your grocery list, done better" />
+		<meta
+			name="twitter:image"
+			content="https://gnocchi.biscuits.club/og-image.png"
+		/>
+		<meta name="apple-mobile-web-app-capable" content="yes" />
+	</head>
 
-  <body className="theme-lemon">
-    <div id="root">
-      <!--app-html-->
-    </div>
-    <script type="module" src="/src/entry-client.tsx"></script>
-    <script>
-      // prettier-ignore
-      window.__SNAPSHOT__ = {/*snapshot*/};
-    </script>
-  </body>
+	<body className="theme-lemon">
+		<div id="root">
+			<!--app-html-->
+		</div>
+		<script type="module" src="/src/entry-client.tsx"></script>
+		<script>
+			// prettier-ignore
+			window.__SNAPSHOT__ = {/*snapshot*/};
+		</script>
+	</body>
 </html>
diff --git a/apps/gnocchi/hub/src/App.tsx b/apps/gnocchi/hub/src/App.tsx
@@ -1,4 +1,5 @@
 import {
+	Box,
 	Button,
 	Chip,
 	Divider,
@@ -17,6 +18,8 @@ import { Instructions } from './components/Instructions.jsx';
 import { MainImage } from './components/MainImage.jsx';
 import { Prelude } from './components/Prelude.jsx';
 import { TopLineRoot, TopLineTitle } from './components/layout.jsx';
+import './henrietta.css';
+import appIcon from './icon.png';
 import { HubRecipeData } from './types.js';
 
 const innerProps = {
@@ -54,6 +57,14 @@ export function App({
 					itemType="https://schema.org/Recipe"
 					className="h-recipe flex flex-col gap-4 items-stretch"
 				>
+					<Box gap items="center" asChild>
+						<a href="https://biscuits.club/gnocchi">
+							<img src={appIcon} className="w-30px h-30px" alt="Gnocchi icon" />
+							<H1 className="!text-lg !font-medium font-fancy">
+								Gnocchi Recipes
+							</H1>
+						</a>
+					</Box>
 					<TopLineRoot>
 						{data.mainImageUrl && (
 							<MainImage url={data.mainImageUrl} title={data.title} />

diff --git a/apps/gnocchi/hub/src/henrietta.css b/apps/gnocchi/hub/src/henrietta.css
@@ -0,0 +1,135 @@
+@font-face {
+  font-family: Henrietta;
+  src:
+    url('https://resources.biscuits.club/fonts/VCHenrietta-Regular.woff')
+      format('woff'),
+    url('https://resources.biscuits.club/fonts/VCHenrietta-Regular.woff2')
+      format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Henrietta;
+  src:
+    url('https://resources.biscuits.club/fonts/VCHenrietta-Bold.woff')
+      format('woff'),
+    url('https://resources.biscuits.club/fonts/VCHenrietta-Bold.woff2')
+      format('woff2');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Henrietta;
+  src:
+    url('https://resources.biscuits.club/fonts/VCHenrietta-Italic.woff')
+      format('woff'),
+    url('https://resources.biscuits.club/fonts/VCHenrietta-Italic.woff2')
+      format('woff2');
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Henrietta;
+  src:
+    url('https://resources.biscuits.club/fonts/VCHenrietta-BoldItalic.woff')
+      format('woff'),
+    url('https://resources.biscuits.club/fonts/VCHenrietta-BoldItalic.woff2')
+      format('woff2');
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Henrietta;
+  src:
+    url('https://resources.biscuits.club/fonts/VCHenrietta-Black.woff')
+      format('woff'),
+    url('https://resources.biscuits.club/fonts/VCHenrietta-Black.woff2')
+      format('woff2');
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Henrietta;
+  src:
+    url('https://resources.biscuits.club/fonts/VCHenrietta-BlackItalic.woff')
+      format('woff'),
+    url('https://resources.biscuits.club/fonts/VCHenrietta-BlackItalic.woff2')
+      format('woff2');
+  font-weight: 900;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Henrietta;
+  src:
+    url('https://resources.biscuits.club/fonts/VCHenrietta-SemiBold.woff')
+      format('woff'),
+    url('https://resources.biscuits.club/fonts/VCHenrietta-SemiBold.woff2')
+      format('woff2');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Henrietta;
+  src:
+    url('https://resources.biscuits.club/fonts/VCHenrietta-SemiBoldItalic.woff')
+      format('woff'),
+    url('https://resources.biscuits.club/fonts/VCHenrietta-SemiBoldItalic.woff2')
+      format('woff2');
+  font-weight: 600;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Henrietta;
+  src:
+    url('https://resources.biscuits.club/fonts/VCHenrietta-Medium.woff')
+      format('woff'),
+    url('https://resources.biscuits.club/fonts/VCHenrietta-Medium.woff2')
+      format('woff2');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Henrietta;
+  src:
+    url('https://resources.biscuits.club/fonts/VCHenrietta-MediumItalic.woff')
+      format('woff'),
+    url('https://resources.biscuits.club/fonts/VCHenrietta-MediumItalic.woff2')
+      format('woff2');
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Henrietta;
+  src:
+    url('https://resources.biscuits.club/fonts/VCHenrietta-Light.woff')
+      format('woff'),
+    url('https://resources.biscuits.club/fonts/VCHenrietta-Light.woff2')
+      format('woff2');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Henrietta;
+  src:
+    url('https://resources.biscuits.club/fonts/VCHenrietta-LightItalic.woff')
+      format('woff'),
+    url('https://resources.biscuits.club/fonts/VCHenrietta-LightItalic.woff2')
+      format('woff2');
+  font-weight: 300;
+  font-style: italic;
+}
+
+.font-fancy {
+  font-family: Henrietta, sans-serif;
+}
diff --git a/apps/gnocchi/hub/src/icon.png b/apps/gnocchi/hub/src/icon.png
diff --git a/packages/client/src/hooks/useOnVisible.ts b/packages/client/src/hooks/useOnVisible.ts
@@ -1,14 +1,13 @@
 import { RefObject, useEffect } from 'react';
 
 export function useOnVisible(
-	ref: RefObject<HTMLElement>,
+	ref: RefObject<HTMLElement | null>,
 	callback: (isVisible: boolean) => void,
 	options?: IntersectionObserverInit,
 ) {
 	useEffect(() => {
 		const observer = new IntersectionObserver(([entry]) => {
 			callback(entry.isIntersecting);
-			console.log(entry.isIntersecting);
 		}, options);
 
 		if (ref.current) {

diff --git a/server/src/common/hubs.ts b/server/src/common/hubs.ts
@@ -29,7 +29,7 @@ export async function staticFile(
 		return new Response('Not found', { status: 404 });
 	}
 
-	const file = await fs.readFile(filePath, 'utf-8');
+	const file = await fs.readFile(filePath);
 	return new Response(file, {
 		headers: {
 			'Content-Type': assetFileTypes[path.extname(filePath)] ?? 'text/plain',

diff --git a/web/src/components/promo/PhoneDemo.tsx b/web/src/components/promo/PhoneDemo.tsx
@@ -7,13 +7,15 @@ export interface PhoneDemoProps {
 	direction?: 'left' | 'right';
 	type?: 'video' | 'image';
 	className?: string;
+	size?: 'default' | 'large';
 }
 
 export function PhoneDemo({
 	src,
 	direction = 'left',
 	type = 'video',
 	className,
+	size = 'default',
 }: PhoneDemoProps) {
 	const animationDelay = useMemo(() => {
 		return `${(Math.random() * 3).toFixed(2)}s`;
@@ -31,6 +33,7 @@ export function PhoneDemo({
 			<div
 				className={classNames(
 					'phone rounded-lg aspect-ratio-11/24 bg-[black] min-h-0 h-30vh sm:h-auto',
+					size === 'large' && '!h-auto',
 					direction,
 				)}
 				style={{

diff --git a/web/src/components/promo/layout.tsx b/web/src/components/promo/layout.tsx
@@ -1,4 +1,4 @@
-import { Button, clsx, H2, Icon, withClassName } from '@a-type/ui';
+import { Button, clsx, H2, Icon, withClassName, withProps } from '@a-type/ui';
 import { AppId, appsById } from '@biscuits/apps';
 import { Link } from '@verdant-web/react-router';
 import { CSSProperties, forwardRef, ReactNode } from 'react';
@@ -9,7 +9,7 @@ export const DemoGrid = withClassName(
 	'grid grid-cols-[1fr] gap-5 items-start md:(grid-cols-[repeat(2,1fr)])',
 );
 export const Demo = withClassName(
-	PhoneDemo,
+	withProps(PhoneDemo, { size: 'large' }),
 	'relative z-1 [grid-row-end:span_2]',
 );
 export const Highlight = withClassName(

diff --git a/web/src/pages/HomePage.tsx b/web/src/pages/HomePage.tsx
@@ -17,7 +17,7 @@ export default function HomePage() {
 				{/* <Background /> */}
 
 				<Box className="w-full z-1" d="col" items="center">
-					<PageFixedArea className="bg-transparent flex flex-row justify-between items-center py-2 max-w-800px">
+					<PageFixedArea className="bg-transparent flex flex-row justify-between items-center py-2 md:max-w-800px">
 						<h1
 							className={classNames(
 								'text-2xl sm:text-4xl m-0 font-bold text-gray-9 text-shadow',
@@ -31,12 +31,12 @@ export default function HomePage() {
 						</Suspense>
 					</PageFixedArea>
 				</Box>
-				<Box d="col" className="z-1" gap="xl">
+				<Box d="col" className="w-full z-1" gap="xl">
 					<Box
 						d="col"
 						gap="xl"
 						items="stretch"
-						className="flex-grow max-w-800px"
+						className="flex-grow max-w-100vw md:max-w-800px"
 					>
 						<div
 							className={classNames(
@@ -66,7 +66,7 @@ export default function HomePage() {
 					<Box
 						p
 						surface="primary"
-						className="max-w-800px"
+						className="max-w-100vw md:max-w-800px"
 						d="col"
 						gap
 						items="start"
@@ -99,7 +99,7 @@ export default function HomePage() {
 							<Link to="/join">Join the Family Plan</Link>
 						</Button>
 					</Box>
-					<Box className="max-w-800px" d="col" gap items="start">
+					<Box className="max-w-100vw md:max-w-800px" d="col" gap items="start">
 						<H2 className="font-fancy font-semibold">
 							What is <em className="font-fancy font-light">local-first?</em>
 						</H2>
@@ -122,7 +122,7 @@ export default function HomePage() {
 					</Box>
 				</Box>
 				<Box className="w-full z-1 mt-300px" d="col" items="center">
-					<Footer className="max-w-800px" />
+					<Footer className="max-w-100vw md:max-w-800px" />
 				</Box>
 			</Box>
 			<Suspense>