chore: bump dependencies (#138)

升级所有依赖的版本，并简化部分 TailwindCSS 的写法。 /kind improvement ```release-note None ```
2025-10-14 14:30:50 +00:00 · 2024-04-12 00:10:11 +08:00
parent 42a2546b6b
commit d4562c38de
20 changed files with 559 additions and 380 deletions
--- a/package.json
+++ b/package.json
@@ -37,33 +37,33 @@
    "type": "git"
  },
  "devDependencies": {
-    "@iconify-json/bx": "^1.1.6",
-    "@iconify-json/gg": "^1.1.5",
-    "@iconify-json/simple-icons": "^1.1.74",
-    "@iconify-json/tabler": "^1.1.80",
+    "@iconify-json/bx": "^1.1.10",
+    "@iconify-json/gg": "^1.1.9",
+    "@iconify-json/simple-icons": "^1.1.99",
+    "@iconify-json/tabler": "^1.1.109",
    "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/typography": "^0.5.9",
-    "@types/alpinejs": "^3.7.2",
+    "@tailwindcss/typography": "^0.5.12",
+    "@types/alpinejs": "^3.13.10",
    "@types/node": "18.11.9",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.43.0",
-    "eslint-config-prettier": "^8.8.0",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^8.10.0",
    "eslint-plugin-prettier": "^4.2.1",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.38",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.3.0",
    "release-it": "^15.11.0",
-    "sass": "^1.69.3",
-    "tailwindcss": "^3.3.2",
-    "tailwindcss-plugin-icons": "^2.2.0",
+    "sass": "^1.74.1",
+    "tailwindcss": "^3.4.3",
+    "tailwindcss-plugin-icons": "^2.2.2",
    "typescript": "^4.9.5",
-    "vite": "^4.3.9"
+    "vite": "^5.2.8"
  },
  "dependencies": {
-    "alpinejs": "^3.12.2",
-    "tocbot": "^4.21.2",
-    "pupa": "^3.1.0"
+    "alpinejs": "^3.13.8",
+    "pupa": "^3.1.0",
+    "tocbot": "^4.25.0"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/templates/archives.html
+++ b/templates/archives.html
@@ -58,7 +58,7 @@
                        >
                        </a>
                      </div>
-                      <div class="text-sm font-light line-clamp-6 dark:text-slate-200">
+                      <div class="line-clamp-6 text-sm font-light dark:text-slate-200">
                        <th:block th:text="${post.status.excerpt}"></th:block>
                      </div>
                    </div>
--- a/templates/assets/dist/main.iife.js
+++ b/templates/assets/dist/main.iife.js
--- a/templates/assets/dist/style.css
+++ b/templates/assets/dist/style.css
--- a/templates/links.html
+++ b/templates/links.html
@@ -15,7 +15,7 @@
                class="relative flex items-center space-x-3 rounded border border-gray-300 bg-white px-5 py-4 shadow-sm hover:border-gray-400 hover:shadow dark:border-slate-600 dark:bg-slate-700 dark:hover:border-slate-700"
              >
                <div class="flex-shrink-0">
-                  <img class="h-12 w-12 rounded-full" th:src="${link.spec.logo}" th:alt="${link.spec.displayName}" />
+                  <img class="size-12 rounded-full" th:src="${link.spec.logo}" th:alt="${link.spec.displayName}" />
                </div>
                <div class="min-w-0 flex-1">
                  <div>
--- a/templates/modules/category-tree.html
+++ b/templates/modules/category-tree.html
@@ -3,11 +3,11 @@
    <a
      th:href="@{${category.status.permalink}}"
      th:title="${category.spec.displayName}"
-      class="group flex items-center justify-between rounded py-1 px-1.5 transition-all hover:bg-gray-100 dark:hover:bg-slate-700"
+      class="group flex items-center justify-between rounded px-1.5 py-1 transition-all hover:bg-gray-100 dark:hover:bg-slate-700"
    >
      <span class="text-sm opacity-80 dark:text-slate-50" th:text="${category.spec.displayName}"> </span>
      <span
-        class="rounded bg-gray-100 py-0.5 px-1 text-xs tabular-nums opacity-70 group-hover:bg-white dark:bg-slate-600 dark:text-slate-50 dark:group-hover:bg-slate-500"
+        class="rounded bg-gray-100 px-1 py-0.5 text-xs tabular-nums opacity-70 group-hover:bg-white dark:bg-slate-600 dark:text-slate-50 dark:group-hover:bg-slate-500"
        th:text="${category.status.visiblePostCount}"
      >
      </span>
--- a/templates/modules/featured-post-card.html
+++ b/templates/modules/featured-post-card.html
@@ -2,12 +2,12 @@
  th:fragment="featured-post-card(post)"
  class="group grid cursor-pointer grid-cols-1 overflow-hidden rounded-xl bg-white shadow-md transition-all duration-500 hover:shadow-lg dark:bg-slate-800 sm:grid-cols-5"
 >
-  <div th:if="${not #strings.isEmpty(post.spec.cover)}" class="aspect-w-16 aspect-h-9 col-span-3">
+  <div th:if="${not #strings.isEmpty(post.spec.cover)}" class="aspect-h-9 aspect-w-16 col-span-3">
    <a th:href="@{${post.status.permalink}}" th:title="${post.spec.title}">
      <img
        th:src="${post.spec.cover}"
        th:alt="${post.spec.title}"
-        class="h-full w-full object-cover transition-all duration-500"
+        class="size-full object-cover transition-all duration-500"
      />
    </a>
  </div>
@@ -34,18 +34,18 @@
      </a>
    </div>
    <h1
-      class="cursor-pointer text-2xl font-medium transition-all line-clamp-2 hover:text-gray-500 hover:underline dark:text-slate-50 dark:hover:text-white"
+      class="line-clamp-2 cursor-pointer text-2xl font-medium transition-all hover:text-gray-500 hover:underline dark:text-slate-50 dark:hover:text-white"
    >
      <a th:href="@{${post.status.permalink}}" th:text="${post.spec.title}"></a>
    </h1>
-    <p class="font-sm font-light line-clamp-6 dark:text-slate-200" th:text="${post.status.excerpt}"></p>
+    <p class="font-sm line-clamp-6 font-light dark:text-slate-200" th:text="${post.status.excerpt}"></p>
    <div class="mt-4 flex flex-1 items-center justify-start gap-2">
      <a th:href="@{${post.owner.permalink}}" th:title="${post.owner.displayName}">
        <img
          th:src="${post.owner.avatar ?: #theme.assets('/images/default-avatar.svg')}"
          th:title="${post.owner.displayName}"
          th:alt="${post.owner.displayName}"
-          class="h-8 w-8 rounded-full border drop-shadow-sm dark:border-slate-700"
+          class="size-8 rounded-full border drop-shadow-sm dark:border-slate-700"
        />
      </a>
      <a
--- a/templates/modules/footer-social.html
+++ b/templates/modules/footer-social.html
@@ -6,14 +6,14 @@
      class="text-gray-500 hover:text-gray-900 dark:hover:text-white"
      th:title="${social_media.name}"
    >
-      <div th:classappend="${social_media.icon}" class="h-5 w-5"></div>
+      <div th:classappend="${social_media.icon}" class="size-5"></div>
    </a>
    <span
      th:if="${social_media.url_type == 'image'}"
      x-data="{openImageModal:false}"
      class="cursor-pointer text-gray-500 hover:text-gray-900 dark:hover:text-white"
    >
-      <div th:classappend="${social_media.icon}" class="h-5 w-5" @click="openImageModal = true"></div>
+      <div th:classappend="${social_media.icon}" class="size-5" @click="openImageModal = true"></div>
      <div>
        <div
          class="fixed inset-0 z-50 bg-gray-800/40 opacity-100 backdrop-blur-sm dark:bg-black/80"
--- a/templates/modules/footer.html
+++ b/templates/modules/footer.html
@@ -4,7 +4,7 @@
      <img
        th:if="${not #strings.isEmpty(theme.config.footer.logo)} or ${not #strings.isEmpty(site.logo)}"
        th:src="${theme.config.footer.logo ?: site.logo}"
-        class="mr-3 h-8 w-8"
+        class="mr-3 size-8"
        th:alt="${site.title}"
      />
      <span
@@ -46,7 +46,7 @@
      class="container mx-auto block text-center text-sm text-gray-500 dark:text-slate-300"
    >
      <p class="flex items-center justify-center gap-1">
-        <img th:src="@{/assets/images/gongan_beian.png}" class="h-4 w-4" alt="gongan_beian" />
+        <img th:src="@{/assets/images/gongan_beian.png}" class="size-4" alt="gongan_beian" />
        <a
          href="https://beian.mps.gov.cn/#/query/webSearch"
          class="hover:underline"
@@ -137,7 +137,7 @@
          th:if="${not #strings.isEmpty(theme.config.beian.gongan_text)}"
          class="inline-flex items-center justify-center gap-1 text-sm text-gray-500 sm:justify-start"
        >
-          <img th:src="@{/assets/images/gongan_beian.png}" class="h-4 w-4" alt="gongan_beian" />
+          <img th:src="@{/assets/images/gongan_beian.png}" class="size-4" alt="gongan_beian" />
          <a
            href="https://beian.mps.gov.cn/#/query/webSearch"
            class="hover:underline"
--- a/templates/modules/header.html
+++ b/templates/modules/header.html
@@ -49,7 +49,7 @@
              class="flex w-full items-center text-left text-sm hover:bg-gray-50 dark:hover:bg-slate-600"
            >
              <a
-                class="h-full w-full truncate px-4 py-2 text-gray-600 hover:text-blue-600 dark:text-slate-50 dark:hover:text-gray-300"
+                class="size-full truncate px-4 py-2 text-gray-600 hover:text-blue-600 dark:text-slate-50 dark:hover:text-gray-300"
                th:href="@{${childMenuItem.status.href}}"
                th:text="${childMenuItem.status.displayName}"
                th:target="${childMenuItem.spec.target?.value}"
@@ -96,9 +96,9 @@
          @mouseleave="close()"
        >
          <div>
-            <div class="h-5 w-5 text-gray-600 hover:text-blue-600 dark:text-slate-100">
+            <div class="size-5 text-gray-600 hover:text-blue-600 dark:text-slate-100">
              <img
-                class="h-5 w-5 rounded-full"
+                class="size-5 rounded-full"
                th:src="${currentUser.avatar ?: #theme.assets('/images/default-avatar.svg')}"
                th:alt="${currentUser.displayName}"
              />
@@ -120,7 +120,7 @@
                class="flex w-full items-center text-left text-sm hover:bg-gray-50 dark:hover:bg-slate-600"
              >
                <a
-                  class="h-full w-full truncate px-4 py-2 text-gray-600 hover:text-blue-600 dark:text-slate-50 dark:hover:text-gray-300"
+                  class="size-full truncate px-4 py-2 text-gray-600 hover:text-blue-600 dark:text-slate-50 dark:hover:text-gray-300"
                  href="/console"
                  target="_blank"
                >
@@ -132,7 +132,7 @@
                class="flex w-full items-center text-left text-sm hover:bg-gray-50 dark:hover:bg-slate-600"
              >
                <a
-                  class="h-full w-full truncate px-4 py-2 text-gray-600 hover:text-blue-600 dark:text-slate-50 dark:hover:text-gray-300"
+                  class="size-full truncate px-4 py-2 text-gray-600 hover:text-blue-600 dark:text-slate-50 dark:hover:text-gray-300"
                  href="/logout"
                >
                  退出登录
@@ -143,7 +143,7 @@
                class="flex w-full items-center text-left text-sm hover:bg-gray-50 dark:hover:bg-slate-600"
              >
                <a
-                  class="h-full w-full truncate px-4 py-2 text-gray-600 hover:text-blue-600 dark:text-slate-50 dark:hover:text-gray-300"
+                  class="size-full truncate px-4 py-2 text-gray-600 hover:text-blue-600 dark:text-slate-50 dark:hover:text-gray-300"
                  href="/console/login"
                >
                  登录
@@ -201,7 +201,7 @@
            <ul class="divide-y divide-gray-100 dark:divide-slate-800" th:if="${not #lists.isEmpty(menuItem.children)}">
              <li th:each="childMenuItem : ${menuItem.children}" class="flex w-full items-center text-left text-sm">
                <a
-                  class="h-full w-full truncate px-4 py-2 text-gray-600 dark:text-slate-200"
+                  class="size-full truncate px-4 py-2 text-gray-600 dark:text-slate-200"
                  th:href="@{${childMenuItem.status.href}}"
                  th:text="${childMenuItem.status.displayName}"
                  th:target="${childMenuItem.spec.target?.value}"
--- a/templates/modules/post-card.html
+++ b/templates/modules/post-card.html
@@ -5,19 +5,19 @@
 >
  <div
    th:if="${cover} and ${not #strings.isEmpty(post.spec.cover)}"
-    class="aspect-w-16 aspect-h-9"
+    class="aspect-h-9 aspect-w-16"
    th:classappend="${direction == 'column' ? 'col-span-2' : ''}"
  >
    <a th:href="@{${post.status.permalink}}" th:title="${post.spec.title}">
      <img
        th:src="${post.spec.cover}"
        th:alt="${post.spec.title}"
-        class="h-full w-full object-cover transition-all duration-500"
+        class="size-full object-cover transition-all duration-500"
        th:classappend="${animation} ? 'group-hover:scale-105'"
      />
    </a>
-    <div th:if="${post.spec.pinned}" class="absolute !top-1.5 !left-2" title="置顶">
-      <div class="i-bx-arrow-to-top !h-5 !w-5 text-sky-600"></div>
+    <div th:if="${post.spec.pinned}" class="absolute !left-2 !top-1.5" title="置顶">
+      <div class="i-bx-arrow-to-top !size-5 text-sky-600"></div>
    </div>
  </div>
  <div
@@ -47,13 +47,13 @@
      </a>
    </div>
    <h1
-      class="cursor-pointer text-2xl font-medium transition-all line-clamp-2 hover:text-gray-500 hover:underline dark:text-slate-50 dark:hover:text-white"
+      class="line-clamp-2 cursor-pointer text-2xl font-medium transition-all hover:text-gray-500 hover:underline dark:text-slate-50 dark:hover:text-white"
      th:classappend="|${direction == 'column' ? 'sm:line-clamp-2' : ''} ${list_layout == 'grid_2' ? 'sm:line-clamp-3' : ''} ${list_layout == 'grid_3' ? 'sm:line-clamp-4' : ''}|"
    >
      <a th:href="@{${post.status.permalink}}" th:text="${post.spec.title}" th:title="${post.spec.title}"></a>
    </h1>
    <p
-      class="font-sm font-light line-clamp-6 dark:text-slate-200"
+      class="font-sm line-clamp-6 font-light dark:text-slate-200"
      th:text="${post.status.excerpt}"
      th:classappend="${list_layout == 'grid_3' ? ' sm:line-clamp-8' : ''}"
    ></p>
@@ -63,7 +63,7 @@
          th:src="${post.owner.avatar ?: #theme.assets('/images/default-avatar.svg')}"
          th:title="${post.owner.displayName}"
          th:alt="${post.owner.displayName}"
-          class="h-8 w-8 rounded-full border drop-shadow-sm dark:border-slate-700"
+          class="size-8 rounded-full border drop-shadow-sm dark:border-slate-700"
        />
      </a>
      <a
--- a/templates/modules/share-modal.html
+++ b/templates/modules/share-modal.html
@@ -25,7 +25,7 @@
      <div class="flex min-h-full flex-col items-center justify-center p-4 text-center sm:p-0">
        <div
          @click.outside="shareModal = false"
-          class="relative my-4 transform overflow-hidden rounded-lg bg-white dark:bg-slate-800 dark:text-slate-100 p-4 text-left shadow-xl transition-all sm:w-full sm:max-w-xl"
+          class="relative my-4 transform overflow-hidden rounded-lg bg-white p-4 text-left shadow-xl transition-all dark:bg-slate-800 dark:text-slate-100 sm:w-full sm:max-w-xl"
        >
          <h1 class="text-lg font-semibold">分享</h1>
          <div class="my-8">
@@ -33,7 +33,7 @@
              <template x-for="item in activeShareItems">
                <div class="inline-flex flex-col items-center justify-center gap-1.5 rounded-full">
                  <div
-                    class="inline-flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-gray-100 transition-all hover:bg-gray-200 sm:h-16 sm:w-16 dark:bg-slate-600 dark:text-slate-50 dark:hover:bg-slate-700 dark:hover:text-slate-100"
+                    class="inline-flex size-12 cursor-pointer items-center justify-center rounded-full bg-gray-100 transition-all hover:bg-gray-200 dark:bg-slate-600 dark:text-slate-50 dark:hover:bg-slate-700 dark:hover:text-slate-100 sm:size-16"
                    @click="handleShare(item.id)"
                  >
                    <div class="text-xl text-gray-900 dark:text-slate-50" :class="item.icon"></div>
@@ -44,7 +44,7 @@
            </div>
            <div class="mt-10">
              <div
-                class="flex flex-wrap items-center justify-center gap-1 rounded-lg bg-gray-100 dark:bg-slate-700 px-3 py-2 sm:justify-between"
+                class="flex flex-wrap items-center justify-center gap-1 rounded-lg bg-gray-100 px-3 py-2 dark:bg-slate-700 sm:justify-between"
              >
                <div class="select-all text-xs font-light text-gray-600 dark:text-slate-100" x-text="permalink"></div>
                <div
@@ -59,9 +59,11 @@
        <div>
          <div
            @click="shareModal = false"
-            class="group inline-flex items-center justify-center rounded-full bg-white dark:bg-slate-800 p-1.5"
+            class="group inline-flex items-center justify-center rounded-full bg-white p-1.5 dark:bg-slate-800"
          >
-            <i class="i-tabler-x block text-gray-600 hover:text-gray-900 dark:text-slate-100 dark:hover:text-slate-500"></i>
+            <i
+              class="i-tabler-x block text-gray-600 hover:text-gray-900 dark:text-slate-100 dark:hover:text-slate-500"
+            ></i>
          </div>
        </div>
      </div>
--- a/templates/modules/widgets/latest-comments.html
+++ b/templates/modules/widgets/latest-comments.html
@@ -9,7 +9,7 @@
    <ul role="list" class="divide-y divide-gray-100 dark:divide-slate-700">
      <li class="py-3">
        <div class="flex space-x-3">
-          <img class="h-6 w-6 rounded-full" src="https://ryanc.cc/avatar" alt="Comment Avatar" />
+          <img class="size-6 rounded-full" src="https://ryanc.cc/avatar" alt="Comment Avatar" />
          <div class="flex-1 space-y-1">
            <div class="flex items-center justify-between">
              <h3 class="text-sm font-medium dark:text-slate-100">Phyllis McKenzie</h3>
@@ -23,7 +23,7 @@
      </li>
      <li class="py-3">
        <div class="flex space-x-3">
-          <img class="h-6 w-6 rounded-full" src="https://ryanc.cc/avatar" alt="Comment Avatar" />
+          <img class="size-6 rounded-full" src="https://ryanc.cc/avatar" alt="Comment Avatar" />
          <div class="flex-1 space-y-1">
            <div class="flex items-center justify-between">
              <h3 class="text-sm font-medium dark:text-slate-100">Willard Labadie I</h3>
@@ -37,7 +37,7 @@
      </li>
      <li class="py-3">
        <div class="flex space-x-3">
-          <img class="h-6 w-6 rounded-full" src="https://ryanc.cc/avatar" alt="Comment Avatar" />
+          <img class="size-6 rounded-full" src="https://ryanc.cc/avatar" alt="Comment Avatar" />
          <div class="flex-1 space-y-1">
            <div class="flex items-center justify-between">
              <h3 class="text-sm font-medium dark:text-slate-100">Miss Leonard Sporer</h3>
@@ -49,7 +49,7 @@
      </li>
      <li class="py-3">
        <div class="flex space-x-3">
-          <img class="h-6 w-6 rounded-full" src="https://ryanc.cc/avatar" alt="Comment Avatar" />
+          <img class="size-6 rounded-full" src="https://ryanc.cc/avatar" alt="Comment Avatar" />
          <div class="flex-1 space-y-1">
            <div class="flex items-center justify-between">
              <h3 class="text-sm font-medium dark:text-slate-100">Tyrone Fisher</h3>
@@ -61,7 +61,7 @@
      </li>
      <li class="py-3">
        <div class="flex space-x-3">
-          <img class="h-6 w-6 rounded-full" src="https://ryanc.cc/avatar" alt="Comment Avatar" />
+          <img class="size-6 rounded-full" src="https://ryanc.cc/avatar" alt="Comment Avatar" />
          <div class="flex-1 space-y-1">
            <div class="flex items-center justify-between">
              <h3 class="text-sm font-medium dark:text-slate-100">Angie Braun V</h3>
--- a/templates/modules/widgets/popular-posts.html
+++ b/templates/modules/widgets/popular-posts.html
@@ -10,7 +10,7 @@
      <li class="py-3" th:each="post : ${posts}">
        <div class="flex items-center justify-between">
          <div class="flex flex-col gap-1">
-            <h3 class="text-sm font-medium line-clamp-2 hover:text-gray-500 hover:underline dark:text-slate-100">
+            <h3 class="line-clamp-2 text-sm font-medium hover:text-gray-500 hover:underline dark:text-slate-100">
              <a th:text="${post.spec.title}" th:href="@{${post.status.permalink}}" th:title="${post.spec.title}"></a>
            </h3>
            <p
--- a/templates/modules/widgets/profile.html
+++ b/templates/modules/widgets/profile.html
@@ -4,7 +4,7 @@
 >
  <div class="flex flex-col items-center justify-center gap-4">
    <div th:if="${not #strings.isEmpty(theme.config.sidebar.profile.logo)}" class="relative h-24 w-24">
-      <img th:src="${theme.config.sidebar.profile.logo}" th:alt="${site.title}" class="h-full w-full rounded-full" />
+      <img th:src="${theme.config.sidebar.profile.logo}" th:alt="${site.title}" class="size-full rounded-full" />
    </div>
    <div><h1 class="text-2xl font-medium dark:text-slate-50" th:text="${site.title}"></h1></div>
    <div th:if="${not #strings.isEmpty(site.subtitle)}">
--- a/templates/moments.html
+++ b/templates/moments.html
@@ -42,7 +42,7 @@
              th:src="${moment.owner.avatar ?: #theme.assets('/images/default-avatar.svg')}"
              th:title="${moment.owner.displayName}"
              th:alt="${moment.owner.displayName}"
-              class="h-12 w-12 rounded-full"
+              class="size-12 rounded-full"
            />
            <div class="ml-6" style="width: calc(100% - 4.75rem)">
              <div
@@ -67,10 +67,10 @@
                    <video th:src="${media.url}" class="rounded-lg object-cover"></video>
                    <div
                      th:if="${#strings.equals(media.type,'VIDEO')}"
-                      class="absolute flex h-full w-full cursor-pointer items-center justify-center rounded-lg bg-gray-50 opacity-50 transition-all hover:opacity-70"
+                      class="absolute flex size-full cursor-pointer items-center justify-center rounded-lg bg-gray-50 opacity-50 transition-all hover:opacity-70"
                      @click="openVideoModal = true"
                    >
-                      <i class="i-tabler-play !h-7 !w-7"></i>
+                      <i class="i-tabler-play !size-7"></i>
                    </div>
                    <template x-teleport="body">
                      <div>
@@ -124,8 +124,8 @@
                  x-bind:class="{'!text-red-700': upvoted(name)}"
                  @click="handleUpvote(name)"
                >
-                  <i x-show="upvoted(name)" class="i-tabler-heart-filled h-3 w-3"></i>
-                  <i x-show="!upvoted(name)" class="i-tabler-heart h-3 w-3"></i>
+                  <i x-show="upvoted(name)" class="i-tabler-heart-filled size-3"></i>
+                  <i x-show="!upvoted(name)" class="i-tabler-heart size-3"></i>
                  <span
                    class="ml-1"
                    th:attr="data-upvote-moment-name=${moment.metadata.name}"
@@ -138,11 +138,11 @@
                  :class="{'!text-black dark:!text-slate-300':showComment}"
                  x-on:click="showComment = !showComment"
                >
-                  <i class="i-tabler-message-circle h-3 w-3"></i>
+                  <i class="i-tabler-message-circle size-3"></i>
                  <span class="ml-1" th:text="${moment.stats.approvedComment}"> </span>
                </div>
                <div class="inline-flex items-center text-sm text-gray-400 transition-all dark:text-slate-400">
-                  <i class="i-tabler-calendar h-3 w-3"></i>
+                  <i class="i-tabler-calendar size-3"></i>
                  <span class="ml-1" th:text="${#dates.format(moment.spec.releaseTime,'yyyy-MM-dd')}"> </span>
                </div>
              </div>
--- a/templates/page.html
+++ b/templates/page.html
@@ -20,7 +20,7 @@
              th:if="${not #strings.isEmpty(singlePage.owner.avatar)}"
              th:src="${singlePage.owner.avatar}"
              th:alt="${singlePage.owner.displayName}"
-              class="h-10 w-10 rounded-full"
+              class="size-10 rounded-full"
            />
          </a>
          <div class="flex flex-col gap-0.5">
@@ -79,9 +79,9 @@
      sec:authorize="isAuthenticated()"
      th:href="|/console/single-pages/editor?name=${singlePage.metadata.name}&returnToView=true|"
      id="edit-button"
-      class="fixed bottom-10 right-10 flex h-14 w-14 items-center justify-center rounded-full bg-[#4CCBA0] text-white shadow transition-all duration-300 hover:opacity-80 hover:shadow-lg"
+      class="fixed bottom-10 right-10 flex size-14 items-center justify-center rounded-full bg-[#4CCBA0] text-white shadow transition-all duration-300 hover:opacity-80 hover:shadow-lg"
    >
-      <div class="i-tabler-edit !h-7 !w-7"></div>
+      <div class="i-tabler-edit !size-7"></div>
    </a>
  </th:block>
 </html>
--- a/templates/post.html
+++ b/templates/post.html
@@ -41,7 +41,7 @@
            <img
              th:if="${not #strings.isEmpty(post.owner.avatar)}"
              th:src="${post.owner.avatar}"
-              class="h-10 w-10 rounded-full"
+              class="size-10 rounded-full"
              th:alt="${post.owner.displayName}"
            />
          </a>
@@ -165,9 +165,9 @@
      sec:authorize="isAuthenticated()"
      th:href="|/console/posts/editor?name=${post.metadata.name}&returnToView=true|"
      id="edit-button"
-      class="fixed bottom-10 right-10 flex h-14 w-14 items-center justify-center rounded-full bg-[#4CCBA0] text-white shadow transition-all duration-300 hover:opacity-80 hover:shadow-lg"
+      class="fixed bottom-10 right-10 flex size-14 items-center justify-center rounded-full bg-[#4CCBA0] text-white shadow transition-all duration-300 hover:opacity-80 hover:shadow-lg"
    >
-      <div class="i-tabler-edit !h-7 !w-7"></div>
+      <div class="i-tabler-edit !size-7"></div>
    </a>
  </th:block>
 </html>