Canary

.github/workflows/unlighthouse.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - run: npm install -g @unlighthouse/cli puppeteer
+      - run: npm install -g @unlighthouse/cli@0.12.1 puppeteer
       - run: npm list -g @unlighthouse/cli
       - run: unlighthouse-ci --site ${{ github.event.deployment_status.environment_url }}
       - uses: actions/upload-artifact@v4

next.config.mjs

@@ -21,7 +21,6 @@ const sharedSvgoPlugins = [
 const config = {
   compiler: {
     emotion: true,
-    removeConsole: env.NODE_ENV === 'production',
   },
   images: {
     formats: ['image/avif', 'image/webp'],
@@ -134,10 +133,11 @@ const config = {
   ],
   logging: { fetches: { fullUrl: true } },
   experimental: {
+    reactCompiler: false, // disabling for now since watch() from React Hook Form isn't returning the updated form value
     ppr: true,
+    after: true,
     webpackBuildWorker: true,
     optimizePackageImports: ['@mui/joy'],
-    // reactCompiler: true, // disabling for now since watch() from React Hook Form isn't returning the updated form value
   },
 };
 

package.json

@@ -21,7 +21,7 @@
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@hookform/resolvers": "^3.4.0",
+    "@hookform/resolvers": "^3.4.2",
     "@icons-pack/react-simple-icons": "^9.5.0",
     "@mui/base": "next",
     "@mui/joy": "next",
@@ -37,37 +37,37 @@
     "@react-email/text": "^0.0.8",
     "@t3-oss/env-core": "^0.10.1",
     "@t3-oss/env-nextjs": "^0.10.1",
-    "@vercel/analytics": "^1.2.2",
-    "@vercel/speed-insights": "^1.0.10",
-    "contentful": "^10.11.0",
+    "@vercel/analytics": "^1.3.1",
+    "@vercel/speed-insights": "^1.0.11",
+    "contentful": "^10.11.7",
     "dedent": "^1.5.3",
     "feed": "^4.2.2",
     "geist": "^1.3.0",
     "lodash-es": "^4.17.21",
-    "lucide-react": "^0.378.0",
-    "merge-sx": "^2.0.1",
-    "next": "canary",
-    "next-mdx-remote": "^4.4.1",
-    "react": "beta",
-    "react-dom": "beta",
-    "react-email": "^2.1.2",
-    "react-hook-form": "^7.51.4",
+    "lucide-react": "^0.381.0",
+    "merge-sx": "^2.0.2",
+    "next": "rc",
+    "next-mdx-remote": "^5.0.0",
+    "react": "rc",
+    "react-dom": "rc",
+    "react-email": "^2.1.4",
+    "react-hook-form": "^7.51.5",
     "rehype-pretty-code": "^0.13.2",
     "rehype-slug": "^6.0.0",
     "resend": "^3.2.0",
     "schema-dts": "^1.1.2",
     "server-only": "^0.0.1",
-    "shiki": "^1.5.2",
+    "shiki": "^1.6.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "canary",
-    "@next/eslint-plugin-next": "canary",
+    "@next/bundle-analyzer": "rc",
+    "@next/eslint-plugin-next": "rc",
     "@svgr/webpack": "^8.1.0",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.12.12",
-    "@types/react": "npm:types-react@beta",
-    "@types/react-dom": "npm:types-react-dom@beta",
+    "@types/node": "^20.13.0",
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc",
     "@vercel/style-guide": "^6.0.0",
     "babel-plugin-react-compiler": "latest",
     "dotenv-cli": "^7.4.2",
@@ -77,12 +77,12 @@
     "prettier": "^3.2.5",
     "prettier-plugin-prisma": "^5.0.0",
     "prisma": "^5.14.0",
-    "type-fest": "^4.18.2",
+    "type-fest": "^4.18.3",
     "typescript": "^5.4.5"
   },
   "overrides": {
-    "@react-email/render": "canary",
-    "@types/react": "npm:types-react@beta",
-    "@types/react-dom": "npm:types-react-dom@beta"
+    "@react-email/render": "^0.0.15",
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc"
   }
 }

patches/@types+mdx+2.0.13.patch

@@ -1,22 +1,10 @@
 diff --git a/node_modules/@types/mdx/types.d.ts b/node_modules/@types/mdx/types.d.ts
-index 498bb69..bc30ce1 100644
+index 498bb69..030a05f 100644
 --- a/node_modules/@types/mdx/types.d.ts
 +++ b/node_modules/@types/mdx/types.d.ts
