Update to v2

.eslintrc.js

@@ -1,4 +1,106 @@
+/**
+ * This is intended to be a basic starting point for linting in the Indie Stack.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: ['@remix-run/eslint-config', '@remix-run/eslint-config/node'],
+  root: true,
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+
+  // Base config
+  extends: ['eslint:recommended'],
+
+  overrides: [
+    // React
+    {
+      files: ['**/*.{js,jsx,ts,tsx}'],
+      plugins: ['react', 'jsx-a11y'],
+      extends: [
+        'plugin:react/recommended',
+        'plugin:react/jsx-runtime',
+        'plugin:react-hooks/recommended',
+        'plugin:jsx-a11y/recommended',
+        'prettier',
+      ],
+      settings: {
+        react: {
+          version: 'detect',
+        },
+        formComponents: ['Form'],
+        linkComponents: [
+          { name: 'Link', linkAttribute: 'to' },
+          { name: 'NavLink', linkAttribute: 'to' },
+        ],
+      },
+      rules: {
+        'react/jsx-no-leaked-render': [
+          'warn',
+          { validStrategies: ['ternary'] },
+        ],
+      },
+    },
+
+    // Typescript
+    {
+      files: ['**/*.{ts,tsx}'],
+      plugins: ['@typescript-eslint', 'import'],
+      parser: '@typescript-eslint/parser',
+      settings: {
+        'import/internal-regex': '^~/',
+        'import/resolver': {
+          node: {
+            extensions: ['.ts', '.tsx'],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        'plugin:@typescript-eslint/recommended',
+        'plugin:@typescript-eslint/stylistic',
+        'plugin:import/recommended',
+        'plugin:import/typescript',
+        'prettier',
+      ],
+      rules: {
+        'import/order': [
+          'error',
+          {
+            alphabetize: { caseInsensitive: true, order: 'asc' },
+            groups: ['builtin', 'external', 'internal', 'parent', 'sibling'],
+            'newlines-between': 'always',
+          },
+        ],
+      },
+    },
+
+    // Markdown
+    // {
+    //   files: ['**/*.md'],
+    //   plugins: ['markdown'],
+    //   extends: ['plugin:markdown/recommended', 'prettier'],
+    // },
+
+    // Node
+    {
+      files: ['.eslintrc.js', 'mocks/**/*.js'],
+      env: {
+        node: true,
+      },
+    },
+  ],
 };

.github/workflows/fly-deploy.yml

@@ -11,8 +11,14 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
+  validate:
+    name: '✅ Validate'
+    runs-on: ubuntu-latest
+    run: npm run validate
+
   deploy:
-    name: Deploy
+    name: '🚀 Deploy'
+    needs: validate
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2

.npmrc

@@ -0,0 +1 @@
+save-exact=true

Dockerfile

@@ -1,11 +1,11 @@
-FROM node:16-alpine as build
+FROM node:18-alpine as build
 WORKDIR /brophy.org
 COPY package.json package-lock.json ./
 RUN npm ci
 COPY . .
 RUN npm run build
 
-FROM node:16-alpine as production
+FROM node:18-alpine as production
 WORKDIR /brophy.org
 COPY --from=build /brophy.org/package.json /brophy.org/package-lock.json ./
 COPY --from=build /brophy.org/node_modules ./node_modules

app/components/CircleLinks.tsx

@@ -1,4 +1,5 @@
 import { Link } from '@remix-run/react';
