feat: homepage

package.json

@@ -43,8 +43,10 @@
     "next": "^13.4.19",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-fuzzysort": "^1.0.1",
     "satori": "^0.10.4",
     "vite-node": "^0.34.4",
+    "vitepress": "^1.0.0-rc.12",
     "vitepress-plugin-auto-sidebar": "^1.1.0"
   },
   "devDependencies": {
@@ -58,7 +60,6 @@
     "compare-versions": "^6.1.0",
     "knip": "^2.22.0",
     "prettier": "^3.0.3",
-    "typescript": "^5.2.2",
+    "typescript": "^5.2.2"
-    "vitepress": "^1.0.0-rc.10"
   }
 }

src/app/layout.tsx

@@ -1,3 +1,4 @@
+import { Roboto_Flex } from 'next/font/google';
 import { ReactNode } from 'react';
 import Navbar from '../components/Navbar';
 
@@ -5,9 +6,14 @@ interface RootLayoutProps {
   children: ReactNode;
 }
 
+const robotoFlex = Roboto_Flex({
+  subsets: ['latin'],
+  display: 'swap',
+});
+
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
-    <html>
+    <html lang="en" className={robotoFlex.className}>
       <body
         style={{
           margin: 0,
@@ -20,11 +26,14 @@ export default function RootLayout({ children }: RootLayoutProps) {
             display: 'flex',
             flexDirection: 'column',
             background: 'url(https://i.imgur.com/PhS06NJ.png)',
+            alignItems: 'center',
           }}
         >
           <Navbar />
 
-          {children}
+          <div style={{ flex: 1, maxWidth: 780, width: '100%' }}>
+            {children}
+          </div>
         </div>
       </body>
     </html>

src/app/page.tsx

@@ -1,3 +1,131 @@
+'use client';
+
+import { CaretRightIcon } from '@radix-ui/react-icons';
+import Link from 'next/link';
+import { useRef } from 'react';
+import { Search, SearchItem } from 'react-fuzzysort';
+import { SearchBar } from '../components/SearchBar';
+import { theme } from '../stitches.config';
+
+const TOOLS = [
+  {
+    title: 'Ratings',
+    description: 'Current and old season leader boards',
+    banner: '/assets/banners/ratings.png',
+    href: '/tools/ratings',
+  },
+  {
+    title: 'Tankopedia',
+    description: 'Full Blitz tank encyclopedia',
+    banner: '/assets/banners/tank.png',
+    href: '/tools/tankopedia',
+  },
+  {
+    title: 'Inactivity tracker',
+    description: 'Find inactive members of a clan',
+    banner: '/assets/banners/inactive.png',
+    href: '/tools/inactive',
+  },
+  {
+    title: 'Player profile',
+    description: "A player's basic non-statistical info",
+    banner: '/assets/banners/player.png',
+    href: '/tools/profile',
+  },
+  {
+    title: 'More coming soon',
+    description: 'New tools are added often',
+    banner: '/assets/banners/more.png',
+    href: 'https://discord.gg/nDt7AjGJQH',
+  },
+];
+
 export default function Page() {
-  return <h1>Hello, Next.js!</h1>;
+  const input = useRef<HTMLInputElement>(null);
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        padding: 16,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+      }}
+    >
+      <SearchBar ref={input} />
+
+      <div
+        style={{
+          display: 'flex',
+          gap: 16,
+          flexWrap: 'wrap',
+        }}
+      >
+        <Search
+          input={input}
+          list={TOOLS.map(
+            (tool) =>
+              ({
+                node: (
+                  <Link
+                    href={tool.href}
+                    style={{
+                      height: 128,
+                      minWidth: 256,
+                      flex: 1,
+                      borderRadius: 4,
+                      textDecoration: 'none',
+                      backgroundImage: `url(${tool.banner})`,
+                      backgroundSize: 'cover',
+                      backgroundPosition: 'center',
+                      overflow: 'hidden',
+                    }}
+                  >
+                    <div
+                      style={{
+                        boxSizing: 'border-box',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'flex-start',
+                        justifyContent: 'flex-end',
+                        padding: 16,
+                        gap: 4,
+                        background: 'linear-gradient(#00000000, #000000ff)',
+                        height: '100%',
+                        width: '100%',
+                      }}
+                    >
+                      <span
+                        style={{
+                          fontSize: 32,
+                          color: theme.colors.textHighContrast,
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                        }}
+                      >
+                        {tool.title}
+                        <CaretRightIcon
+                          style={{ width: '1em', height: '1em' }}
+                        />
+                      </span>
+                      <span
+                        style={{
+                          color: theme.colors.textLowContrast,
+                          fontSize: 16,
+                        }}
+                      >
+                        {tool.description}
+                      </span>
+                    </div>
+                  </Link>
+                ),
+                query: `${tool.title} ${tool.description}`,
+              }) satisfies SearchItem,
+          )}
+        />
+      </div>
+    </div>
+  );
 }

