Update to React server components / Next 14

.eslintrc.cjs

@@ -1,56 +1,61 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const path = require('path');
-
 /** @type {import("eslint").Linter.Config} */
 const config = {
-  overrides: [
-    {
-      extends: ['plugin:@typescript-eslint/recommended-requiring-type-checking'],
-      files: ['*.ts', '*.tsx'],
-      parserOptions: {
-        project: path.join(__dirname, 'tsconfig.json'),
-      },
-      rules: {
-        '@typescript-eslint/no-floating-promises': 'off',
-        '@typescript-eslint/no-misused-promises': 'off',
-      },
-    },
-  ],
-  parser: '@typescript-eslint/parser',
+  parser: "@typescript-eslint/parser",
   parserOptions: {
-    project: path.join(__dirname, 'tsconfig.json'),
+    project: true,
   },
-  plugins: ['@typescript-eslint', 'simple-import-sort'],
-  extends: ['next/core-web-vitals', 'plugin:@typescript-eslint/recommended', 'prettier'],
+  plugins: ["@typescript-eslint", "simple-import-sort", "prettier"],
+  extends: [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended-type-checked",
+    "plugin:@typescript-eslint/stylistic-type-checked",
+    "plugin:prettier/recommended",
+  ],
   rules: {
-    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
-    'simple-import-sort/imports': [
-      'warn',
+    "@typescript-eslint/array-type": "off",
+    "@typescript-eslint/consistent-type-definitions": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+      },
+    ],
+    "@typescript-eslint/require-await": "off",
+    "@typescript-eslint/no-misused-promises": [
+      "error",
+      {
+        checksVoidReturn: {
+          attributes: false,
+        },
+      },
+    ],
+    "simple-import-sort/imports": [
+      "warn",
       {
         groups: [
           [
-            '^react',
-            '^\\u0000',
-            '^node:',
-            '^@?\\w',
-            '^',
-            '^\\.',
-            '^node:.*\\u0000$',
-            '^@?\\w.*\\u0000$',
-            '^[^.].*\\u0000$',
-            '^\\..*\\u0000$',
+            "^react",
+            "^\\u0000",
+            "^node:",
+            "^@?\\w",
+            "^",
+            "^\\.",
+            "^node:.*\\u0000$",
+            "^@?\\w.*\\u0000$",
+            "^[^.].*\\u0000$",
+            "^\\..*\\u0000$",
           ],
         ],
       },
     ],
-    'simple-import-sort/exports': 'warn',
-    'import/first': 'warn',
-    'import/no-duplicates': 'warn',
-    '@typescript-eslint/consistent-type-imports': 'warn',
-    'import/consistent-type-specifier-style': ['warn', 'prefer-top-level'],
-    'react-hooks/exhaustive-deps': 'off',
+    "simple-import-sort/exports": "warn",
+    "import/first": "warn",
+    "import/no-duplicates": "warn",
+    "@typescript-eslint/consistent-type-imports": "warn",
+    "@next/next/no-img-element": "off",
+    "react-hooks/exhaustive-deps": "off",
   },
-  reportUnusedDisableDirectives: true,
 };
 
 module.exports = config;

.github/workflows/docker-main.yml

@@ -4,11 +4,11 @@ on:
   workflow_dispatch:
   push:
     branches: [main]
-    tags: 'v*.*.*'
+    tags: "v*.*.*"
 
 jobs:
   build:
-    name: 'Build and Push Docker Image'
+    name: "Build and Push Docker Image"
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

Dockerfile

@@ -1,14 +1,13 @@
-FROM node:18-alpine
-
-RUN apk add --no-cache yarn
+FROM node:lts
 
 WORKDIR /app
 
 COPY ./package.json ./package.json
-COPY ./yarn.lock ./yarn.lock
-RUN yarn
+RUN npm install
+
+ENV SKIP_ENV_VALIDATION=true
 
 COPY . .
-RUN export SKIP_ENV_VALIDATION && yarn build
+RUN npm run build
 
-CMD ["yarn", "start"]
+CMD ["npm", "run", "start"]

next.config.js

@@ -0,0 +1,10 @@
+/**
+ * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
+ * for Docker builds.
+ */
+await import("./src/env.js");
+
+/** @type {import("next").NextConfig} */
+const config = {};
+
+export default config;

package-old.json

@@ -0,0 +1,55 @@
+{
+  "name": "podmod",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "tsc --noEmit && prettier --check . && next lint",
+    "prettier": "prettier --write ."
+  },
+  "dependencies": {
+    "@heroicons/react": "2.0.18",
+    "@hookform/error-message": "2.0.1",
+    "@hookform/resolvers": "3.1.0",
+    "@t3-oss/env-nextjs": "0.3.1",
+    "@tailwindcss/forms": "0.5.3",
+    "@tanstack/react-query": "4.29.7",
+    "@trpc/client": "10.26.0",
+    "@trpc/next": "10.26.0",
+    "@trpc/react-query": "10.26.0",
+    "@trpc/server": "10.26.0",
+    "brotli-wasm": "1.3.1",
+    "clsx": "1.2.1",
+    "fast-xml-parser": "4.0.12",
+    "next": "13.4.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-hook-form": "7.44.2",
+    "superjson": "1.12.2",
+    "zod": "3.21.4"
+  },
+  "devDependencies": {
+    "@types/eslint": "8.37.0",
+    "@types/node": "18.16.0",
+    "@types/prettier": "2.7.2",
+    "@types/react": "18.2.14",
+    "@types/react-dom": "18.2.4",
+    "@typescript-eslint/eslint-plugin": "5.59.6",
+    "@typescript-eslint/parser": "5.59.6",
+    "autoprefixer": "10.4.14",
+    "eslint": "8.40.0",
+    "eslint-config-next": "13.4.2",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-simple-import-sort": "10.0.0",
+    "postcss": "8.4.21",
+    "prettier": "2.8.8",
+    "prettier-plugin-tailwindcss": "0.2.8",
+    "tailwindcss": "3.3.0",
+    "typescript": "5.0.4"
+  },
+  "ct3aMetadata": {
+    "initVersion": "7.15.0"
+  }
+}

