ouuan/iles-blog

ouuan's blog

iles-blog

Visit the blog

ouuan's blog built with îles and more.

pnpm i
pnpm dev
pnpm build

可以在遵循 AGPL v3（或其更新的版本）的条件下参考/使用本代码的 片段，但请 尽量不要 直接在整个代码的基础上进行修改，因为并没有按照人人可以拿来用的模板进行设计，很多地方会硬编码一些东西，修改比较困难，如果我这里有更新要同步也很麻烦，也可能在某些系统环境无法正常构建之类的。如果真的直接使用，也需要遵循 AGPL v3，并且请务必小心，一切后果自负。

iles-blog's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

• chore(deps): update dependency @types/hast to v3
• chore(deps): update dependency eslint to v9
• chore(deps): update dependency hast-util-select to v6
• chore(deps): update dependency mdast-util-mdx to v3
• chore(deps): update dependency mdast-util-to-hast to v13
• chore(deps): update dependency micromark to v4
• chore(deps): update dependency remark-definition-list to v2
• chore(deps): update dependency shiki to v1
• chore(deps): update dependency unified to v11
• chore(deps): update dependency vite to v5
• chore(deps): update remark (major) (rehype-katex, remark-gfm, remark-math, remark-parse)
• 🔐 Create all pending approval PRs at once 🔐

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update dependency @types/node to v20.14.9
• chore(deps): update dependency isbot to v5.1.11
• chore(deps): update dependency puppeteer to v22.12.1
• chore(deps): update dependency typescript to v5.5.3
• chore(deps): update dependency vue-tsc to v2.0.24
• chore(deps): update vue monorepo to v3.4.31 (@vue/runtime-core, vue)

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update dependency @ouuan/tsconfig-vue to v1.2.0
• chore(deps): update dependency vite to v4.5.3

Detected dependencies

github-actions

.github/workflows/build.yml

• actions/checkout v4
• mxschmitt/action-tmate v3
• nick-fields/retry v3
• actions/upload-artifact v4
• peaceiris/actions-gh-pages v4
• benc-uk/workflow-dispatch v1
• actions/checkout v4

.github/workflows/codeql.yml

• actions/checkout v4
• github/codeql-action v3
• github/codeql-action v3
• github/codeql-action v3

.github/workflows/lint.yml

• actions/checkout v4
• actions/setup-node v4

.github/workflows/quotes.yml

• actions/checkout v4
• actions/setup-node v4

.github/workflows/update-fonts.yml

• actions/checkout v4
• peter-evans/create-pull-request v6

npm

package.json

• @giscus/vue 3.0.0
• @mermaid-js/mermaid-cli 10.9.1
• @sniptt/guards 0.2.0
• @unocss/reset 0.61.0
• @vueuse/components 10.11.0
• @vueuse/core 10.11.0
• date-fns 3.6.0
• glyph-segregator 0.6.5
• hast-util-select 5.0.5
• iles 0.9.5
• isbot 5.1.9
• katex 0.16.10
• mdast-util-to-hast 12.3.0
• plausible-tracker 0.3.9
• puppeteer 22.12.0
• rehype-plugin-image-native-lazy-loading 1.2.0
• shiki 0.14.7
• simple-git 3.25.0
• sitemap 8.0.0
• ts-exhaustive-check 1.0.0
• unified 10.1.2
• unist-util-visit 5.0.0
• unocss 0.61.0
• vite 4.1.4
• vue 3.3.13
• xml-formatter 3.6.2
• @cloudflare/workers-types 4.20240620.0
• @iconify-json/mdi 1.1.67
• @islands/excerpt 0.9.0
• @islands/feed 0.8.1
• @islands/headings 0.8.2
• @islands/images 0.8.2
• @ouuan/eslint-config-vue 1.3.0
• @ouuan/tsconfig-vue 1.0.0
• @total-typescript/ts-reset 0.5.1
• @types/hast 2.3.10
• @types/node 20.14.8
• @unocss/eslint-config 0.61.0
• @unocss/transformer-directives 0.61.0
• @vue/runtime-core 3.3.13
• eslint 8.57.0
• got 14.4.1
• mdast-util-mdx 2.0.1
• micromark 3.2.0
• rehype-katex 6.0.3
• remark-definition-list 1.2.0
• remark-gfm 3.0.1
• remark-math 5.1.1
• remark-parse 10.0.2
• rollup-plugin-analyzer 4.0.0
• sass 1.77.6
• tsup 8.1.0
• typescript 5.5.2
• vite-plugin-compression 0.5.1
• vue-tsc 2.0.22
• vite-plugin-image-presets 0.3.4

pip_requirements

meili/requirements.txt

---

• Check this box to trigger a request for Renovate to run again on this repository

不提供 woff 格式的字体

现在 woff2 完全不是兼容性的瓶颈，几乎没有用户会使用不支持 woff2 的浏览器，而如果不支持 woff2 的话很有可能 es6 也不支持。由于使用了 glyph-segregator，额外生成 woff 字体会占用不少构建时间。

只不过现在构建时间还可以接受，为极少数使用不支持 woff2 浏览器的用户提供虽然没有 JS 但有字体的体验也是可以的；更主要的原因是，glyph-segregator 虽然可能只有我一个用户但毕竟是个库，删掉 woff 更需要谨慎，而我懒得加个是否生成 woff 的设置（

所以可以过个一两年再去掉 woff。

搜索页性能优化

随着文章越来越多，静态搜索页会越来越大，用户体验可能下降。Meilisearch 是我在简单调研后觉得比较好的文档搜索解决方案。

也可以考虑对静态搜索进行优化，例如将数据从 HTML 中分离出去，每篇博客单独一个数据文件以利用并行下载以及 cache。

记录一下移除静态搜索页的 to do：

• 删除 components/FuseSearch 和 pages/search
• 删除 fuse.js 依赖以及 manual chunk
• grep /search 进行修改
• 删除 exact-matched、fuzzy-matched CSS
• 删除 PostHead 里的 title slot 和 tagMatched prop
• 将 PostHead 改为静态，VisitorCount 改为 island
• 检查新的搜索是否有 role="search" 等 ARIA
• 处理 /search 以及 ?q 的 redirect 之类的

使用 `text-spacing-trim` 实现标点挤压

https://caniuse.com/mdn-css_properties_text-spacing-trim

Use shikiji

https://github.com/antfu/shikiji

将代码框的一部分当前动态生成的内容改为使用 rehype 插件静态生成

https://github.com/ouuan/iles-blog/blob/6e1a51fb44220c3d6070344c8ba3feabf32e40ae/src/components/CopyButtonAdder.vue

当前的动态生成内容，尤其是语言名称 header，会导致内容偏移

可以考虑把整个代码框都重写，代替 @islands/prism

image preset 设置

感觉我对 sizes、srcset 还是理解有误，现在的 image preset 设置好像不太对，有空得再研究一下。现在发现的主要问题是，同样大小的图片，srcset 中设置的 w 不同显示出来的宽度也不同；在容器大小不变时，图片显示出来的大小仍和视窗大小有关。可以考虑给图片设置确定的大小，貌似也可以防止布局偏移。

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (g)

Temporal API

来试试最新最热（

server side 的部分可以快点用上 https://node.green/ ，client side 多等等 https://caniuse.com/temporal

大概没啥用只是想体验一下（

使用 MathML

https://caniuse.com/mathml

Chrome 已经有了初步的 MathML 支持，只不过我试了下矩阵的对齐好像就有问题。过个三四年可以考虑用上 MathML，虽然还很遥远但先把 issue 开着（

真要用的话需要检查兼容性，也要看看字体的设置。