src/components/Navbar/components/Button.tsx

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import { theme } from '../../../stitches.config';
 
 interface ButtonProps {
   children: ReactNode;
@@ -9,7 +8,7 @@ export function Button({ children }: ButtonProps) {
   return (
     <button
       style={{
-        padding: theme.spaces.paddingMajor,
+        padding: 16,
         border: 'none',
         cursor: 'pointer',
         background: 'none',

src/components/Navbar/index.tsx

@@ -1,4 +1,5 @@
 import { HamburgerMenuIcon, PersonIcon } from '@radix-ui/react-icons';
+import Link from 'next/link';
 import { theme } from '../../stitches.config';
 import { BlitzkriegWormWide } from '../BlitzkriegWormWide';
 import { Button } from './components/Button';
@@ -7,17 +8,21 @@ export default function Navbar() {
   return (
     <div
       style={{
+        width: '100%',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
         color: theme.colors.textHighContrast,
         backgroundColor: theme.colors.appBackground2,
+        borderBottom: theme.borderStyles.nonInteractive,
       }}
     >
       <Button>
         <HamburgerMenuIcon />
       </Button>
-      <BlitzkriegWormWide />
+      <Link href="/" style={{ color: 'inherit' }}>
+        <BlitzkriegWormWide />
+      </Link>
       <Button>
         <PersonIcon />
       </Button>

src/components/SearchBar.tsx

@@ -0,0 +1,45 @@
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { ComponentProps, forwardRef, useImperativeHandle, useRef } from 'react';
+import { theme } from '../stitches.config';
+
+export const SearchBar = forwardRef<HTMLInputElement, ComponentProps<'input'>>(
+  (props, ref) => {
+    const input = useRef<HTMLInputElement>(null);
+
+    useImperativeHandle(ref, () => input.current!);
+
+    return (
+      <div
+        style={{
+          display: 'flex',
+          padding: 8,
+          borderRadius: 16,
+          border: theme.borderStyles.interactive,
+          backgroundColor: theme.colors.componentInteractive,
+          color: theme.colors.textLowContrast,
+          fontSize: 16,
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 8,
+          cursor: 'text',
+        }}
+        onClick={() => input.current?.focus()}
+      >
+        <MagnifyingGlassIcon style={{ width: '1em', height: '1em' }} />
+        <input
+          {...props}
+          ref={input}
+          style={{
+            flex: 1,
+            color: theme.colors.textHighContrast,
+            backgroundColor: 'transparent',
+            border: 'none',
+            outline: 'none',
+            fontSize: 'inherit',
+          }}
+          placeholder="Search tools..."
+        />
+      </div>
+    );
+  },
+);

yarn.lock

@@ -1917,6 +1917,11 @@ lodash.curry@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
   integrity sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
+
 lodash.snakecase@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz#39d714a35357147837aefd64b5dcbb16becd8f8d"
@@ -2293,6 +2298,14 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-fuzzysort@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-fuzzysort/-/react-fuzzysort-1.0.1.tgz#2878c891394f8af21bd79e3d57052f3fa90d41dd"
+  integrity sha512-RYhOsnX38KmJ0OywZrCiuMCsodL3zES69w6QlYbXxboPBO67REO7YWt98Lc8F+HZRQGArzpNemsufSW065UmFw==
+  dependencies:
+    fuzzysort "^2.0.4"
+    lodash.debounce "^4.0.8"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -2416,7 +2429,7 @@ shell-quote-word@^1.0.1:
   resolved "https://registry.yarnpkg.com/shell-quote-word/-/shell-quote-word-1.0.1.tgz#e2bdfd22d599fd68886491677e38f560f9d469c9"
   integrity sha512-lT297f1WLAdq0A4O+AknIFRP6kkiI3s8C913eJ0XqBxJbZPGWUNkRQk2u8zk4bEAjUJ5i+fSLwB6z1HzeT+DEg==
 
-shiki@^0.14.3:
+shiki@^0.14.4:
   version "0.14.4"
   resolved "https://registry.yarnpkg.com/shiki/-/shiki-0.14.4.tgz#2454969b466a5f75067d0f2fa0d7426d32881b20"
   integrity sha512-IXCRip2IQzKwxArNNq1S+On4KPML3Yyn8Zzs/xRgcgOWIr8ntIK3IKzjFPfjy/7kt9ZMjc+FItfqHRBg8b6tNQ==
@@ -2660,10 +2673,10 @@ vitepress-plugin-auto-sidebar@^1.1.0:
   resolved "https://registry.yarnpkg.com/vitepress-plugin-auto-sidebar/-/vitepress-plugin-auto-sidebar-1.1.0.tgz#d8131e31143e99b6e142cb7d23b9323a578a862b"
   integrity sha512-LgkpjKVlNlQS54PFv5R/Y4+CHtHoXsJ3xgyVTKNi0sG1fXUmViKCg3Hnl9eo/SfNn894qsNRXoNneQmRBP2Lmw==
 
-vitepress@^1.0.0-rc.10:
+vitepress@^1.0.0-rc.12:
-  version "1.0.0-rc.10"
+  version "1.0.0-rc.12"
-  resolved "https://registry.yarnpkg.com/vitepress/-/vitepress-1.0.0-rc.10.tgz#c33361e84a1ad64d3eb3039dc302dc4f00054585"
+  resolved "https://registry.yarnpkg.com/vitepress/-/vitepress-1.0.0-rc.12.tgz#474fbbc248aad02cf27246badc266dd0ebadc3e2"
-  integrity sha512-+MsahIWqq5WUEmj6MR4obcKYbT7im07jZPCQPdNJExkeOSbOAJ4xypSLx88x7rvtzWHhHc5aXbOhCRvGEGjFrw==
+  integrity sha512-mZknN5l9lgbBjXwumwdOQQDM+gPivswFEykEQeenY0tv7eocS+bb801IpFZT3mFV6YRhSddmbutHlFgPPADjEg==
   dependencies:
     "@docsearch/css" "^3.5.2"
     "@docsearch/js" "^3.5.2"
@@ -2673,7 +2686,7 @@ vitepress@^1.0.0-rc.10:
     focus-trap "^7.5.2"
     mark.js "8.11.1"
     minisearch "^6.1.0"
-    shiki "^0.14.3"
+    shiki "^0.14.4"
     vite "^4.4.9"
     vue "^3.3.4"