feat: performance optimizations and ui improvements (#26)

* test: remove astro-compress

* test: remove astro-compress

* perf: add astro-compress, optimize resource preloading

* perf: moving photoswipe styles to head with non-blocking preload strategy

* test: disable astro-compress

* test: enable astro-compress

* fix: typescript hints

* chore: adjust toc style and gsap animation

* style: optimize gsap animation logic, adjust toc style

* chore: adjust toc style

* fix: photoswipe transition position offset caused by scrollbar-gutter

src/components/Widgets/GsapAnimation.astro

@@ -2,29 +2,23 @@
 import { gsap } from 'gsap'
 
 function setupPostPageAnimation() {
-  // Post Content + Tags + Comments
+  // Elements
   const postContent = document.getElementById('gsap-post-page-content')
   const postContentChildren = postContent ? Array.from(postContent.children) : []
-  const tagsElement = document.getElementById('gsap-post-page-tags')
-  const walineElement = document.getElementById('waline')
-  const allElements = [...postContentChildren, tagsElement, walineElement].filter(Boolean)
-
-  // TOC + Date + Back Button + TOC Icon
+  const tocContainer = document.getElementById('toc-container')
+  const tocIcon = document.getElementById('toc-icon')
   const tocList = document.getElementById('toc-list')
   const tocListChildren = tocList ? Array.from(tocList.children) : []
-  const dateElement = document.getElementById('gsap-post-page-date')
   const backButton = document.getElementById('back-button')
-  const tocIcon = document.getElementById('toc-icon')
-  const tocContainer = document.getElementById('toc-container')
+  const dateElement = document.getElementById('gsap-post-page-date')
 
   // Screen Size Check
   const isLargeScreen = window.matchMedia('(min-width: 1024px)').matches
   const isSmallScreen = window.matchMedia('(max-width: 1535px)').matches
 
   if (isLargeScreen) {
-    // Post Content + Tags + Comments
-    // First 15 elements
-    gsap.to(allElements.slice(0, 15), {
+    // First 14 elements of post content
+    gsap.to(postContentChildren.slice(0, 14), {
       opacity: 1,
       y: 0,
       duration: 0.5,
@@ -32,13 +26,13 @@ function setupPostPageAnimation() {
       ease: 'power2.out',
       stagger: 0.05,
     })
-    // Rest elements as the 16th element
-    if (allElements.length > 15) {
-      gsap.to(allElements.slice(15), {
+    // Rest elements of post content as the 15th element
+    if (postContentChildren.length > 14) {
+      gsap.to(postContentChildren.slice(14), {
         opacity: 1,
         y: 0,
         duration: 0.5,
-        delay: 0.2 + 0.05 * 15,
+        delay: 0.2 + 0.05 * 14,
         ease: 'power2.out',
       })
     }
@@ -49,7 +43,7 @@ function setupPostPageAnimation() {
         opacity: 1,
         y: 0,
         duration: 0.5,
-        delay: 0.2,
+        delay: 0.15,
         ease: 'power2.out',
       })
     }
@@ -60,7 +54,7 @@ function setupPostPageAnimation() {
         opacity: 1,
         y: 0,
         duration: 0.5,
-        delay: 0.2,
+        delay: 0.25,
         ease: 'power2.out',
       })
     }
@@ -71,7 +65,7 @@ function setupPostPageAnimation() {
         opacity: 1,
         y: 0,
         duration: 0.5,
-        delay: 0.2,
+        delay: 0.25,
         ease: 'power2.out',
         stagger: 0.025,
       })
@@ -89,9 +83,8 @@ function setupPostPageAnimation() {
     }
   }
   else {
-    // Post Content + Tags + Comments
-    // First 6 elements
-    gsap.to(allElements.slice(0, 6), {
+    // First 7 elements of post content
+    gsap.to(postContentChildren.slice(0, 7), {
       opacity: 1,
       y: 0,
       duration: 0.5,
@@ -99,19 +92,9 @@ function setupPostPageAnimation() {
       ease: 'power2.out',
       stagger: 0.05,
     })
-    // Rest elements as the 7th element
-    if (allElements.length > 6) {
-      gsap.to(allElements.slice(6), {
-        opacity: 1,
-        y: 0,
-        duration: 0.5,
-        delay: 0.2 + 0.05 * 6,
-        ease: 'power2.out',
-      })
-    }
   }
 
-  // Mobile Animation (for screens smaller than 1536px)
+  // TOC Container
   if (isSmallScreen && tocContainer) {
     gsap.to(tocContainer, {
       opacity: 1,

src/components/Widgets/PhotoSwipe.astro

@@ -1,6 +1,5 @@
 <script>
 import PhotoSwipeLightbox from 'photoswipe/lightbox'
-import 'photoswipe/style.css'
 
 let lightbox: PhotoSwipeLightbox
 const pswp = import('photoswipe')
@@ -49,7 +48,6 @@ function setupPhotoSwipe() {
   })
 
   lightbox.init()
-
   bodyElement.setAttribute('data-photoswipe-initialized', 'true')
 }
 

src/components/Widgets/TOC.astro

@@ -22,7 +22,7 @@ const filteredHeadings = headings.filter(heading =>
   // TOC Container
   <div
     id="toc-container"
-    class="mb-6 uno-round-border bg-secondary/5 2xl:(fixed left-0 top-43.5 max-w-[min(calc(50vw-38rem),13rem)] border-none bg-secondary/0)"
+    class="mb-6 uno-round-border bg-secondary/5 2xl:(fixed left-0 top-45.5 max-w-[min(calc(50vw-38rem),13rem)] border-none bg-secondary/0)"
   >
     {/* Hidden Checkbox */}
     <input
@@ -46,7 +46,7 @@ const filteredHeadings = headings.filter(heading =>
         <TocIcon
           id="toc-icon"
           aria-hidden="true"
-          class="ml-1 hidden aspect-square w-4.2 2xl:(mt-4 block origin-center active:scale-90!)"
+          class="ml-4 hidden aspect-square w-4.2 2xl:(mt-4 block origin-center active:scale-90!)"
           fill="currentColor"
         />
       </label>
@@ -96,18 +96,20 @@ const filteredHeadings = headings.filter(heading =>
   --at-apply: 'ml-4 font-semibold 2xl:hidden';
 }
 .toc-list {
-  --at-apply: 'mb-4 mt-1 list-none pl-0 space-y-2 2xl:space-y-1.2';
+  --at-apply: 'mb-2.2 mt-0 list-none pl-0 space-y-1.1 2xl:(mb-2 space-y-1)';
 }
 .toc-link-h2, .toc-link-h3, .toc-link-h4 {
   --at-apply: 'text-balance text-sm font-normal no-underline 2xl:(text-3.2 c-secondary/60 transition-colors transition-font-weight duration-300 ease-out hover:c-secondary hover:font-medium)';
 }
-
+.toc-list > :first-child {
+  --at-apply: 'mt-0';
+}
 /* Initial collapsed state with zero height grid row */
 .accordion-wrapper {
   --at-apply: 'grid rows-[0fr] transition-all duration-350 ease-in-out';
 }
 .accordion-content {
-  --at-apply: 'max-h-66 overflow-hidden pl-4 pr-6 2xl:(max-h-[calc(100vh-26rem)] pl-1)';
+  --at-apply: 'max-h-58 overflow-hidden pl-4 pr-6 2xl:max-h-[calc(100vh-26.5rem)]';
 }
 
 /* When toggle is checked, expand the wrapper to show content */