chore: upgrade dependencies

app/blog/[page]/page.tsx

@@ -9,8 +9,13 @@ export async function generateStaticParams() {
   return await getPostListPath();
 }
 
-export default async function Page({ params }: { params: { page: string } }) {
+export default async function Page({
-  const page = Number(params.page);
+  params,
+}: {
+  params: Promise<{ page: string }>;
+}) {
+  const { page: pageNumber } = await params;
+  const page = Number(pageNumber);
   if (!page) notFound();
 
   const allPosts = await postLists();

app/g/[id]/page.tsx

@@ -15,12 +15,13 @@ dayjs.extend(relativeTime);
 export default async function Page({
   params,
 }: {
-  params: {
+  params: Promise<{
     id: string;
-  };
+  }>;
 }) {
-  if (typeof params.id !== 'string') notFound();
+  const { id } = await params;
-  const gist = await getSignalGist(params.id);
+  if (typeof id !== 'string') notFound();
+  const gist = await getSignalGist(id);
   if (!gist || !gist.files) notFound();
 
   return (
@@ -32,7 +33,7 @@ export default async function Page({
           priority
           width={32}
           height={32}
-          className="rounded-full "
+          className="rounded-lg-full "
         />
         <h1 className="ml-2 overflow-hidden text-xl whitespace-nowrap overflow-ellipsis">
           <Link href="/gists">

app/g/loading.tsx

@@ -7,7 +7,7 @@ const loading = () => {
       <div className="flex items-center py-1 ">
         <div
           className={clsx(
-            'w-8 h-8 rounded-full',
+            'w-8 h-8 rounded-lg-full',
             'bg-gray-200 animate-pulse dark:bg-rua-gray-600',
           )}
         ></div>
@@ -21,7 +21,7 @@ const loading = () => {
           <div
             className={clsx(
               'w-32 h-5 bg-gray-200',
-              'animate-pulse rounded-md',
+              'animate-pulse rounded-lg-md',
               'dark:bg-rua-gray-600',
             )}
           ></div>
@@ -29,7 +29,7 @@ const loading = () => {
           <div
             className={clsx(
               'w-32 h-5 bg-gray-200',
-              'animate-pulse rounded-md',
+              'animate-pulse rounded-lg-md',
               'dark:bg-rua-gray-600',
             )}
           ></div>
@@ -40,7 +40,7 @@ const loading = () => {
         <div
           className={clsx(
             'w-32 h-4 bg-gray-200',
-            'animate-pulse rounded-md',
+            'animate-pulse rounded-lg-md',
             'dark:bg-rua-gray-600',
           )}
         ></div>

app/gists/[page]/page.tsx

@@ -8,11 +8,12 @@ export const revalidate = 600;
 export default async function Page({
   params,
 }: {
-  params: {
+  params: Promise<{
     page: string;
-  };
+  }>;
 }) {
-  const page = Number(params.page);
+  const { page: pageNumber } = await params;
+  const page = Number(pageNumber);
   if (!page) notFound();
   const gists = await getGists(page);
   if (!gists) notFound();

app/p/[slug]/page.tsx

@@ -25,11 +25,11 @@ export async function generateStaticParams() {
 const Page = async ({
   params,
 }: {
-  params: {
+  params: Promise<{
     slug: string;
-  };
+  }>;
 }) => {
-  const slug = params.slug;
+  const { slug } = await params;
   if (!slug) notFound();
 
   const post = await readSinglePost(slug);

components/mdx/paragraph.tsx

@@ -18,7 +18,7 @@ const Paragraph = (props: HTMLAttributes<HTMLParagraphElement>) => {
     if (typeof child.type !== 'object') return null;
     const childType = child.type as ChildType;
     if (!childType?.type) return null;
-    if (!child.props?.href) return null;
+    // if (!child.props?.href) return null;
     const props = child.props as { href: string };
     return props.href;
   });

components/pages/blog/post-card-loading.tsx

@@ -5,7 +5,7 @@ const PostCardLoading = () => {
   return (
     <article
       className={clsx(
-        'rounded-xl py-4 px-5 md:p-7 ',
+        'rounded-lg-xl py-4 px-5 md:p-7 ',
         'hover:bg-sky-100 hover:bg-opacity-50',
         'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100',
         'flex justify-between text-gray-800 ',

components/pages/blog/post-card.tsx

@@ -13,7 +13,7 @@ const PostCard = ({ post }: Props) => {
       <Link href={`/p/${post.slug}`} passHref>
         <article
           className={clsx(
-            'rounded-xl py-4 px-5 md:p-7 ',
+            'rounded-lg-xl py-4 px-5 md:p-7 ',
             'hover:bg-sky-100 hover:bg-opacity-50',
             // 'hover:bg-rua-gray-100 hover:bg-opacity-10',
             'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100',

components/pages/dark-mode-btn.tsx

@@ -42,7 +42,7 @@ const DarkModeBtn = () => {
       <button>
         <div
           className={clsx(
-            'w-5 h-5 rounded-md animate-pulse',
+            'w-5 h-5 rounded-lg-md animate-pulse',
             'bg-gray-300 dark:bg-gray-500',
           )}
         ></div>

components/pages/friends/friend-card.tsx

@@ -7,7 +7,7 @@ const FriendCard = ({ friend }: { friend: Friend }) => {
     <a href={friend.link} target="_blank">
       <div
         className={clsx(
-          'py-3 px-4 rounded-xl bg-slate-100',
+          'py-3 px-4 rounded-lg-xl bg-slate-100',
           'hover:bg-slate-200',
           'transition-all duration-300',
           'flex items-center cursor-pointer',

components/pages/gists/gists-code-skeleton.tsx

@@ -22,21 +22,21 @@ const GistsCode = () => {
               className={clsx(
                 'box-border inline-block',
                 'w-[13px] h-[13px] mr-2',
-                'rounded-full bg-[#ce5347]',
+                'rounded-lg-full bg-[#ce5347]',
               )}
             ></div>
             <div
               className={clsx(
                 'box-border inline-block',
                 'w-[13px] h-[13px] mr-2',
-                'rounded-full bg-[#d6a243]',
+                'rounded-lg-full bg-[#d6a243]',
               )}
             ></div>
             <div
               className={clsx(
                 'box-border inline-block',
                 'w-[13px] h-[13px]',
-                'rounded-full bg-[#58a942]',
+                'rounded-lg-full bg-[#58a942]',
               )}
             ></div>
           </div>
@@ -53,7 +53,7 @@ const GistsCode = () => {
             <span
               className={clsx(
                 'bg-gray-300 animate-pulse',
-                'w-20 h-4 block rounded',
+                'w-20 h-4 block rounded-lg',
                 'dark:bg-rua-gray-600',
               )}
             ></span>

components/pages/gists/gists-code.module.css

@@ -1,5 +1,5 @@
 .wrapper {
-  @apply overflow-hidden rounded-lg;
+  @apply overflow-hidden rounded;
   @apply mb-8 shadow-card;
   font-size: 16px;
 }

components/pages/gists/gists-code.tsx

@@ -47,21 +47,21 @@ const GistsCode = ({ file, showFileName = false }: Props) => {
                 className={clsx(
                   'box-border inline-block',
                   'w-[13px] h-[13px] mr-2',
-                  'rounded-full bg-[#ce5347]',
+                  'rounded-lg-full bg-[#ce5347]',
                 )}
               ></div>
               <div
                 className={clsx(
                   'box-border inline-block',
                   'w-[13px] h-[13px] mr-2',
-                  'rounded-full bg-[#d6a243]',
+                  'rounded-lg-full bg-[#d6a243]',
                 )}
               ></div>
               <div
                 className={clsx(
                   'box-border inline-block',
                   'w-[13px] h-[13px]',
-                  'rounded-full bg-[#58a942]',
+                  'rounded-lg-full bg-[#58a942]',
                 )}
               ></div>
             </div>

components/pages/gists/gists-skeleton.tsx

@@ -8,7 +8,7 @@ const GistSkeleton = () => {
           <div className="flex items-center py-1 ">
             <div
               className={clsx(
-                'w-8 h-8 rounded-full',
+                'w-8 h-8 rounded-lg-full',
                 'animate-pulse bg-gray-300',
                 'dark:bg-gray-400 ',
               )}

components/pages/gists/user-info-skeleton.tsx

@@ -15,7 +15,7 @@ const UserInfoLoading = () => {
           <div
             className={clsx(
               'w-16 h-16 mr-4 overflow-hidden',
-              'md:w-72 md:h-72 bg-gray-200 rounded-full',
+              'md:w-72 md:h-72 bg-gray-200 rounded-lg-full',
               'animate-pulse dark:bg-rua-gray-800',
             )}
           ></div>

components/pages/gists/user-info.tsx

@@ -27,7 +27,7 @@ const UserInfo = async () => {
               src={avatar}
               alt="Avatar"
               priority
-              className="rounded-full"
+              className="rounded-lg-full"
             />
           </div>
 

components/pages/nav-bar.tsx

@@ -106,7 +106,7 @@ const HeadBar = () => {
         <nav
           className={clsx(
             'text-lg md:block',
-            'bg-white rounded-md',
+            'bg-white rounded-lg-md',
             'dark:bg-rua-gray-800',
             'absolute md:static',
             'p-5 right-6 top-14',
@@ -154,7 +154,7 @@ const HeadBar = () => {
                 <div
                   className={clsx(
                     'w-[164.453px] h-[30px]',
-                    'bg-[#ebedf0] rounded-[40px] animate-pulse',
+                    'bg-[#ebedf0] rounded-lg-[40px] animate-pulse',
                   )}
                 ></div>
               )}

components/post/copy-button.tsx

@@ -24,7 +24,7 @@ const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
           ref={ref}
           className={clsx(
             'flex items-center justify-center',
-            'border rounded-md',
+            'border rounded-lg-md',
             'p-[6px] opacity-0',
             'group-hover:opacity-100',
             'transition-opacity dark:border-gray-700',

components/rua/rua-sandpack.tsx

@@ -14,7 +14,7 @@ const RUASandpack = ({ ...rest }: Props) => {
 
   if (!mounted) {
     return (
-      <div className="my-2 rounded-[0.5em] overflow-hidden">
+      <div className="my-2 rounded-lg-[0.5em] overflow-hidden">
         <Sandpack
           {...rest}
           options={{
@@ -29,7 +29,7 @@ const RUASandpack = ({ ...rest }: Props) => {
 
   return (
     <>
-      <div className="my-2 rounded-[0.5em] overflow-hidden">
+      <div className="my-2 rounded-lg-[0.5em] overflow-hidden">
         <Sandpack
           {...rest}
           theme={

components/rua/tab/index.tsx

@@ -38,7 +38,7 @@ const Tab = ({ defaultValue, children }: Props) => {
               key={child.props.label}
               onClick={() => handleSwitch(child.props.value)}
               className={clsx(
-                'px-5 py-3 rounded-t-lg',
+                'px-5 py-3 rounded-lg-t-lg',
                 child.props.value === currentValue &&
                   'text-teal-500 border-b-[3px] border-teal-500',
                 'select-none cursor-pointer',

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.mjs

@@ -15,7 +15,7 @@ const fileLoaderPathUrl = new URL(fileLoaderPath, import.meta.url).href;
  */
 const nextConfig = {
   reactStrictMode: true,
-  swcMinify: true,
+  // swcMinify: true,
   output: 'standalone',
   images: {
     remotePatterns: [

package.json

@@ -14,26 +14,27 @@
     "pretty-check": "prettier --cache \"./**/*.{js,jsx,ts,tsx,json,md,mdx,css}\" --ignore-unknown --check --plugin=prettier-plugin-organize-imports"
   },
   "dependencies": {
-    "@catppuccin/highlightjs": "^1.0.0",
+    "@catppuccin/highlightjs": "^1.0.1",
-    "@catppuccin/palette": "^1.4.0",
+    "@catppuccin/palette": "^1.7.1",
     "@catppuccin/tailwindcss": "^0.1.6",
-    "@codesandbox/sandpack-react": "^2.19.9",
+    "@codesandbox/sandpack-react": "^2.20.0",
-    "@docsearch/css": "^3.6.2",
+    "@docsearch/css": "^3.9.0",
-    "@docsearch/react": "^3.6.2",
+    "@docsearch/react": "^3.9.0",
-    "@giscus/react": "^3.0.0",
+    "@giscus/react": "^3.1.0",
-    "@octokit/core": "^6.1.2",
+    "@octokit/core": "^6.1.5",
-    "@octokit/plugin-rest-endpoint-methods": "^13.2.6",
+    "@octokit/plugin-rest-endpoint-methods": "^14.0.0",
-    "@react-spring/three": "^9.7.5",
+    "@react-spring/three": "^10.0.0",
-    "@react-three/drei": "^9.114.3",
+    "@react-three/drei": "^10.0.8",
-    "@react-three/fiber": "^8.17.10",
+    "@react-three/fiber": "^9.1.2",
-    "algoliasearch": "^5.8.1",
+    "@tailwindcss/postcss": "^4.1.7",
+    "algoliasearch": "^5.25.0",
     "dayjs": "^1.11.13",
-    "next": "14.2.21",
+    "next": "15.3.2",
     "next-mdx-remote": "^5.0.0",
-    "next-themes": "^0.3.0",
+    "next-themes": "^0.4.6",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
-    "react-icons": "^5.3.0",
+    "react-icons": "^5.5.0",
     "rehype-highlight": "^7.0.0",
     "rehype-react": "^8.0.0",
     "rehype-slug": "^6.0.0",
@@ -41,32 +42,32 @@
     "remark-gfm": "^4.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.1",
-    "sharp": "^0.33.5",
+    "sharp": "^0.34.1",
-    "three": "^0.169.0",
+    "three": "^0.176.0",
     "unified": "^11.0.5",
-    "zustand": "^4.5.5"
+    "zustand": "^5.0.4"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^14.2.15",
+    "@next/bundle-analyzer": "^15.3.2",
-    "@types/node": "22.7.5",
+    "@types/node": "22.15.18",
-    "@types/react": "18.3.11",
+    "@types/react": "19.1.4",
-    "@types/three": "^0.169.0",
+    "@types/three": "^0.176.0",
-    "autoprefixer": "^10.4.20",
+    "autoprefixer": "^10.4.21",
     "clsx": "^2.1.1",
-    "dotenv": "^16.4.5",
+    "dotenv": "^16.5.0",
     "encoding": "^0.1.13",
     "eslint": "^8",
     "eslint-config-next": "14.2.7",
     "file-loader": "^6.2.0",
     "gray-matter": "^4.0.3",
-    "leva": "^0.9.35",
+    "leva": "^0.10.0",
     "postcss": "^8.4.47",
-    "prettier": "^3.3.3",
+    "prettier": "^3.5.3",
     "prettier-plugin-organize-imports": "^4.1.0",
     "raw-loader": "^4.0.2",
-    "sass": "^1.79.5",
+    "sass": "^1.89.0",
-    "tailwindcss": "^3.4.13",
+    "tailwindcss": "^4.1.7",
-    "typescript": "5.6.3",
+    "typescript": "5.8.3",
     "url-loader": "^4.1.1"
   }
 }

postcss.config.mjs

@@ -1,8 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
-    autoprefixer: {},
   },
 };
 export default config;

styles/globals.css

@@ -1,34 +1,88 @@
-@tailwind base;
+@import 'tailwindcss';
-@tailwind components;
-@tailwind utilities;
 
-* {
+@custom-variant dark (&:is(.mocha *));
-  scroll-behavior: smooth;
+
+@theme {
+  --font-Barlow: var(--font-barlow);
+  --font-Poppins: var(--font-poppins);
+  --font-Mono:
+    var(--fonts-jetbrains-mono), DejaVu Sans Mono, -apple-system, monospace;
+  --font-Lobster: var(--font-lobster);
+
+  --color-bluish-gray: rgba(245, 247, 250);
+
+  --color-rua-gray-100: #aabfc5;
+  --color-rua-gray-600: rgb(66, 66, 66);
+  --color-rua-gray-700: hsl(220, 13%, 18%);
+  --color-rua-gray-800: rgb(35, 38, 38);
+  --color-rua-gray-900: rgb(24, 25, 26);
+
+  --shadow-outline: 0 0 0 3px rgba(83, 220, 246, 0.6);
+  --shadow-underline: inset 0px -2px 0px 0px rgb(85 200 188 / 70%);
+  --shadow-throughline: inset 0px -0.5em 0px 0px rgb(85 200 188 / 70%);
+  --shadow-card:
+    0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04),
+    0px 0px 1px rgba(0, 0, 0, 0.04);
+
+  --background-image-underline: linear-gradient(
+    rgb(240 240 240),
+    rgb(240 240 240)
+  );
+  --background-image-underline-dark: linear-gradient(
+    rgb(110 110 110),
+    rgb(160 160 160)
+  );
 }
 
-*::selection {
+@config "../tailwind.config.js";
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@layer utilities {
+  * {
+    scroll-behavior: smooth;
+  }
+
+  *::selection {
     background: hsl(230, 1%, 90%);
     color: inherit;
-}
+  }
 
-.mocha *::selection {
+  .mocha *::selection {
     background: hsl(220, 13%, 28%);
     color: inherit;
     text-shadow: none;
-}
+  }
 
-/*
+  /*
 font-family: 'Aleo', serif;
 font-family: 'Aref Ruqaa', serif;
 font-family: 'Barlow', sans-serif;
 font-family: 'JetBrains Mono', monospace;
 font-family: 'Poppins', sans-serif;
 */
+}
 
 @layer base {
   body {
     /* @apply text-gray-600 bg-bluish-gray dark:bg-rua-gray-900 dark:text-gray-200; */
-    @apply text-subtext0 bg-gradient-to-b from-base to-crust;
+    @apply text bg-linear-to-b from-base to-crust;
     font-family:
       'Poppins',
       -apple-system,
@@ -85,11 +139,12 @@ html.mocha {
   --docsearch-hit-shadow: none;
   --docsearch-hit-background: #090a11;
   --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
-  --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
+  --docsearch-key-shadow:
+    inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
     0 2px 2px 0 rgba(3, 4, 9, 0.3);
   --docsearch-footer-background: #1e2136;
-  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
+  --docsearch-footer-shadow:
-    0 -4px 8px 0 rgba(0, 0, 0, 0.2);
+    inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2);
   --docsearch-logo-color: #fff;
   --docsearch-muted-color: #7f8497;
 }
@@ -143,7 +198,7 @@ code {
 }
 
 pre {
-  @apply p-4 rounded-lg;
+  @apply p-4 rounded;
   margin: 0.5em 0;
   overflow: auto;
   @apply bg-white dark:bg-rua-gray-700;

tailwind.config.js

@@ -1,6 +1,4 @@
-import type { Config } from 'tailwindcss';
+const config = {
-
-const config: Config = {
   darkMode: ['class', '.mocha'],
   plugins: [require('@catppuccin/tailwindcss')],
   content: [

tsconfig.json

@@ -22,6 +22,12 @@
       }
     ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "tailwind.config.js"
+  ],
   "exclude": ["node_modules"]
 }