style: add image to figure plugin

- Improve styles for images, blockquotes, tables and more
- Fix unexpected line breaks

astro.config.ts

@@ -11,7 +11,8 @@ import remarkMath from 'remark-math'
 import UnoCSS from 'unocss/astro'
 import { themeConfig } from './src/config'
 import { langMap } from './src/i18n/config'
-import { remarkReadingTime } from './src/plugins/remark-reading-time'
+import { rehypeImgToFigure } from './src/plugins/rehype-img-to-figure.mjs'
+import { remarkReadingTime } from './src/plugins/remark-reading-time.mjs'
 
 const url = themeConfig.site.url
 const locale = themeConfig.global.locale
@@ -24,9 +25,9 @@ const imageConfig = imageHostURL
       image: {
         domains: [imageHostURL],
         remotePatterns: [{ protocol: 'https' }],
+      },
     }
-    }
+  : {}
-  : {};
 
 export default defineConfig({
   site: url,
@@ -66,6 +67,7 @@ export default defineConfig({
     rehypePlugins: [
       rehypeSlug,
       rehypeKatex,
+      rehypeImgToFigure,
       [
         rehypeExternalLinks,
         {

package.json

@@ -2,7 +2,7 @@
   "name": "astro-theme-retypeset",
   "type": "module",
   "version": "0.0.1",
-  "packageManager": "pnpm@10.8.0",
+  "packageManager": "pnpm@10.8.1",
   "repository": "https://github.com/radishzzz/astro-theme-retypeset",
   "scripts": {
     "dev": "astro check && astro dev",
@@ -30,8 +30,10 @@
     "rehype-external-links": "^3.0.0",
     "rehype-katex": "^7.0.1",
     "rehype-slug": "^6.0.0",
+    "remark-directive": "^4.0.0",
     "remark-math": "^6.0.0",
-    "sanitize-html": "^2.15.0"
+    "sanitize-html": "^2.15.0",
+    "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.12.0",

pnpm-lock.yaml

@@ -59,12 +59,18 @@ importers:
       rehype-slug:
         specifier: ^6.0.0
         version: 6.0.0
+      remark-directive:
+        specifier: ^4.0.0
+        version: 4.0.0
       remark-math:
         specifier: ^6.0.0
         version: 6.0.0
       sanitize-html:
         specifier: ^2.15.0
         version: 2.15.0
+      unist-util-visit:
+        specifier: ^5.0.0
+        version: 5.0.0
     devDependencies:
       '@antfu/eslint-config':
         specifier: ^4.12.0
@@ -2690,6 +2696,9 @@ packages:
   mdast-util-definitions@6.0.0:
     resolution: {integrity: sha512-scTllyX6pnYNZH/AIp/0ePz6s4cZtARxImwoPJ7kS42n+MnVsI4XbnG6d4ibehRIldYMWM2LD7ImQblVhUejVQ==}
 
+  mdast-util-directive@3.1.0:
+    resolution: {integrity: sha512-I3fNFt+DHmpWCYAT7quoM6lHf9wuqtI+oCOfvILnoicNIqjh5E3dEJWiXuYME2gNe8vl1iMQwyUHa7bgFmak6Q==}
+
   mdast-util-find-and-replace@3.0.2:
     resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
 
@@ -2763,6 +2772,9 @@ packages:
   micromark-core-commonmark@2.0.3:
     resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
 
+  micromark-extension-directive@4.0.0:
+    resolution: {integrity: sha512-/C2nqVmXXmiseSSuCdItCMho7ybwwop6RrrRPk0KbOHW21JKoCldC+8rFOaundDoRBUWBnJJcxeA/Kvi34WQXg==}
+
   micromark-extension-gfm-autolink-literal@2.1.0:
     resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
 
@@ -3253,6 +3265,9 @@ packages:
     resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
     engines: {node: '>= 0.10'}
 
+  remark-directive@4.0.0:
+    resolution: {integrity: sha512-7sxn4RfF1o3izevPV1DheyGDD6X4c9hrGpfdUpm7uC++dqrnJxIZVkk7CoKqcLm0VUMAuOol7Mno3m6g8cfMuA==}
+
   remark-gfm@4.0.1:
     resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
 
@@ -7069,6 +7084,20 @@ snapshots:
       '@types/unist': 3.0.3
       unist-util-visit: 5.0.0
 
+  mdast-util-directive@3.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      parse-entities: 4.0.2
+      stringify-entities: 4.0.4
+      unist-util-visit-parents: 6.0.1
+    transitivePeerDependencies:
+      - supports-color
+
   mdast-util-find-and-replace@3.0.2:
     dependencies:
       '@types/mdast': 4.0.4
@@ -7275,6 +7304,16 @@ snapshots:
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
 
+  micromark-extension-directive@4.0.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      parse-entities: 4.0.2
+
   micromark-extension-gfm-autolink-literal@2.1.0:
     dependencies:
       micromark-util-character: 2.1.1
@@ -7951,6 +7990,15 @@ snapshots:
 
   relateurl@0.2.7: {}
 
+  remark-directive@4.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-directive: 3.1.0
+      micromark-extension-directive: 4.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
   remark-gfm@4.0.1:
     dependencies:
       '@types/mdast': 4.0.4

src/content/posts/diaries/Birth of Retypeset-zh.md

@@ -14,7 +14,7 @@ Retypeset 是一款基于 Astro 框架的静态博客主题，中文名为重新
 
 去年入坑博客以后，就很喜欢刷别人的博客。一来是可以看看别人的博客主题，二来是能刷到别人分享的故事。
 
-![活版印字主题](https://image.radishzz.cc/birth-of-retypeset/typograph.webp)
+![活版印字](https://image.radishzz.cc/birth-of-retypeset/typograph.webp)
 
 几个月前，我偶然在 V2 刷到 [活版印字](https://astro-theme-typography.vercel.app/) 这个主题，简约的风格直接戳中我的审美。再加上之前的 Hexo 博客性能太差，我一直想换来着，于是就决定迁移博客到这个主题。
 
@@ -27,14 +27,8 @@ Retypeset 是一款基于 Astro 框架的静态博客主题，中文名为重新
 - 桌面端的部分区域无法滚动
 
 ![匀速淡入淡出，略显生硬](https://image.radishzz.cc/birth-of-retypeset/unnatural-animation-rate.gif)
-<figure>
-  <figcaption>匀速淡入淡出，略显生硬</figcaption>
-</figure>
 
-<figure>
+![移动端的左边距为四格，右边距为六格](https://image.radishzz.cc/birth-of-retypeset/different-margins.webp)
-  <img src="https://image.radishzz.cc/birth-of-retypeset/different-margins.webp" alt="移动端左边距为四格，右边距为六格" />
-  <figcaption>移动端的左边距为四格，右边距为六格</figcaption>
-</figure>
 
 不过这些倒是小事。对我来说，最大的问题是主题不支持 i18n 功能。我指的 i18n 不是简单地更换 UI 语言，而是支持多语言路径。
 
@@ -45,20 +39,18 @@ i18n 对我来说是必需的。因为我之前发过一篇英文的 [三星优
 于是我开始给主题添加 i18n 功能。既然要加，不能只支持中英两种语言，肯定得支持多种语言。根据 Astro 官方指南，我需要给每种语言都新建一个文件夹，这也太麻烦了。
 
 ![Astro 官方的 i18n 指南](https://image.radishzz.cc/birth-of-retypeset/astro-i18n-guide.webp)
-
 接着我找到官方推荐的 i18n 插件，都试了一遍，效果都不理想，而且很麻烦。后来刷到一个推特帖子，我发现这个方案不错，非常地巧妙，而且不需要安装额外的插件。
 
 ![推特 i18n 截图](https://image.radishzz.cc/birth-of-retypeset/twitter-i18n.webp)
-
  于是我按照这个思路，花了一周时间终于是弄出一套方案。本地测试成功，非常开心。虽然我看不懂 Cursor 是怎么实现的，但能跑起来就行了。
 
  结果问题就来了。部署网站到 Netlify 时一直报错，我也看不懂报错信息，给 AI 修也修不好。当时感觉心灰意冷，搞了这么久，还是失败了嘛…
 
  无奈之下，我想到了向作者 Moeyua 发邮件求助。
 
-## 转折
+![求助邮件](https://image.radishzz.cc/birth-of-retypeset/mail-to-moeyua.webp)
 
-![邮件截图](https://image.radishzz.cc/birth-of-retypeset/mail-to-moeyua.webp)
+## 转折
 
 没想到作者很快回复了我，并帮忙提交 PR 修复了报错问题。但是我发现 i18n 的实现方式被改成了 301 重定向，这显然不是我想要的效果。也不好意思再去麻烦人家作者，试着自己改改吧。
 
@@ -68,7 +60,7 @@ i18n 对我来说是必需的。因为我之前发过一篇英文的 [三星优
 
 三个月过去了，也就有了现在你所看到的样子。
 
-![主题图片](https://image.radishzz.cc/birth-of-retypeset/retypeset-en-desktop.webp)
+![Retypeset](https://image.radishzz.cc/birth-of-retypeset/retypeset-en-desktop.webp)
 
 ## 细节
 
@@ -90,27 +82,15 @@ i18n 对我来说是必需的。因为我之前发过一篇英文的 [三星优
 
 二是因为视觉风格。你所看到的字体、颜色、排版、图标、动画等，都是我精心推敲之后的结果。由于篇幅限制，不适合在此展开介绍。不过我相信，你应该能感受到主题背后，那一股优雅的气质。下面分享一些设计过程中的草图：
 
-<figure>
+![初稿](https://image.radishzz.cc/birth-of-retypeset/draft-01.webp)
-  <img src="https://image.radishzz.cc/birth-of-retypeset/draft-01.webp" alt="草图" />
-  <figcaption>初稿</figcaption>
-</figure>
 
-<figure>
+![标题的排列组合](https://image.radishzz.cc/birth-of-retypeset/draft-04.webp)
-  <img src="https://image.radishzz.cc/birth-of-retypeset/draft-04.webp" alt="草图" />
-  <figcaption>尝试在标题上添加一些线条装饰</figcaption>
-</figure>
 
-![草图](https://image.radishzz.cc/birth-of-retypeset/draft-02.webp)
+![初始布局](https://image.radishzz.cc/birth-of-retypeset/draft-02.webp)
 
-<figure>
+![尝试不同配色](https://image.radishzz.cc/birth-of-retypeset/draft-03.webp)
-  <img src="https://image.radishzz.cc/birth-of-retypeset/draft-03.webp" alt="草图" />
-  <figcaption>尝试不同配色，包括渐变</figcaption>
-</figure>
 
-<figure>
+![绘制图标](https://image.radishzz.cc/birth-of-retypeset/draft-05.webp)
-  <img src="https://image.radishzz.cc/birth-of-retypeset/draft-05.webp" alt="草图" />
-  <figcaption>主题切换按键，其实是旋转 90 度的字母 O</figcaption>
-</figure>
 
 ### Webkit
 
@@ -120,9 +100,9 @@ iPhone 上总是会出现一些奇怪的 BUG，例如切换页面时背景会闪
 
 以下图片均为慢动作拍摄。
 
-![草图](https://image.radishzz.cc/birth-of-retypeset/bug-01.gif)
+![字体被裁切](https://image.radishzz.cc/birth-of-retypeset/bug-01.gif)
 
-![草图](https://image.radishzz.cc/birth-of-retypeset/bug-02.gif)
+![背景闪烁](https://image.radishzz.cc/birth-of-retypeset/bug-02.gif)
 
 为了解决这些奇怪的问题，我也是花了不少时间，好在最后都完美解决了。如果你在仓库中搜 ios，你可以看到不少注释，那些就是我的解决办法。
 
@@ -154,9 +134,4 @@ iPhone 上总是会出现一些奇怪的 BUG，例如切换页面时背景会闪
 - [Moeyua](https://github.com/moeyua) 原主题作者，提供 PR 与故事的开始
 - [Xat](https://github.com/withxat) 热心老哥，在发帖求助两个月后主动联系我，提供 PR 与意见参考
 
-<figure>
+![世上还是好人多啊](https://image.radishzz.cc/birth-of-retypeset/xat-help.webp)
-  <img src="https://image.radishzz.cc/birth-of-retypeset/xat-help.webp" alt="草图" />
-  <figcaption>世上还是好人多啊。<del>也不多，就一个</del></figcaption>
-</figure>
-
-完。

src/content/posts/guides/Markdown Style Guide-en.md

@@ -66,7 +66,7 @@ To add an image, add an exclamation mark `!`, followed by alt text in brackets `
 
 ### Output
 
-![Image Description](/image-placeholder)
+![Image Description](/assets/retypeset-en-desktop.webp)
 
 ## Blockquotes
 

src/content/posts/guides/Markdown Style Guide-es.md

@@ -66,7 +66,7 @@ Para agregar una imagen, añada un signo de exclamación `!`, seguido de texto a
 
 ### Resultado
 
-![Descripción de la Imagen](/image-placeholder)
+![Descripción de la Imagen](/assets/retypeset-en-desktop.webp)
 
 ## Citas en Bloque
 

src/content/posts/guides/Markdown Style Guide-ja.md

@@ -66,7 +66,7 @@ abbrlink: markdown-style-guide
 
 ### 効果
 
-![画像の説明](/image-placeholder)
+![画像の説明](/assets/retypeset-en-desktop.webp)
 
 ## 引用ブロック
 

src/content/posts/guides/Markdown Style Guide-ru.md

@@ -66,7 +66,7 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
 
 ### Результат
 
-![Описание изображения](/image-placeholder)
+![Описание изображения](/assets/retypeset-en-desktop.webp)
 
 ## Цитаты
 

src/content/posts/guides/Markdown Style Guide-zh-tw.md

@@ -66,7 +66,7 @@ abbrlink: markdown-style-guide
 
 ### 效果
 
-![圖片描述](/image-placeholder)
+![圖片描述](/assets/retypeset-en-desktop.webp)
 
 ## 區塊引用
 

src/content/posts/guides/Markdown Style Guide-zh.md

@@ -66,7 +66,7 @@ abbrlink: markdown-style-guide
 
 ### 效果
 
-![图片描述](/image-placeholder)
+![图片描述](/assets/retypeset-en-desktop.webp)
 
 ## 块引用
 

src/content/posts/guides/Theme Color Schemes-zh.md

@@ -30,7 +30,6 @@ dark: {
 },
 ```
 
-
 ## 鸦青
 
 ![Light mode](../../../assets/2-light.jpeg)

src/plugins/rehype-img-to-figure.mjs

@@ -0,0 +1,29 @@
+import { visit } from 'unist-util-visit'
+
+export function rehypeImgToFigure() {
+  return (tree) => {
+    visit(tree, 'element', (node) => {
+      if (
+        node.tagName === 'p'
+        && node.children
+        && node.children.length === 1
+        && node.children[0].tagName === 'img'
+        && node.children[0].properties.alt
+      ) {
+        const child = node.children[0]
+        const altText = child.properties.alt
+
+        node.tagName = 'figure'
+        node.children = [
+          child,
+          {
+            type: 'element',
+            tagName: 'figcaption',
+            properties: {},
+            children: [{ type: 'text', value: altText }],
+          },
+        ]
+      }
+    })
+  }
+}

src/styles/heti.css

@@ -20,7 +20,7 @@
 /* Links */
 .heti :where(a) {
   --at-apply: 'underline decoration-secondary/40 underline-0.075em underline-offset-0.1em lg:underline-0.1em';
-  --at-apply: 'font-medium transition-colors tracking-0 hover:(c-primary decoration-secondary/80) ';
+  --at-apply: 'font-medium transition-colors break-all tracking-0 hover:(c-primary decoration-secondary/80) ';
 }
 
 /* Paragraphs */
@@ -79,7 +79,7 @@
 /* Blockquotes */
 .heti :where(blockquote) {
   --at-apply: 'mt-3 mb-6 px-4 py-3 rounded';
-  --at-apply: 'border-l-4 border-solid border-secondary/25 bg-secondary/5';
+  --at-apply: 'border-l-4 border-solid border-secondary/40 bg-secondary/5';
 }
 .heti blockquote :where(blockquote) {
   --at-apply: 'my-3';
@@ -102,14 +102,14 @@ html.dark .heti pre :where(span) {
 
 /* Inline Code */
 .heti :where(code) {
-  --at-apply: 'px-1 py-0.5 bg-secondary/5 rounded text-0.85em border border-solid border-secondary/5 break-all';
+  --at-apply: 'px-1 py-0.5 bg-secondary/7 rounded text-0.85em border border-solid border-secondary/5 break-all tracking-0';
   counter-reset: line;
 }
 .heti :where(code) span.line {
   --at-apply: 'relative pl-8';
 }
 .heti :where(code) span.line::before {
-  --at-apply: 'text-secondary/35 w-4 absolute left-0 leading-1.95em align-bottom';
+  --at-apply: 'text-secondary/40 w-4 absolute left-0 leading-1.95em align-bottom';
   content: counter(line);
   counter-increment: line;
   direction: rtl;
@@ -163,6 +163,9 @@ html.dark .heti pre :where(span) {
 .heti :where(table)::-webkit-scrollbar {
   display: none;
 }
+.heti :where(th) {
+  --at-apply: 'bg-secondary/5';
+}
 .heti :where(th),
 .heti :where(td) {
   --at-apply: 'px-3 py-1.5 border border-solid border-secondary/40';
@@ -202,7 +205,7 @@ html.dark .heti sup a:target {
 
 /* Keyboard Input */
 .heti :where(kbd) {
-  --at-apply: 'rounded border border-solid border-secondary/40 text-secondary';
+  --at-apply: 'rounded border border-solid border-secondary/40 text-secondary tracking-0';
   --at-apply: 'inline-block text-0.85em font-bold leading-none px-1 py-0.75 whitespace-nowrap';
 }
 
@@ -287,11 +290,20 @@ html.dark .heti :where(u) {
 }
 
 /* Images */
+.heti :where(img) {
+  --at-apply: 'mx-auto my-6';
+}
 .heti :where(figure) {
-  --at-apply: 'my-6';
+  --at-apply: 'mx-auto mt-6 mb-4';
+}
+.heti figure > :where(img) {
+  --at-apply: 'my-0';
 }
 .heti figure > :where(figcaption) {
-  --at-apply: 'text-center text-sm mt-3 text-secondary/75';
+  --at-apply: 'text-center text-sm mt-3 text-secondary/50';
+}
+.heti :where(h1, h2, h3, h4, h5, h6) + p > img:first-child {
+  --at-apply: 'mt-0';
 }
 
 /* KaTeX Mathematical */