Introducing Gurubase for Permify Docs

README.md

@@ -26,7 +26,9 @@
     <a href="https://img.shields.io/github/commit-activity/m/Permify/permify?style=for-the-badge" target="_blank"><img src="https://img.shields.io/github/commit-activity/m/Permify/permify?style=for-the-badge" alt="Permify Commit Activity" /></a>&nbsp;
     <a href="https://img.shields.io/github/actions/workflow/status/Permify/permify/release.yml?style=for-the-badge" target="_blank"><img src="https://img.shields.io/github/actions/workflow/status/Permify/permify/release.yml?style=for-the-badge" alt="GitHub Workflow Status" /></a>&nbsp;
     <a href="https://scrutinizer-ci.com/g/Permify/permify/?branch=master" target="_blank"><img src="https://img.shields.io/scrutinizer/quality/g/Permify/permify/master?style=for-the-badge" alt="Scrutinizer code quality (GitHub/Bitbucket)" /></a>&nbsp;
-    <a href='https://coveralls.io/github/Permify/permify?branch=master'><img alt="Coveralls" src="https://img.shields.io/coverallsCoverage/github/Permify/permify?style=for-the-badge"></a>
+    <a href='https://coveralls.io/github/Permify/permify?branch=master'><img alt="Coveralls" src="https://img.shields.io/coverallsCoverage/github/Permify/permify?style=for-the-badge"></a>&nbsp;
+    <a href="https://gurubase.io/g/permify" target="_blank"><img src="https://img.shields.io/badge/Gurubase-Ask%20AI-006BFF?style=for-the-badge" alt="Gurubase - Ask AI" /></a>
+
 </p>        
 
 ![permify-centralized](https://github.com/user-attachments/assets/124eaa43-5d33-423d-a258-5d6f4afbc774)

docs/gurubase.js

@@ -0,0 +1,53 @@
+// Customize widget settings
+const widgetSettings = {
+    widgetId: "VD4cSN50VRpdWDIeSpVeYaQYiaND85NwIDv7ppAByDw", // Use different widget ID for localhost - https://gurubase.io/guru/permify/integrations/web_widget
+    overlapContent: true,
+    // Optional configurations:
+    // text: "Ask AI",                                    // Button text
+    // margins: { bottom: "20px", right: "20px" },       // Widget positioning
+    // lightMode: false,                                  // Force light mode
+    // name: "YOUR_NAME",                                 // Widget name
+    // iconUrl: "YOUR_ICON_URL",                         // Widget icon URL
+    // bgColor: "#000000",                               // Widget background color
+  };
+
+  // Load the GuruBase widget
+  const guruScript = document.createElement("script");
+  guruScript.src = "https://widget.gurubase.io/widget.latest.min.js";
+  guruScript.defer = true;
+  guruScript.id = "guru-widget-id";
+
+  // Add widget settings as data attributes
+  Object.entries(widgetSettings).forEach(([key, value]) => {
+    const dataKey = `data-${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+    const dataValue = typeof value === 'object' ? JSON.stringify(value) : value;
+    guruScript.setAttribute(dataKey, dataValue);
+  });
+
+  // Initialize theme handling
+  guruScript.addEventListener('load', () => {
+    const initWidget = setInterval(() => {
+      if (window.chatWidget?.switchTheme) {
+        clearInterval(initWidget);
+
+        // Handle theme changes
+        const syncTheme = () => {
+          const isDark = document.documentElement.classList.contains('dark');
+          window.chatWidget.switchTheme(!isDark);
+        };
+
+        // Watch for theme changes
+        new MutationObserver(syncTheme).observe(document.documentElement, {
+          attributes: true,
+          attributeFilter: ['class']
+        });
+
+        // Set initial theme
+        syncTheme();
+      }
+    }, 1000);
+
+    // Stop checking after 20 seconds
+    setTimeout(() => clearInterval(initWidget), 20000);
+  });
+  document.body.appendChild(guruScript);

docs/mint.json

@@ -420,5 +420,10 @@
     "twitter": "https://twitter.com/getPermify",
     "github": "https://github.com/Permify/permify",
     "linkedin": "https://www.linkedin.com/company/permifyco"
-  }
+  },
+  "scripts": [
+    {
+      "src": "/gurubase.js"
+    }
+  ]
 }