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

astro.config.ts

@@ -15,6 +15,7 @@ import UnoCSS from 'unocss/astro'
 import { themeConfig } from './src/config'
 import { langMap } from './src/i18n/config'
 import { rehypeImgToFigure } from './src/plugins/rehype-img-to-figure.mjs'
+import { rehypeUnwrapImg } from './src/plugins/rehype-unwrap-img.mjs'
 import { remarkAdmonitions } from './src/plugins/remark-admonitions.mjs'
 import { remarkGithubCard } from './src/plugins/remark-github-card.mjs'
 import { remarkReadingTime } from './src/plugins/remark-reading-time.mjs'
@@ -70,6 +71,7 @@ export default defineConfig({
       rehypeKatex,
       rehypeSlug,
       rehypeImgToFigure,
+      rehypeUnwrapImg, // must be after rehypeImgToFigure
       [
         rehypeAutolinkHeadings,
         {

package.json

@@ -11,7 +11,7 @@
     "astro": "astro",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "waline": "curl -L https://unpkg.com/@waline/client@v3/dist/waline.css -o public/assets/waline/waline.css && curl -L https://unpkg.com/@waline/client@v3/dist/waline.js -o public/assets/waline/waline.js"
+    "assets": "curl -L https://unpkg.com/@waline/client@latest/dist/waline.css -o public/assets/waline/waline.css && curl -L https://unpkg.com/@waline/client@latest/dist/waline.js -o public/assets/waline/waline.js && curl -L https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css -o public/assets/katex/katex.min.css"
   },
   "dependencies": {
     "@astrojs/mdx": "^4.2.6",
@@ -22,7 +22,6 @@
     "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,9 +32,6 @@ 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
@@ -925,23 +922,23 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@shikijs/core@3.4.1':
-    resolution: {integrity: sha512-GCqSd3KXRTKX1sViP7fIyyyf6do2QVg+fTd4IT00ucYCVSKiSN8HbFbfyjGsoZePNKWcQqXe4U4rrz2IVldG5A==}
+  '@shikijs/core@3.4.2':
+    resolution: {integrity: sha512-AG8vnSi1W2pbgR2B911EfGqtLE9c4hQBYkv/x7Z+Kt0VxhgQKcW7UNDVYsu9YxwV6u+OJrvdJrMq6DNWoBjihQ==}
 
-  '@shikijs/engine-javascript@3.4.1':
-    resolution: {integrity: sha512-oGvRqN3Bsk+cGzmCb/5Kt/LfD7uyA8vCUUawyqmLti/AYNV7++zIZFEW8JwW5PrpPNWWx9RcZ/chnYLedzlVIQ==}
+  '@shikijs/engine-javascript@3.4.2':
+    resolution: {integrity: sha512-1/adJbSMBOkpScCE/SB6XkjJU17ANln3Wky7lOmrnpl+zBdQ1qXUJg2GXTYVHRq+2j3hd1DesmElTXYDgtfSOQ==}
 
-  '@shikijs/engine-oniguruma@3.4.1':
-    resolution: {integrity: sha512-p8I5KWgEDUcXRif9JjJUZtNeqCyxZ8xcslecDJMigsqSZfokwqQIsH4aGpdjzmDf8LIWvT+C3TCxnJQVaPmCbQ==}
+  '@shikijs/engine-oniguruma@3.4.2':
+    resolution: {integrity: sha512-zcZKMnNndgRa3ORja6Iemsr3DrLtkX3cAF7lTJkdMB6v9alhlBsX9uNiCpqofNrXOvpA3h6lHcLJxgCIhVOU5Q==}
 
-  '@shikijs/langs@3.4.1':
-    resolution: {integrity: sha512-v5A5ApJYcrcPLHcwAi0bViUU+Unh67UaXU9gGX3qfr2z3AqlqSZbC00W/3J4+tfGJASzwrWDro2R1er6SsCL1Q==}
+  '@shikijs/langs@3.4.2':
+    resolution: {integrity: sha512-H6azIAM+OXD98yztIfs/KH5H4PU39t+SREhmM8LaNXyUrqj2mx+zVkr8MWYqjceSjDw9I1jawm1WdFqU806rMA==}
 
-  '@shikijs/themes@3.4.1':
-    resolution: {integrity: sha512-XOJgs55mVVMZtNVJx1NVmdcfXG9HIyZGh7qpCw/Ok5UMjWgkmb8z15TgcmF3ItvHItijiIMl9BLcNO/tFSGl1w==}
+  '@shikijs/themes@3.4.2':
+    resolution: {integrity: sha512-qAEuAQh+brd8Jyej2UDDf+b4V2g1Rm8aBIdvt32XhDPrHvDkEnpb7Kzc9hSuHUxz0Iuflmq7elaDuQAP9bHIhg==}
 
-  '@shikijs/types@3.4.1':
-    resolution: {integrity: sha512-4flT+pToGqRBb0UhGqXTV7rCqUS3fhc8z3S2Djc3E5USKhXwadeKGFVNB2rKXfohlrEozNJMtMiZaN8lfdj/ZQ==}
+  '@shikijs/types@3.4.2':
+    resolution: {integrity: sha512-zHC1l7L+eQlDXLnxvM9R91Efh2V4+rN3oMVS2swCBssbj2U/FBwybD1eeLaq8yl/iwT+zih8iUbTBCgGZOYlVg==}
 
   '@shikijs/vscode-textmate@10.0.2':
     resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
@@ -3443,8 +3440,8 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
-  shiki@3.4.1:
-    resolution: {integrity: sha512-PSnoczt+iWIOB4iRQ+XVPFtTuN1FcmuYzPgUBZTSv5pC6CozssIx2M4O5n4S9gJlUu9A3FxMU0ZPaHflky/6LA==}
+  shiki@3.4.2:
+    resolution: {integrity: sha512-wuxzZzQG8kvZndD7nustrNFIKYJ1jJoWIPaBpVe2+KHSvtzMi4SBjOxrigs8qeqce/l3U0cwiC+VAkLKSunHQQ==}
 
   side-channel-list@1.0.0:
     resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
@@ -4316,7 +4313,7 @@ snapshots:
       remark-parse: 11.0.0
       remark-rehype: 11.1.2
       remark-smartypants: 3.0.2
-      shiki: 3.4.1
+      shiki: 3.4.2
       smol-toml: 1.3.4
       unified: 11.0.5
       unist-util-remove-position: 5.0.0
@@ -4953,33 +4950,33 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.40.2':
     optional: true
 
-  '@shikijs/core@3.4.1':
+  '@shikijs/core@3.4.2':
     dependencies:
-      '@shikijs/types': 3.4.1
+      '@shikijs/types': 3.4.2
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
       hast-util-to-html: 9.0.5
 
-  '@shikijs/engine-javascript@3.4.1':
+  '@shikijs/engine-javascript@3.4.2':
     dependencies:
-      '@shikijs/types': 3.4.1
+      '@shikijs/types': 3.4.2
       '@shikijs/vscode-textmate': 10.0.2
       oniguruma-to-es: 4.3.3
 
-  '@shikijs/engine-oniguruma@3.4.1':
+  '@shikijs/engine-oniguruma@3.4.2':
     dependencies:
-      '@shikijs/types': 3.4.1
+      '@shikijs/types': 3.4.2
       '@shikijs/vscode-textmate': 10.0.2
 
-  '@shikijs/langs@3.4.1':
+  '@shikijs/langs@3.4.2':
     dependencies:
-      '@shikijs/types': 3.4.1
+      '@shikijs/types': 3.4.2
 
-  '@shikijs/themes@3.4.1':
+  '@shikijs/themes@3.4.2':
     dependencies:
-      '@shikijs/types': 3.4.1
+      '@shikijs/types': 3.4.2
 
-  '@shikijs/types@3.4.1':
+  '@shikijs/types@3.4.2':
     dependencies:
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
@@ -5682,7 +5679,7 @@ snapshots:
       prompts: 2.4.2
       rehype: 13.0.2
       semver: 7.7.2
-      shiki: 3.4.1
+      shiki: 3.4.2
       tinyexec: 0.3.2
       tinyglobby: 0.2.13
       tsconfck: 3.1.5(typescript@5.8.3)
@@ -8369,14 +8366,14 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
-  shiki@3.4.1:
+  shiki@3.4.2:
     dependencies:
-      '@shikijs/core': 3.4.1
-      '@shikijs/engine-javascript': 3.4.1
-      '@shikijs/engine-oniguruma': 3.4.1
-      '@shikijs/langs': 3.4.1
-      '@shikijs/themes': 3.4.1
-      '@shikijs/types': 3.4.1
+      '@shikijs/core': 3.4.2
+      '@shikijs/engine-javascript': 3.4.2
+      '@shikijs/engine-oniguruma': 3.4.2
+      '@shikijs/langs': 3.4.2
+      '@shikijs/themes': 3.4.2
+      '@shikijs/types': 3.4.2
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 

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: "「" "」" "『" "』";
-}
+}