feat: replace code link with stars count button and link

Author: lukeocodes

app/components/InitialLoad.tsx

@@ -25,13 +25,14 @@ export const InitialLoad = ({ fn }: { fn: () => void }) => {
             </ul>
           </div>
           <span className="mt-4 block font-semibold">
-            <div className="bg-white text-black rounded px-6 py-3 font-semibold sm:w-fit sm:mx-auto">
+            <div className="bg-white text-black rounded px-10 py-3 font-semibold sm:w-fit sm:mx-auto">
               {isBrowser ? "Click" : "Tap"} here to start
             </div>
           </span>
           <span className="mt-4 block text-sm text-gray-100/70">
             <Headphones /> For optimal enjoyment, we recommend using headphones
-            while using this application. Minor bugs and annoyances may appear while using this demo. Pull requests are welcome.
+            while using this application. Minor bugs and annoyances may appear
+            while using this demo. Pull requests are welcome.
           </span>
         </button>
       </div>

app/globals.css

@@ -52,7 +52,9 @@ body {
   }
 
   .gradient-shadow {
-    box-shadow: -1rem 0px 2rem 0px #13ef9335, 1rem 0px 2rem 0px #149afb35;
+    box-shadow:
+      -1rem 0px 2rem 0px #13ef9335,
+      1rem 0px 2rem 0px #149afb35;
   }
 }
 

app/layout.tsx

@@ -61,12 +61,18 @@ export default function RootLayout({
             </PlayQueueContextProvider>
           </MicrophoneContextProvider>
         </ToastContextProvider>
+        <GoogleTagManager gtmId="GTM-5R73N627" />
+        <Script
+          id="github-buttons"
+          async
+          defer
+          src="https://buttons.github.io/buttons.js"
+        ></Script>
+        <Script id="heap-analytics">
+          {`window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};`}
+          {`heap.load("765739241");`}
+        </Script>
       </body>
-      <GoogleTagManager gtmId="GTM-5R73N627" />
-      <Script id="heap-analytics">
-        {`window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};`}
-        {`heap.load("765739241");`}
-      </Script>
     </html>
   );
 }

app/page.tsx

@@ -2,12 +2,11 @@
 
 import Conversation from "./components/Conversation";
 import Image from "next/image";
+import GitHubButton from "react-github-btn";
 
 export const runtime = "edge";
 import * as FullStory from "@fullstory/browser";
 import { useEffect } from "react";
-import { NextUIProvider } from "@nextui-org/react";
-import { BoltIcon } from "./components/icons/BoltIcon";
 import { XIcon } from "./components/icons/XIcon";
 import { FacebookIcon } from "./components/icons/FacebookIcon";
 import { LinkedInIcon } from "./components/icons/LinkedInIcon";
@@ -35,22 +34,33 @@ export default function Home() {
                 />
               </a>
             </div>
-            <div className="flex items-center gap-4 text-sm">
-              <span className="bg-white rounded">
+            <div className="flex items-center gap-6 text-sm">
+              <span className="mt-2">
+                <GitHubButton
+                  href="https://github.com/deepgram-devs/deepgram-conversational-demo"
+                  data-color-scheme="no-preference: light; light: light; dark: light;"
+                  data-show-count="true"
+                  aria-label="Star deepgram-devs/deepgram-conversational-demo on GitHub"
+                >
+                  Star
+                </GitHubButton>
+              </span>
+
+              {/* <span className="bg-white rounded">
                 <a
                   href="https://github.com/deepgram-devs/deepgram-conversational-demo"
                   target="_blank"
                   className="hidden sm:inline-block bg-white text-black rounded m-px px-4 py-2 font-semibold"
                 >
                   View the code
                 </a>
-              </span>
+              </span> */}
 
               <span className="gradient-shadow bg-gradient-to-r to-[#13EF93]/50 from-[#149AFB]/80 rounded">
                 <a
                   href="https://console.deepgram.com/signup?jump=keys"
                   target="_blank"
-                  className="hidden md:inline-block bg-black text-white rounded m-px px-4 py-2 font-semibold"
+                  className="hidden text-xs md:inline-block bg-black text-white rounded m-px px-8 py-2 font-semibold"
                 >
                   Get an API Key
                 </a>

package-lock.json

@@ -26,6 +26,7 @@
     "react": "^18",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18",
+    "react-github-btn": "^1.4.0",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "react-toastify": "^10.0.4",