vitepress-plugin-comment-with-giscus - npm Package Compare versions

Comparing version 1.1.9 to 1.1.10

lib/giscus.d.ts

@@ -8,2 +8,6 @@ import { Ref } from 'vue';
 };
+interface GiscusPropsType extends GiscusProps {
+    lightTheme?: string;
+    darkTheme?: string;
+}
 /**
@@ -16,3 +20,3 @@ * initialize comment area
  */
-declare const giscusTalk: (props: GiscusProps, vitepressObj: vitepressAPI, defaultEnable?: boolean) => void;
+declare const giscusTalk: (props: GiscusPropsType, vitepressObj: vitepressAPI, defaultEnable?: boolean) => void;
 export default giscusTalk;

lib/giscus.js

@@ -10,3 +10,3 @@ import giscus from '@giscus/vue';
  */
-const setGiscus = (props = {}, frontmatter, defaultEnable = true) => {
+const setGiscus = (props, frontmatter, defaultEnable = true) => {
     const defaultProps = {
@@ -25,2 +25,4 @@ id: 'comment',
     };
+    const lightTheme = props.lightTheme || 'light';
+    const darkTheme = props.darkTheme || 'transparent_dark';
     // Delete the original comment container
@@ -70,3 +72,3 @@ // 删除原有评论容器
             render: () => {
-                return h(giscus, { ...defaultProps, theme: dark ? 'transparent_dark' : 'light', ...props });
+                return h(giscus, { ...defaultProps, theme: dark ? darkTheme : lightTheme, ...props });
             }
@@ -80,4 +82,6 @@ }).mount('#giscus');
  */
-const setThemeWatch = () => {
+const setThemeWatch = (props) => {
     const element = document.querySelector('html');
+    const lightTheme = props.lightTheme || 'light';
+    const darkTheme = props.darkTheme || 'transparent_dark';
     const observer = new MutationObserver(mutations => {
@@ -87,3 +91,3 @@ mutations.forEach(mutation => {
                 let comment = document.getElementById('comment');
-                comment?.setAttribute('theme', element.className.indexOf('dark') !== -1 ? 'transparent_dark' : 'light');
+                comment?.setAttribute('theme', element.className.indexOf('dark') !== -1 ? darkTheme : lightTheme);
             }
@@ -106,3 +110,3 @@ });
         setGiscus(props, vitepressObj.frontmatter, defaultEnable);
-        setThemeWatch();
+        setThemeWatch(props);
     });
@@ -109,0 +113,0 @@ watch(() => vitepressObj.route.path, () => nextTick(() => {

lib/giscus.ts

@@ -11,2 +11,7 @@ import giscus from '@giscus/vue';
 
+interface GiscusPropsType extends GiscusProps {
+    lightTheme?: string,
+    darkTheme?: string
+}
+
 /**
@@ -19,4 +24,4 @@ * add comment container
  */
-const setGiscus = (props: GiscusProps | {} = {}, frontmatter?: Ref<PageData['frontmatter']>, defaultEnable: boolean = true) => {
-    const defaultProps: GiscusProps = {
+const setGiscus = (props: GiscusPropsType, frontmatter?: Ref<PageData['frontmatter']>, defaultEnable: boolean = true) => {
+    const defaultProps: GiscusPropsType = {
         id: 'comment',
@@ -34,2 +39,4 @@ host: 'https://giscus.app',
     };
+    const lightTheme = props.lightTheme || 'light';
+    const darkTheme = props.darkTheme || 'transparent_dark';
     // Delete the original comment container
@@ -79,3 +86,3 @@ // 删除原有评论容器
                 return h(
-                    (giscus as Component), { ...defaultProps, theme: dark ? 'transparent_dark' : 'light', ...props }
+                    (giscus as Component), { ...defaultProps, theme: dark ? darkTheme : lightTheme, ...props }
                 );
@@ -91,4 +98,6 @@ }
  */
-const setThemeWatch = () => {
+const setThemeWatch = (props: GiscusPropsType) => {
     const element: HTMLElement | Node | null = document.querySelector('html');
+    const lightTheme = props.lightTheme || 'light';
+    const darkTheme = props.darkTheme || 'transparent_dark';
     const observer = new MutationObserver(mutations => {
@@ -98,3 +107,3 @@ mutations.forEach(mutation => {
                 let comment: Element | null = document.getElementById('comment');
-                comment?.setAttribute('theme', (element! as HTMLElement).className.indexOf('dark') !== -1 ? 'transparent_dark' : 'light');
+                comment?.setAttribute('theme', (element! as HTMLElement).className.indexOf('dark') !== -1 ? darkTheme : lightTheme);
             }
@@ -115,6 +124,6 @@ });
  */
-const giscusTalk = (props: GiscusProps, vitepressObj: vitepressAPI, defaultEnable: boolean = true) => {
+const giscusTalk = (props: GiscusPropsType, vitepressObj: vitepressAPI, defaultEnable: boolean = true) => {
     onMounted(() => {
         setGiscus(props, vitepressObj.frontmatter, defaultEnable);
-        setThemeWatch();
+        setThemeWatch(props);
     });
@@ -121,0 +130,0 @@ watch(() => vitepressObj.route.path, () => nextTick(() => {

package.json

 {
     "name": "vitepress-plugin-comment-with-giscus",
-    "version": "1.1.9",
+    "version": "1.1.10",
     "description": "vitepress comment plugin based on giscus",
@@ -8,2 +8,5 @@ "type": "module",
     "types": "./lib/giscus.d.ts",
+    "scripts": {
+        "run": "vitepress dev docs"
+    },
     "files": [
@@ -10,0 +13,0 @@ "dist",

README.md

@@ -48,2 +48,4 @@ # vitepress-plugin-comment-with-giscus
             lang: 'en', // default: `zh-CN`
+            lightTheme: 'light', // default: `light`
+            darkTheme: 'transparent_dark', // default: `transparent_dark`
             // ...
@@ -83,2 +85,18 @@ }, {
 
+## change log
+
+<details>
+  <summary>change log</summary>
+  <ul>
+    <li>
+      <p>v1.1.10</p>
+      <p>Now customizable day/night themes</p>
+    </li>
+    <li>
+      <p>v1.1.9</p>
+      <p>You can now set whether to enable configuration globally by default</p>
+    </li>
+  </ul>
+</details>
+
 ## more vitepress plugins
@@ -85,0 +103,0 @@

No alert changes

Improved metrics

Total package byte prevSize

13877

increased by9.21%

Lines of code

253

increased by6.75%

Number of lines in readme file

104

increased by20.93%

No dependency changes