refactor: replace css fade animations with gsap, optimize post page animations and mobile responsiveness

This commit is contained in:
radishzzz 2025-05-18 16:03:17 +01:00
parent 90c2099fec
commit db4aa56987
9 changed files with 239 additions and 211 deletions

81
.vscode/settings.json vendored
View file

@ -57,84 +57,5 @@
"typescript.tsdk": "node_modules/typescript/lib", "typescript.tsdk": "node_modules/typescript/lib",
"files.associations": { "files.associations": {
"*.mdx": "markdown" "*.mdx": "markdown"
}, }
"cSpell.words": [
"abbrlink",
"antfu",
"apiflash",
"apos",
"Artículos",
"astrodotbuild",
"astrojs",
"attributify",
"backref",
"belleza",
"Beze",
"Blockquotes",
"blurhash",
"bmoji",
"canvaskit",
"Cpath",
"Csvg",
"Disqus",
"Etiquetas",
"figcaption",
"Frontmatter",
"Fuwriu",
"Giscus",
"GSAP",
"gtag",
"hètí",
"Heti",
"katex",
"Lightbox",
"Macbook",
"mdast",
"Moeyua",
"msrc",
"msvalidate",
"noopener",
"noreferrer",
"Noto",
"oklch",
"opengraph",
"overlayscrollbars",
"pagefind",
"partytown",
"photoswipe",
"pswp",
"radishzz",
"rashomon",
"rehype",
"reimagines",
"Retipografía",
"Retypeset",
"Reviviendo",
"Roundhand",
"Segoe",
"Sentimentalisme",
"Servetus",
"shiki",
"Sobre",
"srcset",
"STIX",
"stylesheet",
"tipográfica",
"titlebar",
"Twikoo",
"Umami",
"unocss",
"unpic",
"vite",
"waline",
"walinejs",
"weibo",
"Возрождая",
"красоту",
"Переверстка",
"Посты",
"себе",
"Теги",
"типографики"
]
} }

View file

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

206
pnpm-lock.yaml generated
View file

