updated

blog/2024-04-12-new-phase-community-connectors.mdx

@@ -4,7 +4,7 @@ title: Community Connector @ Developer Portal
 authors: Kkundan
 tags: [community-connectors]
 ---
-import GitHubDiscussions from '@site/src/components/Github/Discussions';
+import GitHubComments from '@site/src/components/Github/Comments';
 
  ## **[Community Connector @ Developer Portal](https://saviynt.github.io/developer-portal/community/connectors)**
 
@@ -44,4 +44,4 @@ As we move forward, we will continue to refine these processes and enhance the c
 
 As we move forward, we will continue to refine these processes and enhance the capabilities of the Developer Portal to better serve the needs of developers and system integrators. We invite all users to join us in this new phase, to contribute, and to help shape the future of our connector ecosystem.
 
-<GitHubDiscussions repo="saviynt/developer-portal" issueTerm="title" label="blog" theme="github-light" />
+<GitHubComments repo="saviynt/developer-portal" issueTerm="title" label="blog" theme="github-light" />

docs/community/discussions.mdx

@@ -0,0 +1,12 @@
+---
+sidebar_label: Discussion
+title: Discussion
+draft: true
+---
+
+import GiscusComponent from '@site/src/components/Github/Discussions';
+
+# My Awesome Documentation Page
+
+This is a great place to have discussions about our content.
+<GiscusComponent />

docusaurus.config.ts

@@ -14,7 +14,7 @@ const config: Config = {
   baseUrl: "/",
   onBrokenLinks: "warn",
   onBrokenMarkdownLinks: "warn",
-  favicon: "img/saviynt_favicon.ico",
+  favicon: "img/saviynt_favicon.ico", 
   organizationName: "Saviynt",
   projectName: "developer-portal",
 

src/components/Github/Comments.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+
+const GitHubComments = ({ repo, issueTerm = 'pathname', label = 'discussion', theme = 'github-light' }) => {
+  useEffect(() => {
+    // Cleanup existing script to reconfigure or reinitialize when props change
+    const existingScript = document.getElementById('github-discussion-script');
+    if (existingScript) {
+      existingScript.remove();
+    }
+
+    const script = document.createElement('script');
+    script.id = 'github-comments-script'; // Unique ID for the script tag
+    script.src = 'https://utteranc.es/client.js';
+    script.async = true;
+    script.setAttribute('repo', repo);
+    script.setAttribute('issue-term', issueTerm);
+    script.setAttribute('label', label);
+    script.setAttribute('theme', theme);
+    script.crossOrigin = 'anonymous';
+
+    const anchor = document.getElementById('github-comments');
+    if (anchor) {
+      anchor.innerHTML = ''; // Clear previous content
+      anchor.appendChild(script);
+    }
+
+    // Cleanup function to remove script on component unmount
+    return () => {
+      script.remove();
+    };
+  }, [repo, issueTerm, label, theme]);  // Re-run the effect if these props change
+
+  return <div id="github-comments"></div>;
+};
+
+export default GitHubComments;

src/components/Github/Discussions.tsx

@@ -1,36 +1,28 @@
 import React, { useEffect } from 'react';
 
-const GitHubDiscussions = ({ repo, issueTerm = 'pathname', label = 'discussion', theme = 'github-light' }) => {
+const GiscusComponent = () => {
   useEffect(() => {
-    // Cleanup existing script to reconfigure or reinitialize when props change
-    const existingScript = document.getElementById('github-discussion-script');
-    if (existingScript) {
-      existingScript.remove();
-    }
-
     const script = document.createElement('script');
-    script.id = 'github-discussion-script'; // Unique ID for the script tag
-    script.src = 'https://utteranc.es/client.js';
+    script.src = 'https://giscus.app/client.js';
     script.async = true;
-    script.setAttribute('repo', repo);
-    script.setAttribute('issue-term', issueTerm);
-    script.setAttribute('label', label);
-    script.setAttribute('theme', theme);
-    script.crossOrigin = 'anonymous';
-
-    const anchor = document.getElementById('github-discussions');
-    if (anchor) {
-      anchor.innerHTML = ''; // Clear previous content
-      anchor.appendChild(script);
-    }
+    script.setAttribute('data-repo', 'saviynt/developer-portal');
+    script.setAttribute('data-repo-id', 'R_kgDOLnTSUg');
+    script.setAttribute('data-category', 'General');
+    script.setAttribute('data-category-id', 'DIC_kwDOLnTSUs4Cel7H');
+    script.setAttribute('data-mapping', 'pathname');
+    script.setAttribute('data-reactions-enabled', '1');
+    script.setAttribute('data-emit-metadata', '0');
+    script.setAttribute('data-theme', 'light');
+    script.setAttribute('data-lang', 'en');
+    script.setAttribute('crossorigin', 'anonymous');
+    document.body.appendChild(script);
 
-    // Cleanup function to remove script on component unmount
     return () => {
-      script.remove();
+      document.body.removeChild(script);
     };
-  }, [repo, issueTerm, label, theme]);  // Re-run the effect if these props change
+  }, []);
 
-  return <div id="github-discussions"></div>;
+  return <div className="giscus" />;
 };
 
-export default GitHubDiscussions;
+export default GiscusComponent;

src/css/custom.css

@@ -55,6 +55,16 @@
   /* END SIDEBAR VARS */
 }
 
+/* Assuming you have a class .logo for your SVG */
+.logo {
+  filter: none; /* Restore original colors for dark mode */
+}
+
+/* Specific styles for dark mode */
+[data-theme="dark"] .logo {
+  filter: brightness(0) invert(1);
+}
+
 /* For dark mode, maintain the color contrast for readability */
 [data-theme="dark"] {
   --ifm-background-color: #121546;

src/pages/community/connectors/ReadmePage.tsx

@@ -4,7 +4,7 @@ import { useLocation, useHistory } from 'react-router-dom';
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
 import Layout from '@theme/Layout'; // Assuming you are using the default Docusaurus theme
-import GitHubDiscussions from '../../../components/Github/Discussions';
+import GitHubComments from '../../../components/Github/Comments';
 
 
 // Create a custom renderer
@@ -109,7 +109,7 @@ const ReadmePage = () => {
                   </div>
                 <h1>{name} Community Connector</h1>
               <div className="markdown" dangerouslySetInnerHTML={{ __html: readmeContent }} />
-              <GitHubDiscussions repo="saviynt/community-connectors" issueTerm={name} label="connector" theme="github-light" />
+              <GitHubComments repo="saviynt/community-connectors" issueTerm={name} label="connector" theme="github-light" />
               </div>
               )}
             </div>