Replace the GitHub icon with a "Star" button

Author: yagiz-dev

app/layout.jsx

@@ -7,6 +7,7 @@ import '@fortawesome/fontawesome-svg-core/styles.css'
 import 'nextra-theme-docs/style.css'
 import '../styles/globals.css'
 import { Fragment } from 'react'
+import GitHubStarButton from '../components/GitHubStarButton'
 
 config.autoAddCss = false
 
@@ -31,9 +32,11 @@ const navbar = (
   <DocsNavbar
     key="navbar"
     logo={<span className="logo"></span>}
-    projectLink="https://github.com/FOSSBilling/FOSSBilling"
+    projectLink={null}
     chatLink="https://fossbilling.org/discord"
-  />
+  >
+    <GitHubStarButton/>
+  </DocsNavbar>
 )
 
 export default async function RootLayout({ children }) {

components/DocsNavbar.jsx

@@ -203,8 +203,8 @@ const DocsNavbar = ({
         )}
         <ClientNavbar className={alignLeft ? 'x:me-auto' : ''}>
           {projectLink && <Anchor href={projectLink}>{projectIcon}</Anchor>}
-          {chatLink && <Anchor href={chatLink}>{chatIcon}</Anchor>}
           {children}
+          {chatLink && <Anchor href={chatLink}>{chatIcon}</Anchor>}
         </ClientNavbar>
       </nav>
     </header>

components/GitHubStarButton.tsx

@@ -0,0 +1,52 @@
+import { faStar } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { GitHubIcon } from 'nextra/icons'
+import Link from 'next/link'
+
+async function getStarCount() {
+  try {
+    const res = await fetch('https://api.github.com/repos/FOSSBilling/FOSSBilling', {
+      next: { revalidate: 7200 } // Cache for 2 hours
+    })
+    
+    if (!res.ok) {
+      throw new Error('Failed to fetch stars')
+    }
+
+    const data = await res.json()
+    return data.stargazers_count
+  } catch (error) {
+    console.error('Error fetching star count:', error)
+    return null
+  }
+}
+
+function formatCompactNumber(number: number) {
+  const formatter = Intl.NumberFormat("en", { notation: "compact" });
+  return formatter.format(number);
+}
+
+export default async function GitHubStarButton() {
+  const stars = await getStarCount()
+
+  return (
+    <Link
+      href="https://github.com/FOSSBilling/FOSSBilling"
+      target="_blank"
+      className="group flex items-center gap-2 rounded-md bg-black/10 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-black/20 dark:bg-white/10 dark:text-gray-200 dark:hover:bg-white/20"
+      aria-label="Star FOSSBilling on GitHub"
+    >
+      <GitHubIcon className="h-4 w-4" />
+      <span>Star</span>
+      {stars !== null && (
+        <>
+          <div className="h-4 w-px bg-gray-300 dark:bg-gray-600" />
+          <div className="flex items-center gap-1">
+            <FontAwesomeIcon icon={faStar} className="h-3 w-3 text-yellow-500" />
+            <span>{formatCompactNumber(stars)}</span>
+          </div>
+        </>
+      )}
+    </Link>
+  )
+}

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.