Draft Deploy to check if script run on desktop only

choubari · Sep 25, 2023 · d2a4b4a · d2a4b4a
1 parent 1ec4523
commit d2a4b4a
Show file tree

Hide file tree

Showing 3 changed files with 3,176 additions and 3,022 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,6 +4,7 @@ import { Providers } from "@/lib/provider";
 import Footer from "@/components/footer";
 import { siteConfig } from "@/config/site";
 import Analytics from "@/components/analytics";
+import { isDesktop, isMobile } from "react-device-detect";
 
 export const metadata = {
   title: siteConfig.name,
@@ -62,6 +63,8 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
+  console.log("isMobile ", isMobile);
+  console.log("isDesktop ", isDesktop);
   return (
     <html lang="en" suppressHydrationWarning={true}>
       <body
@@ -78,19 +81,24 @@ export default function RootLayout({
         <Footer />
         {/* TODO: replace with html script tag as the Nextjs Script didn't work */}
         {/* TODO: load this script only on desktop */}
-        {/* <Script
-          data-name="BMC-Widget"
-          data-cfasync="false"
-          src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
-          data-id="choubari"
-          data-description="Support me on Buy me a coffee!"
-          data-message="Thank you for visiting my website! You may want to buy me a coffee ;)"
-          data-color="#12c5ca"
-          data-position="Right"
-          data-x_margin="18"
-          data-y_margin="18"
-          strategy="lazyOnload"
-        ></Script> */}
+        <h1 className="text-xl font-bold">
+          isDesktop{":" + isDesktop}, isMobile{":" + isMobile}
+        </h1>
+        {isDesktop && (
+          <script
+            data-name="BMC-Widget"
+            data-cfasync="false"
+            src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
+            data-id="choubari"
+            data-description="Support me on Buy me a coffee!"
+            data-message="Thank you for visiting my website! You may want to buy me a coffee ;)"
+            data-color="#12c5ca"
+            data-position="Right"
+            data-x_margin="18"
+            data-y_margin="18"
+            // strategy="lazyOnload"
+          ></script>
+        )}
       </body>
     </html>
   );

diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "next-themes": "^0.2.1",
     "postcss": "8.4.23",
     "react": "18.2.0",
+    "react-device-detect": "^2.2.3",
     "react-dom": "18.2.0",
     "react-google-recaptcha": "^3.1.0",
     "react-icons": "^4.8.0",