reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-15 11:12:54 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: performance optimizations and ui improvements (#26)

Browse source 
* 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
This commit is contained in:
radishzz 2025-05-26 20:21:38 +01:00 • committed by GitHub
parent 054aa85509
commit 47e1df9b3d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 64 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

6
astro.config.ts
View file

@ -60,10 +60,10 @@ export default defineConfig({
sitemap(),
robotsTxt(),
Compress({
CSS: false,
HTML: true, // Enable HTML compression only to remove comments
CSS: true,
HTML: true,
Image: false,
JavaScript: false,
JavaScript: true,
SVG: false,
}),
],

14
pnpm-lock.yaml generated
View file

@ -1083,6 +1083,10 @@ packages:
resolution: {integrity: sha512-YmybwXUJcgGqgAp6bEsgpPXEg6dcCyPyCSr0CAAueacR/CCBi25G3V8gGQ2kRzQRBNol7VQknxMs9HvVa9Rvfg==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
'@typescript-eslint/types@8.33.0':
resolution: {integrity: sha512-DKuXOKpM5IDT1FA2g9x9x1Ug81YuKrzf4mYX8FAVSNu5Wo/LELHWQyM1pQaDkI42bX15PWl0vNPt1uGiIFUOpg==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
'@typescript-eslint/typescript-estree@8.32.1':
resolution: {integrity: sha512-Y3AP9EIfYwBb4kWGb+simvPaqQoT5oJuzzj9m0i6FCY6SPvlomY2Ei4UEMm7+FXtlNJbor80ximyslzaQF6xhg==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@ -4295,7 +4299,7 @@ snapshots:
'@es-joy/jsdoccomment@0.50.2':
dependencies:
'@types/estree': 1.0.7
'@typescript-eslint/types': 8.32.1
'@typescript-eslint/types': 8.33.0
comment-parser: 1.4.1
esquery: 1.6.0
jsdoc-type-pratt-parser: 4.1.0
@ -4975,6 +4979,8 @@ snapshots:
'@typescript-eslint/types@8.32.1': {}
'@typescript-eslint/types@8.33.0': {}
'@typescript-eslint/typescript-estree@8.32.1(typescript@5.8.3)':
dependencies:
'@typescript-eslint/types': 8.32.1
@ -5513,7 +5519,7 @@ snapshots:
dependencies:
'@astrojs/compiler': 2.12.0
'@typescript-eslint/scope-manager': 8.32.1
'@typescript-eslint/types': 8.32.1
'@typescript-eslint/types': 8.33.0
astrojs-compiler-sync: 1.1.1(@astrojs/compiler@2.12.0)
debug: 4.4.1
entities: 6.0.0
@ -6096,7 +6102,7 @@ snapshots:
dependencies:
'@eslint-community/eslint-utils': 4.7.0(eslint@9.27.0(jiti@2.4.2))
'@jridgewell/sourcemap-codec': 1.5.0
'@typescript-eslint/types': 8.32.1
'@typescript-eslint/types': 8.33.0
astro-eslint-parser: 1.2.2
eslint: 9.27.0(jiti@2.4.2)
eslint-compat-utils: 0.6.5(eslint@9.27.0(jiti@2.4.2))
@ -6182,7 +6188,7 @@ snapshots:
eslint-plugin-perfectionist@4.13.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3):
dependencies:
'@typescript-eslint/types': 8.32.1
'@typescript-eslint/types': 8.33.0
'@typescript-eslint/utils': 8.32.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
eslint: 9.27.0(jiti@2.4.2)
natural-orderby: 5.0.0

49
src/components/Widgets/GsapAnimation.astro
View file

@ -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,

2
src/components/Widgets/PhotoSwipe.astro
View file

@ -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')
}

12
src/components/Widgets/TOC.astro
View file

@ -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 */

9
src/layouts/Head.astro
View file

@ -1,6 +1,7 @@
---
import { ClientRouter } from 'astro:transitions'
import katexCSS from 'katex/dist/katex.min.css?url'
import photoSwipeCSS from 'photoswipe/style.css?url'
import { allLocales, defaultLocale, themeConfig } from '@/config'
import { ui } from '@/i18n/ui'
import { getPageInfo } from '@/utils/page'
@ -57,8 +58,12 @@ const pageImage = postSlug
<link rel="preload" href="/fonts/Snell-Bold-SF.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/fonts/STIX-VF.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/fonts/STIX-Italic-VF.woff2" as="font" type="font/woff2" crossorigin />
{commentEnabled && walineServerURL && <link rel="stylesheet" href="/assets/waline/waline.css" />}
{katexEnabled && <link rel="stylesheet" href={katexCSS} />}
<link rel="preload" href={photoSwipeCSS} as="style" />
{katexEnabled && <link rel="preload" href={katexCSS} as="style" />}
{commentEnabled && walineServerURL && <link rel="preload" href="/assets/waline/waline.css" as="style" />}
<link rel="stylesheet" href={photoSwipeCSS} media="print" onload={`this.media='all'`} />
{katexEnabled && <link rel="stylesheet" href={katexCSS} media="print" onload={`this.media='all'`} />}
{commentEnabled && walineServerURL && <link rel="stylesheet" href="/assets/waline/waline.css" media="print" onload={`this.media='all'`} />}
<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" />

2
src/layouts/Layout.astro
View file

@ -44,7 +44,7 @@ const MarginBottom = isPost && themeConfig.comment?.enabled
<div
class="mx-auto max-w-205.848 min-h-vh w-full min-h-dvh"
p="x-[min(7.25vw,3.731rem)] y-10"
lg="mx-[max(5rem,calc(50vw-35rem))] my-20 max-w-[min(calc(75vw-16rem),44rem)] min-h-full p-0"
lg="mx-[max(5.75rem,calc(50vw-34.25rem))] my-20 max-w-[min(calc(75vw-16rem),44rem)] min-h-full p-0"
>
<Header />
<Navbar />

2
src/pages/[...posts_slug].astro
View file

@ -144,7 +144,6 @@ const { Content, headings, remarkPluginFrontmatter } = await render(post)
<!-- Tags -->
{post.data.tags && post.data.tags.length > 0 && (
<div id="gsap-post-page-tags">
<div class="uno-decorative-line"></div>
<div class="uno-tags-wrapper">
{post.data.tags.map((tag: string) => (
@ -156,7 +155,6 @@ const { Content, headings, remarkPluginFrontmatter } = await render(post)
</a>
))}
</div>
</div>
)}
<!-- Comments -->
<Comments />

1
src/styles/global.css
View file

@ -2,7 +2,6 @@ html {
--at-apply: 'bg-background c-secondary antialiased';
scrollbar-width: thin;
scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.25) transparent;
scrollbar-gutter: stable both-edges;
}
/* Fix Flash Issue On iOS */

14
src/styles/transition.css
View file

@ -37,13 +37,11 @@ html.reduce-motion {
}
/* GSAP Animation Elements Initial States */
html:not(.reduce-motion) #gsap-post-page-content > *,
html:not(.reduce-motion) #gsap-post-page-tags,
html:not(.reduce-motion) #waline {
@media (min-width: 1024px) {
html:not(.reduce-motion) #gsap-post-page-content > * {
opacity: 0;
transform: translateY(3rem);
}
@media (min-width: 1024px) {
}
html:not(.reduce-motion) #gsap-post-page-date {
opacity: 0;
transform: translateY(1.5rem);
@ -61,6 +59,12 @@ html:not(.reduce-motion) #waline {
transform: translateY(1.5rem);
}
}
@media (max-width: 1023px) {
html:not(.reduce-motion) #gsap-post-page-content > :nth-child(-n+7) {
opacity: 0;
transform: translateY(3rem);
}
}
@media (max-width: 1535px) {
html:not(.reduce-motion) #toc-container {
opacity: 0;