docs: add custom valaxy icon

demo/yun/pages/examples/addons/components.md

@@ -16,8 +16,7 @@ codepen: false
 pnpm add -D valaxy-addon-components
 ```
 
-```ts
-// valaxy.config.ts
+```ts [valaxy.config.ts]
 import { defineValaxyConfig } from 'valaxy'
 import { addonComponents } from 'valaxy-addon-components'
 

docs/pages/guide/config/extend.md

@@ -29,9 +29,8 @@ categories:
 So you can use it like this:
 :::
 
-```ts
+```ts [valaxy.config.ts]
 import type { ThemeConfig } from 'valaxy-theme-yun'
-// valaxy.config.ts
 import { defineValaxyConfig } from 'valaxy'
 import { addonComponents } from 'valaxy-addon-components'
 import { VitePWA } from 'vite-plugin-pwa'

docs/pages/guide/config/index.md

@@ -36,9 +36,8 @@ To simplify config, Valaxy divided the configuration into 3.
 For example:
 :::
 
-```ts
+```ts [valaxy.config.ts]
 import type { ThemeConfig } from 'valaxy-theme-yun'
-// valaxy.config.ts
 import { defineValaxyConfig } from 'valaxy'
 import { addonComponents } from 'valaxy-addon-components'
 import { VitePWA } from 'vite-plugin-pwa'
@@ -93,8 +92,7 @@ export default defineValaxyConfig<ThemeConfig>({
 
 譬如：
 
-```ts
-// site.config.ts
+```ts [site.config.ts]
 import { defineSiteConfig } from 'valaxy'
 
 export default defineSiteConfig({
@@ -146,8 +144,7 @@ You can also write it in `site.config.ts`.
 
 For example:
 
-```ts
-// site.config.ts
+```ts [site.config.ts]
 import { defineSiteConfig } from 'valaxy'
 
 export default defineSiteConfig({
@@ -234,8 +231,7 @@ export default defineSiteConfig({
 
 > 设置 `time_warning: false`，则所有文章都不会显示阅读时间警告。
 
-```ts {8-10}
-// site.config.ts
+```ts {8-10} [site.config.ts]
 import { defineSiteConfig } from 'valaxy'
 
 export default defineSiteConfig({
@@ -257,8 +253,7 @@ For example:
 
 > Set `time_warning: false` so that all articles won't show reading time warnings.
 
-```ts {8-10}
-// site.config.ts
+```ts {8-10} [site.config.ts]
 import { defineSiteConfig } from 'valaxy'
 
 export default defineSiteConfig({
@@ -319,8 +314,7 @@ export interface SocialLink {
 Example:
 :::
 
-```ts
-// site.config.ts
+```ts [site.config.ts]
 import { defineSiteConfig } from 'valaxy'
 
 export default defineSiteConfig({
@@ -354,8 +348,7 @@ export default defineSiteConfig({
 ::: zh-CN
 > 在每篇文章末尾，展示赞助（打赏）信息。
 
-```ts
-// site.config.ts
+```ts [site.config.ts]
 import { defineSiteConfig } from 'valaxy'
 
 export default defineSiteConfig({
@@ -385,8 +378,7 @@ export default defineSiteConfig({
 ::: en
 > At the end of each post, show sponsor information.
 
-```ts
-// site.config.ts
+```ts [site.config.ts]
 import { defineSiteConfig } from 'valaxy'
 
 export default defineSiteConfig({
@@ -451,8 +443,7 @@ sponsor: false
 - `readingTime`：阅读时长（分钟）
   - 可以设置不同语言的阅读速度，默认 `cn` 为 300 字/分钟，`en` 为 200 字/分钟。
 
-```ts
-// site.config.ts
+```ts [site.config.ts]
 import { defineSiteConfig } from 'valaxy'
 
 export default defineSiteConfig({
@@ -637,8 +628,7 @@ interface RedirectRule {
 For example:
 :::
 
-```ts
-// site.config.ts
+```ts [site.config.ts]
 export default defineSiteConfig({
   redirects: {
     useVueRouter: true,
@@ -735,11 +725,9 @@ Valaxy has built-in [medium-zoom](https://github.com/francoischalifour/medium-zo
   - `selector`: Custom CSS selector
   - `options`: Refer to [options | medium-zoom](https://github.com/francoischalifour/medium-zoom#options)
 
->>>>>>> a2bbd86 (docs: update vanillaLazyLoad)
 :::
 
-```ts
-// site.config.ts
+```ts [site.config.ts]
 import { defineSiteConfig } from 'valaxy'
 
 export default defineSiteConfig({

docs/pages/guide/features.md

@@ -196,8 +196,7 @@ For example, if I want my theme color to be red:
 > Supported by `valaxy-theme-yun`
 :::
 
-```ts
-// valaxy.config.ts
+```ts [valaxy.config.ts]
 export default {
   themeConfig: {
     colors: {
@@ -321,8 +320,7 @@ KaTeX 已被默认支持并启用。
 Katex is enabled by default.
 :::
 
-```ts
-// valaxy.config.ts
+```ts [valaxy.config.ts]
 import { defineValaxyConfig } from 'valaxy'
 
 export default defineValaxyConfig({

docs/pages/guide/markdown.md

@@ -665,17 +665,39 @@ Details Content
 :::
 ```
 
