feat: PWA

.github/workflows/bench.yml

@@ -15,12 +15,12 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v4
         with:
-          cache: npm
-          cache-dependency-path: ./package.json
+          cache: pnpm
+          cache-dependency-path: ./pnpm-lock.yml
           node-version: 20
 
       - name: 📥 Install deps
-        run: npm install
+        run: pnpm install
 
       - name: ⏱️ Bench
-        run: npm run bench
+        run: pnpm bench

.github/workflows/build.yml

@@ -15,18 +15,18 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v4
         with:
-          cache: npm
-          cache-dependency-path: ./package.json
+          cache: pnpm
+          cache-dependency-path: ./pnpm-lock.yml
           node-version: 20
 
       - name: 🏄 Copy test env vars
         run: cp .env.example .env
 
       - name: 📥 Install deps
-        run: npm install
+        run: pnpm install
 
       - name: 🛠 Setup Database
-        run: npx prisma migrate reset --force
+        run: pnpm db
 
       - name: ⚙️ Build
-        run: npm run build
+        run: pnpm build

.github/workflows/format.yml

@@ -15,15 +15,15 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v4
         with:
-          cache: npm
-          cache-dependency-path: ./package.json
+          cache: pnpm
+          cache-dependency-path: ./pnpm-lock.yml
           node-version: 20
 
       - name: 📥 Install deps
-        run: npm install
+        run: pnpm install
 
       - name: 👔 Format
-        run: npm run format
+        run: pnpm format
 
       - name: 💪 Commit
         run: |

.github/workflows/lint.yml

@@ -1,4 +1,4 @@
-name: ⬣ Lint
+name: 🔬 Lint
 on: [push]
 
 concurrency:
@@ -15,12 +15,12 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v4
         with:
-          cache: npm
-          cache-dependency-path: ./package.json
+          cache: pnpm
+          cache-dependency-path: ./pnpm-lock.yml
           node-version: 20
 
       - name: 📥 Install deps
-        run: npm install
+        run: pnpm install
 
       - name: 🔬 Lint
-        run: npm run lint
+        run: pnpm lint

.github/workflows/test.yml

@@ -15,12 +15,12 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v4
         with:
-          cache: npm
-          cache-dependency-path: ./package.json
+          cache: pnpm
+          cache-dependency-path: ./pnpm-lock.yml
           node-version: 20
 
       - name: 📥 Install deps
-        run: npm install
+        run: pnpm install
 
       - name: 🔍 Test
-        run: npm run test
+        run: pnpm test

.github/workflows/typecheck.yml

@@ -15,12 +15,12 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v4
         with:
-          cache: npm
-          cache-dependency-path: ./package.json
+          cache: pnpm
+          cache-dependency-path: ./pnpm-lock.yml
           node-version: 20
 
       - name: 📥 Install deps
-        run: npm install
+        run: pnpm install
 
-      - name: 🔎 Type check
-        run: npm run typecheck
+      - name: ʦ Type check
+        run: pnpm typecheck

.prettierignore

@@ -5,4 +5,4 @@ node_modules
 /static
 
 .env
-package-lock.json
+pnpm-lock.yaml

README.md

@@ -17,6 +17,7 @@ Polygon-based web game inspired by [generals.io](https://generals.io).
 ## Prerequisites
 
 - [Node 20+](https://nodejs.org/)
+- [pnpm](https://pnpm.io/)
 
 ## Development
 
@@ -29,28 +30,28 @@ cp .env.example .env
 - Install dependencies:
 
 ```sh
-npm install
+pnpm install
 ```
 
 - Setup database:
 
 ```sh
-npm run setup
+pnpm db
 ```
 
 - Start dev server:
 
 ```sh
-npm run dev
+pnpm dev
 ```
 
 ## Deployment
 
 We use [PM2](https://pm2.keymetrics.io/) for deployment.
 
 ```sh
-npm run build
-npm run start # Spawns a PM2 daemon named "polygen"
+pnpm build
+pnpm start # Spawns a PM2 daemon named "polygen"
 ```
 
 The HTTP server listens on port 1606 by default, which can be configured through .env file.
@@ -60,12 +61,12 @@ The HTTP server listens on port 1606 by default, which can be configured through
 Before pushing your commits, be sure to run through all the checks:
 
 ```sh
-npm run build
-npm run lint
-npm run typecheck
-npm run test
-npm run bench
-npm run format
+pnpm build
+pnpm lint
+pnpm typecheck
+pnpm test
+pnpm bench
+pnpm format
 ```
 
 ## License

app/components/community/textRenderer.tsx

@@ -1,15 +1,10 @@
-import { Link } from "@chakra-ui/react";
 import ChakraUIRenderer from "chakra-ui-markdown-renderer";
 import ReactMarkdown from "react-markdown";
 import type { ReactMarkdownOptions } from "react-markdown/lib/react-markdown";
 import rehypeKatex from "rehype-katex";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 
-import UserTag from "../user/userTag";
-
-import remarkMention from "./remarkMention";
-
 // Workaround for buggy upstream package.
 const renderer = (
   typeof ChakraUIRenderer === "function" // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -23,23 +18,8 @@ export default function TextRenderer({
 }: ReactMarkdownOptions) {
   return (
     <ReactMarkdown
-      components={{
-        ...renderer,
-        a: props => {
-          const href = props.href;
-          if (href?.startsWith("/at?")) {
-            return (
-              <UserTag
-                username={decodeURIComponent(href.substring(4))}
-                textDecoration="inherit"
-              />
-            );
-          }
-
-          return <Link {...props} />;
-        }
-      }}
-      remarkPlugins={[remarkGfm, remarkMath, remarkMention]}
+      components={renderer}
+      remarkPlugins={[remarkGfm, remarkMath]}
       rehypePlugins={[[rehypeKatex, { output: "html", throwOnError: false }]]}
       {...props}
     >

app/components/layout/backToTop.tsx

@@ -1,4 +1,4 @@
-import { IconButton } from "@chakra-ui/button";
+import { IconButton } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { FiArrowUp } from "react-icons/fi";
 
@@ -26,16 +26,16 @@ export default function BackToTop() {
 
   return (
     <IconButton
-      aria-label="Back to top"
-      icon={<FiArrowUp />}
       pos="fixed"
-      bottom={6}
-      right={6}
       zIndex={387}
+      right={6}
+      bottom={6}
       shadow="xl"
+      transform={isVisible ? undefined : "translateX(64px)"}
+      aria-label="Back to top"
       colorScheme="blue"
+      icon={<FiArrowUp />}
       onClick={scrollToTop}
-      transform={isVisible ? undefined : "translateX(64px)"}
     />
   );
 }

app/root.tsx

@@ -110,6 +110,20 @@ export default function App() {
           content="polygen is a polygon-based web game inspired by generals.io."
         />
 
+        <link rel="icon" href="/favicon.ico" sizes="48x48" />
+
+        <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
+
+        <link
+          rel="apple-touch-icon"
+          href="/apple-touch-icon-180x180.png"
+          sizes="180x180"
+        />
+
+        <meta name="theme-color" content="#ffffff" />
+
+        <link rel="manifest" href="/manifest.webmanifest" />
+
         <Meta />
 
         <Links />