feat: add casibase widget JS via CDN

docusaurus.config.js

@@ -283,6 +283,10 @@ var _hmt = _hmt || [];
       src: "/js/clarity.js",
       async: true,
     },
+    {
+      src: "/js/casibase-tracker.js",
+      async: true,
+    },
   ],
   presets: [
     [

src/components/HomepageFeatures/index.js

@@ -1,9 +1,8 @@
-import React, {useEffect} from "react";
+import React from "react";
 import clsx from "clsx";
 import styles from "./styles.module.css";
 import Translate from "@docusaurus/Translate";
 import {useColorMode} from "@docusaurus/theme-common";
-import {initChatWidget} from "../../ChatWidget/chatWidget";
 
 const FeatureList = [
   {
@@ -70,11 +69,6 @@ function Feature({title, path, description}) {
 }
 
 export default function HomepageFeatures() {
-
-  useEffect(() => {
-    initChatWidget(document.body);
-  }, []);
-
   return (
     <section className={styles.features}>
       <div className="container">

src/theme/Layout.js

@@ -0,0 +1,28 @@
+import React, {useEffect} from "react";
+import Layout from "@theme-original/Layout";
+
+function CustomLayout(props) {
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.src = "/js/casibase-tracker.js";
+    script.async = true;
+    document.body.appendChild(script);
+
+    script.onload = () => {
+      if (typeof window.initCasibaseChat === "function") {
+        window.initCasibaseChat({
+          endpoint: "https://ai.casbin.com",
+          themeColor: "rgb(64,59,121)",
+        });
+      }
+    };
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  return <Layout {...props} />;
+}
+
+export default CustomLayout;

static/js/casibase-tracker.js

@@ -0,0 +1,5 @@
+(function() {
+  const script = document.createElement("script");
+  script.src = "https://tcdn.casibase.org/casibase.js";
+  document.head.appendChild(script);
+})();