star component added on navbar

docusaurus.config.js

@@ -123,12 +123,12 @@ const config = {
       // async: false,
       defer: true, // if the script must be executed in order, set async to false
     },
+
     {
       // Suppress noisy ResizeObserver loop errors that Chrome prints
       src: '/ignore-resize-observer-error.js',
       defer: true
     }
-
   ],
 
   themeConfig:
@@ -240,12 +240,9 @@ const config = {
           //   position: 'left',
           // },
           {
-            href: 'https://github.com/datazip-inc/olake',
-            // label: 'GitHub',
+            type: 'html',
             position: 'right',
-            // position: 'right',
-            className: 'header-github-link',
-
+            value: '<div id="github-stars-react-container"></div>',
           },
           {
             label: 'Talk to us',

src/components/GitHubStars.tsx

@@ -0,0 +1,140 @@
+import React, { useState, useEffect } from 'react';
+
+interface GitHubStarsProps {
+  repository?: string;
+  className?: string;
+}
+
+const GitHubStars: React.FC<GitHubStarsProps> = ({ 
+  repository = 'datazip-inc/olake',
+  className = ''
+}) => {
+  const [starCount, setStarCount] = useState<number | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isDark, setIsDark] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    // Check for dark theme
+    const checkTheme = () => {
+      const isDarkTheme = document.documentElement.getAttribute('data-theme') === 'dark';
+      setIsDark(isDarkTheme);
+    };
+
+    // Check for mobile screen size
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+
+    checkTheme();
+    checkMobile();
+
+    // Listen for theme changes
+    const observer = new MutationObserver(checkTheme);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme']
+    });
+
+    // Listen for screen resize
+    window.addEventListener('resize', checkMobile);
+
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('resize', checkMobile);
+    };
+  }, []);
+
+  useEffect(() => {
+    const fetchStars = async () => {
+      try {
+        const response = await fetch(`https://api.github.com/repos/${repository}`, {
+          headers: {
+            'Accept': 'application/vnd.github.v3+json',
+            'User-Agent': 'OLake-Docs'
+          }
+        });
+
+        if (!response.ok) {
+          if (response.status === 403) {
+            console.warn('GitHub API rate limited, hiding component');
+            setStarCount(null);
+            return;
+          }
+          throw new Error(`GitHub API error: ${response.status}`);
+        }
+
+        const data = await response.json();
+        setStarCount(data.stargazers_count);
+      } catch (error) {
+        console.error('Failed to fetch GitHub stars:', error);
+        setStarCount(null);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchStars();
+  }, [repository]);
+
+  // Don't render if loading failed or no stars
+  if (!isLoading && (starCount === null || starCount === 0)) {
+    return null;
+  }
+
+  return (
+    <div className={`flex items-center h-full ${isMobile ? 'mr-2' : 'mr-3'} ${className}`}>
+      <a
+        href={`https://github.com/${repository}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={`
+          flex items-center no-underline transition-opacity duration-200 rounded-md overflow-hidden cursor-pointer
+          ${isMobile ? 'h-7' : 'h-8'}
+          ${isDark 
+            ? 'bg-gray-800 border-gray-700 hover:bg-gray-700' 
+            : 'bg-gray-50 border-gray-300 hover:bg-gray-100'
+          }
+          border hover:opacity-80
+        `}
+      >
+        {/* Left section with icon and text */}
+        <div className={`flex items-center h-full ${isMobile ? 'px-2 gap-1.5' : 'px-3 gap-2'}`}>
+          <div 
+            className={`bg-cover bg-center bg-no-repeat ${isMobile ? 'w-3.5 h-3.5' : 'w-4 h-4'}`}
+            style={{
+              backgroundImage: `url('/img/logo/github-${isDark ? 'dark' : 'light'}.svg')`
+            }}
+          />
+          <span className={`
+            font-semibold whitespace-nowrap font-sans
+            ${isMobile ? 'text-xs' : 'text-sm'}
+            ${isDark ? 'text-gray-100' : 'text-gray-900'}
+          `}>
+            Star
+          </span>
+        </div>
+
+        {/* Separator */}
+        <div className={`
+          w-px mx-px
+          ${isMobile ? 'h-3.5' : 'h-4'}
+          ${isDark ? 'bg-gray-700' : 'bg-gray-300'}
+        `} />
+
+        {/* Right section with count */}
+        <div className={`flex items-center h-full ${isMobile ? 'px-2' : 'px-3'}`}>
+          <span className={`
+            font-semibold whitespace-nowrap font-sans
+            ${isMobile ? 'text-xs' : 'text-sm'}
+            ${isDark ? 'text-gray-100' : 'text-gray-900'}
+          `}>
+            {isLoading ? '...' : starCount?.toLocaleString()}
+          </span>
+        </div>
+      </a>
+    </div>
+  );
+};
+
+export default GitHubStars;

src/css/custom.css

@@ -235,6 +235,8 @@ a[class^='footerLogoLink_'] {
   opacity: 0.8;
 }
 
+
+
 .header-slack-link::before {
   content: '';
   width: 28px;

src/theme/NavbarItem/CustomReactNavbarItem.tsx

@@ -1,11 +1,10 @@
 import React, { type ReactNode } from 'react';
-import CustomSolutionsNavbarItem from '../../components/CustomSolutionsNavbarItem';
 
 type CustomReactNavbarItemProps = {
-    component: ReactNode;
+    component: React.ComponentType;
 };
 
-
-export default function CustomReactNavbarItem(_props: CustomReactNavbarItemProps) {
-    return <CustomSolutionsNavbarItem />;
+export default function CustomReactNavbarItem(props: CustomReactNavbarItemProps): ReactNode {
+    const Component = props.component;
+    return <Component />;
 }

src/theme/Root.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+import GitHubStars from '@site/src/components/GitHubStars';
+
+// This component wraps the entire app and allows us to run initialization code
+export default function Root({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    // Function to try mounting the GitHub stars component
+    const tryMount = () => {
+      const container = document.getElementById('github-stars-react-container');
+      if (container && !container.hasChildNodes()) {
+        const root = createRoot(container);
+        root.render(<GitHubStars />);
+      }
+    };
+
+    // Try mounting immediately
+    tryMount();
+
+    // Set up an observer to watch for the container to appear
+    const observer = new MutationObserver(() => {
+      tryMount();
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+
+    // Clean up
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return <>{children}</>;
+}

ter

@@ -0,0 +1,16 @@
+
+                   SSUUMMMMAARRYY OOFF LLEESSSS CCOOMMMMAANNDDSS
+
+      Commands marked with * may be preceded by a number, _N.
+      Notes in parentheses indicate the behavior if _N is given.
+      A key preceded by a caret indicates the Ctrl key; thus ^K is ctrl-K.
+
+  h  H                 Display this help.
+  q  :q  Q  :Q  ZZ     Exit.
+ ---------------------------------------------------------------------------
+
+                           MMOOVVIINNGG
+
+  e  ^E  j  ^N  CR  *  Forward  one line   (or _N lines).
+  y  ^Y  k  ^K  ^P  *  Backward one line   (or _N lines).
+  f  ^F  ^V  SPACE  *  Forward  one window (or _N lines).