-@@ -20,7 +20,7 @@ type ClassElementType = Extract<ElementType, new(props: Record<string, any>) =>
- /**
-  * A valid JSX string component.
-  */
--type StringComponent = Extract<keyof JSX.IntrinsicElements, ElementType extends never ? string : ElementType>;
-+type StringComponent = Extract<keyof React.JSX.IntrinsicElements, ElementType extends never ? string : ElementType>;
+@@ -1,3 +1,5 @@
++import { type JSX } from 'react'
++
+ // Internal helper types
 
  /**
-  * A JSX element returned by MDX content.
-@@ -70,7 +70,7 @@ interface NestedMDXComponents {
- export type MDXComponents =
-     & NestedMDXComponents
-     & {
--        [Key in StringComponent]?: Component<JSX.IntrinsicElements[Key]>;
-+        [Key in StringComponent]?: Component<React.JSX.IntrinsicElements[Key]>;
-     }
-     & {
-         /**

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

@@ -12,6 +12,7 @@ import {
 import { type Metadata } from 'next';
 import NextLink from 'next/link';
 import { notFound } from 'next/navigation';
+import { unstable_after as after } from 'next/server';
 import { type FC, Suspense } from 'react';
 import { type BlogPosting, type BreadcrumbList, type Graph } from 'schema-dts';
 
@@ -27,6 +28,7 @@ import { SectionDivider } from '@/components/section-divider';
 import { firstName, headline, lastName } from '@/constants/content';
 import { blog as blogNav, blogRssFeed, home } from '@/constants/nav';
 import { env } from '@/env.mjs';
+import { prisma } from '@/lib/clients';
 import { getPerson } from '@/lib/json-ld';
 import {
   getBlogBySlug,
@@ -43,6 +45,18 @@ interface BlogProps {
   params: { slug: string };
 }
 
+const IncrBlogView: FC<{ blogId: string }> = ({ blogId }) => {
+  after(
+    prisma.blogMetadata.upsert({
+      where: { id: blogId },
+      update: { view: { increment: 1 } },
+      create: { id: blogId },
+    }),
+  );
+
+  return null;
+};
+
 const Blog: FC<BlogProps> = async ({ params: { slug } }) => {
   const [blog, personalPhoto, socialMediaProfiles, person] = await Promise.all([
     getBlogBySlug(slug),
@@ -54,6 +68,11 @@ const Blog: FC<BlogProps> = async ({ params: { slug } }) => {
 
   return (
     <>
+      <ErrorBoundary>
+        <Suspense>
+          <IncrBlogView blogId={blog.id} />
+        </Suspense>
+      </ErrorBoundary>
       <main>
         <Container
           component="article"
@@ -82,11 +101,11 @@ const Blog: FC<BlogProps> = async ({ params: { slug } }) => {
                 spacing={1}
                 sx={{ alignItems: 'center', justifyContent: 'space-around' }}
               >
-                <Suspense fallback={<ViewsSkeleton sx={{ mx: 0.75 }} />}>
-                  <ErrorBoundary fallback={<ViewsError sx={{ mx: 0.75 }} />}>
+                <ErrorBoundary fallback={<ViewsError sx={{ mx: 0.75 }} />}>
+                  <Suspense fallback={<ViewsSkeleton sx={{ mx: 0.75 }} />}>
                     <Views blogId={blog.id} sx={{ mx: 0.75 }} />
-                  </ErrorBoundary>
-                </Suspense>
+                  </Suspense>
+                </ErrorBoundary>
                 <CopyUrlButton />
                 <ShareDropdown blog={blog} />
               </Stack>

src/app/blog/page.tsx

@@ -102,21 +102,15 @@ const Blogs: FC = async () => {
                         {dateFormatter.format(new Date(createdAt))}
                       </Typography>
                       <Divider orientation="vertical" />
-                      <Suspense
-                        fallback={<ViewsSkeleton hideIcon level="body-sm" />}
+                      <ErrorBoundary
+                        fallback={<ViewsError hideIcon level="body-sm" />}
                       >
-                        <ErrorBoundary
-                          fallback={<ViewsError hideIcon level="body-sm" />}
+                        <Suspense
+                          fallback={<ViewsSkeleton hideIcon level="body-sm" />}
                         >
-                          <Views
-                            fetchAll
-                            hideIcon
-                            readOnly
-                            blogId={id}
-                            level="body-sm"
-                          />
-                        </ErrorBoundary>
-                      </Suspense>
+                          <Views batch hideIcon blogId={id} level="body-sm" />
+                        </Suspense>
+                      </ErrorBoundary>
                     </CardContent>
                   </Card>
                 </Grid>