From 749d3fa7c5797c8d65b1498ee71d31d6960487e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 10 Oct 2024 16:08:35 -0500
Subject: [PATCH] feat: basic ad component

---
 packages/website/src/components/Ad.tsx        | 19 ++++++++-------
 .../src/components/AdMidSectionNarrowOnly.tsx | 19 ---------------
 .../src/components/AdMidSectionResponsive.tsx | 24 -------------------
 .../src/components/AdMidSectionWideOnly.tsx   | 19 ---------------
 packages/website/src/components/Party3.astro  |  2 +-
 packages/website/src/layouts/RootLayout.astro |  1 +
 packages/website/src/pages/index.astro        | 12 +++++-----
 7 files changed, 18 insertions(+), 78 deletions(-)
 delete mode 100644 packages/website/src/components/AdMidSectionNarrowOnly.tsx
 delete mode 100644 packages/website/src/components/AdMidSectionResponsive.tsx
 delete mode 100644 packages/website/src/components/AdMidSectionWideOnly.tsx

diff --git a/packages/website/src/components/Ad.tsx b/packages/website/src/components/Ad.tsx
index a70f22423..ae0bedc97 100644
--- a/packages/website/src/components/Ad.tsx
+++ b/packages/website/src/components/Ad.tsx
@@ -1,25 +1,26 @@
 import { Box, type BoxProps } from '@radix-ui/themes';
-import { useEffect } from 'react';
+import { uniqueId } from 'lodash-es';
+import { useEffect, useRef } from 'react';
 
 type AdProps = BoxProps & {};
 
 export function Ad({ ...props }: AdProps) {
-  const id = 'test';
+  const id = useRef(uniqueId('ad-'));
 
   useEffect(() => {
-    (window as any).nitroAds.createAd('test', {
-      demo: true,
+    (window as any).nitroAds.createAd(id.current, {
       refreshTime: 30,
-      renderVisibleOnly: false,
-      sizes: [],
+      demo: import.meta.env.MODE === 'development',
+      renderVisibleOnly: true,
+      delayLoading: true,
       report: {
-        enabled: true,
+        enabled: false,
         icon: true,
         wording: 'Report Ad',
         position: 'top-right',
       },
     });
-  }, [id]);
+  }, []);
 
-  return <Box id={id} {...props} />;
+  return <Box id={id.current} width="100%" {...props} />;
 }
diff --git a/packages/website/src/components/AdMidSectionNarrowOnly.tsx b/packages/website/src/components/AdMidSectionNarrowOnly.tsx
deleted file mode 100644
index ee53813fb..000000000
--- a/packages/website/src/components/AdMidSectionNarrowOnly.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Flex, type FlexProps } from '@radix-ui/themes';
-import { Ad, AdType } from './Ad';
-
-export function AdMidSectionNarrowOnly(props: FlexProps) {
-  return (
-    <Flex
-      justify="center"
-      py="4"
-      gap="4"
-      display={{
-        initial: 'flex',
-        sm: 'none',
-      }}
-      {...props}
-    >
-      <Ad type={AdType.MediumRectangleHorizontalPurple} />
-    </Flex>
-  );
-}
diff --git a/packages/website/src/components/AdMidSectionResponsive.tsx b/packages/website/src/components/AdMidSectionResponsive.tsx
deleted file mode 100644
index bea58b26c..000000000
--- a/packages/website/src/components/AdMidSectionResponsive.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { type FlexProps } from '@radix-ui/themes';
-
-export function AdMidSectionResponsive(_: FlexProps) {
-  return null;
-
-  // return (
-  //   <Flex justify="center" py="4" gap="4" {...props}>
-  //     <Ad
-  //       display={{
-  //         initial: 'none',
-  //         sm: 'block',
-  //       }}
-  //       type={AdType.LeaderboardHorizontalPurple}
-  //     />
-  //     <Ad
-  //       display={{
-  //         initial: 'block',
-  //         sm: 'none',
-  //       }}
-  //       type={AdType.MediumRectangleHorizontalPurple}
-  //     />
-  //   </Flex>
-  // );
-}
diff --git a/packages/website/src/components/AdMidSectionWideOnly.tsx b/packages/website/src/components/AdMidSectionWideOnly.tsx
deleted file mode 100644
index cc828043c..000000000
--- a/packages/website/src/components/AdMidSectionWideOnly.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Flex, type FlexProps } from '@radix-ui/themes';
-import { Ad, AdType } from './Ad';
-
-export function AdMidSectionWideOnly(props: FlexProps) {
-  return (
-    <Flex
-      justify="center"
-      py="4"
-      gap="4"
-      display={{
-        initial: 'none',
-        sm: 'flex',
-      }}
-      {...props}
-    >
-      <Ad type={AdType.LeaderboardHorizontalPurple} />
-    </Flex>
-  );
-}
diff --git a/packages/website/src/components/Party3.astro b/packages/website/src/components/Party3.astro
index 370d4e2fe..8b073d3e0 100644
--- a/packages/website/src/components/Party3.astro
+++ b/packages/website/src/components/Party3.astro
@@ -14,7 +14,7 @@
 </script>
 
 {/* nitro ads */}
-<script data-cfasync="false" is:inline>
+<script is:inline data-cfasync="false">
   window.nitroAds = window.nitroAds || {
     createAd: function () {
       return new Promise((e) => {
diff --git a/packages/website/src/layouts/RootLayout.astro b/packages/website/src/layouts/RootLayout.astro
index 6386fac22..923bcc2ff 100644
--- a/packages/website/src/layouts/RootLayout.astro
+++ b/packages/website/src/layouts/RootLayout.astro
@@ -35,6 +35,7 @@ const isRoot = pathname === '/';
     <meta property="og:site_name" content="BlitzKit" />
     <meta charset="UTF-8" />
     <link rel="icon" type="image/x-icon" href="/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <Party3 />
   </head>
diff --git a/packages/website/src/pages/index.astro b/packages/website/src/pages/index.astro
index 2be50e1c8..bfb85763e 100644
--- a/packages/website/src/pages/index.astro
+++ b/packages/website/src/pages/index.astro
@@ -24,12 +24,6 @@ import RootLayout from '../layouts/RootLayout.astro';
     <Flex maxWidth="64rem" flexGrow="1" gap="4" direction="column">
       <ToolCard tool={tankopediaTool} />
 
-      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
-        {/* <ToolCard tool={playerStatsTool} /> */}
-        <ToolCard tool={compareTool} />
-        <ToolCard tool={tankPerformanceTool} />
-      </Flex>
-
       {
         (
           <Flex justify="center">
@@ -38,6 +32,12 @@ import RootLayout from '../layouts/RootLayout.astro';
         )
       }
 
+      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+        {/* <ToolCard tool={playerStatsTool} /> */}
+        <ToolCard tool={compareTool} />
+        <ToolCard tool={tankPerformanceTool} />
+      </Flex>
+
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard tool={sessionTool} />
         {/* <ToolCard tool={embedTool} /> */}