Upgrade the entire stack

- convert project to ESM
- use Remix Vite plugin
- use TS Project References feature so that the entire project works
  both in VS Code and that it can be type checked with a single tsc call
- use Lefthook for defining git hooks, fixing staged files and defining
  custom commands
- use SVG sprites instead of icon packages
- craft our own ESLint config instead of using Remix config, this
  approach is recommended by the Remix team in their new templates
- handle all MDX via Vite instead of custom scripts, taking advantage of
  the module system and Vite's glob import feature
- implement Utterances ourselves to work the way we want, based on
  utterances-react-component
- convert Cloudinary esbuild plugin to a Vite plugin
- load Metronome via its Vite plugin
- use native Date over date-fns
- check code formatting on CI
- use Vite's ?raw import for inlining contents of redirects file
- prefer throwing redirects instead of returning them for easier
  TypeScript serialization

Author: silvenon

.dockerignore

@@ -1,8 +1,13 @@
 node_modules
 *.log
 .DS_Store
-.env
+
+.env*.local
+
 /.cache
 /build
-/public/build
-/app/posts
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache

.env

@@ -0,0 +1,3 @@
+CLOUDINARY_URL=
+SESSION_SECRET=
+GH_TOKEN=

.eslintignore

@@ -0,0 +1,14 @@
+node_modules
+
+/.cache
+/build
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache
+
+!.server
+!.client
+
+!.prettierrc.js

.eslintrc.cjs

@@ -0,0 +1,72 @@
+/** @type {import('@types/eslint').Linter.BaseConfig} */
+module.exports = {
+  root: true,
+  reportUnusedDisableDirectives: true,
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  extends: ['eslint:recommended'],
+  rules: {
+    'no-var': 'error',
+    'prefer-const': 'error',
+    'no-warning-comments': 'warn',
+    'no-use-before-define': ['error', { functions: false }],
+  },
+  overrides: [
+    {
+      files: ['.eslintrc.cjs'],
+      env: { node: true },
+    },
+    {
+      files: ['*.{ts,tsx}'],
+      extends: ['plugin:@typescript-eslint/recommended'],
+      parserOptions: {
+        project: ['./tsconfig.app.json', './integration/tsconfig.json'],
+        tsconfigRootDir: __dirname,
+      },
+      rules: {
+        'no-use-before-define': 'off',
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          {
+            args: 'after-used',
+            argsIgnorePattern: '^_',
+            ignoreRestSiblings: true,
+          },
+        ],
+        '@typescript-eslint/no-floating-promises': 'error',
+      },
+    },
+    {
+      files: ['*.tsx'],
+      extends: [
+        'plugin:react/recommended',
+        'plugin:react-hooks/recommended',
+        'plugin:jsx-a11y/recommended',
+      ],
+      settings: {
+        react: {
+          version: 'detect',
+        },
+      },
+      rules: {
+        'react/react-in-jsx-scope': 'off',
+      },
+    },
+    {
+      files: ['*.{test,spec}.{ts,tsx}'],
+      extends: ['plugin:testing-library/react'],
+    },
+    {
+      files: './integration/**/*.spec.ts',
+      rules: {
+        'testing-library/prefer-screen-queries': 'off',
+      },
+    },
+    {
+      files: ['**/*'],
+      extends: ['prettier'],
+    },
+  ],
+}

.eslintrc.js

@@ -16,45 +16,65 @@ permissions:
   contents: read
 
 jobs:
-  lint:
+  prettier:
+    name: Prettier
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Check formatting
+        run: npm run pretty
+
+  eslint:
     name: ESLint
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repo
         uses: actions/checkout@v4
 
-      - name: Setup node
+      - name: Setup Node
         uses: actions/setup-node@v4
         with:
+          node-version: 18
           cache: npm
-          cache-dependency-path: ./package.json
-          node-version-file: package.json
 
-      - name: Install deps
-        run: npm install
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Check config
+        run: npm run lint:check-config
 
       - name: Lint
         run: npm run lint
 
-  typecheck:
+  typescript:
     name: TypeScript
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repo
         uses: actions/checkout@v4
 
-      - name: Setup node
+      - name: Setup Node
         uses: actions/setup-node@v4
         with:
