v2024

.github/workflows/lint.yml

@@ -36,8 +36,3 @@ jobs:
         run: bun lint
         env:
           CI: true
-
-      - name: Danger
-        run: bun danger ci
-        env:
-          GITHUB_TOKEN: ${{ secrets.DANGER_TOKEN }}

package.json

@@ -16,44 +16,43 @@
     "@tailwindcss/forms": "^0.5.7",
     "@types/common-tags": "^1.8.4",
     "@types/cookie": "^0.6.0",
-    "@types/jsonwebtoken": "^9.0.5",
+    "@types/jsonwebtoken": "^9.0.6",
     "@types/jwa": "^2.0.3",
-    "@types/react": "^18.2.47",
-    "@types/react-dom": "^18.2.18",
-    "@types/uuid": "^9.0.7",
-    "autoprefixer": "^10.4.16",
-    "danger": "^11.3.1",
-    "eslint": "8.56.0",
-    "eslint-config-next": "14.0.4",
-    "postcss": "^8.4.33",
-    "prettier": "^3.2.2",
-    "prettier-plugin-tailwindcss": "^0.5.11",
-    "sharp": "^0.33.2",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.3.3"
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/uuid": "^9.0.8",
+    "autoprefixer": "^10.4.19",
+    "eslint": "9.4.0",
+    "eslint-config-next": "14.2.3",
+    "postcss": "^8.4.38",
+    "prettier": "^3.3.1",
+    "prettier-plugin-tailwindcss": "^0.6.2",
+    "sharp": "^0.33.4",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@marsidev/react-turnstile": "^0.4.1",
+    "@marsidev/react-turnstile": "^0.7.1",
     "@otters/monzo": "^2.1.2",
-    "alistair": "^1.5.6",
-    "bwitch": "^0.1.3",
-    "clsx": "^2.1.0",
+    "alistair": "^1.9.0",
+    "bwitch": "^0.3.0",
+    "clsx": "^2.1.1",
     "common-tags": "^1.8.2",
     "cookie": "^0.6.0",
-    "dayjs": "^1.11.10",
-    "dotenv": "^16.3.1",
+    "dayjs": "^1.11.11",
+    "dotenv": "^16.4.5",
     "envsafe": "^2.0.3",
-    "framer-motion": "^10.18.0",
+    "framer-motion": "^11.2.10",
     "jsonwebtoken": "^9.0.2",
     "jwa": "^2.0.0",
-    "next": "^14.0.4",
+    "next": "^14.2.3",
     "nextkit": "^3.4.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
-    "react-icons": "^5.0.1",
+    "react-icons": "^5.2.1",
     "use-lanyard": "^1.5.2",
     "uuid": "^9.0.1",
-    "zod": "^3.22.4"
+    "zod": "^3.23.8"
   }
 }

src/components/message.tsx

@@ -0,0 +1,87 @@
+import clsx from 'clsx';
+import {motion} from 'framer-motion';
+import type {ReactNode} from 'react';
+import alistair from '../../public/alistair.jpeg';
+
+export interface MessageGroupProps {
+	messages: Array<{key: string; content: ReactNode}>;
+}
+
+const group = {
+	hidden: {opacity: 0, x: -5},
+	show: {opacity: 1, x: 0},
+};
+
+const item = {
+	hidden: {opacity: 0},
+	show: {opacity: 1},
+};
+
+function MessageBubble({
+	isLast,
+	isFirst,
+	content,
+}: {
+	isLast?: boolean;
+	isFirst?: boolean;
+	content: ReactNode;
+}) {
+	return (
+		<motion.div
+			transition={{
+				type: 'spring',
+				mass: 1,
+				damping: 100,
+				stiffness: 500,
+			}}
+			variants={item}
+			className={clsx(
+				'w-fit border border-neutral-200 bg-gray-100 px-3 py-2 text-sm dark:border-neutral-800 dark:bg-neutral-900',
+
+				isLast && isFirst
+					? 'rounded-xl'
+					: isFirst
+						? 'rounded-b-md rounded-t-xl'
+						: isLast
+							? 'rounded-b-xl rounded-t-md'
+							: 'rounded-md',
+			)}
+		>
+			{content}
+		</motion.div>
+	);
+}
+
+export function MessageGroup({messages}: MessageGroupProps) {
+	return (
+		<motion.li
+			transition={{
+				type: 'spring',
+				mass: 11,
+				damping: 140,
+				stiffness: 500,
+
+				staggerChildren: 0.1,
+			}}
+			variants={group}
+			className="flex items-end space-x-2"
+		>
+			<img
+				src={alistair.src}
+				className="size-8 rounded-full"
+				alt="Me standing in front of some tents"
+			/>
+
+			<div className="space-y-1">
+				{messages.map(({key: id, content}, i) => (
+					<MessageBubble
+						key={id}
+						content={content}
+						isFirst={i === 0}
+						isLast={i === messages.length - 1}
+					/>
+				))}
+			</div>
+		</motion.li>
+	);
+}

