Major package updates (#52)

* ⬆️ Upgrade dependency remark-gfm to v4

* ⬆️ Upgrade dependency mdx-bundler to v10

* ⬆️ Upgrade nextjs monorepo to v14

* ⬆️ Upgrade dependency husky to v9

* ⬆️ Upgrade dependency shiki to v1

* ⬆️ Upgrade typescript-eslint monorepo to v7

* ⬆️ Upgrade dependency rehype-pretty-code to ^0.13.0

* chore: package lock

* fix: contentlayer nextjs 14

* fix: next-themes provider

* fix: contentlayer mdx fix

* fix: use metadata base

* fix: metadata type

* fix: contentlayer temp

* fix: small fixes

* fix: layout changes

* :doc: update projects

* chore: run prettier

* chore: tailwind linter

* fix: youtube accessibility

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

Author: jolbol1

.eslintrc.js

@@ -13,6 +13,7 @@ module.exports = {
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:jsx-a11y/recommended",
+    "plugin:tailwindcss/recommended",
     "next",
     "next/core-web-vitals",
     "prettier",
@@ -33,5 +34,7 @@ module.exports = {
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-var-requires": "off",
     "@typescript-eslint/ban-ts-comment": "off",
+    "tailwindcss/no-custom-classname": "off",
+    "tailwindcss/classnames-order": "error",
   },
 }

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

@@ -29,7 +29,7 @@ export default function About() {
     twitter,
     linkedin,
     github,
-    youtube
+    youtube,
   } = author
 
   return (

app/about/page.tsx

@@ -21,7 +21,7 @@ import Tag from "@/components/tag"
 import { coreContent, sortedBlogPost } from "../../../lib/contentlayer"
 
 const editUrl = (path: string) =>
-  `${siteMetadata.siteRepo}/blob/master/data/${path}`
+  `${siteMetadata.siteRepo}/blob/main/data/${path}`
 const discussUrl = (path: string) =>
   `https://twitter.com/intent/tweet?text=${encodeURIComponent(
     `${siteMetadata.siteUrl}/${path}`
@@ -83,12 +83,10 @@ export async function generateMetadata({
 
   const post = details.post
 
-  const url = siteMetadata.siteUrl
-
-  const ogUrl = new URL(`${url}/api/og`)
-  ogUrl.searchParams.set("heading", post.title)
-  ogUrl.searchParams.set("type", "Blog Post")
-  ogUrl.searchParams.set("mode", "dark")
+  const ogParams = new URLSearchParams()
+  ogParams.set("heading", post.title)
+  ogParams.set("type", "Blog Post")
+  ogParams.set("mode", "dark")
 
   return {
     title: post.title,
@@ -97,16 +95,16 @@ export async function generateMetadata({
       name: author,
     })),
     alternates: {
-      canonical: `${siteMetadata.siteUrl}/blog/${post.slug}`,
+      canonical: `/blog/${post.slug}`,
     },
     openGraph: {
       title: post.title,
       description: post.summary,
       type: "article",
-      url: `${siteMetadata.siteUrl}/blog/${post.slug}`,
+      url: `/blog/${post.slug}`,
       images: [
         {
-          url: ogUrl.toString(),
+          url: `/api/og?${ogParams.toString()}`,
           width: 1200,
           height: 630,
           alt: post.title,
@@ -117,7 +115,7 @@ export async function generateMetadata({
       card: "summary_large_image",
       title: post.title,
       description: post.summary,
-      images: [ogUrl.toString()],
+      images: [`/api/og?${ogParams.toString()}`],
     },
   }
 }

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

@@ -1,15 +1,15 @@
 import "@/styles/tailwind.css"
 
+import { Metadata, Viewport } from "next"
 import { Inter } from "next/font/google"
 import localFont from "next/font/local"
 
-import { ServerThemeProvider } from "next-themes"
-
 import siteMetadata from "@/config/site-metadata"
 
 import Analytics from "@/components/analytics"
 import Footer from "@/components/footer"
 import Nav from "@/components/nav"
+import { Providers } from "@/components/providers"
 
 const inter = Inter({
   subsets: ["latin"],
@@ -23,11 +23,14 @@ const jetbrains = localFont({
   display: "swap",
 })
 
-export const metadata = {
+export const metadata: Metadata = {
   title: {
     default: siteMetadata.title,
     template: `%s | ${siteMetadata.title}`,
   },
+  metadataBase: new URL(
+    process.env.NEXT_PUBLIC_APP_URL ?? siteMetadata.siteUrl
+  ),
   description: siteMetadata.description,
   keywords: [
     "Next.js",
@@ -44,10 +47,6 @@ export const metadata = {
     },
   ],
   creator: "James Shopland",
-  themeColor: [
-    { media: "(prefers-color-scheme: light)", color: "white" },
-    { media: "(prefers-color-scheme: dark)", color: "black" },
-  ],
   openGraph: {
     type: "website",
     locale: "en_GB",
@@ -57,7 +56,7 @@ export const metadata = {
     siteName: siteMetadata.title,
     images: [
       {
-        url: `${siteMetadata.siteUrl}/og.jpg`,
+        url: `/og.jpg`,
         width: 1200,
         height: 630,
         alt: siteMetadata.title,
@@ -68,35 +67,40 @@ export const metadata = {
     card: "summary_large_image",
     title: siteMetadata.title,
     description: siteMetadata.description,
-    images: [`${siteMetadata.siteUrl}/og.png`],
+    images: [`/og.png`],
     creator: "@jollyshopland",
   },
   icons: {
     icon: "/favicon.ico",
     shortcut: "/favicon-16x16.png",
     apple: "/apple-touch-icon.png",
   },
-  manifest: `${siteMetadata.siteUrl}/site.webmanifest`,
+  manifest: `/site.webmanifest`,
 }
 
+export const viewport: Viewport = {
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "white" },
+    { media: "(prefers-color-scheme: dark)", color: "black" },
+  ],
+}
 interface RootLayoutProps {
   children: React.ReactNode
 }
 
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
-    <ServerThemeProvider attribute="class" defaultTheme={siteMetadata.theme}>
-      <html lang="en" className={`${inter.variable} ${jetbrains.variable} `}>
-        <head />
-        <body className="min-h-screen bg-white px-[5vw]  dark:bg-black">
+    <html lang="en" className={`${inter.variable} ${jetbrains.variable} `}>
+      <body className="min-h-screen bg-white px-[5vw]  dark:bg-black">
+        <Providers>
           <div className="flex min-h-screen flex-col">
             <Nav />
             <main className="flex-1">{children}</main>
             <Footer />
             <Analytics />
           </div>
-        </body>
-      </html>
-    </ServerThemeProvider>
+        </Providers>
+      </body>
+    </html>
   )
 }

app/layout.tsx

@@ -2,10 +2,10 @@ export function CodingTimeline() {
   return (
     <ol className="relative ml-3 !list-none border-l border-gray-200 dark:border-gray-700">
       <li className="mb-10 ml-8">
-        <span className="absolute -left-3 flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 ring-8  ring-gray-100 dark:bg-blue-600 dark:ring-gray-900">
+        <span className="absolute -left-3 flex size-6 items-center justify-center rounded-full bg-blue-600 ring-8 ring-gray-100  dark:bg-blue-600 dark:ring-gray-900">
           <svg
             aria-hidden="true"
-            className="h-4 w-4 text-blue-300 dark:text-blue-300"
+            className="size-4 text-blue-300 dark:text-blue-300"
             fill="currentColor"
             viewBox="0 0 16 16"
             xmlns="http://www.w3.org/2000/svg"
@@ -17,9 +17,9 @@ export function CodingTimeline() {
         <h3 className="mb-1 flex flex-col items-start text-lg font-semibold text-gray-900 dark:text-white sm:flex-row sm:items-center">
           Software Engineer - Frontend Focused
           <span className="relative my-2 mr-2 flex min-w-[105px]  items-center rounded bg-blue-600 px-2.5 py-0.5 text-sm font-medium text-white dark:bg-blue-600 dark:text-white sm:my-0 sm:ml-3">
-            <span className="relative mr-2 flex h-3 w-3">
-              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-lime-400 opacity-75"></span>
-              <span className="relative inline-flex h-3 w-3 rounded-full bg-lime-500"></span>
+            <span className="relative mr-2 flex size-3">
+              <span className="absolute inline-flex size-full animate-ping rounded-full bg-lime-400 opacity-75"></span>
+              <span className="relative inline-flex size-3 rounded-full bg-lime-500"></span>
             </span>
             Current Role
           </span>
@@ -35,10 +35,10 @@ export function CodingTimeline() {
         </p>
       </li>
       <li className="mb-10 ml-8">
-        <span className="absolute -left-3 flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 ring-8  ring-gray-100 dark:bg-blue-600 dark:ring-gray-900">
+        <span className="absolute -left-3 flex size-6 items-center justify-center rounded-full bg-blue-600 ring-8 ring-gray-100  dark:bg-blue-600 dark:ring-gray-900">
           <svg
             aria-hidden="true"
-            className="h-4 w-4 text-blue-300 dark:text-blue-300"
+            className="size-4 text-blue-300 dark:text-blue-300"
             fill="currentColor"
             viewBox="0 0 16 16"
             xmlns="http://www.w3.org/2000/svg"
@@ -61,10 +61,10 @@ export function CodingTimeline() {
         </p>
       </li>
       <li className="mb-10 ml-8">
-        <span className="absolute -left-3 flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 ring-8 ring-gray-100 ring-white dark:bg-blue-600 dark:ring-gray-900">
+        <span className="absolute -left-3 flex size-6 items-center justify-center rounded-full bg-blue-600 ring-8 ring-gray-100 dark:bg-blue-600 dark:ring-gray-900">
           <svg
             aria-hidden="true"
-            className="h-4 w-4 text-blue-300 dark:text-blue-300"
+            className="size-4 text-blue-300 dark:text-blue-300"
             fill="currentColor"
             viewBox="0 0 16 16"
             xmlns="http://www.w3.org/2000/svg"
@@ -86,10 +86,10 @@ export function CodingTimeline() {
         </p>
       </li>
       <li className="mb-10 ml-8">
-        <span className="absolute -left-3 flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 ring-8 ring-gray-100 ring-white dark:bg-blue-600 dark:ring-gray-900">
+        <span className="absolute -left-3 flex size-6 items-center justify-center rounded-full bg-blue-600 ring-8 ring-gray-100 dark:bg-blue-600 dark:ring-gray-900">
           <svg
             aria-hidden="true"
-            className="h-4 w-4 text-blue-300 dark:text-blue-300"
+            className="size-4 text-blue-300 dark:text-blue-300"
             fill="currentColor"
             viewBox="0 0 16 16"
             xmlns="http://www.w3.org/2000/svg"
@@ -112,10 +112,10 @@ export function CodingTimeline() {
         </p>
       </li>
       <li className="mb-10 ml-8">
-        <span className="absolute -left-3 flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 ring-8 ring-gray-100 ring-white dark:bg-blue-600 dark:ring-gray-900">
+        <span className="absolute -left-3 flex size-6 items-center justify-center rounded-full bg-blue-600 ring-8 ring-gray-100 dark:bg-blue-600 dark:ring-gray-900">
           <svg
             aria-hidden="true"
-            className="h-4 w-4 text-blue-300 dark:text-blue-300"
+            className="size-4 text-blue-300 dark:text-blue-300"
             fill="currentColor"
             viewBox="0 0 16 16"
             xmlns="http://www.w3.org/2000/svg"
@@ -138,10 +138,10 @@ export function CodingTimeline() {
         </p>
       </li>
       <li className="mb-10 ml-8">
-        <span className="absolute -left-3 flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 ring-8 ring-gray-100 ring-white dark:bg-blue-600 dark:ring-gray-900">
+        <span className="absolute -left-3 flex size-6 items-center justify-center rounded-full bg-blue-600 ring-8 ring-gray-100 dark:bg-blue-600 dark:ring-gray-900">
           <svg
             aria-hidden="true"
-            className="h-4 w-4 text-blue-300 dark:text-blue-300"
+            className="size-4 text-blue-300 dark:text-blue-300"
             fill="currentColor"
             viewBox="0 0 16 16"
             xmlns="http://www.w3.org/2000/svg"
@@ -164,10 +164,10 @@ export function CodingTimeline() {
         </p>
       </li>
       <li className="mb-10 ml-8">
-        <span className="absolute -left-3 flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 ring-8 ring-gray-100 ring-white dark:bg-blue-600 dark:ring-gray-900">
+        <span className="absolute -left-3 flex size-6 items-center justify-center rounded-full bg-blue-600 ring-8 ring-gray-100 dark:bg-blue-600 dark:ring-gray-900">
           <svg
             aria-hidden="true"
-            className="h-4 w-4 text-blue-300 dark:text-blue-300"
+            className="size-4 text-blue-300 dark:text-blue-300"
             fill="currentColor"
             viewBox="0 0 16 16"
             xmlns="http://www.w3.org/2000/svg"
@@ -191,10 +191,10 @@ export function CodingTimeline() {
         </p>
       </li>
       <li className="ml-8">
-        <span className="absolute -left-3 flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 ring-8 ring-gray-100 ring-white dark:bg-blue-600 dark:ring-gray-900">
+        <span className="absolute -left-3 flex size-6 items-center justify-center rounded-full bg-blue-600 ring-8 ring-gray-100 dark:bg-blue-600 dark:ring-gray-900">
           <svg
             aria-hidden="true"
-            className="h-4 w-4 text-blue-300 dark:text-blue-300"
+            className="size-4 text-blue-300 dark:text-blue-300"
             fill="currentColor"
             viewBox="0 0 16 16"
             xmlns="http://www.w3.org/2000/svg"

components/coding-timeline.tsx

@@ -35,7 +35,7 @@ const Comments = () => {
 
   return (
     <div
-      className="pb-6 pt-6 text-center text-gray-700 dark:text-gray-300"
+      className="py-6 text-center text-gray-700 dark:text-gray-300"
       id="comment"
       ref={ref}
     >

components/comments/index.tsx

@@ -9,7 +9,7 @@ import { GlowDiv } from "./glow-div"
 
 const LightIcon = () => (
   <span
-    className="absolute inset-0 top-1 rotate-90 transform  transition duration-1000 motion-reduce:duration-[0s] dark:rotate-0 "
+    className="absolute inset-0 top-1 rotate-90 transition  duration-1000 motion-reduce:duration-0 dark:rotate-0"
     style={{ transformOrigin: "50% 100px" }}
   >
     <svg
@@ -18,7 +18,7 @@ const LightIcon = () => (
       viewBox="0 0 24 24"
       strokeWidth={1.5}
       stroke="currentColor"
-      className="mx-auto h-6 w-6"
+      className="mx-auto size-6"
     >
       <path
         strokeLinecap="round"
@@ -31,7 +31,7 @@ const LightIcon = () => (
 
 const DarkIcon = () => (
   <span
-    className="absolute inset-0 top-1 rotate-0 transform  transition duration-1000 motion-reduce:duration-[0s] dark:-rotate-90 "
+    className="absolute inset-0 top-1 rotate-0 transition  duration-1000 motion-reduce:duration-0 dark:-rotate-90"
     style={{ transformOrigin: "50% 100px" }}
   >
     <svg
@@ -40,7 +40,7 @@ const DarkIcon = () => (
       viewBox="0 0 24 24"
       strokeWidth={1.5}
       stroke="currentColor"
-      className="mx-auto h-6 w-6"
+      className="mx-auto size-6"
     >
       <path
         strokeLinecap="round"
@@ -63,7 +63,7 @@ const DarkModeSwitch = ({ variant = "icon" }: DarkModeSwitchProps) => {
 
   return (
     <GlowDiv>
-      <div className="rounded bg-gray-800 p-[1px] leading-[0]  hover:bg-gradient-to-r  hover:from-blue-600 hover:to-cyan-600 dark:bg-gray-200">
+      <div className="rounded bg-gray-800 p-px leading-[0]  hover:bg-gradient-to-r  hover:from-blue-600 hover:to-cyan-600 dark:bg-gray-200">
         <button
           onClick={() =>
             setTheme(
@@ -76,7 +76,7 @@ const DarkModeSwitch = ({ variant = "icon" }: DarkModeSwitchProps) => {
           )}
         >
           {clientLoaded && (
-            <div className="relative h-8 w-8">
+            <div className="relative size-8">
               <LightIcon />
               <DarkIcon />
             </div>

components/dark-mode-button.tsx

@@ -35,7 +35,7 @@ const ScrollTopAndComment = () => {
           onClick={handleScrollToComment}
           className="rounded-full bg-gray-200 p-2 text-gray-500 transition-all hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600"
         >
-          <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+          <svg className="size-5" viewBox="0 0 20 20" fill="currentColor">
             <path
               fillRule="evenodd"
               d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z"
@@ -49,7 +49,7 @@ const ScrollTopAndComment = () => {
         onClick={handleScrollTop}
         className="rounded-full bg-gray-200 p-2 text-gray-500 transition-all hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600"
       >
-        <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+        <svg className="size-5" viewBox="0 0 20 20" fill="currentColor">
           <path
             fillRule="evenodd"
             d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"