merge dev into main

next.config.js

@@ -49,6 +49,10 @@ const securityHeaders = [
     key: 'Permissions-Policy',
     value: 'camera=(), microphone=(), geolocation=()',
   },
+  {
+    key: 'Access-Control-Allow-Origin',
+    value: '*',
+  },
 ];
 
 /**
@@ -66,7 +70,6 @@ const nextConfig = {
     // Force SWC transform on build to stop Next.js trying to use babel
     // since babel is only needed to support vanilla-extract in unit tests
     forceSwcTransforms: true,
-    serverComponentsExternalPackages: ['shiki'],
   },
   images: {
     minimumCacheTTL: 120,

package.json

@@ -27,9 +27,9 @@
     "@fontsource/poppins": "^5.1.0",
     "@lukemorales/query-key-factory": "^1.3.4",
     "@mdx-js/mdx": "^3.1.0",
-    "@next/eslint-plugin-next": "^14.2.20",
-    "@next/mdx": "^15.0.3",
-    "@next/third-parties": "^14.2.20",
+    "@next/eslint-plugin-next": "15.0.4",
+    "@next/mdx": "15.0.4",
+    "@next/third-parties": "15.0.4",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/auto-instrumentations-node": "^0.53.0",
     "@opentelemetry/exporter-metrics-otlp-proto": "^0.55.0",
@@ -82,7 +82,7 @@
     "million": "^3.1.11",
     "motion": "^10.18.0",
     "nanoid": "^5.0.8",
-    "next": "^14.2.20",
+    "next": "15.0.4",
     "next-mdx-remote": "^5.0.0",
     "next-sanity": "9.8.10",
     "next-seo": "^6.6.0",
@@ -93,9 +93,9 @@
     "pino": "^9.5.0",
     "prism-react-renderer": "^2.4.0",
     "prom-client": "^15.1.3",
-    "react": "^18.3.1",
+    "react": "19.0.0",
     "react-children-utilities": "^2.10.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "19.0.0",
     "react-feather": "^2.0.10",
     "react-ga4": "^2.1.0",
     "react-icons": "5.2.1",
@@ -136,7 +136,7 @@
   "devDependencies": {
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
-    "@next/env": "^14.2.20",
+    "@next/env": "15.0.4",
     "@playwright/test": "^1.48.2",
     "@shikijs/rehype": "^1.23.0",
     "@svgr/webpack": "^8.1.0",
@@ -153,7 +153,7 @@
     "@types/lodash": "^4.17.13",
     "@types/node": "20.14.10",
     "@types/nprogress": "^0.2.3",
-    "@types/react": "18.3.12",
+    "@types/react": "19.0.1",
     "@types/rss": "^0.0.32",
     "@typescript-eslint/eslint-plugin": "8.12.2",
     "@typescript-eslint/parser": "8.12.2",
@@ -164,7 +164,7 @@
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "8.57.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-next": "^14.2.18",
+    "eslint-config-next": "15.0.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.3",
     "eslint-plugin-import": "^2.31.0",
@@ -215,5 +215,10 @@
     "hooks": {
       "prepare-commit-msg": "exec < /dev/tty && npx cz --hook || true"
     }
+  },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "19.0.1"
+    }
   }
 }

src/app/api/disable-draft/route.ts

@@ -4,7 +4,7 @@ export async function GET(request: Request) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { searchParams } = new URL(request.url);
 
-  const draft = draftMode();
+  const draft = await draftMode();
 
   draft.disable();
 

src/app/api/draft/route.ts

@@ -26,7 +26,7 @@ export async function GET(request: Request) {
     });
   }
 
-  const draft = draftMode();
+  const draft = await draftMode();
 
   draft.enable();
 

src/app/blog/[slug]/page.tsx

@@ -6,7 +6,6 @@ import Meta from '@frontend/components/Meta';
 import Page from '@frontend/components/Page';
 import Spacer from '@frontend/components/Spacer';
 import Text from '@frontend/components/Text';
-import siteConfig from '@frontend/config/site';
 import imageService from '@frontend/services/imageService';
 import postService from '@frontend/services/postService';
 import * as utils from '@frontend/styles/util.css';
@@ -17,18 +16,18 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
 
-export const revalidate = siteConfig.defaultRevalidate;
+export const revalidate = 1800;
 
 interface Props {
-  params: {
+  params: Promise<{
     slug: string;
-  };
+  }>;
 }
 
 export default async function PostPage({ params }: Props) {
-  const { slug } = params;
+  const { slug } = await params;
 
-  const { isEnabled } = draftMode();
+  const { isEnabled } = await draftMode();
 
   const post = await postService.getPost(slug, isEnabled);
 
@@ -119,7 +118,8 @@ export async function generateStaticParams() {
   }));
 }
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params;
   const { slug } = params;
 
   const post = await postService.getPost(slug, false);

src/app/blog/page.tsx

@@ -4,12 +4,11 @@ import Page from '@frontend/components/Page';
 import PostItem from '@frontend/components/PostItem';
 import Spacer from '@frontend/components/Spacer';
 import Text from '@frontend/components/Text';
-import siteConfig from '@frontend/config/site';
 import postService from '@frontend/services/postService';
 import { Post } from '@frontend/types/sanity';
 import { Metadata } from 'next';
 
-export const revalidate = siteConfig.defaultRevalidate;
+export const revalidate = 1800;
 
 export const metadata: Metadata = {
   title: 'Blog',

src/app/blog/tags/[slug]/page.tsx

@@ -3,20 +3,19 @@ import Heading from '@frontend/components/Heading';
 import Page from '@frontend/components/Page';
 import PostItem from '@frontend/components/PostItem';
 import Spacer from '@frontend/components/Spacer';
-import siteConfig from '@frontend/config/site';
 import postService from '@frontend/services/postService';
 import { Post } from '@frontend/types/sanity';
 
 interface Props {
-  params: {
+  params: Promise<{
     slug: string;
-  };
+  }>;
 }
 
-export const revalidate = siteConfig.defaultRevalidate;
+export const revalidate = 1800;
 
 export default async function TagPage({ params }: Props) {
-  const { slug } = params;
+  const { slug } = await params;
 
   const posts = await postService.getAllPosts();
 

src/app/page.tsx

@@ -6,15 +6,14 @@ import Page from '@frontend/components/Page';
 import PostItem from '@frontend/components/PostItem';
 import Spacer from '@frontend/components/Spacer';
 import Text from '@frontend/components/Text';
-import siteConfig from '@frontend/config/site';
 import postService from '@frontend/services/postService';
 import workService from '@frontend/services/workService';
 import { Metadata } from 'next';
 import dynamic from 'next/dynamic';
 
 const WorkItem = dynamic(() => import('@frontend/components/WorkItem'));
 
-export const revalidate = siteConfig.defaultRevalidate;
+export const revalidate = 1800;
 
 export const metadata: Metadata = {
   title: 'Home | lhowsam.com',

src/app/projects/[slug]/page.tsx

@@ -5,7 +5,6 @@ import Meta from '@frontend/components/Meta';
 import Page from '@frontend/components/Page';
 import Spacer from '@frontend/components/Spacer';
 import Text from '@frontend/components/Text';
-import siteConfig from '@frontend/config/site';
 import imageService from '@frontend/services/imageService';
 import projectService from '@frontend/services/projectService';
 import * as utils from '@frontend/styles/util.css';
@@ -18,16 +17,16 @@ import { notFound } from 'next/navigation';
 import { FiGithub } from 'react-icons/fi';
 
 interface Props {
-  params: {
+  params: Promise<{
     slug: string;
-  };
+  }>;
 }
 
-export const revalidate = siteConfig.defaultRevalidate;
+export const revalidate = 1800;
 
 export default async function ProjectPage({ params }: Props) {
-  const { slug } = params;
-  const { isEnabled } = draftMode();
+  const { slug } = await params;
+  const { isEnabled } = await draftMode();
 
   const project = await projectService.getProject(slug, isEnabled);
 
@@ -110,7 +109,8 @@ export async function generateStaticParams() {
   }));
 }
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params;
   const { slug } = params;
 
   const project = await projectService.getProject(slug);

src/app/projects/page.tsx

@@ -4,11 +4,10 @@ import * as List from '@frontend/components/List';
 import Page from '@frontend/components/Page';
 import ProjectItem from '@frontend/components/ProjectItem';
 import Text from '@frontend/components/Text';
-import siteConfig from '@frontend/config/site';
 import projectService from '@frontend/services/projectService';
 import { Metadata } from 'next';
 
-export const revalidate = siteConfig.defaultRevalidate;
+export const revalidate = 1800;
 
 export const metadata: Metadata = {
   title: 'Projects',

src/app/work/[slug]/page.tsx

@@ -6,24 +6,23 @@ import Meta from '@frontend/components/Meta';
 import Page from '@frontend/components/Page';
 import Spacer from '@frontend/components/Spacer';
 import Text from '@frontend/components/Text';
-import siteConfig from '@frontend/config/site';
 import imageService from '@frontend/services/imageService';
 import workService from '@frontend/services/workService';
 import { Metadata } from 'next';
 import { draftMode } from 'next/headers';
 import { notFound } from 'next/navigation';
 
 interface Props {
-  params: {
+  params: Promise<{
     slug: string;
-  };
+  }>;
 }
 
-export const revalidate = siteConfig.defaultRevalidate;
+export const revalidate = 1800;
 
 export default async function WorkSlugPage({ params }: Props) {
-  const { slug } = params;
-  const { isEnabled } = draftMode();
+  const { slug } = await params;
+  const { isEnabled } = await draftMode();
 
   const work = await workService.getWork(slug, isEnabled);
 
@@ -74,7 +73,8 @@ export async function generateStaticParams() {
   }));
 }
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params;
   const { slug } = params;
 
   const work = await workService.getWork(slug);

src/components/CommandMenu/CommandMenu.test.tsx

@@ -3,6 +3,7 @@ import baseRender from '@frontend/test/render';
 import { ToastProvider as RadixToastProvider } from '@radix-ui/react-toast';
 import { TooltipProvider as RadixTooltipProvider } from '@radix-ui/react-tooltip';
 import { fireEvent, screen, within } from '@testing-library/react';
+import type { JSX } from 'react';
 import CommandMenu from '.';
 
 function render(ui: JSX.Element) {

src/components/CommandMenu/index.tsx

@@ -54,6 +54,8 @@ const CommandItem = ({ children, value, onSelect }: CommandItemProps) => {
         <LazyMotion features={domAnimation}>
           <motion.span
             layoutId="highlight"
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
             className="highlight"
             transition={{
               duration: 0.2,

src/components/SocialShare/SocialShare.test.tsx

@@ -4,6 +4,7 @@ import { TooltipProvider as RadixTooltipProvider } from '@radix-ui/react-tooltip
 import { fireEvent, screen } from '@testing-library/react';
 import { usePathname } from 'next/navigation';
 import { MemoryRouterProvider } from 'next-router-mock/MemoryRouterProvider';
+import type { JSX } from 'react';
 import SocialShare from '.';
 
 function render(ui: JSX.Element) {

src/components/sanity/CustomMarkdownInput.tsx

@@ -1,5 +1,5 @@
 // CustomMarkdownInput.tsx
-import { useMemo } from 'react';
+import { useMemo, type JSX } from 'react';
 import { MarkdownInput, MarkdownInputProps } from 'sanity-plugin-markdown';
 
 export default function CustomMarkdownInput(

src/hooks/useDebouncedCallback.ts

@@ -20,7 +20,7 @@ export default function useDebouncedCallback<Args extends unknown[] = []>(
   callback: (...args: Args) => void,
   timeout = 0,
 ): UseDebouncedCallbackReturn<Args> {
-  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
   const callbackRef = useRef(callback);
   const mountedRef = useMountedRef();
 

src/hooks/useInterval.ts

@@ -13,7 +13,7 @@ export default function useInterval(
   const savedCallback = useRef<() => void>(callback);
   savedCallback.current = callback;
 
-  const interval = useRef<NodeJS.Timeout>();
+  const interval = useRef<NodeJS.Timeout>(undefined);
 
   const cancelInterval = useCallback(() => {
     if (interval.current) {

src/hooks/useMountedRef.ts

@@ -5,7 +5,7 @@ import { RefObject, useEffect, useRef } from 'react';
  * component is currently mounted or not.
  */
 
-export default function useMountedRef(): RefObject<boolean> {
+export default function useMountedRef(): RefObject<boolean | null> {
   const isMountedRef = useRef(false);
 
   useEffect(() => {

src/test/render.tsx

@@ -32,7 +32,8 @@ const DefaultWrapper = ({ children }: { children?: ReactNode }) => {
  * that would otherwise create unnecessary boilerplate.
  */
 export default function render(
-  ui: ReactElement,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ui: ReactElement<any>,
   options?: Omit<RenderOptions, 'queries'>,
 ): CustomRenderResult {
   return {

src/types/style.ts

@@ -4,6 +4,7 @@ import {
   ComponentPropsWithoutRef,
   ElementType,
   JSXElementConstructor,
+  type JSX,
 } from 'react';
 
 // Source: https://github.com/emotion-js/emotion/blob/master/packages/styled-base/types/helper.d.ts