deps upgrade (2024-04-07) (#287)

* deps upgrade (2024-04-07)

* upgrade `@types/node`

* upgrade node to version 18

* upgrade to node version 20

* upgrade eslint + prettier

* fix eslint errors

* fix next/link errors

* disable `optimizeCss` experiment

* fix: base url issue

* fix: add DEPLOY_URL env

* chore(deps): more deps upgrades

.nvmrc

@@ -1 +1 @@
-16
+20

lib/base-url.ts

@@ -1,14 +1,28 @@
+const isNetlifyProdDeploy = process.env.CONTEXT === 'production';
+const isNetlifyPreviewOrBranchDeploy =
+  process.env.CONTEXT === 'deploy-preview' || process.env.CONTEXT === 'branch-deploy';
+
 export function getBaseUrl() {
   if (typeof window !== 'undefined') {
     // browser should use relative path
     return '';
   }
 
-  if (process.env.DEPLOY_PRIME_URL) {
-    // reference for netlify.com
+  if (process.env.URL && isNetlifyProdDeploy) {
+    // reference for Netlify (production)
+    return process.env.URL;
+  }
+
+  if (process.env.DEPLOY_PRIME_URL && isNetlifyPreviewOrBranchDeploy) {
+    // reference for Netlify (deploy preview)
     return process.env.DEPLOY_PRIME_URL;
   }
 
+  if (process.env.DEPLOY_URL) {
+    // reference for Netlify (commit hash id)
+    return process.env.DEPLOY_URL;
+  }
+
   if (process.env.VERCEL_URL) {
     // reference for vercel.com
     return `https://${process.env.VERCEL_URL}`;

lib/status-codes.ts

@@ -0,0 +1,6 @@
+export const statusCodes: { [code: number]: string } = {
+  400: 'Bad Request',
+  404: 'This page could not be found',
+  405: 'Method Not Allowed',
+  500: 'Internal Server Error',
+};

lib/twitch-api.ts

@@ -16,7 +16,7 @@ export function useTwitchStreams(user = 'resir014') {
   const { data, isLoading, error } = trpc.twitch.getTwitchStreams.useQuery({
     users: user,
   });
-  const streamInfo = Boolean(data?.data && data.data[0]);
+  const streamInfo = Boolean(data?.data[0]);
 
   return {
     isLoading,

modules/projects/project-item.tsx

@@ -39,8 +39,13 @@ export const ProjectItem: React.FC<ProjectFieldProps> = ({
         ) : null}
         <div className="space-y-1">
           <h2 className="text-xl lg:text-2xl leading-tight lg:leading-tight font-semibold">
-            <Link href="/projects/[slug]" as={`/projects/${slug}`} passHref>
-              <a className="helper-link-cover hover:underline">{title}</a>
+            <Link
+              href="/projects/[slug]"
+              as={`/projects/${slug}`}
+              passHref
+              className="helper-link-cover hover:underline"
+            >
+              {title}
             </Link>
           </h2>
           <p className="text-base text-chungking-grey-200">{description ?? ''}</p>

modules/video/video-card.tsx

@@ -24,7 +24,7 @@ export const VideoCard: React.FC<VideoCardProps> = ({
       {...rest}
     >
       {embed}
-      {title || children ? (
+      {title ?? children ? (
         <div className="relative space-y-3 p-6">
           {metadata}
           {title ? <h1 className="text-2xl font-semibold p-name">{title}</h1> : null}

next-sitemap.config.js

@@ -1,7 +1,10 @@
 /** @type {import('next-sitemap').IConfig} */
 module.exports = {
   siteUrl:
-    process.env.NEXT_PUBLIC_BASE_URL || process.env.DEPLOY_PRIME_URL || 'https://resir014.xyz',
+    process.env.NEXT_PUBLIC_BASE_URL ||
+    process.env.URL ||
+    process.env.DEPLOY_PRIME_URL ||
+    'https://resir014.xyz',
   generateRobotsTxt: true,
   robotsTxtOptions: {
     policies: [

next.config.js

@@ -13,11 +13,6 @@ const nextConfig = {
     ignoreDuringBuilds: true,
   },
 
-  // https://github.com/vercel/next.js/blob/v13.4.9/packages/next/src/server/config-shared.ts#L147-L300
-  experimental: {
-    optimizeCss: true,
-  },
-
   // This config won't be loaded until Netlify supports the `headers` option on `next.config.js`.
   // For now, when you make changes here, also make the necessary changes on `netlify.toml`.
   // https://github.com/netlify/netlify-plugin-nextjs/issues/150

package.json

@@ -14,20 +14,20 @@
     "format": "prettier --write \"./**/*.{ts,tsx}\"",
     "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
     "lint:fix": "eslint --fix \"**/*.{js,jsx,ts,tsx}\"",
-    "prepare": "husky install",
+    "prepare": "husky",
     "test": "npm run type-check && npm run lint",
     "type-check": "tsc --noEmit",
     "validate": "yarn lint && yarn type-check"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.17",
     "@resir014/tailwind-preset-chungking": "^0.1.4-canary.7",
-    "@tailwindcss/typography": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
     "@tanstack/react-query": "^4.32.6",
-    "@trpc/client": "^10.37.1",
-    "@trpc/next": "^10.37.1",
-    "@trpc/react-query": "^10.37.1",
-    "@trpc/server": "^10.37.1",
+    "@trpc/client": "^10.45.2",
+    "@trpc/next": "^10.45.2",
+    "@trpc/react-query": "^10.45.2",
+    "@trpc/server": "^10.45.2",
     "clsx": "^1.1.1",
     "copee": "^1.0.6",
     "date-fns": "^2.24.0",
@@ -37,54 +37,53 @@
     "glob": "^7.2.0",
     "googleapis": "^126.0.1",
     "gray-matter": "^4.0.3",
-    "htmr": "^1.0.1",
+    "htmr": "^1.0.2",
     "isomorphic-unfetch": "^3.1.0",
     "markdown-it": "^13.0.2",
     "markdown-it-implicit-figures": "^0.12.0",
     "markdown-it-shiki-twoslash": "^2.1.3",
-    "next": "13.4.7",
-    "next-seo": "^6.1.0",
+    "next": "14.1.4",
+    "next-seo": "^6.5.0",
     "nprogress": "^0.2.0",
     "query-string": "^7.1.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-feather": "^2.0.10",
-    "swr": "^1.0.1",
     "typeface-inter": "^3.18.1",
     "zod": "^3.22.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.6",
-    "@babel/eslint-plugin": "^7.17.7",
-    "@netlify/plugin-nextjs": "^4.40.2",
+    "@babel/core": "^7.24.4",
+    "@babel/eslint-plugin": "^7.23.5",
+    "@netlify/plugin-nextjs": "^5.8.1",
     "@types/glob": "^7.2.0",
     "@types/google.analytics": "^0.0.42",
     "@types/markdown-it": "^12.2.3",
-    "@types/node": "^14.17.9",
-    "@types/nprogress": "^0.2.0",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "autoprefixer": "^10.4.8",
-    "critters": "^0.0.16",
+    "@types/node": "^20.12.5",
+    "@types/nprogress": "^0.2.3",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "autoprefixer": "^10.4.20",
+    "critters": "^0.0.22",
     "cross-env": "^7.0.3",
-    "eslint": "8.44.0",
-    "eslint-config-kentcdodds": "^20.5.0",
-    "eslint-config-next": "^13.4.9",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-import-resolver-typescript": "^3.5.5",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
-    "husky": "^7.0.4",
-    "lint-staged": "^11.1.2",
-    "next-sitemap": "^4.1.8",
-    "postcss": "^8.4.31",
-    "prettier": "^2.4.1",
-    "react-is": "^17.0.2",
-    "stylelint": "^15.10.2",
-    "stylelint-config-recommended": "^13.0.0",
-    "tailwindcss": "^3.1.8",
-    "typescript": "^5.1.6"
+    "eslint": "8.57.0",
+    "eslint-config-kentcdodds": "^21.0.0",
+    "eslint-config-next": "^14.1.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "next-sitemap": "^4.2.3",
+    "postcss": "^8.4.49",
+    "prettier": "^3.2.5",
+    "react-is": "^18.2.0",
+    "stylelint": "^16.3.1",
+    "stylelint-config-recommended": "^14.0.0",
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5.4.4"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

pages/_error.tsx

@@ -3,19 +3,13 @@ import { ErrorProps } from 'next/error';
 import { NextSeo } from 'next-seo';
 
 import { MainContent } from '~/components/layout';
-import DefaultLayout from '~/layouts/default-layout';
 import { Page, PageBody } from '~/components/page';
+import DefaultLayout from '~/layouts/default-layout';
+import { statusCodes } from '~/lib/status-codes';
 import { PostHeader } from '~/modules/posts';
 
-const statusCodes: { [code: number]: string } = {
-  400: 'Bad Request',
-  404: 'This page could not be found',
-  405: 'Method Not Allowed',
-  500: 'Internal Server Error',
-};
-
 function CustomErrorPage({ statusCode, title }: ErrorProps) {
-  const errorMessage = React.useMemo(() => title ?? statusCodes[statusCode], [statusCode, title]);
+  const errorMessage = title ?? statusCodes[statusCode];
 
   return (
     <DefaultLayout>

types/next.ts

@@ -27,12 +27,12 @@ export type NextApiRequest<T extends Record<string, unknown> = { [k: string]: un
 
 export type NextApiHandler<
   T extends Record<string, unknown> = { [k: string]: unknown },
-  S extends Record<string, unknown> = { [k: string]: unknown }
+  S extends Record<string, unknown> = { [k: string]: unknown },
 > = (req: NextApiRequest<T>, res: NextApiResponse<S>) => Promise<void> | void;
 
 export type Middleware<
   T extends Record<string, unknown> = { [k: string]: unknown },
-  S extends Record<string, unknown> = { [k: string]: unknown }
+  S extends Record<string, unknown> = { [k: string]: unknown },
 > = (
   req: NextApiRequest<T>,
   res: NextApiResponse<S>,