feat(theme): 增加 Playground 图标

docs/.vuepress/client.ts

@@ -1,5 +1,4 @@
-// import { defineClientConfig } from '@vuepress/client'
-import type { ClientConfig } from '@vuepress/client'
+import { defineClientConfig } from 'vuepress/client'
 
 import AutoArticleListLayout from './theme/layouts/AutoArticleListLayout'
 import AutoArticleList from './theme/components/AutoArticleList'
@@ -8,16 +7,14 @@ import Chazi from './theme/components/hanzi/Chazi.vue'
 import FlippyCard from './theme/components/flippy-card/components/card.vue'
 import HanziCard from './theme/components/hanzi/HanziCard.vue'
 
+import PlaygroundIcon from './theme/components/icons/PlaygroundIcon'
+
 // 为项目主页的特性添加闪光效果
 import 'vuepress-theme-hope/presets/shinning-feature-panel.scss'
 
 // 为页面图标添加鼠标悬停的跳动效果
 import 'vuepress-theme-hope/presets/bounce-icon.scss'
 
-function defineClientConfig(clientConfig: ClientConfig = {}): ClientConfig {
-  return clientConfig
-}
-
 export default defineClientConfig({
   // You can override or add layouts here
   layouts: {
@@ -30,5 +27,6 @@ export default defineClientConfig({
     app.component('Chazi', Chazi)
     app.component('FlippyCard', FlippyCard)
     app.component('HanziCard', HanziCard)
+    app.component('PlaygroundIcon', PlaygroundIcon)
   },
 })

docs/.vuepress/theme.ts

@@ -40,6 +40,7 @@ export const themeOptions: ThemeOptions = {
 
   blog: {
     medias: {
+      QQ: 'https://qm.qq.com/q/Shnbvwz3So',
       Email: 'mailto:hi@zhaobc.site',
       GitHub: 'https://github.com/FuckDoctors',
     },
@@ -53,6 +54,12 @@ export const themeOptions: ThemeOptions = {
       // navbar
       navbar: navbar.zh,
 
+      navbarLayout: {
+        start: ['Brand'],
+        center: ['Links'],
+        end: ['Language', 'Repo', 'Outlook', 'PlaygroundIcon', 'Search'],
+      },
+
       // sidebar
       sidebar: sidebar.zh,
 
@@ -74,6 +81,12 @@ export const themeOptions: ThemeOptions = {
       // navbar
       navbar: navbar.en,
 
+      navbarLayout: {
+        start: ['Brand'],
+        center: ['Links'],
+        end: ['Language', 'Repo', 'Outlook', 'PlaygroundIcon', 'Search'],
+      },
+
       // sidebar
       sidebar: sidebar.en,
 
@@ -174,13 +187,21 @@ export const themeOptions: ThemeOptions = {
       mermaid: true,
       demo: true,
       playground: {
-        presets: ['ts', 'vue'],
+        presets: ['ts', 'vue', 'unocss'],
       },
       vuePlayground: true,
       revealJs: {
         plugins: ['highlight', 'math', 'search', 'notes', 'zoom'],
       },
       hint: true,
+      sandpack: true,
+    },
+
+    shiki: {
+      themes: {
+        light: 'one-light',
+        dark: 'one-dark-pro',
+      },
     },
   },
 }

docs/.vuepress/theme/components/hanzi/Hanzi.vue

@@ -207,7 +207,7 @@ function handleRead() {
   <div class="hanzi-main-container">
     <div class="hanzi-main">
       <div class="hanzi-main__left">
-        <div ref="printRef" class="print hanzi" />
+        <div ref="printRef" class="hanzi print" />
         <div ref="aniRef" class="hanzi animation" />
         <div ref="writingRef" class="hanzi writing" />
         <div class="hanzi-controls">

docs/.vuepress/theme/components/icons/LinkIcon.ts

@@ -0,0 +1,53 @@
+import type { FunctionalComponent } from 'vue'
+import { h } from 'vue'
+
+import HopeIcon from '@theme-hope/components/HopeIcon'
+
+export interface LinkIconProps {
+  link?: string | undefined
+  target?: string | undefined
+  label?: string | undefined
+  icon?: string | undefined
+  color?: string | undefined
+  size?: string | number | undefined
+}
+
+const LinkIcon: FunctionalComponent<LinkIconProps> = props => {
+  const { link, target, label = '' } = props
+
+  return link
+    ? h(
+        'div',
+        { class: 'link-icon' },
+        h(
+          'a',
+          {
+            class: 'link',
+            href: link,
+            target,
+            rel: 'noopener noreferrer',
+            'aria-label': label,
+          },
+          h(HopeIcon, {
+            icon: props.icon,
+            color: props.color,
+            size: props.size,
+            class: 'icon',
+          })
+        )
+      )
+    : h(
+        'div',
+        { class: 'link-icon' },
+        h(HopeIcon, {
+          icon: props.icon,
+          color: props.color,
+          size: props.size,
+          class: 'icon',
+        })
+      )
+}
+
+LinkIcon.displayName = 'LinkIcon'
+
+export default LinkIcon

docs/.vuepress/theme/components/icons/PlaygroundIcon.ts

@@ -0,0 +1,50 @@
+import type { VNode } from 'vue'
+import { computed, defineComponent, h } from 'vue'
+import { useRouteLocale } from 'vuepress/client'
+
+import LinkIcon from './LinkIcon'
+
+const link = 'https://play.zhaobc.site'
+
+interface LocaleConfig {
+  label?: string
+}
+
+const locales: Record<string, LocaleConfig> = {
+  '/zh/': {
+    label: '演练场',
+  },
+  '/en/': {
+    label: 'Playground',
+  },
+  '/': {
+    label: '演练场',
+  },
+}
+
+export default defineComponent({
+  name: 'PlaygroundIcon',
+
+  setup() {
+    const routeLocale = useRouteLocale()
+
+    const label = computed(() => locales[routeLocale.value].label)
+
+    return (): VNode =>
+      h(
+        'div',
+        {
+          class: 'vp-nav-item vp-action hide-in-mobile',
+        },
+        h(LinkIcon, {
+          link,
+          target: '_blank',
+          // icon: 'code',
+          icon: '/assets/icon/playground.svg',
+          label: label.value,
+          size: 20,
+          class: 'vp-action-link',
+        })
+      )
+  },
+})

docs/notes/frontend/js/code-snippets/reduce.md

@@ -41,20 +41,17 @@ function reduceText(val) {
       pre.push(tmp[0])
       pre.push('）')
       pre.push(tmp[1])
-    }
-    else if (cur.includes('（')) {
+    } else if (cur.includes('（')) {
       const tmp = cur.split('（')
       pre.push(tmp[0])
       pre.push('（')
       pre.push(tmp[1])
-    }
-    else if (cur.includes('）')) {
+    } else if (cur.includes('）')) {
       const tmp = cur.split('）')
       pre.push(tmp[0])
       pre.push('）')
       pre.push(tmp[1])
-    }
-    else {
+    } else {
       pre.push(cur)
     }
 
@@ -92,20 +89,17 @@ function reduceText(val) {
       pre.push(tmp[0])
       pre.push('）')
       pre.push(tmp[1])
-    }
-    else if (cur.includes('（')) {
+    } else if (cur.includes('（')) {
       const tmp = cur.split('（')
       pre.push(tmp[0])
       pre.push('（')
       pre.push(tmp[1])
-    }
-    else if (cur.includes('）')) {
+    } else if (cur.includes('）')) {
       const tmp = cur.split('）')
       pre.push(tmp[0])
       pre.push('）')
       pre.push(tmp[1])
-    }
-    else {
+    } else {
       pre.push(cur)
     }
 

docs/notes/frontend/vue/vue3/basic/template-syntax.md

@@ -12,27 +12,31 @@ tag:
 
 ## 文本插值
 
-```template
-<span>Message: {{ msg }}</span>
+```vue
+<span>
+Message: {{ msg }}
+</span>
 ```
 
 ## 原始 HTML
 
-```template
-<p>Using v-html directive: <span v-html="rawHtml"></span></p>
+```vue
+<p>
+Using v-html directive: <span v-html="rawHtml"></span>
+</p>
 ```
 
 ## Attribute 绑定
 
 想要响应式地绑定一个 attribute，应该使用 v-bind 指令：
 
-```template
+```vue
 <div v-bind:id="dynamicId"></div>
 ```
 
 因为 v-bind 非常常用，我们提供了特定的简写语法：
 
-```template
+```vue
 <div :id="dynamicId"></div>
 ```
 
@@ -49,7 +53,7 @@ const objectOfAttrs = {
 
 通过不带参数的 `v-bind`，你可以将它们绑定到单个元素上：
 
-```template
+```vue
 <div v-bind="objectOfAttrs"></div>
 ```
 
@@ -62,40 +66,54 @@ const objectOfAttrs = {
 某些指令会需要一个“参数”，在指令名后通过一个冒号（`:`）隔开做标识。
 例如用 `v-bind` 指令来响应式地更新一个 HTML attribute：
 
-```template
-<a v-bind:href="url"> ... </a>
+```vue
+<a v-bind:href="url">
+ ...
+</a>
 
 <!-- 简写 -->
-<a :href="url"> ... </a>
+<a :href="url">
+ ...
+</a>
 ```
 
 这里 `href` 就是一个参数，它告诉 `v-bind` 指令将表达式 `url` 的值绑定到元素的 `href` attribute 上。
 
 另一个例子是 `v-on` 指令，它将监听 DOM 事件：
 
-```template
-<a v-on:click="doSomething"> ... </a>
+```vue
+<a v-on:click="doSomething">
+ ...
+</a>
 
 <!-- 简写 -->
-<a @click="doSomething"> ... </a>
+<a @click="doSomething">
+ ...
+</a>
 ```
 
 ### 动态参数
 
 同样在指令参数上也可以使用一个 JavaScript 表达式，需要包含在一对方括号(`[]`)内：
 
-```template
-<a v-bind:[attributeName]="url"> ... </a>
+```vue
+<a v-bind:[attributeName]="url">
+ ...
+</a>
 
 <!-- 简写 -->
-<a :[attributeName]="url"> ... </a>
+<a :[attributeName]="url">
+ ...
+</a>
 ```
 
 ### 修饰符 Modifiers
 
 修饰符是以点(`.`)开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。
 例如 `.prevent` 修饰符会告知 `v-on` 指令对触发的事件调用 `event.preventDefault()`：
 
-```template
-<form @submit.prevent="onSubmit"> ... </form>
+```vue
+<form @submit.prevent="onSubmit">
+ ...
+</form>
 ```