v1.1

.env.sample

@@ -25,3 +25,4 @@ SUPABASE_SERVICE_KEY=''
 ################################################################################
 
 NEXT_PUBLIC_ALCHEMY_ID=''
+NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=''

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
     'next',
     'prettier',
   ],
+  ignorePatterns: ['/generated/*'],
   overrides: [],
   parser: '@typescript-eslint/parser',
   parserOptions: {

.vscode/settings.json

@@ -3,7 +3,7 @@
   "editor.rulers": [80, 100],
   "editor.tabSize": 2,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.formatOnSave": true,
   "eslint.validate": ["javascript", "javascriptreact"],

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 5/9
+Copyright (c) 2024 5/9
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,4 +1,4 @@
-[**5/9**](https://twitter.com/fiveoutofnine)'s personal website: [**fiveoutofnine.com**](https://fiveoutofnine.com).
+[**5/9**](https://x.com/fiveoutofnine)'s personal website: [**fiveoutofnine.com**](https://fiveoutofnine.com).
 
 ## Structure
 
@@ -9,10 +9,19 @@ The site is divided into 4 categories:
 - [`/design`](https://fiveoutofnine.com/design), documentation for my design system.
 - Other projects, pages, etc.
 
-## Running Locally
+## Local development
+
+### Installation
 
 ```sh
 git clone https://github.com/fiveoutofnine/www.git
 pnpm install
 pnpm run dev
 ```
+
+### Building
+
+```sh
+supabase gen types typescript --project-id $PROJECT_ID > generated/database.types.ts
+pnpm dlx next build
+```

components/pages/home/header.tsx → app/(components)/header.tsx

@@ -1,12 +1,11 @@
-import type { FC } from 'react';
-
-import { Github, Twitter } from 'lucide-react';
+import { Github } from 'lucide-react';
 
 import FiveoutofnineAvatar from '@/components/common/fiveoutofnine-avatar';
+import LogoIcon from '@/components/common/logo-icon';
 import LinkPreview from '@/components/templates/link-preview';
 import { Button } from '@/components/ui';
 
-const FiveoutofnineHeader: FC = () => {
+const FiveoutofnineHeader: React.FC = () => {
   return (
     <div className="flex flex-col items-center rounded-xl border border-gray-6 bg-gray-2 p-3 md:flex-row md:justify-between md:rounded-2xl md:p-6">
       <div className="flex w-full items-center">
@@ -18,16 +17,6 @@ const FiveoutofnineHeader: FC = () => {
           <div className="text-base font-semibold md:text-2xl">5/9</div>
           <span className="mt-0.5 text-sm text-gray-11 md:mt-1 md:text-base">
             Working on{' '}
-            <LinkPreview
-              className="font-medium text-gray-12 hover:underline"
-              href="https://waterfall.market"
-              src="/static/waterfall-market-preview.webp"
-              target="_blank"
-              rel="noreferrer noopener"
-            >
-              Waterfall
-            </LinkPreview>{' '}
-            and{' '}
             <LinkPreview
               className="font-medium text-gray-12 hover:underline"
               href="https://curta.wtf"
@@ -44,12 +33,7 @@ const FiveoutofnineHeader: FC = () => {
 
       {/* Links (desktop) */}
       <div className="hidden space-x-2 md:flex">
-        <Button
-          intent="primary"
-          href="https://twitter.com/fiveoutofnine"
-          leftIcon={<Twitter />}
-          newTab
-        >
+        <Button intent="info" href="https://x.com/fiveoutofnine" leftIcon={<LogoIcon.X />} newTab>
           Twitter
         </Button>
         <Button href="https://github.com/fiveoutofnine" leftIcon={<Github />} newTab>
@@ -60,10 +44,10 @@ const FiveoutofnineHeader: FC = () => {
       <div className="mt-4 flex w-full space-x-2 md:hidden">
         <Button
           size="md"
-          intent="primary"
+          intent="info"
           className="w-full"
-          href="https://twitter.com/fiveoutofnine"
-          leftIcon={<Twitter />}
+          href="https://x.com/fiveoutofnine"
+          leftIcon={<LogoIcon.X />}
         >
           Twitter
         </Button>
@@ -80,6 +64,4 @@ const FiveoutofnineHeader: FC = () => {
   );
 };
 
-FiveoutofnineHeader.displayName = 'FiveoutofnineHeader';
-
 export default FiveoutofnineHeader;

components/pages/home/featured-works/works/bit-twiddling.tsx → app/(components)/works/bit-twiddling.tsx

@@ -1,11 +1,9 @@
-import type { FC } from 'react';
-
 import { ExternalLink, PenTool } from 'lucide-react';
 
 import FeatureDisplayMinimal from '@/components/templates/feature-display-minimal';
 import { Button } from '@/components/ui';
 
-const BitTwiddlingFeature: FC = () => {
+const BitTwiddlingFeature: React.FC = () => {
   return (
     <FeatureDisplayMinimal
       className="col-span-2 w-full min-[960px]:col-span-3"
@@ -26,6 +24,4 @@ const BitTwiddlingFeature: FC = () => {
   );
 };
 
-BitTwiddlingFeature.displayName = 'BitTwiddlingFeature';
-
 export default BitTwiddlingFeature;

components/pages/home/featured-works/works/chess.tsx → app/(components)/works/chess.tsx

@@ -1,20 +1,22 @@
-import { type FC, useState } from 'react';
+'use client';
+
+import { useState } from 'react';
 
 import clsx from 'clsx';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 
-import type { ChessFeature } from '@/lib/types/chess';
 import { CHESS_NFT_FALLBACK } from '@/lib/constants/chess-nfts';
+import type { ChessFeature } from '@/lib/types/chess';
 
 import ChessPiece from '@/components/common/chess-piece';
 import CategoryTag from '@/components/templates/category-tag';
 import FeatureDisplay from '@/components/templates/feature-display';
 import { Button, IconButton, Tooltip } from '@/components/ui';
 
-const ChessFeature: FC = () => {
+const ChessFeature: React.FC = () => {
   return (
     <FeatureDisplay
-      className="w-full min-[960px]:w-64 col-span-2"
+      className="col-span-2 w-full min-[960px]:w-64"
       name="Chess"
       description="On-chain chess engine"
       symbol={
@@ -35,11 +37,9 @@ const ChessFeature: FC = () => {
         </svg>
       }
       button={
-        <Tooltip content='WIP'>
-          <Button size="sm" href="/chess" rightIcon={<ChevronRight />} disabled>
-            Play
-          </Button>
-        </Tooltip>
+        <Button size="sm" href="/chess" rightIcon={<ChevronRight />} disabled>
+          Play
+        </Button>
       }
       tags={[<CategoryTag key={0} category="NFT" />, <CategoryTag key={1} category="On-chain" />]}
     >
@@ -48,7 +48,7 @@ const ChessFeature: FC = () => {
   );
 };
 
-const ChessFeatureDetail: FC = () => {
+const ChessFeatureDetail: React.FC = () => {
   const [nft, setNft] = useState<ChessFeature>(CHESS_NFT_FALLBACK);
 
   const fetchNextMove = async () => {
@@ -75,44 +75,56 @@ const ChessFeatureDetail: FC = () => {
 
   return (
     <div className="relative flex h-full w-full space-x-2 p-2">
-      <Tooltip content={nft.name}>
+      <Tooltip content={nft.name} triggerProps={{ asChild: true }} inverted>
         <a
-          className="h-full rounded-lg"
+          className="h-full min-w-fit overflow-hidden rounded-lg border border-gray-7 transition-colors hover:border-gray-8"
           href={`https://etherscan.io/tx/${nft.txHash}`}
-          style={{
-            aspectRatio: '1 / 1',
-            transform: 'scale(0.128)', /* Height is hard-coded, so this should always be `0.128` */
-            transformOrigin: '0 0',
-          }}
+          style={{ aspectRatio: '1 / 1' }}
           target="_blank"
           rel="noopener noreferrer"
-          aria-label='View NFT mint transaction on Etherscan'
-          dangerouslySetInnerHTML={{
-            __html: Buffer.from(nft.image, 'base64')
-              .toString()
-              /* 62.5 = 8 * (1000 / 128) */
-              .replace('<section', '<section style="border-radius:62.5px"'),
-          }}
-        />
+          aria-label="View NFT mint transaction on Etherscan"
+        >
+          <div
+            style={{
+              aspectRatio: '1 / 1',
+              transform:
+                'scale(0.124)' /* Height is hard-coded, so this should always be `0.124` */,
+              transformOrigin: '0 0',
+            }}
+            dangerouslySetInnerHTML={{
+              __html: Buffer.from(nft.image, 'base64')
+                .toString()
+                // We replace `<section>` with an ID to tighten the selector.
+                // There have been issues with `section` selectors being
+                // erroneously applied to unexpected elements (e.g. extensions).
+                .replace('<section>', '<section id="__fiveoutofnine-chess-display">')
+                .replace('}section{', '}section#__fiveoutofnine-chess-display{'),
+            }}
+          />
+        </a>
       </Tooltip>
-      <IconButton
-        className="absolute bottom-2.5 left-1"
-        size="sm"
-        onClick={fetchPrevMove}
-        disabled={nft.tokenId === 0}
-        aria-label='View previous move'
+      <Tooltip content="Previous move" align="start" triggerProps={{ asChild: true }} inverted>
+        <IconButton
+          className="absolute bottom-3 left-1"
+          size="sm"
+          onClick={fetchPrevMove}
+          disabled={nft.tokenId === 0}
+          aria-label="View previous move"
         >
-        <ChevronLeft />
-      </IconButton>
-      <IconButton
-        className="absolute bottom-2.5 left-[6.25rem]"
-        size="sm"
-        onClick={fetchNextMove}
-        disabled={nft.tokenId === 100}
-        aria-label='View next move'
+          <ChevronLeft />
+        </IconButton>
+      </Tooltip>
+      <Tooltip content="Next move" align="end" triggerProps={{ asChild: true }} inverted>
+        <IconButton
+          className="absolute bottom-3 left-[6.125rem]"
+          size="sm"
+          onClick={fetchNextMove}
+          disabled={nft.tokenId === 100}
+          aria-label="View next move"
         >
-        <ChevronRight />
-      </IconButton>
+          <ChevronRight />
+        </IconButton>
+      </Tooltip>
 
       <div className="flex w-full flex-col justify-between">
         <div className="mx-auto grid w-[96px] grid-cols-6 grid-rows-6 overflow-hidden rounded border border-gray-6">
@@ -134,49 +146,49 @@ const ChessFeatureDetail: FC = () => {
                 <div
                   key={index}
                   className={clsx(
-                    'flex h-4 w-4 items-center justify-center text-[0.5rem]',
+                    'flex size-4 items-center justify-center text-[0.5rem]',
                     pieceOverlap > 1
                       ? 'bg-purple-9'
                       : nft.userMove.from === index
-                      ? 'bg-blue-3'
-                      : nft.userMove.to === index
-                      ? 'bg-blue-9'
-                      : nft.contractMove.from === index
-                      ? 'bg-red-3'
-                      : nft.contractMove.to === index
-                      ? 'bg-red-9'
-                      : (2709 >> index % 12) & 1
-                      ? 'bg-gray-9'
-                      : 'bg-gray-4',
+                        ? 'bg-blue-3'
+                        : nft.userMove.to === index
+                          ? 'bg-blue-9'
+                          : nft.contractMove.from === index
+                            ? 'bg-red-3'
+                            : nft.contractMove.to === index
+                              ? 'bg-red-9'
+                              : (2709 >> index % 12) & 1
+                                ? 'bg-gray-9'
+                                : 'bg-gray-4',
                   )}
                 >
                   {piece === '1' || piece === '9' ? (
-                    <ChessPiece.Pawn className={clsx('h-3 w-3', pieceColor)} />
+                    <ChessPiece.Pawn className={clsx('size-3', pieceColor)} />
                   ) : piece === '2' || piece === 'a' ? (
-                    <ChessPiece.Bishop className={clsx('h-3 w-3', pieceColor)} />
+                    <ChessPiece.Bishop className={clsx('size-3', pieceColor)} />
                   ) : piece === '3' || piece === 'b' ? (
-                    <ChessPiece.Rook className={clsx('h-3 w-3', pieceColor)} />
+                    <ChessPiece.Rook className={clsx('size-3', pieceColor)} />
                   ) : piece === '4' || piece === 'c' ? (
-                    <ChessPiece.Knight className={clsx('h-3 w-3', pieceColor)} />
+                    <ChessPiece.Knight className={clsx('size-3', pieceColor)} />
                   ) : piece === '5' || piece === 'd' ? (
-                    <ChessPiece.Queen className={clsx('h-3 w-3', pieceColor)} />
+                    <ChessPiece.Queen className={clsx('size-3', pieceColor)} />
                   ) : piece === '6' || piece === 'e' ? (
-                    <ChessPiece.King className={clsx('h-3 w-3', pieceColor)} />
+                    <ChessPiece.King className={clsx('size-3', pieceColor)} />
                   ) : null}
                 </div>
               );
             })}
         </div>
         <div className="flex justify-between text-[0.5rem] font-medium">
           <div>
-            <div className="text-blue-9">User</div>
+            <div className="text-blue-11">User</div>
             <div className="text-gray-12">
               {getPieceNotation(nft.userMove.from)} <span className="text-gray-11">-&gt;</span>{' '}
               {getPieceNotation(nft.userMove.to)}
             </div>
           </div>
           <div className="flex flex-col items-end">
-            <div className="text-red-9">Contract</div>
+            <div className="text-red-11">Contract</div>
             <div className="text-gray-12">
               {getPieceNotation(nft.contractMove.from)} <span className="text-gray-11">-&gt;</span>{' '}
               {getPieceNotation(nft.contractMove.to)}