From dd8b20b01507885c4c415f34e6a70a0f55e8d22c Mon Sep 17 00:00:00 2001
From: xfy <i@rua.plus>
Date: Mon, 19 May 2025 15:01:20 +0800
Subject: [PATCH] chore: upgrade tailwindcss

up to v4
---
 app/g/[id]/page.tsx                                 | 2 +-
 app/g/loading.tsx                                   | 2 +-
 app/global-error.tsx                                | 4 +---
 app/p/[slug]/loading.tsx                            | 2 +-
 app/p/[slug]/page.tsx                               | 2 +-
 components/common/back-to-top.tsx                   | 2 +-
 components/mdx/anchor.tsx                           | 2 +-
 components/mdx/link-anchor.tsx                      | 2 +-
 components/pages/blog/post-card.tsx                 | 2 +-
 components/pages/friends/friend-card.tsx            | 2 +-
 components/pages/gists/gists-code-skeleton.tsx      | 6 +++---
 components/pages/gists/gists-code.tsx               | 6 +++---
 components/pages/gists/gists-skeleton.tsx           | 2 +-
 components/pages/projects/project-card-skeleton.tsx | 2 +-
 components/pages/projects/project-card.tsx          | 2 +-
 components/post/post-toc.tsx                        | 4 ++--
 components/rua/loading/vercel-loading.tsx           | 2 +-
 components/rua/tab/index.tsx                        | 4 ++--
 components/rua/tab/tab-item.tsx                     | 2 +-
 content/posts/leptos-dark-mode.mdx                  | 2 +-
 next.config.mjs                                     | 5 +++++
 pnpm-lock.yaml                                      | 4 ++--
 styles/globals.css                                  | 5 +++--
 23 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/app/g/[id]/page.tsx b/app/g/[id]/page.tsx