@ -10,7 +10,7 @@ importers:
dependencies: dependencies:
'@astrojs/mdx': '@astrojs/mdx':
specifier: ^4.2.6 specifier: ^4.2.6
version: 4.2.6(astro@5.7.13(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.2)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.0)) version: 4.2.6(astro@5.7.13(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.41.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.0))
'@astrojs/partytown': '@astrojs/partytown':
specifier: ^2.1.4 specifier: ^2.1.4
version: 2.1.4 version: 2.1.4
@ -19,10 +19,10 @@ importers:
version: 3.4.0 version: 3.4.0
astro: astro:
specifier: ^5.7.13 specifier: ^5.7.13
version: 5.7.13(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.2)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.0) version: 5.7.13(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.41.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.0)
astro-og-canvas: astro-og-canvas:
specifier: ^0.7.0 specifier: ^0.7.0
version: 0.7.0(astro@5.7.13(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.2)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.0)) version: 0.7.0(astro@5.7.13(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.41.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.0))
astro-robots-txt: astro-robots-txt:
specifier: ^1.0.0 specifier: ^1.0.0
version: 1.0.0 version: 1.0.0
@ -32,6 +32,9 @@ importers:
feed: feed:
specifier: ^5.0.1 specifier: ^5.0.1
version: 5.0.1 version: 5.0.1
gsap:
specifier: ^3.13.0
version: 3.13.0
katex: katex:
specifier: ^0.16.22 specifier: ^0.16.22
version: 0.16.22 version: 0.16.22
@ -829,103 +832,103 @@ packages:
rollup: rollup:
optional: true optional: true
'@rollup/rollup-android-arm-eabi@4.40.2': '@rollup/rollup-android-arm-eabi@4.41.0':
resolution: {integrity: sha512-JkdNEq+DFxZfUwxvB58tHMHBHVgX23ew41g1OQinthJ+ryhdRk67O31S7sYw8u2lTjHUPFxwar07BBt1KHp/hg==} resolution: {integrity: sha512-KxN+zCjOYHGwCl4UCtSfZ6jrq/qi88JDUtiEFk8LELEHq2Egfc/FgW+jItZiOLRuQfb/3xJSgFuNPC9jzggX+A==}
cpu: [arm] cpu: [arm]
os: [android] os: [android]
'@rollup/rollup-android-arm64@4.40.2': '@rollup/rollup-android-arm64@4.41.0':
resolution: {integrity: sha512-13unNoZ8NzUmnndhPTkWPWbX3vtHodYmy+I9kuLxN+F+l+x3LdVF7UCu8TWVMt1POHLh6oDHhnOA04n8oJZhBw==} resolution: {integrity: sha512-yDvqx3lWlcugozax3DItKJI5j05B0d4Kvnjx+5mwiUpWramVvmAByYigMplaoAQ3pvdprGCTCE03eduqE/8mPQ==}
cpu: [arm64] cpu: [arm64]
os: [android] os: [android]
'@rollup/rollup-darwin-arm64@4.40.2': '@rollup/rollup-darwin-arm64@4.41.0':
resolution: {integrity: sha512-Gzf1Hn2Aoe8VZzevHostPX23U7N5+4D36WJNHK88NZHCJr7aVMG4fadqkIf72eqVPGjGc0HJHNuUaUcxiR+N/w==} resolution: {integrity: sha512-2KOU574vD3gzcPSjxO0eyR5iWlnxxtmW1F5CkNOHmMlueKNCQkxR6+ekgWyVnz6zaZihpUNkGxjsYrkTJKhkaw==}
cpu: [arm64] cpu: [arm64]
os: [darwin] os: [darwin]
'@rollup/rollup-darwin-x64@4.40.2': '@rollup/rollup-darwin-x64@4.41.0':
resolution: {integrity: sha512-47N4hxa01a4x6XnJoskMKTS8XZ0CZMd8YTbINbi+w03A2w4j1RTlnGHOz/P0+Bg1LaVL6ufZyNprSg+fW5nYQQ==} resolution: {integrity: sha512-gE5ACNSxHcEZyP2BA9TuTakfZvULEW4YAOtxl/A/YDbIir/wPKukde0BNPlnBiP88ecaN4BJI2TtAd+HKuZPQQ==}
cpu: [x64] cpu: [x64]
os: [darwin] os: [darwin]
'@rollup/rollup-freebsd-arm64@4.40.2': '@rollup/rollup-freebsd-arm64@4.41.0':
resolution: {integrity: sha512-8t6aL4MD+rXSHHZUR1z19+9OFJ2rl1wGKvckN47XFRVO+QL/dUSpKA2SLRo4vMg7ELA8pzGpC+W9OEd1Z/ZqoQ==} resolution: {integrity: sha512-GSxU6r5HnWij7FoSo7cZg3l5GPg4HFLkzsFFh0N/b16q5buW1NAWuCJ+HMtIdUEi6XF0qH+hN0TEd78laRp7Dg==}
cpu: [arm64] cpu: [arm64]
os: [freebsd] os: [freebsd]
'@rollup/rollup-freebsd-x64@4.40.2': '@rollup/rollup-freebsd-x64@4.41.0':
resolution: {integrity: sha512-C+AyHBzfpsOEYRFjztcYUFsH4S7UsE9cDtHCtma5BK8+ydOZYgMmWg1d/4KBytQspJCld8ZIujFMAdKG1xyr4Q==} resolution: {integrity: sha512-KGiGKGDg8qLRyOWmk6IeiHJzsN/OYxO6nSbT0Vj4MwjS2XQy/5emsmtoqLAabqrohbgLWJ5GV3s/ljdrIr8Qjg==}
cpu: [x64] cpu: [x64]
os: [freebsd] os: [freebsd]
'@rollup/rollup-linux-arm-gnueabihf@4.40.2': '@rollup/rollup-linux-arm-gnueabihf@4.41.0':
resolution: {integrity: sha512-de6TFZYIvJwRNjmW3+gaXiZ2DaWL5D5yGmSYzkdzjBDS3W+B9JQ48oZEsmMvemqjtAFzE16DIBLqd6IQQRuG9Q==} resolution: {integrity: sha512-46OzWeqEVQyX3N2/QdiU/CMXYDH/lSHpgfBkuhl3igpZiaB3ZIfSjKuOnybFVBQzjsLwkus2mjaESy8H41SzvA==}
cpu: [arm] cpu: [arm]
os: [linux] os: [linux]
'@rollup/rollup-linux-arm-musleabihf@4.40.2': '@rollup/rollup-linux-arm-musleabihf@4.41.0':
resolution: {integrity: sha512-urjaEZubdIkacKc930hUDOfQPysezKla/O9qV+O89enqsqUmQm8Xj8O/vh0gHg4LYfv7Y7UsE3QjzLQzDYN1qg==} resolution: {integrity: sha512-lfgW3KtQP4YauqdPpcUZHPcqQXmTmH4nYU0cplNeW583CMkAGjtImw4PKli09NFi2iQgChk4e9erkwlfYem6Lg==}
cpu: [arm] cpu: [arm]
os: [linux] os: [linux]
'@rollup/rollup-linux-arm64-gnu@4.40.2': '@rollup/rollup-linux-arm64-gnu@4.41.0':
resolution: {integrity: sha512-KlE8IC0HFOC33taNt1zR8qNlBYHj31qGT1UqWqtvR/+NuCVhfufAq9fxO8BMFC22Wu0rxOwGVWxtCMvZVLmhQg==} resolution: {integrity: sha512-nn8mEyzMbdEJzT7cwxgObuwviMx6kPRxzYiOl6o/o+ChQq23gfdlZcUNnt89lPhhz3BYsZ72rp0rxNqBSfqlqw==}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
'@rollup/rollup-linux-arm64-musl@4.40.2': '@rollup/rollup-linux-arm64-musl@4.41.0':
resolution: {integrity: sha512-j8CgxvfM0kbnhu4XgjnCWJQyyBOeBI1Zq91Z850aUddUmPeQvuAy6OiMdPS46gNFgy8gN1xkYyLgwLYZG3rBOg==} resolution: {integrity: sha512-l+QK99je2zUKGd31Gh+45c4pGDAqZSuWQiuRFCdHYC2CSiO47qUWsCcenrI6p22hvHZrDje9QjwSMAFL3iwXwQ==}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
'@rollup/rollup-linux-loongarch64-gnu@4.40.2': '@rollup/rollup-linux-loongarch64-gnu@4.41.0':
resolution: {integrity: sha512-Ybc/1qUampKuRF4tQXc7G7QY9YRyeVSykfK36Y5Qc5dmrIxwFhrOzqaVTNoZygqZ1ZieSWTibfFhQ5qK8jpWxw==} resolution: {integrity: sha512-WbnJaxPv1gPIm6S8O/Wg+wfE/OzGSXlBMbOe4ie+zMyykMOeqmgD1BhPxZQuDqwUN+0T/xOFtL2RUWBspnZj3w==}
cpu: [loong64] cpu: [loong64]
os: [linux] os: [linux]
'@rollup/rollup-linux-powerpc64le-gnu@4.40.2': '@rollup/rollup-linux-powerpc64le-gnu@4.41.0':
resolution: {integrity: sha512-3FCIrnrt03CCsZqSYAOW/k9n625pjpuMzVfeI+ZBUSDT3MVIFDSPfSUgIl9FqUftxcUXInvFah79hE1c9abD+Q==} resolution: {integrity: sha512-eRDWR5t67/b2g8Q/S8XPi0YdbKcCs4WQ8vklNnUYLaSWF+Cbv2axZsp4jni6/j7eKvMLYCYdcsv8dcU+a6QNFg==}
cpu: [ppc64] cpu: [ppc64]
os: [linux] os: [linux]
'@rollup/rollup-linux-riscv64-gnu@4.40.2': '@rollup/rollup-linux-riscv64-gnu@4.41.0':
resolution: {integrity: sha512-QNU7BFHEvHMp2ESSY3SozIkBPaPBDTsfVNGx3Xhv+TdvWXFGOSH2NJvhD1zKAT6AyuuErJgbdvaJhYVhVqrWTg==} resolution: {integrity: sha512-TWrZb6GF5jsEKG7T1IHwlLMDRy2f3DPqYldmIhnA2DVqvvhY2Ai184vZGgahRrg8k9UBWoSlHv+suRfTN7Ua4A==}
cpu: [riscv64] cpu: [riscv64]
os: [linux] os: [linux]
'@rollup/rollup-linux-riscv64-musl@4.40.2': '@rollup/rollup-linux-riscv64-musl@4.41.0':
resolution: {integrity: sha512-5W6vNYkhgfh7URiXTO1E9a0cy4fSgfE4+Hl5agb/U1sa0kjOLMLC1wObxwKxecE17j0URxuTrYZZME4/VH57Hg==} resolution: {integrity: sha512-ieQljaZKuJpmWvd8gW87ZmSFwid6AxMDk5bhONJ57U8zT77zpZ/TPKkU9HpnnFrM4zsgr4kiGuzbIbZTGi7u9A==}
cpu: [riscv64] cpu: [riscv64]
os: [linux] os: [linux]
'@rollup/rollup-linux-s390x-gnu@4.40.2': '@rollup/rollup-linux-s390x-gnu@4.41.0':
resolution: {integrity: sha512-B7LKIz+0+p348JoAL4X/YxGx9zOx3sR+o6Hj15Y3aaApNfAshK8+mWZEf759DXfRLeL2vg5LYJBB7DdcleYCoQ==} resolution: {integrity: sha512-/L3pW48SxrWAlVsKCN0dGLB2bi8Nv8pr5S5ocSM+S0XCn5RCVCXqi8GVtHFsOBBCSeR+u9brV2zno5+mg3S4Aw==}
cpu: [s390x] cpu: [s390x]
os: [linux] os: [linux]
'@rollup/rollup-linux-x64-gnu@4.40.2': '@rollup/rollup-linux-x64-gnu@4.41.0':
resolution: {integrity: sha512-lG7Xa+BmBNwpjmVUbmyKxdQJ3Q6whHjMjzQplOs5Z+Gj7mxPtWakGHqzMqNER68G67kmCX9qX57aRsW5V0VOng==} resolution: {integrity: sha512-XMLeKjyH8NsEDCRptf6LO8lJk23o9wvB+dJwcXMaH6ZQbbkHu2dbGIUindbMtRN6ux1xKi16iXWu6q9mu7gDhQ==}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
'@rollup/rollup-linux-x64-musl@4.40.2': '@rollup/rollup-linux-x64-musl@4.41.0':
resolution: {integrity: sha512-tD46wKHd+KJvsmije4bUskNuvWKFcTOIM9tZ/RrmIvcXnbi0YK/cKS9FzFtAm7Oxi2EhV5N2OpfFB348vSQRXA==} resolution: {integrity: sha512-m/P7LycHZTvSQeXhFmgmdqEiTqSV80zn6xHaQ1JSqwCtD1YGtwEK515Qmy9DcB2HK4dOUVypQxvhVSy06cJPEg==}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
'@rollup/rollup-win32-arm64-msvc@4.40.2': '@rollup/rollup-win32-arm64-msvc@4.41.0':
resolution: {integrity: sha512-Bjv/HG8RRWLNkXwQQemdsWw4Mg+IJ29LK+bJPW2SCzPKOUaMmPEppQlu/Fqk1d7+DX3V7JbFdbkh/NMmurT6Pg==} resolution: {integrity: sha512-4yodtcOrFHpbomJGVEqZ8fzD4kfBeCbpsUy5Pqk4RluXOdsWdjLnjhiKy2w3qzcASWd04fp52Xz7JKarVJ5BTg==}
cpu: [arm64] cpu: [arm64]
os: [win32] os: [win32]
'@rollup/rollup-win32-ia32-msvc@4.40.2': '@rollup/rollup-win32-ia32-msvc@4.41.0':
resolution: {integrity: sha512-dt1llVSGEsGKvzeIO76HToiYPNPYPkmjhMHhP00T9S4rDern8P2ZWvWAQUEJ+R1UdMWJ/42i/QqJ2WV765GZcA==} resolution: {integrity: sha512-tmazCrAsKzdkXssEc65zIE1oC6xPHwfy9d5Ta25SRCDOZS+I6RypVVShWALNuU9bxIfGA0aqrmzlzoM5wO5SPQ==}
cpu: [ia32] cpu: [ia32]
os: [win32] os: [win32]
'@rollup/rollup-win32-x64-msvc@4.40.2': '@rollup/rollup-win32-x64-msvc@4.41.0':
resolution: {integrity: sha512-bwspbWB04XJpeElvsp+DCylKfF4trJDa2Y9Go8O6A7YLX2LIKGcNK/CYImJN6ZP4DcuOHB4Utl3iCbnR62DudA==} resolution: {integrity: sha512-h1J+Yzjo/X+0EAvR2kIXJDuTuyT7drc+t2ALY0nIcGPbTatNOf0VWdhEA2Z4AAjv6X1NJV7SYo5oCTYRJhSlVA==}
cpu: [x64] cpu: [x64]
os: [win32] os: [win32]
@ -1903,8 +1906,8 @@ packages:
peerDependencies: peerDependencies:
eslint: '>=8' eslint: '>=8'
eslint-plugin-import-x@4.11.1: eslint-plugin-import-x@4.12.2:
resolution: {integrity: sha512-CiqREASJRnhwCB0NujkTdo4jU+cJAnhQrd4aCnWC1o+rYWIWakVbyuzVbnCriUUSLAnn5CoJ2ob36TEgNzejBQ==} resolution: {integrity: sha512-0jVUgJQipbs0yUfLe7LwYD6p8rIGqCysWZdyJFgkPzDyJgiKpuCaXlywKUAWgJ6u1nLpfrdt21B60OUkupyBrQ==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
peerDependencies: peerDependencies:
eslint: ^8.57.0 || ^9.0.0 eslint: ^8.57.0 || ^9.0.0
@ -2194,6 +2197,9 @@ packages:
graphemer@1.4.0: graphemer@1.4.0:
resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==} resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
gsap@3.13.0:
resolution: {integrity: sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw==}
gzip-size@6.0.0: gzip-size@6.0.0:
resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==} resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
engines: {node: '>=10'} engines: {node: '>=10'}
@ -3181,8 +3187,8 @@ packages:
rfdc@1.4.1: rfdc@1.4.1:
resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==} resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
rollup@4.40.2: rollup@4.41.0:
resolution: {integrity: sha512-tfUOg6DTP4rhQ3VjOO6B4wyrJnGOX85requAXvqYTHsOgb2TFJdZ3aWpT8W2kPoypSGP7dZUyzxJ9ee4buM5Fg==} resolution: {integrity: sha512-HqMFpUbWlf/tvcxBFNKnJyzc7Lk+XO3FGc3pbNBLqEbOz0gPLRgcrlS3UF4MfUrVlstOaP/q0kM6GVvi+LrLRg==}
engines: {node: '>=18.0.0', npm: '>=8.0.0'} engines: {node: '>=18.0.0', npm: '>=8.0.0'}
hasBin: true hasBin: true
@ -3956,7 +3962,7 @@ snapshots:
eslint-merge-processors: 2.0.0(eslint@9.27.0(jiti@2.4.2)) eslint-merge-processors: 2.0.0(eslint@9.27.0(jiti@2.4.2))
eslint-plugin-antfu: 3.1.1(eslint@9.27.0(jiti@2.4.2)) eslint-plugin-antfu: 3.1.1(eslint@9.27.0(jiti@2.4.2))
eslint-plugin-command: 3.2.0(eslint@9.27.0(jiti@2.4.2)) eslint-plugin-command: 3.2.0(eslint@9.27.0(jiti@2.4.2))
eslint-plugin-import-x: 4.11.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3) eslint-plugin-import-x: 4.12.2(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
eslint-plugin-jsdoc: 50.6.17(eslint@9.27.0(jiti@2.4.2)) eslint-plugin-jsdoc: 50.6.17(eslint@9.27.0(jiti@2.4.2))
eslint-plugin-jsonc: 2.20.1(eslint@9.27.0(jiti@2.4.2)) eslint-plugin-jsonc: 2.20.1(eslint@9.27.0(jiti@2.4.2))
eslint-plugin-n: 17.18.0(eslint@9.27.0(jiti@2.4.2)) eslint-plugin-n: 17.18.0(eslint@9.27.0(jiti@2.4.2))
@ -4059,12 +4065,12 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
'@astrojs/mdx@4.2.6(astro@5.7.13(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.2)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.0))': '@astrojs/mdx@4.2.6(astro@5.7.13(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.41.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.0))':
dependencies: dependencies:
'@astrojs/markdown-remark': 6.3.1 '@astrojs/markdown-remark': 6.3.1
'@mdx-js/mdx': 3.1.0(acorn@8.14.1) '@mdx-js/mdx': 3.1.0(acorn@8.14.1)
acorn: 8.14.1 acorn: 8.14.1
astro: 5.7.13(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.2)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.0) astro: 5.7.13(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.41.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.0)
es-module-lexer: 1.7.0 es-module-lexer: 1.7.0
estree-util-visit: 2.0.0 estree-util-visit: 2.0.0
hast-util-to-html: 9.0.5 hast-util-to-html: 9.0.5
@ -4612,72 +4618,72 @@ snapshots:
dependencies: dependencies:
dotenv: 16.5.0 dotenv: 16.5.0
'@rollup/pluginutils@5.1.4(rollup@4.40.2)': '@rollup/pluginutils@5.1.4(rollup@4.41.0)':
dependencies: dependencies:
'@types/estree': 1.0.7 '@types/estree': 1.0.7
estree-walker: 2.0.2 estree-walker: 2.0.2
picomatch: 4.0.2 picomatch: 4.0.2
optionalDependencies: optionalDependencies:
rollup: 4.40.2 rollup: 4.41.0
'@rollup/rollup-android-arm-eabi@4.40.2': '@rollup/rollup-android-arm-eabi@4.41.0':
optional: true optional: true
'@rollup/rollup-android-arm64@4.40.2': '@rollup/rollup-android-arm64@4.41.0':
optional: true optional: true
'@rollup/rollup-darwin-arm64@4.40.2': '@rollup/rollup-darwin-arm64@4.41.0':
optional: true optional: true
'@rollup/rollup-darwin-x64@4.40.2': '@rollup/rollup-darwin-x64@4.41.0':
optional: true optional: true
'@rollup/rollup-freebsd-arm64@4.40.2': '@rollup/rollup-freebsd-arm64@4.41.0':
optional: true optional: true
'@rollup/rollup-freebsd-x64@4.40.2': '@rollup/rollup-freebsd-x64@4.41.0':
optional: true optional: true
'@rollup/rollup-linux-arm-gnueabihf@4.40.2': '@rollup/rollup-linux-arm-gnueabihf@4.41.0':
optional: true optional: true
'@rollup/rollup-linux-arm-musleabihf@4.40.2': '@rollup/rollup-linux-arm-musleabihf@4.41.0':
optional: true optional: true
'@rollup/rollup-linux-arm64-gnu@4.40.2': '@rollup/rollup-linux-arm64-gnu@4.41.0':
optional: true optional: true
'@rollup/rollup-linux-arm64-musl@4.40.2': '@rollup/rollup-linux-arm64-musl@4.41.0':
optional: true optional: true
'@rollup/rollup-linux-loongarch64-gnu@4.40.2': '@rollup/rollup-linux-loongarch64-gnu@4.41.0':
optional: true optional: true
'@rollup/rollup-linux-powerpc64le-gnu@4.40.2': '@rollup/rollup-linux-powerpc64le-gnu@4.41.0':
optional: true optional: true
'@rollup/rollup-linux-riscv64-gnu@4.40.2': '@rollup/rollup-linux-riscv64-gnu@4.41.0':
optional: true optional: true
'@rollup/rollup-linux-riscv64-musl@4.40.2': '@rollup/rollup-linux-riscv64-musl@4.41.0':
optional: true optional: true
'@rollup/rollup-linux-s390x-gnu@4.40.2': '@rollup/rollup-linux-s390x-gnu@4.41.0':
optional: true optional: true
'@rollup/rollup-linux-x64-gnu@4.40.2': '@rollup/rollup-linux-x64-gnu@4.41.0':
optional: true optional: true
'@rollup/rollup-linux-x64-musl@4.40.2': '@rollup/rollup-linux-x64-musl@4.41.0':
optional: true optional: true
'@rollup/rollup-win32-arm64-msvc@4.40.2': '@rollup/rollup-win32-arm64-msvc@4.41.0':
optional: true optional: true
'@rollup/rollup-win32-ia32-msvc@4.40.2': '@rollup/rollup-win32-ia32-msvc@4.41.0':
optional: true optional: true
'@rollup/rollup-win32-x64-msvc@4.40.2': '@rollup/rollup-win32-x64-msvc@4.41.0':
optional: true optional: true
'@shikijs/core@3.4.2': '@shikijs/core@3.4.2':
@ -5349,9 +5355,9 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
astro-og-canvas@0.7.0(astro@5.7.13(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.2)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.0)): astro-og-canvas@0.7.0(astro@5.7.13(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.41.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.0)):
dependencies: dependencies:
astro: 5.7.13(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.2)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.0) astro: 5.7.13(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.41.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.0)
canvaskit-wasm: 0.39.1 canvaskit-wasm: 0.39.1
deterministic-object-hash: 2.0.2 deterministic-object-hash: 2.0.2
entities: 4.5.0 entities: 4.5.0
@ -5361,7 +5367,7 @@ snapshots:
valid-filename: 4.0.0 valid-filename: 4.0.0
zod: 3.24.4 zod: 3.24.4
astro@5.7.13(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.40.2)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.0): astro@5.7.13(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.41.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.0):
dependencies: dependencies:
'@astrojs/compiler': 2.12.0 '@astrojs/compiler': 2.12.0
'@astrojs/internal-helpers': 0.6.1 '@astrojs/internal-helpers': 0.6.1
@ -5369,7 +5375,7 @@ snapshots:
'@astrojs/telemetry': 3.2.1 '@astrojs/telemetry': 3.2.1
'@capsizecss/unpack': 2.4.0 '@capsizecss/unpack': 2.4.0
'@oslojs/encoding': 1.1.0 '@oslojs/encoding': 1.1.0
'@rollup/pluginutils': 5.1.4(rollup@4.40.2) '@rollup/pluginutils': 5.1.4(rollup@4.41.0)
acorn: 8.14.1 acorn: 8.14.1
aria-query: 5.3.2 aria-query: 5.3.2
axobject-query: 4.1.0 axobject-query: 4.1.0
@ -5901,7 +5907,7 @@ snapshots:
eslint: 9.27.0(jiti@2.4.2) eslint: 9.27.0(jiti@2.4.2)
eslint-compat-utils: 0.5.1(eslint@9.27.0(jiti@2.4.2)) eslint-compat-utils: 0.5.1(eslint@9.27.0(jiti@2.4.2))
eslint-plugin-import-x@4.11.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3): eslint-plugin-import-x@4.12.2(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3):
dependencies: dependencies:
'@typescript-eslint/utils': 8.32.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3) '@typescript-eslint/utils': 8.32.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
comment-parser: 1.4.1 comment-parser: 1.4.1
@ -6287,6 +6293,8 @@ snapshots:
graphemer@1.4.0: {} graphemer@1.4.0: {}
gsap@3.13.0: {}
gzip-size@6.0.0: gzip-size@6.0.0:
dependencies: dependencies:
duplexer: 0.1.2 duplexer: 0.1.2
@ -7729,30 +7737,30 @@ snapshots:
rfdc@1.4.1: {} rfdc@1.4.1: {}
rollup@4.40.2: rollup@4.41.0:
dependencies: dependencies:
'@types/estree': 1.0.7 '@types/estree': 1.0.7
optionalDependencies: optionalDependencies:
'@rollup/rollup-android-arm-eabi': 4.40.2 '@rollup/rollup-android-arm-eabi': 4.41.0
'@rollup/rollup-android-arm64': 4.40.2 '@rollup/rollup-android-arm64': 4.41.0
'@rollup/rollup-darwin-arm64': 4.40.2 '@rollup/rollup-darwin-arm64': 4.41.0
'@rollup/rollup-darwin-x64': 4.40.2 '@rollup/rollup-darwin-x64': 4.41.0
'@rollup/rollup-freebsd-arm64': 4.40.2 '@rollup/rollup-freebsd-arm64': 4.41.0
'@rollup/rollup-freebsd-x64': 4.40.2 '@rollup/rollup-freebsd-x64': 4.41.0
'@rollup/rollup-linux-arm-gnueabihf': 4.40.2 '@rollup/rollup-linux-arm-gnueabihf': 4.41.0
'@rollup/rollup-linux-arm-musleabihf': 4.40.2 '@rollup/rollup-linux-arm-musleabihf': 4.41.0
'@rollup/rollup-linux-arm64-gnu': 4.40.2 '@rollup/rollup-linux-arm64-gnu': 4.41.0
'@rollup/rollup-linux-arm64-musl': 4.40.2 '@rollup/rollup-linux-arm64-musl': 4.41.0
'@rollup/rollup-linux-loongarch64-gnu': 4.40.2 '@rollup/rollup-linux-loongarch64-gnu': 4.41.0
'@rollup/rollup-linux-powerpc64le-gnu': 4.40.2 '@rollup/rollup-linux-powerpc64le-gnu': 4.41.0
'@rollup/rollup-linux-riscv64-gnu': 4.40.2 '@rollup/rollup-linux-riscv64-gnu': 4.41.0
'@rollup/rollup-linux-riscv64-musl': 4.40.2 '@rollup/rollup-linux-riscv64-musl': 4.41.0
'@rollup/rollup-linux-s390x-gnu': 4.40.2 '@rollup/rollup-linux-s390x-gnu': 4.41.0
'@rollup/rollup-linux-x64-gnu': 4.40.2 '@rollup/rollup-linux-x64-gnu': 4.41.0
'@rollup/rollup-linux-x64-musl': 4.40.2 '@rollup/rollup-linux-x64-musl': 4.41.0
'@rollup/rollup-win32-arm64-msvc': 4.40.2 '@rollup/rollup-win32-arm64-msvc': 4.41.0
'@rollup/rollup-win32-ia32-msvc': 4.40.2 '@rollup/rollup-win32-ia32-msvc': 4.41.0
'@rollup/rollup-win32-x64-msvc': 4.40.2 '@rollup/rollup-win32-x64-msvc': 4.41.0
fsevents: 2.3.3 fsevents: 2.3.3
run-parallel@1.2.0: run-parallel@1.2.0:
@ -8266,7 +8274,7 @@ snapshots:
fdir: 6.4.4(picomatch@4.0.2) fdir: 6.4.4(picomatch@4.0.2)
picomatch: 4.0.2 picomatch: 4.0.2
postcss: 8.5.3 postcss: 8.5.3
rollup: 4.40.2 rollup: 4.41.0
tinyglobby: 0.2.13 tinyglobby: 0.2.13
optionalDependencies: optionalDependencies:
'@types/node': 22.15.18 '@types/node': 22.15.18