-## 添加代码块标题 {lang="zh-CN"}
+## 添加代码块标题与图标 {lang="zh-CN"}
 
-## Add Code Block Title {lang="en"}
+## Add Code Block Title And Icons {lang="en"}
 
-默认**关闭**，你可以通过将其设置为空对象来开启：
+默认**关闭**，你可以通过将 `groupIcons` 设置为 `空对象` 来开启：
 
 ```ts [valaxy.config.ts]
 import { defineValaxyConfig } from 'valaxy'
 
 export default defineValaxyConfig({
-  groupIcons: {}
+  groupIcons: {
+    customIcon: {}
+  }
+})
+```
+
+它基于 [vitepress-plugin-group-icons](https://github.com/yuyinws/vitepress-plugin-group-icons) 实现，内置了一些[常用图标](https://vp.yuy1n.io/features.html#built-in-icons)，你可以如下自定义更多图标。
+
+```ts [valaxy.config.ts] {5-14}
+import { defineValaxyConfig } from 'valaxy'
+import { localIconLoader } from 'vitepress-plugin-group-icons'
+
+export default defineValaxyConfig({
+  groupIcons: {
+    customIcon: {
+      // https://valaxy.site/favicon.svg
+      valaxy: localIconLoader(import.meta.url, './public/favicon.svg'),
+      nodejs: 'vscode-icons:file-type-node',
+      playwright: 'vscode-icons:file-type-playwright',
+      typedoc: 'vscode-icons:file-type-typedoc',
+      eslint: 'vscode-icons:file-type-eslint',
+    },
+  }
 })
 ```
 
@@ -689,7 +711,7 @@ export default defineValaxyConfig({})
 ```
 ````
 
-我们将会得到带有 `valaxy.config.ts` 标题与 TypeScript 图标的代码块：
+我们将会得到带有 `valaxy.config.ts` 标题与 Valaxy 图标的代码块：
 
 ```ts [valaxy.config.ts]
 import { defineValaxyConfig } from 'valaxy'
@@ -697,23 +719,6 @@ import { defineValaxyConfig } from 'valaxy'
 export default defineValaxyConfig({})
 ```
 
-它基于 [vitepress-plugin-group-icons](https://github.com/yuyinws/vitepress-plugin-group-icons) 实现，你可以如下自定义更多图标。
-
-```ts [valaxy.config.ts] {4-11}
-import { defineValaxyConfig } from 'valaxy'
-
-export default defineValaxyConfig({
-  groupIcons: {
-    customIcon: {
-      nodejs: 'vscode-icons:file-type-node',
-      playwright: 'vscode-icons:file-type-playwright',
-      typedoc: 'vscode-icons:file-type-typedoc',
-      eslint: 'vscode-icons:file-type-eslint',
-    },
-  }
-})
-```
-
 ## KaTeX {lang="en"}
 
 ## KaTeX 语法支持 {lang="zh-CN"}
@@ -790,8 +795,7 @@ $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
 > [KaTeX选项](https://katex.org/docs/options.html)
 :::
 
-```ts
-// valaxy.config.ts
+```ts [valaxy.config.ts]
 export default defineValaxyConfig({
   markdown: {
     /**
@@ -821,7 +825,7 @@ You can also prefix the markdown path with `@`, it will act as the source root.
 **输入**
 :::
 
-```md
+```md [your-file.md]
 ## Docs
 
 <!--@include: @/TEST.md-->
@@ -1008,7 +1012,7 @@ Freedom to control your layout!
 
 </div>
 
-```html
+```html [pages/posts/your-post.md]
 <div class="flex flex-col">
 
 <div class="flex grid-cols-3">

docs/pages/guide/third-party/comment-system.md

@@ -25,8 +25,7 @@ npm i valaxy-addon-waline
 # pnpm add valaxy-addon-waline
 ```
 
-```ts
-// valaxy.config.ts
+```ts [valaxy.config.ts]
 import { defineValaxyConfig } from 'valaxy'
 import { addonWaline } from 'valaxy-addon-waline'
 

docs/pages/themes/use.md

@@ -25,8 +25,7 @@ npm i valaxy-theme-yun
 Configure the `theme` field as the theme name, such as `yun`.
 :::
 
-```ts
-// valaxy.config.ts
+```ts [valaxy.config.ts]
 import { defineConfig } from 'valaxy'
 
 export default defineConfig({
@@ -45,8 +44,7 @@ export default defineConfig({
 Refer to the corresponding theme documentation, configure `themeConfig`.
 :::
 
-```ts
-// valaxy.config.ts
+```ts [valaxy.config.ts]
 import { defineConfig } from 'valaxy'
 
 export default defineConfig({

docs/valaxy.config.ts

@@ -5,6 +5,8 @@ import { addonAlgolia } from 'valaxy-addon-algolia'
 import { addonComponents } from 'valaxy-addon-components'
 import { addonGitLog } from 'valaxy-addon-git-log'
 
+import { localIconLoader } from 'vitepress-plugin-group-icons'
+
 import pkg from '../packages/valaxy/package.json'
 
 const COMMIT_ID = process.env.CF_PAGES_COMMIT_SHA || process.env.COMMIT_REF
@@ -224,5 +226,9 @@ export default defineValaxyConfig<PressTheme.Config>({
     // theme: 'material-theme-palenight',
   },
 
-  groupIcons: {},
+  groupIcons: {
+    customIcon: {
+      valaxy: localIconLoader(import.meta.url, './public/favicon.svg'),
+    },
+  },
 })

packages/valaxy-addon-bangumi/README.md

@@ -14,8 +14,7 @@ npm i valaxy-addon-bangumi
 
 使用示例：
 
-```ts
-// valaxy.config.ts
+```ts [valaxy.config.ts]
 import { defineConfig } from 'valaxy'
 import { addonBangumi } from 'valaxy-addon-bangumi'
 
@@ -44,8 +43,7 @@ description: Bangumi 追番列表
 
 bilibili-bangumi-component 使用 WebComponent 实现，而 Shadow DOM 具有隔离性，外部样式样式无法覆盖内部样式，可以通过下面的方式覆盖：
 
-```ts
-// valaxy.config.ts
+```ts [valaxy.config.ts]
 import { defineConfig } from 'valaxy'
 import { addonBangumi } from 'valaxy-addon-bangumi'
 

packages/valaxy-addon-lightgallery/README.md

@@ -16,8 +16,7 @@ npm i valaxy-addon-lightgallery
 
 ### Load the plugin
 
-```ts
-// valaxy.config.ts
+```ts [valaxy.config.ts]
 import { defineValaxyConfig } from 'valaxy'
 import { addonLightGallery } from 'valaxy-addon-lightgallery'