Update

Author: T-miracle

.vitepress/theme/index.ts

@@ -3,14 +3,12 @@ import vSetup from '../components/vSetup.vue';
 import vPageTips from '../components/vPageTips.vue';
 import vDisplayList from '../components/vDisplayList.vue';
 import vScratchPaper from '../components/vScratchPaper.vue';
-import { EnhanceAppContext, useData, useRoute } from 'vitepress';
+import { EnhanceAppContext, useRoute } from 'vitepress';
 import googleAnalysis from './scripts/googleAnalysis';
-import giscusTalk from 'vitepress-plugin-comment-with-giscus';
 import vImageViewer from 'vitepress-plugin-image-viewer/lib/vImageViewer.vue';
 import imageViewer from 'vitepress-plugin-image-viewer';
 import vModal from '../components/vModal.vue';
 import 'viewerjs/dist/viewer.min.css';
-// import './styles/index.scss';
 import 'virtual:uno.css';
 import '../../package/App.scss';
 import { theme, install } from '../../package/App';
@@ -30,17 +28,16 @@ export default {
     },
     setup() {
         // 获取前言和路由
-        const { frontmatter } = useData();
         const route = useRoute();
         imageViewer(route, '.vp-doc', { toolbar: true });
-        giscusTalk({
-            repo: 'T-miracle/blog',
-            repoId: 'R_kgDOJCf-FQ',
-            categoryId: 'DIC_kwDOJCf-Fc4CUohc',
-            mapping: 'pathname'
-        }, {
-            frontmatter, route
-        });
+        // giscusTalk({
+        //     repo: 'T-miracle/blog',
+        //     repoId: 'R_kgDOJCf-FQ',
+        //     categoryId: 'DIC_kwDOJCf-Fc4CUohc',
+        //     mapping: 'pathname'
+        // }, {
+        //     frontmatter, route
+        // });
         googleAnalysis();
     }
 };

package.json

@@ -25,7 +25,6 @@
     "uuid": "^11.0.3",
     "viewerjs": "^1.11.7",
     "vitepress": "^1.5.0",
-    "vitepress-plugin-comment-with-giscus": "^1.1.15",
     "vitepress-plugin-image-viewer": "^1.1.6",
     "vue": "^3.5.13"
   },

package/components/NanoMain/index.vue

@@ -13,6 +13,7 @@
                 class="w-full h-full"
                 :options="scrollbarOptions"
                 defer
+                @os-initialized="scrollbarInitialized"
             >
                 <article
                     ref="article"
@@ -21,14 +22,18 @@
                     style="white-space: wrap;"
                     :style="{ padding: articlePadding }"
                 >
-                    <Content ref="content"/>
+                    <Content/>
                 </article>
+                <slot name="contentAfter">
+                    <!--<NanoGiscus/>-->
+                </slot>
             </OverlayScrollbarsComponent>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
+    // import NanoGiscus from '@NanoUI/NanoGiscus/index.vue';
     import 'overlayscrollbars/styles/overlayscrollbars.css';
     import scrollbarOptions from '../../config/scrollbarOptions';
     import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
@@ -39,7 +44,7 @@
 
     const { page } = useData();
     const route = useRoute();
-    const scrollbars = ref<any | null>(null);
+    const scrollbars = ref<InstanceType<typeof OverlayScrollbarsComponent> | null>(null);
     const article = ref<HTMLElement | null>(null);
 
     // Listen for routing changes and scroll to the top
@@ -51,29 +56,36 @@
         immediate: true
     });
 
+    // Listen for hash changes
     function hashChange() {
         if (location.hash) {
             const _hashText = decodeURIComponent(location.hash.replace('#', ''));
             emitter.emit('scroll-to-hash', _hashText);
         }
     }
 
+    function scrollbarInitialized() {
+        // console.log('scrollbarInitialized');
+        setTimeout(() => {
+            hashChange();
+        }, 0);
+    }
+
     onContentUpdated(() => {
+        // console.log('content updated');
         setTimeout(() => {
             hashChange();
-        }, 240);
+        }, 0);
     });
 
     const resizeObserver = ref<ResizeObserver | null>(null);
     const articlePadding = ref<string>('calc(var(--base-size))');
 
     onMounted(() => {
-        setTimeout(() => {
-            hashChange();
-        }, 240);
+        // console.log('mounted');
         // Listen for scroll-to-hash events
         emitter.on('scroll-to-hash', (hash: string) => {
-            if (hash === '' || hash === null || hash === undefined) {
+            if (!hash) {
                 return;
             }
             const target = document.getElementById(hash);
@@ -96,13 +108,16 @@
             for (const entry of entries) {
                 const { target } = entry;
                 const { clientWidth } = target as HTMLElement;
-                if (clientWidth < 1280) {
+                if (clientWidth < 768) {
                     articlePadding.value = 'calc(var(--base-size))';
                 } else {
                     articlePadding.value = 'calc(var(--base-size)) calc(var(--base-size) * 2)';
                 }
             }
         });
+        resizeObserver.value.observe(article.value!);
+
+        scrollbars.value?.osInstance()?.update();
     });
 
     onUnmounted(() => {

package/type.ts

@@ -1,4 +1,5 @@
 import { DefaultTheme } from 'vitepress/types/default-theme';
+import type { GiscusProps } from '@giscus/vue/dist/types';
 
 export type SidebarType = DefaultTheme.SidebarItem & { id?: string, icon?: string, items?: SidebarType[] };
 
@@ -7,4 +8,5 @@ export type ThemeConfig = DefaultTheme.Config & {
     motto: string;
     backgrounds?: string[];
     aboutMePath: string;
+    giscus?: GiscusProps;
 }

package/utils/drag.ts

@@ -1,4 +1,4 @@
-// Date: 2021-09-22
+// Drag move handler function
 export type HandlerFnParams<T> = {
     // x-axis moving distance
     x: number;
@@ -27,7 +27,7 @@ export type DragOptions<T> = {
     // Original data
     originalData: T | (() => T);
     // Handler function
-    handlerFn?: (pos: HandlerFnParams<T>) => void;
+    handlerFn?: (data: HandlerFnParams<T>) => void;
     // Before drag function
     beforeFn?: () => void;
     // After drag function
@@ -36,6 +36,12 @@ export type DragOptions<T> = {
 
 /**
  * Drag the element to change the width of the child element
+ * @param options Drag options
+ * @param options.el The element to be dragged
+ * @param options.originalData Original data (passed to handlerFn for use)
+ * @param options.handlerFn Handler function
+ * @param options.beforeFn Before drag do something
+ * @param options.afterFn After drag do something
  */
 export function drag<T>({ el, originalData, handlerFn, beforeFn, afterFn }: DragOptions<T>) {
     if (!el) {
@@ -49,7 +55,7 @@ export function drag<T>({ el, originalData, handlerFn, beforeFn, afterFn }: Drag
         const screenWith = document.documentElement.clientWidth;
         const screenHeight = document.documentElement.clientHeight;
 
-        const _originalData = originalData instanceof Function ? originalData() : originalData;
+        const _originalData = originalData instanceof Function ? originalData.bind(null)() : originalData;
 
         const dragEvent = (e: MouseEvent) => {
             const x = e.clientX - startX;