style: add fade animations to roc, back button, tags and waline comment, refactor katex import method

package.json

@@ -22,6 +22,7 @@
     "astro-robots-txt": "^1.0.0",
     "canvaskit-wasm": "^0.40.0",
     "feed": "^5.0.1",
+    "katex": "^0.16.22",
     "markdown-it": "^14.1.0",
     "mdast-util-to-string": "^4.0.0",
     "node-html-parser": "^7.0.1",

pnpm-lock.yaml

@@ -32,6 +32,9 @@ importers:
       feed:
         specifier: ^5.0.1
         version: 5.0.1
+      katex:
+        specifier: ^0.16.22
+        version: 0.16.22
       markdown-it:
         specifier: ^14.1.0
         version: 14.1.0

src/components/Comments/Waline.astro

@@ -19,7 +19,8 @@ const { waline: { serverURL = '', emoji = [], search = false, imageUploader = fa
 
 <div
   id="waline"
-  class="mt-16"
+  class="animation-fade-in mt-16"
+  style="--animation-delay: 0.8s;"
 ></div>
 
 <!-- >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->

src/components/Widgets/FadeUpAnimation.astro

@@ -1,7 +1,7 @@
 <script>
 function resetFadeUpAnimation() {
   document.querySelectorAll('.animation-fade-up').forEach((container) => {
-    const childElements = Array.from(container.children).slice(0, 20)
+    const childElements = Array.from(container.children)
     childElements.forEach(element =>
       (element as HTMLElement).style.animationName = 'none',
     )

src/components/Widgets/GoBack.astro

@@ -4,7 +4,7 @@ import GoBackIcon from '@/assets/icons/go-back.svg';
 
 <button
   id="back-button"
-  class="hidden"
+  class="animation-fade-goback hidden"
   lg="block absolute c-secondary/40 left--10 top-1/2 aspect-square w-4.5 translate-y--1/2 transition-colors duration-300 ease-out c-secondary active:scale-90 hover:c-primary/80"
   aria-label="Go back"
 >

src/components/Widgets/TOC.astro

@@ -37,7 +37,7 @@ const filteredHeadings = headings.filter(heading =>
 
         <TocIcon
           aria-hidden="true"
-          class="ml-1 hidden aspect-square w-4.2 2xl:(mt-4 block origin-center active:scale-90)"
+          class="animation-fade-in ml-1 hidden aspect-square w-4.2 2xl:(mt-4 block origin-center active:scale-90)"
           fill="currentColor"
         />
       </label>
@@ -50,7 +50,10 @@ const filteredHeadings = headings.filter(heading =>
         class="accordion-content"
         aria-label="Table of Contents"
       >
-        <ul class="toc-list">
+        <ul
+          class="animation-fade-up toc-list"
+          style="--animation-interval: 0.04s;"
+        >
           {filteredHeadings.map(heading => (
             <li
               class:list={{

src/layouts/Head.astro

@@ -1,5 +1,6 @@
 ---
 import { ClientRouter } from 'astro:transitions'
+import katexCSS from 'katex/dist/katex.min.css?url'
 import { allLocales, defaultLocale, themeConfig } from '@/config'
 import { ui } from '@/i18n/ui'
 import { getPageInfo } from '@/utils/page'
@@ -55,7 +56,7 @@ const pageImage = postSlug
 <link rel="preload" href="/fonts/Snell-Black.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="/fonts/Snell-Bold.woff2" as="font" type="font/woff2" crossorigin />
 {commentEnabled && walineServerURL && <link rel="stylesheet" href="/assets/waline/waline.css" />}
-{katexEnabled && <link rel="stylesheet" href="/assets/katex/katex.min.css" />}
+{katexEnabled && <link rel="stylesheet" href={katexCSS} />}
 <link rel="alternate" href="/rss.xml" type="application/rss+xml" title="RSS Feed" />
 <link rel="alternate" href="/atom.xml" type="application/atom+xml" title="Atom Feed" />
 <link rel="sitemap" href="/sitemap-index.xml" />

src/pages/[...posts_slug].astro

@@ -123,7 +123,8 @@ const { Content, headings, remarkPluginFrontmatter } = await render(post)
 
     <!-- Date -->
     <div
-      class="mb-16.3 block c-primary font-time"
+      class="animation-fade-in mb-16.3 block c-primary font-time"
+      style="--animation-distance: 1rem;"
       transition:name={`time-${post.data.abbrlink || post.id}-${lang}`}
       data-disable-theme-transition
     >
@@ -143,7 +144,10 @@ const { Content, headings, remarkPluginFrontmatter } = await render(post)
 
   <!-- Tags -->
   {post.data.tags && post.data.tags.length > 0 && (
-    <div class="uno-decorative-line"></div>
+    <div
+      class="animation-fade-in uno-decorative-line"
+      style="--animation-delay: 0.8s;"
+    ></div>
     <div class="uno-tags-wrapper">
       {post.data.tags.map((tag: string) => (
         <a

src/styles/animation.css

@@ -45,10 +45,10 @@ html[data-theme-changing] [data-disable-theme-transition] {
   }
 }
 
-.animation-fade-up > *:nth-child(-n+20) {
+.animation-fade-up > * {
   opacity: 0;
   animation: fadeUp 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
-  animation-delay: calc((var(--animation-order, 0) - 1) * 0.08s);
+  animation-delay: calc((var(--animation-order, 0) - 1) * var(--animation-interval, 0.08s));
 }
 .animation-fade-up > *:nth-child(1) { --animation-order: 1; }
 .animation-fade-up > *:nth-child(2) { --animation-order: 2; }
@@ -69,4 +69,38 @@ html[data-theme-changing] [data-disable-theme-transition] {
 .animation-fade-up > *:nth-child(17) { --animation-order: 17; }
 .animation-fade-up > *:nth-child(18) { --animation-order: 18; }
 .animation-fade-up > *:nth-child(19) { --animation-order: 19; }
-.animation-fade-up > *:nth-child(20) { --animation-order: 20; }
+.animation-fade-up > *:nth-child(n+20) { --animation-order: 20; }
+
+/* Fade In Animation >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(var(--animation-distance, 3rem));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animation-fade-in {
+  opacity: 0;
+  animation: fadeIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  animation-delay: var(--animation-delay, 0s);
+}
+
+@keyframes fadeInGoBack {
+  from {
+    opacity: 0;
+    transform: translateY(-50%) translateX(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0);
+  }
+}
+
+.animation-fade-goback {
+  opacity: 0;
+  animation: fadeInGoBack 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}