Merge pull request #2 from yb6b/dev

fix: outi-font in easy-code and mediumzoom

package.json

@@ -7,6 +7,7 @@
     "@types/node": "^20.11.24",
     "autoprefixer": "^10.4.18",
     "daisyui": "^4.7.2",
+    "medium-zoom": "^1.1.0",
     "postcss": "^8.4.35",
     "tailwindcss": "^3.4.1",
     "vitepress": "1.0.0-rc.44",
@@ -21,7 +22,7 @@
   "scripts": {
     "dev": "vitepress dev src",
     "build": "vitepress build src",
-    "build2": "vitepress build src yima",
+    "build2": "vitepress build src --base /yima/",
     "preview": "vitepress preview src "
   },
   "dependencies": {

src/.vitepress/config.mts

@@ -1,15 +1,11 @@
 import { defineConfig } from 'vitepress'
-import { argv } from "node:process";
 import path from "node:path"
 import tailwind from "tailwindcss"
 import autoprefixer from "autoprefixer"
 
-const base = argv.at(-1) === 'yima' ? '/yima/' : '/'
-console.log(base);
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: "易码",
-  base,
   description: "极致的乱序纯形顶功输入方案",
   lang: "zh-hans-CN",
   outDir: "../dist",
@@ -35,7 +31,7 @@ export default defineConfig({
     }
   },
   themeConfig: {
-    logo: base + 'icon.svg',
+    logo: '/icon.svg',
     nav: [
       { text: '主页', link: '/' },
       {

src/.vitepress/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useMediumZoom'

src/.vitepress/hooks/useMediumZoom.ts

@@ -0,0 +1,32 @@
+import mediumZoom from 'medium-zoom'
+import { inject, nextTick, onMounted, watch } from 'vue'
+import type { Zoom } from 'medium-zoom'
+import type { App, InjectionKey } from 'vue'
+import type { Router } from 'vitepress'
+
+declare module 'medium-zoom' {
+    interface Zoom {
+        refresh: (selector?: string) => void
+    }
+}
+
+export const mediumZoomSymbol: InjectionKey<Zoom> = Symbol('mediumZoom')
+
+export function useMediumZoom() {
+    onMounted(() => inject(mediumZoomSymbol)?.refresh())
+}
+
+export function useMediumZoomProvider(app: App, router: Router) {
+    //@ts-ignore
+    if (import.meta.env.SSR) return
+    const zoom = mediumZoom()
+    zoom.refresh = () => {
+        zoom.detach()
+        zoom.attach(':not(a) > img:not(.image-src)')
+    }
+    app.provide(mediumZoomSymbol, zoom)
+    watch(
+        () => router.route.path,
+        () => nextTick(() => zoom.refresh())
+    )
+}

src/.vitepress/theme/fonts.css

@@ -4,7 +4,7 @@
 }
 
 .kaiti-font {
-    font-family: "kaiti-yima", "kaiti", "楷体", system-ui;
+    font-family: "kaiti-yima", "kaiti", "楷体", system-ui, 'TH-Feon', 'TH-Tshyn-P2', 'TH-Tshyn-P0', 'TH-Tshyn-P1', 'TH-Tshyn-P16', '宋体',system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
 @font-face {
@@ -13,7 +13,7 @@
 }
 
 .outi-font {
-    font-family: "outi-yima", "欧体楷书", "楷体", fantasy, system-ui;
+    font-family: "outi-yima", "欧体楷书", "楷体";
 }
 
 :root {
@@ -24,13 +24,25 @@
     --vp-c-brand-soft: var(--vp-c-red-soft);
 
     --vp-home-hero-name-color: transparent;
-    --vp-home-hero-name-background:  -webkit-linear-gradient(
-        120deg,
-        var(--vp-c-brand-1),
-        var(--vp-c-brand-3) 
-      );;
-
+    --vp-home-hero-name-background: -webkit-linear-gradient(120deg,
+            var(--vp-c-brand-1),
+            var(--vp-c-brand-3));
+    ;
+
     --vp-home-hero-image-background-image: none;
     --vp-home-hero-image-filter: none;
     --vp-nav-bg-color: var(--vp-c-bg-soft);
+}
+
+.medium-zoom-overlay {
+    background-color: var(--vp-c-bg) !important;
+    z-index: 100;
+  }
+
+  .medium-zoom-overlay ~ img {
+    z-index: 101;
+  }
+
+  .medium-zoom--opened .medium-zoom-overlay {
+    opacity: 0.9 !important;
   }

src/.vitepress/theme/index.ts

@@ -2,15 +2,19 @@
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme-without-fonts'
 import Download from "./components/Download.vue";
+import type { EnhanceAppContext } from 'vitepress'
+import { useMediumZoomProvider } from '../hooks'
 import { h } from 'vue'
 import './style.css'
 import './fonts.css'
 
+
 export default {
   extends: DefaultTheme,
 
   enhanceApp({ app, router, siteData }) {
     // 注册全局组件
     app.component('Download', Download)
+    useMediumZoomProvider(app, router)
   }
 } satisfies Theme

src/easy-code/gen.md

@@ -7,4 +7,4 @@ aside: false
 
 # 易码字根练习
 
-<Train name="easy_code_gen" zigenJson="/easy-code/zigen.json"/>
+<Train name="easy_code_gen" zigenJson="/easy-code/zigen.json" fontClass="outi-font"/>

src/easy-code/zi.md

@@ -6,4 +6,4 @@ aside: false
 </script>
 # 易码 常用 1000 字练习
 
-<Train name="easy_code" zigenJson="/easy-code/zigen.json" chaiJson="/easy-code/chaifen.json" :range="[0,1000]"/>
+<Train name="easy_code" zigenJson="/easy-code/zigen.json" chaiJson="/easy-code/chaifen.json" fontClass="outi-font" :range="[0,1000]"/>

src/easy-code/zi2.md

@@ -6,4 +6,4 @@ aside: false
 </script>
 # 易码 常用 1000~2000 字练习
 
-<Train name="easy_code" zigenJson="/easy-code/zigen.json" chaiJson="/easy-code/chaifen.json" :range="[1000,2000]"/>
+<Train name="easy_code" zigenJson="/easy-code/zigen.json" chaiJson="/easy-code/chaifen.json" fontClass="outi-font" :range="[1000,2000]"/>

src/index.md

@@ -16,6 +16,9 @@ hero:
     - theme: alt
       text: 逸码V20
       link: /graceful-code/
+    - theme: alt
+      text: 下 载
+      link: http://yima.ysepan.com/
 
 features:
   - title: 易码