src/components/spinquee.tsx

@@ -0,0 +1,104 @@
+import {MotionValue, motion, useSpring, useTransform} from 'framer-motion';
+import {useCallback, useEffect, useState, type PropsWithChildren} from 'react';
+
+export interface SpinqueeProps {
+	children: React.ReactNode[];
+	size: number;
+}
+
+function duplicateChildren(children: React.ReactNode[], multiplier: number) {
+	return [...Array(multiplier)].flatMap(() => children);
+}
+
+function Item({
+	children,
+	index,
+	angle,
+	total,
+	size,
+	activeIndex,
+}: PropsWithChildren<{
+	index: number;
+	angle: MotionValue<number>;
+	total: number;
+	size: number;
+	activeIndex: number;
+}>) {
+	const isActive = index % total === activeIndex;
+
+	return (
+		<motion.div
+			className={`absolute top-1/2 ${isActive ? 'highlight-class' : ''}`} // Add your highlight class here
+			style={{
+				rotate: useTransform(angle, value => value + index * (360 / total)),
+			}}
+		>
+			<div
+				className="block -rotate-[180deg]"
+				style={{
+					marginLeft: -size,
+					paddingLeft: size,
+				}}
+			>
+				{children}
+			</div>
+		</motion.div>
+	);
+}
+
+export function Spinquee({children, size}: SpinqueeProps) {
+	const angle = useSpring(0, {
+		stiffness: 1200,
+		damping: 30,
+		mass: 0.05,
+	});
+	const [activeIndex, setActiveIndex] = useState(0);
+	const [container, setContainer] = useState<HTMLDivElement | null>(null);
+
+	const duplicatedChildren = duplicateChildren(children, 10);
+
+	const snapToNearest = useCallback(() => {
+		const currentAngle = angle.get();
+		const anglePerItem = 360 / duplicatedChildren.length;
+		const nearestIndex = Math.round(currentAngle / anglePerItem) % duplicatedChildren.length;
+		const nearestAngle = nearestIndex * anglePerItem;
+		angle.set(nearestAngle);
+		setActiveIndex(nearestIndex);
+	}, [angle, duplicatedChildren.length]);
+
+	useEffect(() => {
+		if (!container) return;
+
+		let timeout: NodeJS.Timeout;
+		const wheel = (e: WheelEvent) => {
+			angle.set(angle.get() + e.deltaY / 10);
+			clearTimeout(timeout);
+			timeout = setTimeout(snapToNearest, 150); // Adjust delay as needed
+		};
+
+		container.addEventListener('wheel', wheel);
+
+		return () => {
+			container.removeEventListener('wheel', wheel);
+		};
+	}, [container, angle, snapToNearest]);
+
+	return (
+		<div ref={setContainer} className="h-full w-full">
+			<div className="absolute inset-0 top-1/2 w-full -translate-y-1/2">
+				{duplicatedChildren.map((child, index) => (
+					<Item
+						key={index}
+						size={size}
+						index={index}
+						angle={angle}
+						total={duplicatedChildren.length}
+						activeIndex={activeIndex}
+					>
+						{child}
+					</Item>
+				))}
+			</div>
+		</div>
+	);
+}

src/components/stats.tsx

