feat: basic ad component

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', {
+    (window as any).nitroAds.createAd(id.current, {
-      demo: true,
       refreshTime: 30,
-      renderVisibleOnly: false,
+      demo: import.meta.env.MODE === 'development',
-      sizes: [],
+      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} />;
 }

packages/website/src/components/AdMidSectionNarrowOnly.tsx

@@ -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>
-  );
-}

packages/website/src/components/AdMidSectionResponsive.tsx

@@ -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>
-  // );
-}

packages/website/src/components/AdMidSectionWideOnly.tsx

@@ -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>
-  );
-}

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) => {

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>

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} /> */}