WIP: add customized theme

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmmirror.com

.vitepress/theme/giscusLayout.vue

@@ -0,0 +1,72 @@
+<!-- .vitepress/theme/Layout.vue -->
+
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import { nextTick, provide } from 'vue'
+
+const { isDark } = useData()
+
+const enableTransitions = () =>
+  'startViewTransition' in document &&
+  window.matchMedia('(prefers-reduced-motion: no-preference)').matches
+
+provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
+  if (!enableTransitions()) {
+    isDark.value = !isDark.value
+    return
+  }
+
+  const clipPath = [
+    `circle(0px at ${x}px ${y}px)`,
+    `circle(${Math.hypot(
+      Math.max(x, innerWidth - x),
+      Math.max(y, innerHeight - y)
+    )}px at ${x}px ${y}px)`
+  ]
+
+  await document.startViewTransition(async () => {
+    isDark.value = !isDark.value
+    await nextTick()
+  }).ready
+
+  document.documentElement.animate(
+    { clipPath: isDark.value ? clipPath.reverse() : clipPath },
+    {
+      duration: 300,
+      easing: 'ease-in',
+      pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`
+    }
+  )
+})
+</script>
+
+<template>
+  <DefaultTheme.Layout />
+</template>
+
+<style>
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-old(root),
+.dark::view-transition-new(root) {
+  z-index: 1;
+}
+
+::view-transition-new(root),
+.dark::view-transition-old(root) {
+  z-index: 9999;
+}
+
+.VPSwitchAppearance {
+  width: 22px !important;
+}
+
+.VPSwitchAppearance .check {
+  transform: none !important;
+}
+</style>

.vitepress/theme/index.mts

@@ -0,0 +1,12 @@
+import DefaultTheme from 'vitepress/theme'
+import type { Theme } from 'vitepress'
+// import './custom.css'
+import GiscusLayout from './giscusLayout.vue'
+
+export default {
+    extends: DefaultTheme,
+    Layout: GiscusLayout,
+    enhanceApp({app}) {
+        // app.component()
+    }
+} satisfies Theme

.vscode/settings.json

@@ -1,5 +1,7 @@
 {
     "cSpell.words": [
-        "pyqt"
+        "giscus",
+        "pyqt",
+        "vitepress"
     ]
 }

.zhlintrc

@@ -0,0 +1,3 @@
+{
+    "preset": "default"
+}

package.json

@@ -1,12 +1,13 @@
 {
   "scripts": {
     "dev": "vitepress dev",
-    "build": "vitepress build",
+    "build": "zhlint --dir pages && vitepress build",
     "preview": "vitepress preview",
     "bp": "vitepress build && vitepress preview"
   },
   "devDependencies": {
-    "vitepress": "1.0.0-rc.24"
+    "vitepress": "1.0.0-rc.25",
+    "zhlint": "^0.7.1"
   },
   "pnpm": {
     "peerDependencyRules": {

pages/pyqt/index.md

@@ -1,4 +1,3 @@
-<!--https://raw.githubusercontent.com/maicss/PyQt-Chinese-tutorial/master/translated/pyqt6/introduction.md-->
 # 欢迎
 
 欢迎来到 PyQt 中文教程，这里提供了 PyQt5 和 PyQt6 两个教程。
@@ -14,8 +13,29 @@
         <span>PyQt6 教程</span>
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" preserveAspectRatio="xMidYMid meet" data-rnwibasecard--161t3wu-hover="true" data-rnwi-handle="nearest" class="r-1rasi3h" style="width: 24px; height: 24px;"><path fill="currentColor" fill-rule="evenodd" d="M9.076 3.576a.6.6 0 0 1 .848 0l4 4a.6.6 0 0 1 0 .848l-4 4a.6.6 0 0 1-.848-.848L12.052 8.6H2.5a.6.6 0 0 1 0-1.2h9.552L9.076 4.424a.6.6 0 0 1 0-.848Z" clip-rule="evenodd"></path></svg>
     </a>
+<script src="https://giscus.app/client.js"
+        data-repo="maicss/website"
+        data-repo-id="R_kgDOKnduBQ"
+        data-category="Announcements"
+        data-category-id="DIC_kwDOKnduBc4Cas0c"
+        data-mapping="pathname"
+        data-strict="0"
+        data-reactions-enabled="1"
+        data-emit-metadata="0"
+        data-input-position="bottom"
+        data-theme="preferred_color_scheme"
+        data-lang="zh-CN"
+        data-loading="lazy"
+        crossorigin="anonymous"
+        async>
+</script>
 </div>
 
+<script setup>
+
+
+</script>
+
 <style module>
 .container {
     display: flex;
@@ -45,4 +65,5 @@
     text-decoration: underline;
     text-underline-offset: 4px;
 }
-</style>
+</style>
+