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', {
-      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} />;
 }

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