package.json

@@ -1,7 +1,8 @@
 {
-  "name": "podmod",
+  "name": "podmod.app",
   "version": "1.0.0",
   "license": "MIT",
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -10,46 +11,40 @@
     "prettier": "prettier --write ."
   },
   "dependencies": {
-    "@heroicons/react": "2.0.18",
-    "@hookform/error-message": "2.0.1",
-    "@hookform/resolvers": "3.1.0",
-    "@t3-oss/env-nextjs": "0.3.1",
-    "@tailwindcss/forms": "0.5.3",
-    "@tanstack/react-query": "4.29.7",
-    "@trpc/client": "10.26.0",
-    "@trpc/next": "10.26.0",
-    "@trpc/react-query": "10.26.0",
-    "@trpc/server": "10.26.0",
-    "brotli-wasm": "1.3.1",
-    "clsx": "1.2.1",
-    "fast-xml-parser": "4.0.12",
-    "next": "13.4.2",
+    "@heroicons/react": "^2.1.3",
+    "@hookform/error-message": "^2.0.1",
+    "@hookform/resolvers": "^3.3.4",
+    "@t3-oss/env-nextjs": "^0.9.2",
+    "@tailwindcss/forms": "^0.5.7",
+    "brotli-compress": "^1.3.3",
+    "clsx": "^2.1.0",
+    "fast-xml-parser": "^4.3.6",
+    "next": "^14.1.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "7.44.2",
-    "superjson": "1.12.2",
-    "zod": "3.21.4"
+    "react-hook-form": "^7.51.3",
+    "superjson": "^2.2.1",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@types/eslint": "8.37.0",
-    "@types/node": "18.16.0",
-    "@types/prettier": "2.7.2",
-    "@types/react": "18.2.14",
-    "@types/react-dom": "18.2.4",
-    "@typescript-eslint/eslint-plugin": "5.59.6",
-    "@typescript-eslint/parser": "5.59.6",
-    "autoprefixer": "10.4.14",
-    "eslint": "8.40.0",
-    "eslint-config-next": "13.4.2",
-    "eslint-config-prettier": "8.8.0",
-    "eslint-plugin-simple-import-sort": "10.0.0",
-    "postcss": "8.4.21",
-    "prettier": "2.8.8",
-    "prettier-plugin-tailwindcss": "0.2.8",
-    "tailwindcss": "3.3.0",
-    "typescript": "5.0.4"
+    "@types/eslint": "^8.56.2",
+    "@types/node": "^20.11.20",
+    "@types/react": "^18.2.57",
+    "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.1.3",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-simple-import-sort": "^12.1.0",
+    "postcss": "^8.4.34",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.11",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.4.2"
   },
   "ct3aMetadata": {
-    "initVersion": "7.15.0"
+    "initVersion": "7.30.1"
   }
 }

postcss.config.cjs

@@ -1,7 +1,6 @@
 const config = {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {},
   },
 };
 

prettier.config.js

@@ -0,0 +1,7 @@
+/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
+const config = {
+  plugins: ["prettier-plugin-tailwindcss"],
+  printWidth: 100,
+};
+
+export default config;

src/app/[feedId]/feed/route.ts

@@ -0,0 +1,30 @@
+import { NextResponse } from "next/server";
+import { decompressModConfig } from "~/services/compressionService";
+import { buildFeed, fetchFeedData } from "~/services/feedService";
+import { applyMods } from "~/services/modService";
+
+const GET = async (request: Request, { params }: { params: { feedId: string } }) => {
+  try {
+    const { feedId } = params;
+
+    const host = request.headers.get("host") ?? "";
+    const searchParams =
+      host && request.url ? new URL(`http://${host}${request.url}`).searchParams : undefined;
+
+    const modConfig = await decompressModConfig(feedId);
+    const feedData = await fetchFeedData(modConfig.sources, searchParams);
+    if (!feedData) throw "Could not find feed data for sources";
+
+    const moddedFeedData = applyMods(feedData, modConfig);
+    const feed = buildFeed(moddedFeedData, feedId, host);
+
+    return new NextResponse(feed, { headers: { "Cache-Control": "s-maxage=600" } });
+  } catch (errorMessage) {
+    console.error(errorMessage);
+    return new NextResponse((errorMessage as string | undefined) ?? "Unexpected Error", {
+      status: 500,
+    });
+  }
+};
+
+export { GET };

src/app/[feedId]/page.tsx

@@ -0,0 +1,15 @@
+import MainPage from "~/components/MainPage";
+import { decompressModConfig } from "~/services/compressionService";
+
+type PageProps = {
+  params: {
+    feedId: string;
+  };
+};
+
+const Page = async ({ params }: PageProps) => {
+  const modConfig = await decompressModConfig(params.feedId);
+  return <MainPage initialModConfig={modConfig} />;
+};
+
+export default Page;