chore: update theme guides and project comments, add astro-compress to remove comments

src/components/Widgets/GithubCard.astro

@@ -4,6 +4,7 @@ function setupGithubCards() {
   if (githubCards.length === 0)
     return
 
+  // Create an intersection observer to lazy load GitHub repo data when cards enter viewport
   const observer = new IntersectionObserver((entries) => {
     entries.forEach((entry) => {
       if (entry.isIntersecting) {

src/components/Widgets/GsapAnimation.astro

@@ -10,8 +10,10 @@ function setupPostPageAnimation() {
   const tocContainer = document.getElementById('toc-container')
 
   const isLargeScreen = window.matchMedia('(min-width: 1024px)').matches
+  const isSmallScreen = window.matchMedia('(max-width: 1535px)').matches
 
-  // Post Content + Tags + Comments (First 15 elements)
+  // Post Content + Tags + Comments
+  // First 15 elements
   gsap.from(allElements.slice(0, 15), {
     opacity: 0,
     y: '3rem',
@@ -20,8 +22,7 @@ function setupPostPageAnimation() {
     ease: 'power2.out',
     stagger: 0.05,
   })
-
-  // Post Content + Tags + Comments (Rest elements)
+  // Rest elements as the 16 element
   if (allElements.length > 15) {
     gsap.from(allElements.slice(15), {
       opacity: 0,
@@ -32,8 +33,9 @@ function setupPostPageAnimation() {
     })
   }
 
+  // Desktop Animations
   if (isLargeScreen) {
-    // Desktop Post Date
+    // Post Date
     if (dateElement) {
       gsap.from(dateElement, {
         opacity: 0,
@@ -44,7 +46,7 @@ function setupPostPageAnimation() {
       })
     }
 
-    // Desktop TOC Icon
+    // TOC Icon
     if (tocIcon) {
       gsap.from(tocIcon, {
         opacity: 0,
@@ -55,7 +57,7 @@ function setupPostPageAnimation() {
       })
     }
 
-    // Desktop Toc List
+    // Toc List
     if (tocListChildren.length > 0) {
       gsap.from(tocListChildren, {
         opacity: 0,
@@ -67,7 +69,7 @@ function setupPostPageAnimation() {
       })
     }
 
-    // Desktop Back Button
+    // Back Button
     if (backButton) {
       gsap.from(backButton, {
         opacity: 0,
@@ -78,17 +80,16 @@ function setupPostPageAnimation() {
       })
     }
   }
-  else {
-    // Mobile TOC Container
-    if (tocContainer) {
-      gsap.from(tocContainer, {
-        opacity: 0,
-        y: '3rem',
-        duration: 0.5,
-        delay: 0.1,
-        ease: 'power2.out',
-      })
-    }
+
+  // Mobile Animation (for screens smaller than 1536px)
+  if (isSmallScreen && tocContainer) {
+    gsap.from(tocContainer, {
+      opacity: 0,
+      y: '3rem',
+      duration: 0.5,
+      delay: 0.1,
+      ease: 'power2.out',
+    })
   }
 }
 

src/components/Widgets/TOC.astro

@@ -19,25 +19,30 @@ const filteredHeadings = headings.filter(heading =>
 ---
 
 {filteredHeadings.length > 0 && (
+  // TOC Container
   <div
     id="toc-container"
     class="mb-4 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)"
   >
+    {/* Hidden Checkbox */}
     <input
       type="checkbox"
       id="toc-toggle"
       class="accordion-toggle"
       hidden
     />
+    {/* TOC Toggle */}
     <div class="relative h-12 w-full">
       <label
         for="toc-toggle"
         class="absolute inset-0 flex cursor-pointer items-center 2xl:(static flex c-secondary/40 transition-colors ease-out hover:c-secondary/80)"
       >
+        {/* Title on Mobile */}
         <span class="toc-title">
           {currentUI.toc}
         </span>
 
+        {/* Icon on Desktop */}
         <TocIcon
           id="toc-icon"
           aria-hidden="true"
@@ -47,13 +52,14 @@ const filteredHeadings = headings.filter(heading =>
       </label>
     </div>
 
-    {/* Expandable content wrapper */}
+    {/* Expandable Content Wrapper with Accordion Animation */}
     <div class="accordion-wrapper">
       <nav
         id="toc-content"
         class="accordion-content"
         aria-label="Table of Contents"
       >
+        {/* TOC List */}
         <ul
           id="toc-list"
           class="toc-list"