+          node-version: 18
           cache: npm
-          cache-dependency-path: ./package.json
-          node-version-file: package.json
 
-      - name: Install deps
-        run: npm install
+      - name: Install dependencies
+        run: npm ci
 
-      - name: Type check
-        run: npm run typecheck --if-present
+      - name: Check types
+        run: npm run typecheck
 
   vitest:
     name: Vitest
@@ -63,23 +83,22 @@ jobs:
       - name: Checkout repo
         uses: actions/checkout@v4
 
-      - name: Setup node
+      - name: Setup Node
         uses: actions/setup-node@v4
         with:
+          node-version: 18
           cache: npm
-          cache-dependency-path: ./package.json
-          node-version-file: package.json
 
-      - name: Install deps
-        run: npm install
+      - name: Install dependencies
+        run: npm ci
 
       - name: Compile posts
         run: npm run build:posts
         env:
           CLOUDINARY_URL: ${{ secrets.CLOUDINARY_URL }}
 
-      - name: Run vitest
-        run: npm run test:unit -- --coverage
+      - name: Run tests
+        run: npm run test:unit
         env:
           CLOUDINARY_URL: ${{ secrets.CLOUDINARY_URL }}
 
@@ -91,25 +110,38 @@ jobs:
       - name: Checkout repo
         uses: actions/checkout@v4
 
-      - name: Setup node
+      - name: Setup Node
         uses: actions/setup-node@v4
         with:
+          node-version: 18
           cache: npm
-          cache-dependency-path: ./package.json
-          node-version-file: package.json
 
-      - name: Install deps
-        run: npm install
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Add environment variables
+        run: |
+          echo "NODE_VERSION=$(node --version)" >> $GITHUB_ENV
+          npm list @playwright/test --depth=0 --json > npm-list-playwright.json
+          echo "PLAYWRIGHT_VERSION=$(node --print "require('./npm-list-playwright.json').dependencies['@playwright/test'].version")" >> $GITHUB_ENV
+
+      - name: Cache binaries
+        uses: actions/cache@v3
+        id: playwright-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: os-${{ runner.os }}-node-${{ env.NODE_VERSION }}-playwright-v${{ env.PLAYWRIGHT_VERSION }}
 
-      - name: Install Playwright Browsers
+      - name: Install browsers
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
         run: npx playwright install --with-deps
 
-      - name: Build
+      - name: Build app
         run: npm run build
         env:
           CLOUDINARY_URL: ${{ secrets.CLOUDINARY_URL }}
 
-      - name: Playwright run
+      - name: Run tests
         run: npm run test:e2e
         env:
           CLOUDINARY_URL: ${{ secrets.CLOUDINARY_URL }}
@@ -125,7 +157,7 @@ jobs:
   deploy:
     name: Deploy
     runs-on: ubuntu-latest
-    needs: [lint, typecheck, vitest, playwright]
+    needs: [prettier, eslint, typescript, vitest, playwright]
     # only deploy main/dev branch on pushes
     if: ${{ (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev') && github.event_name == 'push' }}
 

.github/workflows/deploy.yml

@@ -5,19 +5,17 @@ node_modules
 .DS_Store
 
 # text editors
-.vscode/*
-!.vscode/launch.json
 .idea
 
 # secrets
-.env
+.env*.local
 
 # build
+/.cache
 /build
-/public/build
-/app/posts
-/coverage
-tsconfig.tsbuildinfo
+
+# Playwright
 /test-results/
 /playwright-report/
-/playwright/.cache/
+/blob-report/
+/playwright/.cache

.gitignore

@@ -1,15 +1,11 @@
 node_modules
 
+/.cache
 /build
-/public/build
-/app/posts
-/coverage
 /playwright-report
 
 package-lock.json
 
-.env
-
 # Prettier doesn't yet play nice with MDX v2, for example it can't keep JSX
 # in a single line if it exceeds print width, which results in a nested <p>
 *.mdx
@@ -22,6 +18,3 @@ package-lock.json
 *.yaml
 
 README.md
-
-# tsconfig.json supports trailing commas, but Prettier doesn't know that
-tsconfig.json