perf: optimize loading timing for github cards and lightbox, clean up redundant head tags, and improve css organization

src/components/Widgets/GithubCard.astro

@@ -4,8 +4,20 @@ function setupGithubCards() {
   if (githubCards.length === 0)
     return
 
-  githubCards.forEach(async (card) => {
+  const observer = new IntersectionObserver((entries) => {
-    const repo = (card as HTMLElement).dataset.repo
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        loadCardData(entry.target as HTMLElement)
+        observer.unobserve(entry.target)
+      }
+    })
+  }, { rootMargin: '200px' })
+
+  githubCards.forEach(card => observer.observe(card))
+}
+
+async function loadCardData(card: HTMLElement) {
+  const repo = card.dataset.repo
   if (!repo)
     return
 
@@ -51,7 +63,6 @@ function setupGithubCards() {
   catch {
     console.error(`Failed to fetch ${repo}`)
   }
-  })
 }
 
 setupGithubCards()

src/components/Widgets/PhotoSwipe.astro

@@ -7,7 +7,13 @@ const pswp = import('photoswipe')
 
 function setupPhotoSwipe() {
   const bodyElement = document.body
-  if (!bodyElement.hasAttribute('data-photoswipe-initialized')) {
+  if (bodyElement.hasAttribute('data-photoswipe-initialized'))
+    return
+
+  const images = document.querySelectorAll('article.heti img')
+  if (images.length === 0)
+    return
+
   lightbox = new PhotoSwipeLightbox({
     gallery: 'article.heti img',
     pswpModule: () => pswp,
@@ -44,11 +50,19 @@ function setupPhotoSwipe() {
   lightbox.init()
 
   bodyElement.setAttribute('data-photoswipe-initialized', 'true')
+}
+
+function lazySetupPhotoSwipe() {
+  if ('requestIdleCallback' in window) {
+    window.requestIdleCallback(() => setupPhotoSwipe(), { timeout: 1000 })
+  }
+  else {
+    setTimeout(setupPhotoSwipe, 100)
   }
 }
 
-setupPhotoSwipe()
+lazySetupPhotoSwipe()
-document.addEventListener('astro:page-load', setupPhotoSwipe)
+document.addEventListener('astro:page-load', lazySetupPhotoSwipe)
 </script>
 
 <style is:global>

src/layouts/Head.astro

@@ -21,7 +21,7 @@ const { mode, light: { background: lightMode }, dark: { background: darkMode } }
 const { katex } = themeConfig.global
 const { verification = {}, twitterID = '', googleAnalyticsID = '', umamiAnalyticsID = '', apiflashKey = '' } = themeConfig.seo ?? {}
 const { google = '', bing = '', yandex = '', baidu = '' } = verification
-const { commentURL = '', imageHostURL = '', customGoogleAnalyticsJS = '', customUmamiAnalyticsJS = '' } = themeConfig.preload
+const { commentURL = '', customGoogleAnalyticsJS = '', customUmamiAnalyticsJS = '' } = themeConfig.preload
 
 const initMetaTheme = mode === 'dark' ? darkMode : lightMode
 const siteTitle = i18nTitle ? currentUI.title : title
@@ -51,14 +51,12 @@ const pageImage = postSlug
 <meta name="theme-color" content={initMetaTheme} />
 
 <!-- Preload -->
-<link rel="preload" href="/font/Snell-Black.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="/font/EarlySummer-Subset.woff2" as="font" type="font/woff2" crossorigin />
+<link rel="preload" href="/font/Snell-Black.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="/font/Snell-Bold.woff2" as="font" type="font/woff2" crossorigin />
 {katex && <link rel="stylesheet" href={katexCSS} />}
 {commentURL && <link rel="preconnect" href={commentURL} crossorigin />}
 {commentURL && <link rel="dns-prefetch" href={commentURL} />}
-{imageHostURL && <link rel="preconnect" href={imageHostURL} crossorigin />}
-{imageHostURL && <link rel="dns-prefetch" href={imageHostURL} />}
 <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" />
@@ -73,19 +71,14 @@ const pageImage = postSlug
   />
 ))}
 
-<!-- Facebook Open Graph -->
+<!-- Open Graph -->
 <meta property="og:type" content={postTitle ? 'article' : 'website'} />
 <meta property="og:url" content={Astro.url} />
 <meta property="og:title" content={pageTitle} />
 <meta property="og:description" content={pageDescription} />
 <meta property="og:image" content={pageImage} />
-
-<!-- Twitter Card -->
 <meta name="twitter:card" content="summary_large_image" />
 {twitterID && <meta name="twitter:site" content={twitterID} />}
-<!-- <meta name="twitter:title" content={pageTitle} />
-<meta name="twitter:description" content={pageDescription} />
-<meta name="twitter:image" content={pageImage} /> -->
 
 <!-- Site Verification -->
 {google && <meta name="google-site-verification" content={google} />}

src/layouts/Layout.astro

@@ -49,9 +49,9 @@ const MarginBottom = isPost && themeConfig.comment?.enabled
       </main>
       <Footer />
     </div>
-    {(isPost || isAbout) && <GithubCard />}
-    <Scrollbar />
     <Button supportedLangs={supportedLangs} />
-    <PhotoSwipe />
+    <Scrollbar />
+    {(isPost || isAbout) && <GithubCard />}
+    {(isPost || isAbout) && <PhotoSwipe />}
   </body>
 </html>

src/styles/extend.css

@@ -4,7 +4,15 @@
  * 2. GitHub Card
  */
 
-/* Admonition */
+/* KaTeX Formula Overflow Fix */
+.katex-display {
+  --at-apply: 'overflow-x-auto overflow-y-hidden scrollbar-hidden';
+}
+.katex-display::-webkit-scrollbar {
+  display: none;
+}
+
+/* Admonition >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
 .admonition-title {
   --at-apply: 'flex items-center mb-4 font-semibold';
 }
@@ -121,6 +129,10 @@
 }
 
 /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
+iframe {
+  --at-apply: 'mb-4 w-full aspect-video';
+}
+
 /* :where(details) {
   --at-apply: 'my-4 px-4 py-3 border border-solid border-secondary/25 rounded cursor-pointer';
 }

src/styles/global.css

@@ -3,11 +3,9 @@
   --uno-colors-secondary: theme('colors.secondary');
   --uno-colors-background: theme('colors.background');
 }
-
 html {
   --at-apply: 'bg-background c-secondary antialiased';
 }
-
 /* Fix flash issue on iOS */
 body {
   backface-visibility: hidden;
@@ -20,12 +18,10 @@ body {
   clip-path: inset(0 0 0 0);
   z-index: 99;
 }
-
 ::view-transition-old(theme-transition) {
   animation: none;
   z-index: -1;
 }
-
 @keyframes reveal {
   from {
     clip-path: inset(var(--from));
@@ -35,7 +31,6 @@ body {
 html.dark {
   --from: 0 0 100% 0;
 }
-
 html:not(.dark) {
   --from: 100% 0 0 0;
 }
@@ -52,15 +47,13 @@ html[data-theme-transition] [data-disable-transition-on-theme] {
   }
 }
 
-/* Import Custom Fonts >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
+/* Snell Roundhand Static Font >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
-/* Snell Roundhand Static Font */
 @font-face {
   font-family: "Snell-Bold";
   src: url("/font/Snell-Bold.woff2") format("woff2");
   font-display: swap;
   unicode-range: U+0030-0039,U+0041-005A,U+0061-007A,U+00C1,U+00C9,U+00CD,U+00D3,U+00DA,U+00DC,U+00D1,U+00E1,U+00E9,U+00ED,U+00F3,U+00FA,U+00FC,U+00F1,U+0410-044F,U+0401,U+0451,U+0021-002F,U+003A-0040,U+00A9;
 }
-
 @font-face {
   font-family: "Snell-Black";
   src: url("/font/Snell-Black.woff2") format("woff2");
@@ -76,7 +69,6 @@ html[data-theme-transition] [data-disable-transition-on-theme] {
   font-weight: 400 700;
   unicode-range: U+0030-0039,U+0041-005A,U+0061-007A,U+00C1,U+00C9,U+00CD,U+00D3,U+00DA,U+00DC,U+00D1,U+00E1,U+00E9,U+00ED,U+00F3,U+00FA,U+00FC,U+00F1,U+0410-044F,U+0401,U+0451,U+0021-002F,U+003A-0040,U+00A9;
 }
-
 @font-face {
   font-family: "STIX-Italic";
   src: url("/font/STIX-Italic.woff2") format("woff2-variations");

src/styles/heti.css

@@ -15,15 +15,7 @@
 
 /* Customized Post Title */
 .heti .post-title {
-  --at-apply: 'mb-2 text-8.6 font-bold leading-12 c-primary lg:text-9';
+  --at-apply: 'mb-2 text-8.6 c-primary font-bold leading-12 lg:text-9';
-}
-
-/* KaTeX Formula Overflow Fix */
-.heti .katex-display {
-  --at-apply: 'overflow-x-auto overflow-y-hidden scrollbar-hidden';
-}
-.heti .katex-display::-webkit-scrollbar {
-  display: none;
 }
 
 /* Headings */