@@ -8,7 +8,7 @@ export function Stats() {
 	const firstEverLoadTime = useMemo(() => new Date(stats.time), [stats.time]);
 
 	return (
-		<div className="m-4 mx-auto max-w-2xl rounded-md bg-blue-900 p-4 py-12">
+		<div className="m-4 mx-auto max-w-2xl rounded-md bg-blue-100 p-6 py-12 text-blue-800 dark:bg-blue-900 dark:text-blue-100">
 			<p>
 				You first visited my website on {firstEverLoadTime.toLocaleDateString()} at{' '}
 				{firstEverLoadTime.toLocaleTimeString()} and on this first visit, you were on the{' '}

src/globals.css

@@ -3,5 +3,16 @@
 @tailwind utilities;
 
 body {
-	@apply bg-grid-neutral-200/40 bg-neutral-100 text-neutral-900 antialiased dark:bg-grid-neutral-800/50 dark:bg-neutral-900 dark:text-neutral-100;
+	@apply overscroll-none bg-[#fefefe] text-neutral-900 antialiased dark:bg-[#040404] dark:text-neutral-100;
+}
+
+#__next {
+	@apply absolute inset-0;
+}
+
+#__next::before {
+	content: '';
+	background: url(/grain.jpeg) repeat center center;
+	background-size: 50%;
+	@apply fixed inset-0 -z-10 opacity-[0.03] dark:opacity-[0.018];
 }

src/hooks/use-lerp-transform.ts

@@ -0,0 +1,15 @@
+import {MotionValue, useTransform} from 'framer-motion';
+import {useRef} from 'react';
+
+export function useLerpTransform<I extends number>(value: MotionValue<I>) {
+	const prev = useRef<I>();
+
+	return useTransform(value, newValue => {
+		const prevValue = prev.current ?? newValue;
+		const lerpValue = prevValue + (newValue - prevValue) * 10;
+
+		prev.current = newValue;
+
+		return lerpValue;
+	});
+}

src/pages/404.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 export default function Page404() {
 	return (
 		<main className="mx-auto max-w-3xl space-y-2 px-6 pb-40 pt-16">
-			<p className="font-title text-3xl">404</p>
+			<p className="font-serif text-3xl">404</p>
 			<p>Sorry, I couldn't locate that page for ya</p>
 
 			<div>

src/pages/_app.tsx

@@ -1,22 +1,21 @@
 import '../globals.css';
 
 import type {AppProps} from 'next/app';
-import {Newsreader} from 'next/font/google';
-import font from 'next/font/local';
+import {Inter, Newsreader} from 'next/font/google';
 import Head from 'next/head';
 import {useEffect} from 'react';
 import {Toaster} from 'react-hot-toast';
 import {useFirstEverLoad, useVisitCounts} from '../hooks/use-first-ever-load';
 
-const title = Newsreader({
+const serif = Newsreader({
 	subsets: ['latin'],
 	weight: ['400', '200'],
 	style: 'italic',
 	fallback: ['serif'],
 });
 
-const body = font({
-	src: '../fonts/roobert-variable.woff2',
+const body = Inter({
+	subsets: ['latin'],
 });
 
 export default function App({Component, pageProps}: AppProps) {
@@ -33,7 +32,7 @@ export default function App({Component, pageProps}: AppProps) {
 			<style jsx global>
 				{`
 					:root {
-						--font-title: ${title.style.fontFamily};
+						--font-serif: ${serif.style.fontFamily};
 						--font-body: ${body.style.fontFamily};
 					}
 				`}

src/pages/_error.tsx

@@ -1,7 +1,7 @@
 export default function ErrorPage() {
 	return (
 		<main className="mx-auto max-w-3xl px-6 pb-40 pt-16">
-			<p className="font-title text-3xl">Uh oh...</p>
+			<p className="font-serif text-3xl">Uh oh...</p>
 			<p>Apologies, something went wrong there...</p>
 		</main>
 	);

src/pages/api/map.ts

@@ -0,0 +1,24 @@
+import {NextkitError} from 'nextkit';
+import {z} from 'zod';
+import {api} from '../../server/api';
+import {getMapURL} from '../../server/apple-maps';
+
+const querySchema = z.object({
+	theme: z.union([z.literal('light'), z.literal('dark')]),
+});
+
+export default api({
+	GET: async ({ctx, req}) => {
+		const lanyard = await ctx.lanyard.get();
+
+		if (!lanyard.kv.location) {
+			throw new NextkitError(404, 'No location found');
+		}
+
+		const {theme} = querySchema.parse(req.query);
+
+		return {
+			_redirect: getMapURL(lanyard.kv.location, theme),
+		};
+	},
+});