View file

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

View file

@ -4,7 +4,7 @@ import GoBackIcon from '@/assets/icons/go-back.svg';
<button <button
id="back-button" id="back-button"
class="animation-fade-goback hidden" class="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" 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" aria-label="Go back"
> >

View file

@ -0,0 +1,97 @@
<script>
import { gsap } from 'gsap'
function setupPostPageAnimation() {
const allElements = Array.from(document.querySelectorAll('#gsap-post-page-content > *, #gsap-post-page-tags, #waline'))
const tocListChildren = Array.from(document.querySelectorAll('#toc-list > *')).slice(0, 20)
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 isLargeScreen = window.matchMedia('(min-width: 1024px)').matches
// Post Content + Tags + Comments (First 15 elements)
gsap.from(allElements.slice(0, 15), {
opacity: 0,
y: '3rem',
duration: 0.5,
delay: 0.1,
ease: 'power2.out',
stagger: 0.05,
})
// Post Content + Tags + Comments (Rest elements)
if (allElements.length > 15) {
gsap.from(allElements.slice(15), {
opacity: 0,
y: '3rem',
duration: 0.5,
delay: 0.05 * 15 + 0.1,
ease: 'power2.out',
})
}
if (isLargeScreen) {
// Desktop Post Date
if (dateElement) {
gsap.from(dateElement, {
opacity: 0,
y: '1.5rem',
duration: 0.5,
delay: 0.1,
ease: 'power2.out',
})
}
// Desktop TOC Icon
if (tocIcon) {
gsap.from(tocIcon, {
opacity: 0,
y: '0.5rem',
duration: 0.5,
delay: 0.125,
ease: 'power2.out',
})
}
// Desktop Toc List
if (tocListChildren.length > 0) {
gsap.from(tocListChildren, {
opacity: 0,
y: '1.5rem',
duration: 0.5,
delay: 0.15,
ease: 'power2.out',
stagger: 0.025,
})
}
// Desktop Back Button
if (backButton) {
gsap.from(backButton, {
opacity: 0,
x: '0.5rem',
duration: 0.5,
delay: 0.15,
ease: 'power2.out',
})
}
}
else {
// Mobile TOC Container
if (tocContainer) {
gsap.from(tocContainer, {
opacity: 0,
y: '3rem',
duration: 0.5,
delay: 0.1,
ease: 'power2.out',
})
}
}
}
setupPostPageAnimation()
document.addEventListener('astro:after-swap', setupPostPageAnimation)
</script>

