feat: prev/next page button · astral-halo@45700e7

@@ -43,44 +43,68 @@ else {
 }
 ---
 
-<div id="pagination" class="flex justify-center items-center gap-2">
+<div id="pagination" class="flex w-full">
   {
-    pages.map((p) => {
-      return (
-        <Button
-          class:list={[
-            'theme-bg theme-border border-2 !rounded-xl',
-            current === p.page && 'theme-card-bg-hl',
-          ]}
-          href={p.url}
-        >
-          <span class="mx-1">{`${p.page === -1 ? '...' : p.page}`}</span>
-        </Button>
-      );
-    })
+    current > 1 && (
+      <Button
+        id="prev-page-btn"
+        class="theme-bg theme-border border-2 !rounded-xl mr-auto"
+        href={getPageUrl(current - 1)}
+      >
+        <Icon name="material-symbols:keyboard-double-arrow-left-rounded" class="my-1" />
+      </Button>
+    )
   }
+  <div class="flex justify-center items-center gap-2 mx-auto">
+    {
+      pages.map((p) => {
+        return (
+          <Button
+            class:list={[
+              'theme-bg theme-border border-2 !rounded-xl',
+              current === p.page && 'theme-card-bg-hl',
+            ]}
+            href={p.url}
+          >
+            <span class="mx-1">{`${p.page === -1 ? '...' : p.page}`}</span>
+          </Button>
+        );
+      })
+    }
+    {
+      total > 1 && (
+        <div
+          id="page-jumper"
+          class="flex flex-row items-center theme-card-bg theme-border mx-2 rounded-xl border-2"
+          data-base-url={baseUrl}
+          data-special-pages={specialPages?.map((p) => `${p.page}:${p.url}`).join(',')}
+        >
+          <input
+            id="page-jumper-input"
+            type="number"
+            min="1"
+            max={total}
+            class="duration-300 theme-bg border-none !active:border-none pl-4"
+          />
+          <Button
+            id="page-jumper-button"
+            class="theme-card-bg !rounded-xl !m-0 relative right-0 duration-300"
+          >
+            <Icon name="material-symbols:keyboard-double-arrow-right-rounded" class="my-1" />
+          </Button>
+        </div>
+      )
+    }
+  </div>
   {
-    total > 1 && (
-      <div
-        id="page-jumper"
-        class="flex flex-row items-center theme-card-bg theme-border mx-2 rounded-xl border-2"
-        data-base-url={baseUrl}
-        data-special-pages={specialPages?.map((p) => `${p.page}:${p.url}`).join(',')}
+    current < total && (
+      <Button
+        id="next-page-btn"
+        class="theme-bg theme-border border-2 !rounded-xl ml-auto"
+        href={getPageUrl(current + 1)}
       >
-        <input
-          id="page-jumper-input"
-          type="number"
-          min="1"
-          max={total}
-          class="duration-300 theme-bg border-none !active:border-none pl-4"
-        />
-        <Button
-          id="page-jumper-button"
-          class="theme-card-bg !rounded-xl !m-0 relative right-0 duration-300"
-        >
-          <Icon name="material-symbols:keyboard-double-arrow-right-rounded" class="my-1" />
-        </Button>
-      </div>
+        <Icon name="material-symbols:keyboard-double-arrow-right-rounded" class="my-1" />
+      </Button>
     )
   }
 </div>

@@ -16,6 +16,7 @@ const avaterAttr = profileConfig.avatar
 
 <div
   id="profile-card"
+  transition:persist
   class="theme-card-bg theme-border rounded-xl border-2 flex flex-col items-center text-center"
 >
   <div class="m-3 w-fit min-w-20">
@@ -24,7 +25,9 @@ const avaterAttr = profileConfig.avatar
     </a>
   </div>
   <div class="mx-3 mb-5 flex flex-col w-full">
-    <div class="text-lg mb-3">{profileConfig.name}</div>
+    <div class="text-lg mb-3">
+      <a href="/about/" class="font-bold">{profileConfig.name}</a>
+    </div>
     <div>{profileConfig.bio}</div>
   </div>
 </div>

@@ -19,12 +19,12 @@ if (!title) title = 'Astral Halo';
   transition:persist
   class="flex fixed z-30 w-full h-16 items-center border-b-2 theme-border theme-card-bg"
 >
-  <div id="nav-left" class="left-0 flex mr-auto w-fit">
+  <div id="nav-left" class="flex mr-auto w-fit">
     <Button id="site-name" href="/">
       <span class="text-xl font-bold">{title}</span>
     </Button>
   </div>
-  <div id="nav-center" class="left-0 flex m-auto w-fit max-md:hidden">
+  <div id="nav-center" class="flex m-auto w-fit max-md:hidden">
     {
       navbarConfig.navbarCenterItems.map((item) => {
         const text = i18n(item.text);
@@ -36,7 +36,7 @@ if (!title) title = 'Astral Halo';
       })
     }
   </div>
-  <div id="nav-right" class="left-0 flex ml-auto w-fit">
+  <div id="nav-right" class="flex ml-auto w-fit">
     <div class="flex max-md:hidden">
       {
         navbarConfig.navbarRightItems.onlyWide.map((item) => {

@@ -4,7 +4,7 @@ import Button from './widgets/Button.astro';
 import DarkModeButton from './widgets/DarkModeButton.astro';
 ---
 
-<div id="side-toolbar" transition:persist class="fixed bottom-10 right-0 z-30">
+<div id="side-toolbar" class="fixed bottom-10 right-0 z-30" transition:persist>
   <div id="stb-hide" class="translate-x-full duration-500 ease-in-out" inert>
     <DarkModeButton id="stb-dark-mode" class="" />
   </div>

Commit 45700e7

Commit `45700e7`