search

vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
13.01k stars 2.1k forks source link

docs: add group icon #4147

Closed yuyinws closed 2 months ago

yuyinws commented 2 months ago

Description

This PR add vitepress-plugin-group-icons to enhance the readability for code-group:

After

image

Linked Issues

Additional Context

This plugin already using by:

[!TIP] The author of this PR can publish a preview release by commenting /publish below.

pkg-pr-new[bot] commented 2 months ago

commit: 9ec5d31

pnpm add https://pkg.pr.new/vitepress@4147

Open in Stackblitz

brc-dd commented 2 months ago

Looks good, but I guess this can be done without any runtime deps (bundle size difference is over 20KB, 8KB gz + one less request to iconify api from visitor's browser)

image

https://stackblitz.com/edit/vite-pvq6m1?file=docs/.vitepress/config.ts,docs/.vitepress/theme/custom.css

yuyinws commented 2 months ago

Oh, good idea! I will try to implement it on this plugin. Close pr for now∶)

brc-dd commented 2 months ago

You'll need to find some way to extract used icons though (using vite plugin maybe). Otherwise all icons will be added to CSS 🫠

brc-dd commented 2 months ago

I can add the data-label (or maybe data-title?) thing to core though. This line will need change:

https://github.com/vuejs/vitepress/blob/eed9a9441569dbaa1d07b95135e7d27ed9da38aa/src/node/markdown/plugins/containers.ts#L114

You'll need to just write the vite plugin then 👀

yuyinws commented 2 months ago

Cool! I will write the plugin recently and share your the latest progress.

brc-dd commented 2 months ago

ping me on https://chat.vuejs.org/ (vitepress channel) if you need to discuss something 👍