index 1594eb0..f5682bf 100644
--- a/app/g/[id]/page.tsx
+++ b/app/g/[id]/page.tsx
@@ -35,7 +35,7 @@ export default async function Page({
           height={32}
           className="rounded-lg-full "
         />
-        <h1 className="ml-2 overflow-hidden text-xl whitespace-nowrap overflow-ellipsis">
+        <h1 className="ml-2 overflow-hidden text-xl whitespace-nowrap text-ellipsis">
           <Link href="/gists">
             <LinkAnchor external={false}>{gist.login}</LinkAnchor>
           </Link>
diff --git a/app/g/loading.tsx b/app/g/loading.tsx
index 17371e5..024c1bf 100644
--- a/app/g/loading.tsx
+++ b/app/g/loading.tsx
@@ -14,7 +14,7 @@ const loading = () => {
         <h1
           className={clsx(
             'ml-2 overflow-hidden text-xl',
-            'whitespace-nowrap overflow-ellipsis',
+            'whitespace-nowrap text-ellipsis',
             'flex items-center',
           )}
         >
diff --git a/app/global-error.tsx b/app/global-error.tsx
index 980fe0d..5a101e7 100644
--- a/app/global-error.tsx
+++ b/app/global-error.tsx
@@ -16,9 +16,7 @@ const GlobalError = ({
         className={clsx('w-full h-dvh flex', 'justify-center items-center')}
       >
         <div>
-          <h2 className="text-xl text-subtext1">
-            Something went wrong! ノ( OωOノ)
-          </h2>
+          <h2 className="text-xl">Something went wrong! ノ( OωOノ)</h2>
           <Button onClick={() => reset()}>Try again</Button>
         </div>
       </body>
diff --git a/app/p/[slug]/loading.tsx b/app/p/[slug]/loading.tsx
index 223c753..261b3e9 100644
--- a/app/p/[slug]/loading.tsx
+++ b/app/p/[slug]/loading.tsx
@@ -11,7 +11,7 @@ const Page = async () => {
         id="article"
         className={clsx(
           'relative max-w-4xl px-4 mx-auto my-10',
-          'lg:w-[56rem] w-full flex-1',
+          'lg:w-4xl w-full flex-1',
           'mt-8',
         )}
       >
diff --git a/app/p/[slug]/page.tsx b/app/p/[slug]/page.tsx
index 856ce8d..dbf2d2d 100644
--- a/app/p/[slug]/page.tsx
+++ b/app/p/[slug]/page.tsx
@@ -62,7 +62,7 @@ const Page = async ({
         id="article"
         className={clsx(
           'relative max-w-4xl px-4 mx-auto my-10',
-          'lg:w-[56rem] w-full flex-1',
+          'lg:w-4xl w-full flex-1',
         )}
       >
         <h1>{mdxSource.frontmatter?.title}</h1>
diff --git a/components/common/back-to-top.tsx b/components/common/back-to-top.tsx
index 0e0b852..313b949 100644
--- a/components/common/back-to-top.tsx
+++ b/components/common/back-to-top.tsx
@@ -36,7 +36,7 @@ const BackToTop = () => {
       <Button
         onClick={handleBack}
         className={clsx(
-          '!p-3 fixed',
+          'p-3! fixed',
           'right-4 bottom-4',
           'lg:right-8 lg:bottom-8',
           'transition-all duration-300',
diff --git a/components/mdx/anchor.tsx b/components/mdx/anchor.tsx
index 6543601..7d452ea 100644
--- a/components/mdx/anchor.tsx
+++ b/components/mdx/anchor.tsx
@@ -19,7 +19,7 @@ const Anchor = forwardRef<HTMLAnchorElement, Props>(
           <span
             className={clsx(
               'mx-[2px] text-teal-500 relative',
-              'before:left-0 before:top-[1px] before:block before:absolute',
+              'before:left-0 before:top-px before:block before:absolute',
               'before:w-full before:h-full before:transition-all before:shadow-underline',
               'hover:before:shadow-throughline',
               'dark:text-teal-600',
diff --git a/components/mdx/link-anchor.tsx b/components/mdx/link-anchor.tsx
index e4a84a7..0ba7b5c 100644
--- a/components/mdx/link-anchor.tsx
+++ b/components/mdx/link-anchor.tsx
@@ -14,7 +14,7 @@ const Anchor = ({ children, external = true, className }: Props) => {
       <span
         className={clsx(
           'mx-[2px] text-teal-500 relative',
-          'before:left-0 before:top-[1px] before:block before:absolute',
+          'before:left-0 before:top-px before:block before:absolute',
           'before:w-full before:h-full before:transition-all before:shadow-underline',
           'hover:before:shadow-throughline',
           'dark:text-teal-600',
diff --git a/components/pages/blog/post-card.tsx b/components/pages/blog/post-card.tsx
index c1931bb..de202b3 100644
--- a/components/pages/blog/post-card.tsx
+++ b/components/pages/blog/post-card.tsx
@@ -30,7 +30,7 @@ const PostCard = ({ post }: Props) => {
             <div className="hidden lg:block">{post.date}</div>
           </div>
 
-          <div className="flex justify-between text-subtext0">
+          <div className="flex justify-between">
             <div className="flex items-center text-sm">
               {Array.isArray(post.tags) ? (
                 post.tags.map((tag) => (
diff --git a/components/pages/friends/friend-card.tsx b/components/pages/friends/friend-card.tsx
index 56a6c26..c2bf051 100644
--- a/components/pages/friends/friend-card.tsx
+++ b/components/pages/friends/friend-card.tsx
@@ -18,7 +18,7 @@ const FriendCard = ({ friend }: { friend: Friend }) => {
       >
         <div>
           <h2 className={clsx('text-xl font-semibold')}>{friend.name}</h2>
-          <div className="text-sm text-subtext0">{friend.link}</div>
+          <div className="text-sm">{friend.link}</div>
         </div>
         <div className="overflow-hidden rounded-lg w-14 h-14">
           <Image
diff --git a/components/pages/gists/gists-code-skeleton.tsx b/components/pages/gists/gists-code-skeleton.tsx
index 015c469..7ba8913 100644
--- a/components/pages/gists/gists-code-skeleton.tsx
+++ b/components/pages/gists/gists-code-skeleton.tsx
@@ -16,7 +16,7 @@ const GistsCode = () => {
   return (
     <>
       <div className={styles.wrapper}>
-        <div className="h-[30px] bg-[#f6f8fa] dark:bg-[hsl(220,13%,18%)] flex">
+        <div className="h-[30px] bg-[#f6f8fa] dark:bg-rua-gray-700 flex">
           <div className="flex items-center h-full mx-3">
             <div
               className={clsx(
@@ -45,8 +45,8 @@ const GistsCode = () => {
             className={clsx(
               'px-4 bg-white',
               'leading-[30px]',
-              'dark:bg-[hsl(220,13%,18%)] dark:border-b dark:border-b-[rgb(128,203,196)]',
-              'overflow-hidden whitespace-nowrap overflow-ellipsis',
+              'dark:bg-rua-gray-700 dark:border-b dark:border-b-[rgb(128,203,196)]',
+              'overflow-hidden whitespace-nowrap text-ellipsis',
               'flex items-center',
             )}
           >
diff --git a/components/pages/gists/gists-code.tsx b/components/pages/gists/gists-code.tsx
index 11596d8..bec0929 100644
--- a/components/pages/gists/gists-code.tsx
+++ b/components/pages/gists/gists-code.tsx
@@ -41,7 +41,7 @@ const GistsCode = ({ file, showFileName = false }: Props) => {
     <>
       {showFileName ? (
         <div className={clsx(styles.wrapper, 'relative group')}>
-          <div className="h-[30px] bg-[#f6f8fa] dark:bg-[hsl(220,13%,18%)] flex">
+          <div className="h-[30px] bg-[#f6f8fa] dark:bg-rua-gray-700 flex">
             <div className="flex items-center h-full mx-3">
               <div
                 className={clsx(
@@ -70,8 +70,8 @@ const GistsCode = ({ file, showFileName = false }: Props) => {
               className={clsx(
                 'px-4 bg-white',
                 'leading-[30px]',
-                'dark:bg-[hsl(220,13%,18%)] dark:border-b dark:border-b-[rgb(128,203,196)]',
-                'overflow-hidden whitespace-nowrap overflow-ellipsis',
+                'dark:bg-rua-gray-700 dark:border-b dark:border-b-[rgb(128,203,196)]',
+                'overflow-hidden whitespace-nowrap text-ellipsis',
               )}
             >
               {file.filename}
diff --git a/components/pages/gists/gists-skeleton.tsx b/components/pages/gists/gists-skeleton.tsx
index a82e31a..9399b53 100644
--- a/components/pages/gists/gists-skeleton.tsx
+++ b/components/pages/gists/gists-skeleton.tsx
@@ -16,7 +16,7 @@ const GistSkeleton = () => {
             <h1
               className={clsx(
                 'ml-2 overflow-hidden text-xl',
-                'whitespace-nowrap overflow-ellipsis',
+                'whitespace-nowrap text-ellipsis',
                 'w-[234px] animate-pulse bg-gray-300',
                 'h-6 rounded-lg',
                 'dark:bg-gray-400',
diff --git a/components/pages/projects/project-card-skeleton.tsx b/components/pages/projects/project-card-skeleton.tsx
index 3e4d337..0e2fba9 100644
--- a/components/pages/projects/project-card-skeleton.tsx
+++ b/components/pages/projects/project-card-skeleton.tsx
@@ -16,7 +16,7 @@ const PojectCardSkeleton = () => {
       >
         <VscGithubInverted className="w-8 h-8" />
 
-        <a className="w-[calc(100%_-_40px)]" target="_blank" rel="noreferrer">
+        <a className="w-[calc(100%-40px)]" target="_blank" rel="noreferrer">
           <h2
             className={clsx(
               'text-xl overflow-hidden',
diff --git a/components/pages/projects/project-card.tsx b/components/pages/projects/project-card.tsx
index b434e67..cf2dff3 100644
--- a/components/pages/projects/project-card.tsx
+++ b/components/pages/projects/project-card.tsx
@@ -33,7 +33,7 @@ const ProjectCard = ({ project, icon }: ProjectCardProps) => {
 
         <a
           href={project.url}
-          className="w-[calc(100%_-_40px)]"
+          className="w-[calc(100%-40px)]"
           target="_blank"
           rel="noreferrer"
         >
diff --git a/components/post/post-toc.tsx b/components/post/post-toc.tsx
index 2b5f56a..eb72a31 100644
--- a/components/post/post-toc.tsx
+++ b/components/post/post-toc.tsx
@@ -58,12 +58,12 @@ const PostToc = ({ toc, tocLength }: Props) => {
         </div>
 
         <div className="toc text-lg">
-          <ul className="!pl-[unset]">
+          <ul className="pl-[unset]!">
             {toc?.map((h) => (
               <Fragment key={h.link}>
                 <TocItem item={h} />
                 {h.children.map((child) => (
-                  <ul className="!pl-4" key={child.link}>
+                  <ul className="pl-4!" key={child.link}>
                     <TocItem item={child} />
                   </ul>
                 ))}
diff --git a/components/rua/loading/vercel-loading.tsx b/components/rua/loading/vercel-loading.tsx
index 6ac803d..c724094 100644
--- a/components/rua/loading/vercel-loading.tsx
+++ b/components/rua/loading/vercel-loading.tsx
@@ -5,7 +5,7 @@ import styles from './vercel-loading.module.css';
 const VercelLoading = () => {
   return (
     <>
-      <div className="fixed bottom-[10px] right-[20px] z-[99999]">
+      <div className="fixed bottom-[10px] right-[20px] z-99999">
         <div
           id="container"
           className={clsx(styles.container, styles.visible, styles.building)}
diff --git a/components/rua/tab/index.tsx b/components/rua/tab/index.tsx
index 25e754f..9c273d4 100644
--- a/components/rua/tab/index.tsx
+++ b/components/rua/tab/index.tsx
@@ -29,7 +29,7 @@ const Tab = ({ defaultValue, children }: Props) => {
         <ul
           role="tablist"
           aria-orientation="horizontal"
-          className="flex list-none !p-[unset]"
+          className="flex list-none p-[unset]!"
         >
           {children.map((child) => (
             <li
@@ -44,7 +44,7 @@ const Tab = ({ defaultValue, children }: Props) => {
                 'select-none cursor-pointer',
                 'min-w-[76px] text-center',
                 'hover:bg-gray-200 dark:hover:bg-rua-gray-800',
-                '!list-none',
+                'list-none!',
               )}
             >
               {child.props.label}
diff --git a/components/rua/tab/tab-item.tsx b/components/rua/tab/tab-item.tsx
index 6e62da4..9101dee 100644
--- a/components/rua/tab/tab-item.tsx
+++ b/components/rua/tab/tab-item.tsx
@@ -11,7 +11,7 @@ export type ItemProps = {
 const TabItem = ({ showContent, children }: ItemProps) => {
   return (
     <>
-      <div className={clsx('hidden', showContent && '!block')}>{children}</div>
+      <div className={clsx('hidden', showContent && 'block!')}>{children}</div>
     </>
   );
 };
diff --git a/content/posts/leptos-dark-mode.mdx b/content/posts/leptos-dark-mode.mdx
index ad9b2e7..7476a30 100644
--- a/content/posts/leptos-dark-mode.mdx
+++ b/content/posts/leptos-dark-mode.mdx
@@ -111,7 +111,7 @@ pub fn DarkMode(#[prop(optional)] class: Cow<'static, str>) -> impl IntoView {
             </div>
             <ul
                 tabindex="0"
-                class="dropdown-content menu bg-base-100 rounded-box z-[1] w-32 p-2 shadow flex flex-col h-64 overflow-y-auto flex-nowrap"
+                class="dropdown-content menu bg-base-100 rounded-box z-1 w-32 p-2 shadow flex flex-col h-64 overflow-y-auto flex-nowrap"
             >
                 <For
                     each=move || COLOR_MODE
diff --git a/next.config.mjs b/next.config.mjs
index 01e057a..edfe0ba 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -17,6 +17,11 @@ const nextConfig = {
   reactStrictMode: true,
   // swcMinify: true,
   output: 'standalone',
+  allowedDevOrigins: [
+    'local-origin.dev',
+    '*.local-origin.dev',
+    '192.168.31.158',
+  ],
   images: {
     remotePatterns: [
       {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dce3d9c..1dcb2fb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6343,7 +6343,7 @@ snapshots:
 
   lightningcss@1.30.1:
     dependencies:
-      detect-libc: 2.0.3
+      detect-libc: 2.0.4
     optionalDependencies:
       lightningcss-darwin-arm64: 1.30.1
       lightningcss-darwin-x64: 1.30.1
@@ -7906,7 +7906,7 @@ snapshots:
       acorn-import-attributes: 1.9.5(acorn@8.13.0)
       browserslist: 4.24.5
       chrome-trace-event: 1.0.4
-      enhanced-resolve: 5.17.1
+      enhanced-resolve: 5.18.1
       es-module-lexer: 1.5.4
       eslint-scope: 5.1.1
       events: 3.3.0
diff --git a/styles/globals.css b/styles/globals.css
index c7a985d..1bc6041 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -35,6 +35,7 @@
 }
 
 @config "../tailwind.config.js";
+@plugin "@catppuccin/tailwindcss";
 
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
@@ -81,8 +82,8 @@ 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 bg-linear-to-b from-base to-crust;
+    @apply text-gray-600 bg-bluish-gray dark:bg-rua-gray-900 dark:text-gray-200;
+    /* @apply text bg-linear-to-b from-base to-crust; */
     font-family:
       'Poppins',
       -apple-system,