chore: add rehypeUnwrapImg plugin for image processing optimization, update katex resource path

src/layouts/Head.astro

@@ -1,6 +1,5 @@
 ---
 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'
@@ -56,7 +55,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={katexCSS} />}
+{katexEnabled && <link rel="stylesheet" href="/assets/katex/katex.min.css" />}
 <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/plugins/rehype-unwrap-img.mjs

@@ -0,0 +1,23 @@
+import { visit } from 'unist-util-visit'
+
+export function rehypeUnwrapImg() {
+  return (tree) => {
+    visit(tree, 'element', (node, index, parent) => {
+      if (
+        node.tagName === 'p'
+        && node.children
+        && parent
+        && node.children.every(child =>
+          child.tagName === 'img'
+          || (child.type === 'text' && child.value.trim() === ''),
+        )
+      ) {
+
+        const imgNodes = node.children.filter(child => child.tagName === 'img')
+        if (imgNodes.length > 0) {
+          parent.children.splice(index, 1, ...imgNodes)
+        }
+      }
+    })
+  }
+}

src/styles/global.css

@@ -21,16 +21,22 @@ body::selection {
 
 /* Heading Anchor Link */
 .heading-anchor-link {
-  --at-apply: 'inline-block translate-y-0.08em c-transparent';
+  --at-apply: 'inline-block translate-y-0.08em';
 }
-h1:hover .heading-anchor-link,
-h2:hover .heading-anchor-link,
-h3:hover .heading-anchor-link,
-h4:hover .heading-anchor-link {
-  --at-apply: 'c-primary/40';
+h1:hover .heading-anchor-link svg,
+h2:hover .heading-anchor-link svg,
+h3:hover .heading-anchor-link svg,
+h4:hover .heading-anchor-link svg {
+  --at-apply: 'op-40';
 }
 .heading-anchor-link svg {
-  --at-apply: 'ml-0.4em aspect-square w-0.9em transition-colors active:scale-90 hover:c-primary/80';
+  --at-apply: 'ml-0.4em aspect-square w-0.9em op-0 transition-colors active:scale-90';
+}
+h1:hover .heading-anchor-link svg:hover,
+h2:hover .heading-anchor-link svg:hover,
+h3:hover .heading-anchor-link svg:hover,
+h4:hover .heading-anchor-link svg:hover {
+  --at-apply: 'op-80';
 }
 
 /* Highlight Hover Animation */
@@ -47,7 +53,7 @@ h4:hover .heading-anchor-link {
   --at-apply: 'origin-bottom-left scale-x-100';
 }
 .highlight-hover::after {
-  --at-apply: 'origin-bottom-right scale-x-0 transition-transform duration-300 ease-out';
+  --at-apply: 'origin-bottom-right scale-x-0 transition-transform duration-150 ease-out lg:duration-300';
 }
 /* Fix Position Issue on iOS */
 @supports (-webkit-touch-callout: none) {

src/styles/heti.css

@@ -24,13 +24,11 @@
 }
 
 /* Headings */
-.heti :where(h1),
-.heti :where(h2),
-.heti :where(h3),
-.heti :where(h4),
-.heti :where(h5),
-.heti :where(h6) {
-  --at-apply: 'mb-4 mt-6 font-semibold';
+.heti :where(h1, h2, h3, h4, h5, h6) {
+  --at-apply: 'mb-4 font-semibold';
+}
+.heti :where(h1, h2, h3) {
+  --at-apply: 'text-balance leading-1.33em cjk:text-pretty cjk:tracking-0.05em';
 }
 .heti :where(h1) {
   --at-apply: 'mt-9.6 text-7 text-primary';
@@ -42,24 +40,15 @@
   --at-apply: 'mt-6.5 text-5';
 }
 .heti :where(h4) {
-  --at-apply: 'text-4.5';
+  --at-apply: 'mt-6 text-4.5';
 }
 .heti :where(h5) {
-  --at-apply: 'text-4';
+  --at-apply: 'mt-6 text-4';
 }
 .heti :where(h6) {
-  --at-apply: 'font-normal';
+  --at-apply: 'mt-6 font-normal';
 }
-.heti :where(h1),
-.heti :where(h2),
-.heti :where(h3) {
-  --at-apply: 'text-balance leading-1.33em cjk:text-pretty cjk:tracking-0.05em';
-}
-.heti :where(h1 + h2),
-.heti :where(h2 + h3),
-.heti :where(h3 + h4),
-.heti :where(h4 + h5),
-.heti :where(h5 + h6) {
+.heti :where(h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6) {
   --at-apply: 'mt-4';
 }
 
@@ -70,19 +59,22 @@
 
 /* Links */
 .heti :where(a:not(.gc-container)) {
-  --at-apply: 'break-all font-semibold tracking-0 underline underline-0.075em decoration-secondary/80 underline-offset-0.15em';
-  --at-apply: 'transition-colors hover:(c-primary decoration-primary/80)  lg:underline-0.1em';
+  --at-apply: 'break-all font-semibold tracking-0 underline underline-0.075em decoration-secondary/80 underline-offset-0.1em';
+  --at-apply: 'transition-colors ease-out hover:(c-primary decoration-primary/80) lg:underline-0.1em';
 }
 
 /* Images */
 .heti :where(img) {
-  --at-apply: 'mx-auto cursor-zoom-in';
+  --at-apply: 'mb-4 mx-auto cursor-zoom-in';
 }
 .heti :where(figure) {
   --at-apply: 'mx-auto mb-4';
 }
+.heti figure img {
+  --at-apply: 'mb-0';
+}
 .heti :where(figcaption) {
-  --at-apply: 'mt-2 text-center text-sm text-secondary/80';
+  --at-apply: 'mt-3 text-center text-sm text-secondary/80';
 }
 
 /* Video */
@@ -272,4 +264,4 @@ html.dark .heti :where(u) {
 /* Quotes */
 .heti :where(q:is(:lang(zh), :lang(ja), :lang(ko))) {
   quotes: "「" "」" "『" "』";
-}
+}