View file

@ -19,7 +19,10 @@ const filteredHeadings = headings.filter(heading =>
--- ---
{filteredHeadings.length > 0 && ( {filteredHeadings.length > 0 && (
<div 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)"> <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)"
>
<input <input
type="checkbox" type="checkbox"
id="toc-toggle" id="toc-toggle"
@ -36,8 +39,9 @@ const filteredHeadings = headings.filter(heading =>
</span> </span>
<TocIcon <TocIcon
id="toc-icon"
aria-hidden="true" aria-hidden="true"
class="animation-fade-in ml-1 hidden aspect-square w-4.2 2xl:(mt-4 block origin-center active:scale-90)" class="ml-1 hidden aspect-square w-4.2 2xl:(mt-4 block origin-center active:scale-90)"
fill="currentColor" fill="currentColor"
/> />
</label> </label>
@ -51,8 +55,8 @@ const filteredHeadings = headings.filter(heading =>
aria-label="Table of Contents" aria-label="Table of Contents"
> >
<ul <ul
class="animation-fade-up toc-list" id="toc-list"
style="--animation-interval: 0.04s;" class="toc-list"
> >
{filteredHeadings.map(heading => ( {filteredHeadings.map(heading => (
<li <li
@ -83,13 +87,13 @@ const filteredHeadings = headings.filter(heading =>
<!-- Override heti default styles >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> --> <!-- Override heti default styles >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
<style> <style>
.toc-title { .toc-title {
--at-apply: 'font-semibold ml-4 select-none 2xl:hidden'; --at-apply: 'font-semibold ml-4 2xl:hidden';
} }
.toc-list { .toc-list {
--at-apply: 'list-none pl-0 space-y-2 mt-1 mb-4 2xl:space-y-1.2'; --at-apply: 'list-none pb-3.3 pl-0 space-y-2 mt-1 mb-4 2xl:space-y-1.2';
} }
.toc-link-h2, .toc-link-h3, .toc-link-h4 { .toc-link-h2, .toc-link-h3, .toc-link-h4 {
--at-apply: 'text-sm no-underline font-normal text-balance select-none 2xl:(text-3.2 c-secondary/60 transition-colors transition-font-weight duration-300 ease-out hover:(c-secondary font-medium))'; --at-apply: 'text-sm no-underline font-normal text-balance 2xl:(text-3.2 c-secondary/60 transition-colors transition-font-weight duration-300 ease-out hover:(c-secondary font-medium))';
} }
/* Initial collapsed state with zero height grid row */ /* Initial collapsed state with zero height grid row */
@ -97,7 +101,7 @@ const filteredHeadings = headings.filter(heading =>
--at-apply: 'grid rows-[0fr] duration-300 ease-in-out'; --at-apply: 'grid rows-[0fr] duration-300 ease-in-out';
} }
.accordion-content { .accordion-content {
--at-apply: 'max-h-66 overflow-hidden pl-4 pr-6 2xl:(max-h-[calc(100vh-21.5rem)] pl-1)'; --at-apply: 'max-h-66 overflow-hidden pl-4 pr-6 2xl:(max-h-[calc(100vh-26rem)] pl-1)';
} }
/* When toggle is checked, expand the wrapper to show content */ /* When toggle is checked, expand the wrapper to show content */

View file

@ -3,13 +3,12 @@ import Button from '@/components/Button.astro'
import Footer from '@/components/Footer.astro' import Footer from '@/components/Footer.astro'
import Header from '@/components/Header.astro' import Header from '@/components/Header.astro'
import Navbar from '@/components/Navbar.astro' import Navbar from '@/components/Navbar.astro'
import FadeUpAnimation from '@/components/Widgets/FadeUpAnimation.astro'
import GithubCard from '@/components/Widgets/GithubCard.astro' import GithubCard from '@/components/Widgets/GithubCard.astro'
import GsapAnimation from '@/components/Widgets/GsapAnimation.astro'
import PhotoSwipe from '@/components/Widgets/PhotoSwipe.astro' import PhotoSwipe from '@/components/Widgets/PhotoSwipe.astro'
import themeConfig from '@/config' import themeConfig from '@/config'
import Head from '@/layouts/Head.astro' import Head from '@/layouts/Head.astro'
import { getPageInfo } from '@/utils/page' import { getPageInfo } from '@/utils/page'
import '@/styles/animation.css'
import '@/styles/global.css' import '@/styles/global.css'
import '@/styles/font.css' import '@/styles/font.css'
import '@/styles/heti.css' import '@/styles/heti.css'
@ -48,7 +47,7 @@ const MarginBottom = isPost && themeConfig.comment?.enabled
</main> </main>
<Footer /> <Footer />
</div> </div>
<FadeUpAnimation /> <GsapAnimation />
<Button supportedLangs={supportedLangs} /> <Button supportedLangs={supportedLangs} />
<GithubCard /> <GithubCard />
<PhotoSwipe /> <PhotoSwipe />

View file

@ -3,7 +3,7 @@ import type { CollectionEntry } from 'astro:content'
import { getCollection, render } from 'astro:content' import { getCollection, render } from 'astro:content'
import Comments from '@/components/Comments/index.astro' import Comments from '@/components/Comments/index.astro'
import PostDate from '@/components/PostDate.astro' import PostDate from '@/components/PostDate.astro'
import GoBack from '@/components/Widgets/GoBack.astro' import BackButton from '@/components/Widgets/BackButton.astro'
import TOC from '@/components/Widgets/TOC.astro' import TOC from '@/components/Widgets/TOC.astro'
import { allLocales, defaultLocale, moreLocales } from '@/config' import { allLocales, defaultLocale, moreLocales } from '@/config'
import { getTagPath } from '@/i18n/path' import { getTagPath } from '@/i18n/path'
@ -109,7 +109,7 @@ const { Content, headings, remarkPluginFrontmatter } = await render(post)
<article class="heti mb-12.6"> <article class="heti mb-12.6">
<div class="relative"> <div class="relative">
<!-- Go Back Button On Desktop --> <!-- Go Back Button On Desktop -->
<GoBack /> <BackButton />
<!-- Title --> <!-- Title -->
<h1 class="post-title"> <h1 class="post-title">
<span <span
@ -123,8 +123,8 @@ const { Content, headings, remarkPluginFrontmatter } = await render(post)
<!-- Date --> <!-- Date -->
<div <div
class="animation-fade-in mb-16.3 block c-primary font-time" id="gsap-post-page-date"
style="--animation-distance: 1rem;" class="mb-16.3 block c-primary font-time"
transition:name={`time-${post.data.abbrlink || post.id}-${lang}`} transition:name={`time-${post.data.abbrlink || post.id}-${lang}`}
data-disable-theme-transition data-disable-theme-transition
> >
@ -137,26 +137,25 @@ const { Content, headings, remarkPluginFrontmatter } = await render(post)
<!-- TOC --> <!-- TOC -->
{post.data.toc && <TOC headings={headings} />} {post.data.toc && <TOC headings={headings} />}
<!-- Content --> <!-- Content -->
<div class="animation-fade-up"> <div id="gsap-post-page-content">
<Content /> <Content />
</div> </div>
</article> </article>
<!-- Tags --> <!-- Tags -->
{post.data.tags && post.data.tags.length > 0 && ( {post.data.tags && post.data.tags.length > 0 && (
<div <div id="gsap-post-page-tags">
class="animation-fade-in uno-decorative-line" <div class="uno-decorative-line"></div>
style="--animation-delay: 0.8s;" <div class="uno-tags-wrapper">
></div> {post.data.tags.map((tag: string) => (
<div class="uno-tags-wrapper"> <a
{post.data.tags.map((tag: string) => ( href={getTagPath(tag, lang)}
<a class="uno-tags-style"
href={getTagPath(tag, lang)} >
class="uno-tags-style" {tag}
> </a>
{tag} ))}
</a> </div>
))}
</div> </div>
)} )}
<!-- Comments --> <!-- Comments -->