From 4ff44f9ac45d4f6e27e6e515e2a8a011573facc2 Mon Sep 17 00:00:00 2001 From: radishzzz Date: Wed, 16 Apr 2025 06:25:04 +0100 Subject: [PATCH] style: add image to figure plugin - Improve styles for images, blockquotes, tables and more - Fix unexpected line breaks --- astro.config.ts | 8 +-- package.json | 6 ++- pnpm-lock.yaml | 48 +++++++++++++++++ .../posts/diaries/Birth of Retypeset-zh.md | 51 +++++-------------- .../posts/guides/Markdown Style Guide-en.md | 4 +- .../posts/guides/Markdown Style Guide-es.md | 2 +- .../posts/guides/Markdown Style Guide-ja.md | 2 +- .../posts/guides/Markdown Style Guide-ru.md | 2 +- .../guides/Markdown Style Guide-zh-tw.md | 2 +- .../posts/guides/Markdown Style Guide-zh.md | 4 +- .../posts/guides/Theme Color Schemes-zh.md | 1 - src/plugins/rehype-img-to-figure.mjs | 29 +++++++++++ ...eading-time.js => remark-reading-time.mjs} | 0 src/styles/heti.css | 26 +++++++--- 14 files changed, 126 insertions(+), 59 deletions(-) create mode 100644 src/plugins/rehype-img-to-figure.mjs rename src/plugins/{remark-reading-time.js => remark-reading-time.mjs} (100%) diff --git a/astro.config.ts b/astro.config.ts index 0dca004..a6986c1 100644 --- a/astro.config.ts +++ b/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, { diff --git a/package.json b/package.json index b21d233..9af204b 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 44f01e3..449736f 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/content/posts/diaries/Birth of Retypeset-zh.md b/src/content/posts/diaries/Birth of Retypeset-zh.md index 2e15c02..55ed64e 100644 --- a/src/content/posts/diaries/Birth of Retypeset-zh.md +++ b/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) -
-
匀速淡入淡出，略显生硬
-
-
- 移动端左边距为四格，右边距为六格 -
移动端的左边距为四格，右边距为六格
-
+![移动端的左边距为四格，右边距为六格](https://image.radishzz.cc/birth-of-retypeset/different-margins.webp) 不过这些倒是小事。对我来说，最大的问题是主题不支持 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 对我来说是必需的。因为我之前发过一篇英文的 [三星优 二是因为视觉风格。你所看到的字体、颜色、排版、图标、动画等，都是我精心推敲之后的结果。由于篇幅限制，不适合在此展开介绍。不过我相信，你应该能感受到主题背后，那一股优雅的气质。下面分享一些设计过程中的草图： -
- 草图 -
初稿
-
+![初稿](https://image.radishzz.cc/birth-of-retypeset/draft-01.webp) -
- 草图 -
尝试在标题上添加一些线条装饰
-
+![标题的排列组合](https://image.radishzz.cc/birth-of-retypeset/draft-04.webp) -![草图](https://image.radishzz.cc/birth-of-retypeset/draft-02.webp) +![初始布局](https://image.radishzz.cc/birth-of-retypeset/draft-02.webp) -
- 草图 -
尝试不同配色，包括渐变
-
+![尝试不同配色](https://image.radishzz.cc/birth-of-retypeset/draft-03.webp) -
- 草图 -
主题切换按键，其实是旋转 90 度的字母 O
-
+![绘制图标](https://image.radishzz.cc/birth-of-retypeset/draft-05.webp) ### 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 与意见参考 -
- 草图 -
世上还是好人多啊。也不多，就一个
-
- -完。 +![世上还是好人多啊](https://image.radishzz.cc/birth-of-retypeset/xat-help.webp) diff --git a/src/content/posts/guides/Markdown Style Guide-en.md b/src/content/posts/guides/Markdown Style Guide-en.md index 26897e7..7df6da5 100644 --- a/src/content/posts/guides/Markdown Style Guide-en.md +++ b/src/content/posts/guides/Markdown Style Guide-en.md @@ -2,7 +2,7 @@ title: Markdown Style Guide published: 2025-03-08 updated: 2025-03-23 -tags: +tags: - Guide pin: 98 toc: false @@ -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 diff --git a/src/content/posts/guides/Markdown Style Guide-es.md b/src/content/posts/guides/Markdown Style Guide-es.md index 4b832b9..44d6a1d 100644 --- a/src/content/posts/guides/Markdown Style Guide-es.md +++ b/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 diff --git a/src/content/posts/guides/Markdown Style Guide-ja.md b/src/content/posts/guides/Markdown Style Guide-ja.md index c3af13a..22fcea6 100644 --- a/src/content/posts/guides/Markdown Style Guide-ja.md +++ b/src/content/posts/guides/Markdown Style Guide-ja.md @@ -66,7 +66,7 @@ abbrlink: markdown-style-guide ### 効果 -![画像の説明](/image-placeholder) +![画像の説明](/assets/retypeset-en-desktop.webp) ## 引用ブロック diff --git a/src/content/posts/guides/Markdown Style Guide-ru.md b/src/content/posts/guides/Markdown Style Guide-ru.md index d5c3e34..3795a7d 100644 --- a/src/content/posts/guides/Markdown Style Guide-ru.md +++ b/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) ## Цитаты diff --git a/src/content/posts/guides/Markdown Style Guide-zh-tw.md b/src/content/posts/guides/Markdown Style Guide-zh-tw.md index b1097b4..fc6e1ef 100644 --- a/src/content/posts/guides/Markdown Style Guide-zh-tw.md +++ b/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) ## 區塊引用 diff --git a/src/content/posts/guides/Markdown Style Guide-zh.md b/src/content/posts/guides/Markdown Style Guide-zh.md index ef0e625..cd909fc 100644 --- a/src/content/posts/guides/Markdown Style Guide-zh.md +++ b/src/content/posts/guides/Markdown Style Guide-zh.md @@ -2,7 +2,7 @@ title: Markdown 样式指南 published: 2025-03-08 updated: 2025-03-23 -tags: +tags: - 指南 pin: 98 toc: false @@ -66,7 +66,7 @@ abbrlink: markdown-style-guide ### 效果 -![图片描述](/image-placeholder) +![图片描述](/assets/retypeset-en-desktop.webp) ## 块引用 diff --git a/src/content/posts/guides/Theme Color Schemes-zh.md b/src/content/posts/guides/Theme Color Schemes-zh.md index 8b6a525..07d85b8 100644 --- a/src/content/posts/guides/Theme Color Schemes-zh.md +++ b/src/content/posts/guides/Theme Color Schemes-zh.md @@ -30,7 +30,6 @@ dark: { }, ``` - ## 鸦青 ![Light mode](../../../assets/2-light.jpeg) diff --git a/src/plugins/rehype-img-to-figure.mjs b/src/plugins/rehype-img-to-figure.mjs new file mode 100644 index 0000000..eca4089 --- /dev/null +++ b/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 }], + }, + ] + } + }) + } +} diff --git a/src/plugins/remark-reading-time.js b/src/plugins/remark-reading-time.mjs similarity index 100% rename from src/plugins/remark-reading-time.js rename to src/plugins/remark-reading-time.mjs diff --git a/src/styles/heti.css b/src/styles/heti.css index a5efdd4..d84a9f1 100644 --- a/src/styles/heti.css +++ b/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 */