+
 import ExternalLink from './ExternalLink';
 
 interface LinkBodyProps {

app/components/PostList.tsx

@@ -1,10 +1,12 @@
 import { Link } from '@remix-run/react';
+
 import type { Post } from '~/ts/post-api';
+
 import PostMeta from './PostMeta';
 
-type PostListProps = {
+interface PostListProps {
   posts: Post[];
-};
+}
 
 export default function PostList({ posts }: PostListProps) {
   return (

app/components/PostMeta.tsx

@@ -1,17 +1,20 @@
 import { Link } from '@remix-run/react';
+
 import type { Post } from '~/ts/post-api';
 
-type PostMetaProps = {
+interface PostMetaProps {
   post: Post;
-};
+}
 
 export default function PostMeta({ post }: PostMetaProps) {
   let formattedDate = post.postDate;
   try {
     const date = new Date(post.postDate);
     const [, month, day, year] = date.toDateString().split(' ');
     formattedDate = `${month} ${day}, ${year}`;
-  } catch (e) {}
+  } catch (e) {
+    // No-op
+  }
 
   return (
     <p className="post-meta">

app/components/PostNav.tsx

@@ -1,15 +1,16 @@
 import { Link } from '@remix-run/react';
+
 import type { Post } from '~/ts/post-api';
 
-type PostNavProps = {
+interface PostNavProps {
   previousPost?: Post;
   nextPost?: Post;
-};
+}
 
 export default function PostNav({ previousPost, nextPost }: PostNavProps) {
   return (
     <div className="c-post-nav">
-      {previousPost && (
+      {previousPost ? (
         <div className="c-post-nav__link c-post-nav__link--previous">
           <Link
             className="c-post-nav__link-arrow"
@@ -26,9 +27,9 @@ export default function PostNav({ previousPost, nextPost }: PostNavProps) {
             {previousPost.title}
           </Link>
         </div>
-      )}
+      ) : null}
 
-      {nextPost && (
+      {nextPost ? (
         <div className="c-post-nav__link c-post-nav__link--next">
           <Link
             to={nextPost.permalink}
@@ -45,7 +46,7 @@ export default function PostNav({ previousPost, nextPost }: PostNavProps) {
             ⏩
           </Link>
         </div>
-      )}
+      ) : null}
     </div>
   );
 }

app/root.tsx

@@ -1,5 +1,4 @@
-import type { V2_MetaFunction } from '@remix-run/node';
-import type { LinksFunction } from '@remix-run/node';
+import type { MetaFunction, LinksFunction } from '@remix-run/node';
 import {
   Links,
   LiveReload,
@@ -8,9 +7,10 @@ import {
   Scripts,
   ScrollRestoration,
 } from '@remix-run/react';
+
 import appStyles from '~/styles/app.css';
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [
     { name: 'charset', content: 'utf-8' },
     { name: 'viewport', content: 'width=device-width, initial-scale=1' },
@@ -48,7 +48,7 @@ export default function App() {
         <Outlet />
         <ScrollRestoration />
         <Scripts />
-        {process.env.NODE_ENV === 'development' && <LiveReload />}
+        {process.env.NODE_ENV === 'development' ? <LiveReload /> : null}
       </body>
     </html>
   );

app/routes/_default.post.$slug.tsx

@@ -1,8 +1,7 @@
-import { useEffect } from 'react';
 import type {
   LinksFunction,
   LoaderFunction,
-  V2_MetaFunction,
+  MetaFunction,
 } from '@remix-run/node';
 import { json } from '@remix-run/node';
 import {
@@ -11,31 +10,33 @@ import {
   useLoaderData,
   useRouteError,
 } from '@remix-run/react';
+import { useEffect } from 'react';
 import invariant from 'tiny-invariant';
+
 import ExternalLink from '~/components/ExternalLink';
 import PostMeta from '~/components/PostMeta';
 import PostNav from '~/components/PostNav';
-import type { FullPost, Post } from '~/ts/post-api';
-import { getPost, getPosts } from '~/ts/post-api';
+import { meta as rootMeta } from '~/root';
 import prismStyles from '~/styles/prism.css';
+import { getPost, getPosts } from '~/ts/post-api';
+import type { FullPost, Post } from '~/ts/post-api';
 
-type LoaderData = {
+interface LoaderData {
   post: FullPost;
   previousPost: Post;
   nextPost: Post;
-};
+}
 
-export const meta: V2_MetaFunction<typeof loader, { root: any }> = ({
-  data,
-  matches,
-}) => {
+export const meta: MetaFunction<typeof loader> = ({ data, matches }) => {
   if (!data?.post) {
     return [{ title: 'Error' }];
   }
 
+  const rootMatchMeta = matches[0].meta as ReturnType<typeof rootMeta>;
   return [
-    // @ts-expect-error
-    ...matches[0].meta.filter((o) => !o.title && o.name !== 'description'),
+    ...rootMatchMeta.filter(
+      (m) => !('title' in m) && 'name' in m && m.name !== 'description'
+    ),
     { title: data.post.title },
     { name: 'og:title', content: data.post.title },
     { name: 'twitter:title', content: data.post.title },
@@ -95,7 +96,9 @@ export default function PostView() {
 
   useEffect(() => {
     if (document.querySelectorAll('.codepen').length === 0) {
-      return () => {};
+      return () => {
+        // no-op
+      };
     }
     const el = document.createElement('script');
     el.src = 'https://static.codepen.io/assets/embed/ei.js';
@@ -142,7 +145,7 @@ export default function PostView() {
 }
 
 export function ErrorBoundary() {
-  let error = useRouteError();
+  const error = useRouteError();
   if (isRouteErrorResponse(error)) {
     if (error.status === 404) {
       return (

app/routes/_default.posts.tsx

@@ -1,12 +1,13 @@
 import type { LoaderFunction } from '@remix-run/node';
 import { useLoaderData } from '@remix-run/react';
+
 import PostList from '~/components/PostList';
 import type { Post } from '~/ts/post-api';
 import { getPosts } from '~/ts/post-api';
 
-type LoaderData = {
+interface LoaderData {
   posts: Post[];
-};
+}
 
 export const loader: LoaderFunction = async (): Promise<LoaderData> => {
   const posts = await getPosts();

app/routes/_default.tag.$tag.tsx

@@ -1,14 +1,15 @@
 import type { LoaderFunction } from '@remix-run/node';
 import { useLoaderData } from '@remix-run/react';
 import invariant from 'tiny-invariant';
+
 import PostList from '~/components/PostList';
 import type { Post } from '~/ts/post-api';
 import { getPosts } from '~/ts/post-api';
 
-type LoaderData = {
+interface LoaderData {
   tag: string;
   posts: Post[];
-};
+}
 
 export const loader: LoaderFunction = async ({
   params,

app/routes/_default.tsx

@@ -1,14 +1,16 @@
 import type { LinksFunction, LoaderFunction } from '@remix-run/node';
 import { Outlet, useLoaderData, useMatches } from '@remix-run/react';
+
 import type { CircleLinkProps } from '~/components/CircleLinks';
 import CircleLinks from '~/components/CircleLinks';
 import SiteInfo from '~/components/SiteInfo';
+
 import defaultStyles from '../styles/default.css';
 
-type LoaderData = {
+interface LoaderData {
   headerLinks: CircleLinkProps[];
   footerLinks: CircleLinkProps[];
-};
+}
 
 export const links: LinksFunction = () => {
   return [
@@ -70,7 +72,13 @@ export const loader: LoaderFunction = (): LoaderData => {
 export default function DefaultLayout() {
   const matches = useMatches();
   const data: LoaderData = useLoaderData();
-  const isHomepage = matches.some((m) => m.handle?.isHomepage);
+  const isHomepage = matches.some(
+    (m) =>
+      m.handle != null &&
+      typeof m.handle === 'object' &&
+      'isHomepage' in m.handle &&
+      m.handle.isHomepage
+  );
 
   return (
     <div