From 26853d687a6467a90676a9b4c47a1510ac7e535b Mon Sep 17 00:00:00 2001
From: Luke Oliff <luke@lukeoliff.com>
Date: Wed, 13 Mar 2024 09:56:31 +0000
Subject: [PATCH] feat: replace code link with stars count button and link

---
 app/components/InitialLoad.tsx |  5 +++--
 app/globals.css                |  4 +++-
 app/layout.tsx                 | 16 +++++++++++-----
 app/page.tsx                   | 22 ++++++++++++++++------
 package-lock.json              | 17 +++++++++++++++++
 package.json                   |  1 +
 6 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/app/components/InitialLoad.tsx b/app/components/InitialLoad.tsx
index fa7fafbd..3bf9f354 100644
--- a/app/components/InitialLoad.tsx
+++ b/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>
diff --git a/app/globals.css b/app/globals.css
index 307b8d83..ce56d2d0 100644
--- a/app/globals.css
+++ b/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;
   }
 }
 
diff --git a/app/layout.tsx b/app/layout.tsx
index a7ae7412..b9d23d1a 100644
--- a/app/layout.tsx
+++ b/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>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
index 297920d6..179dffd8 100644
--- a/app/page.tsx
+++ b/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,8 +34,19 @@ 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"
@@ -44,13 +54,13 @@ export default function Home() {
                 >
                   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>
diff --git a/package-lock.json b/package-lock.json
index 2a67d8cd..54962315 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,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",
@@ -9308,6 +9309,11 @@
         "node": ">=16"
       }
     },
+    "node_modules/github-buttons": {
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/github-buttons/-/github-buttons-2.27.0.tgz",
+      "integrity": "sha512-PmfRMI2Rttg/2jDfKBeSl621sEznrsKF019SuoLdoNlO7qRUZaOyEI5Li4uW+79pVqnDtKfIEVuHTIJ5lgy64w=="
+    },
     "node_modules/glob": {
       "version": "7.1.7",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
@@ -16058,6 +16064,17 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-github-btn": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/react-github-btn/-/react-github-btn-1.4.0.tgz",
+      "integrity": "sha512-lV4FYClAfjWnBfv0iNlJUGhamDgIq6TayD0kPZED6VzHWdpcHmPfsYOZ/CFwLfPv4Zp+F4m8QKTj0oy2HjiGXg==",
+      "dependencies": {
+        "github-buttons": "^2.22.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index e722b1f8..f9156ea0 100644
--- a/package.json
+++ b/package.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",