feat: some ads basework

packages/website/src/components/Ad.tsx

@@ -1,71 +1,25 @@
-import { type BoxProps } from '@radix-ui/themes';
+import { Box, type BoxProps } from '@radix-ui/themes';
+import { useEffect } from 'react';
 
-export enum AdType {
-  MediumRectangleHorizontalPurple = 738182777,
-  LeaderboardHorizontalPurple = 84051521,
-  WideSkyscraperVerticalPurple = 1755617140,
-  HalfPageVerticalPurple = 880185176,
-}
-
-// const AD_DIMENSIONS: Record<AdType, Vector2Tuple> = {
-//   [AdType.MediumRectangleHorizontalPurple]: [300, 250],
-//   [AdType.LeaderboardHorizontalPurple]: [728, 90],
-//   [AdType.WideSkyscraperVerticalPurple]: [160, 600],
-//   [AdType.HalfPageVerticalPurple]: [300, 600],
-// };
-
-type AdProps = BoxProps & {
-  type: AdType;
-};
-
-export function Ad({}: AdProps) {
-  return null;
-
-  // const id = useRef(uniqueId());
-  // const dimensions = AD_DIMENSIONS[type];
-
-  // useEffect(() => {
-  //   (window as any).msAdsQueue.push(function () {
-  //     (window as any).mmnow.render({
-  //       adUnitId: type,
-  //       elementId: `${type}-${id.current}`,
-  //     });
-  //   });
-  // }, [type]);
-
-  // return (
-  //   <Box
-  //     position="relative"
-  //     width={`${dimensions[0]}px`}
-  //     height={`${dimensions[1]}px`}
-  //     style={{
-  //       outline: '1px solid var(--gray-3)',
-  //       borderRadius: 'var(--radius-1)',
-  //       background: `url(${imgur('DK21EHY')})`,
-
-  //       ...style,
-  //     }}
-  //     {...props}
-  //   >
-  //     <Text
-  //       color="gray"
-  //       style={{
-  //         position: 'absolute',
-  //         top: '50%',
-  //         left: '50%',
-  //         transform: 'translate(-50%, -50%)',
-  //       }}
-  //       align="center"
-  //     >
-  //       Advertisement
-  //     </Text>
-
-  //     <Box
-  //       width={`${dimensions[0]}px`}
-  //       height={`${dimensions[1]}px`}
-  //       position="relative"
-  //       id={`${type}-${id.current}`}
-  //     />
-  //   </Box>
-  // );
+type AdProps = BoxProps & {};
+
+export function Ad({ ...props }: AdProps) {
+  const id = 'test';
+
+  useEffect(() => {
+    (window as any).nitroAds.createAd('test', {
+      demo: true,
+      refreshTime: 30,
+      renderVisibleOnly: false,
+      sizes: [],
+      report: {
+        enabled: true,
+        icon: true,
+        wording: 'Report Ad',
+        position: 'top-right',
+      },
+    });
+  }, [id]);
+
+  return <Box id={id} {...props} />;
 }

packages/website/src/components/Party3.astro

@@ -1,3 +1,4 @@
+{/* google analytics */}
 <script
   is:inline
   async
@@ -11,3 +12,24 @@
   gtag('js', new Date());
   gtag('config', 'G-GL2JVHCGPQ');
 </script>
+
+{/* nitro ads */}
+<script data-cfasync="false" is:inline>
+  window.nitroAds = window.nitroAds || {
+    createAd: function () {
+      return new Promise((e) => {
+        window.nitroAds.queue.push(['createAd', arguments, e]);
+      });
+    },
+    addUserToken: function () {
+      window.nitroAds.queue.push(['addUserToken', arguments]);
+    },
+    queue: [],
+  };
+</script>
+<script
+  is:inline
+  data-cfasync="false"
+  async
+  src={`https://s.nitropay.com/ads-${import.meta.env.PUBLIC_NITROPAY_ID}.js`}
+></script>

packages/website/src/pages/ads.txt.ts

@@ -0,0 +1,14 @@
+import type { APIContext } from 'astro';
+
+export const prerender = false;
+
+export async function GET({}: APIContext) {
+  const response = await fetch(
+    `https://api.nitropay.com/v1/ads-${import.meta.env.PUBLIC_NITROPAY_ID}.txt`,
+  );
+  const text = await response.text();
+  const date = new Date();
+  const content = `# Generated on ${date.toUTCString()}\n\n${text}`;
+
+  return new Response(content);
+}

packages/website/src/pages/index.astro

@@ -1,5 +1,6 @@
 ---
 import { Box, Flex, Heading } from '@radix-ui/themes';
+import { Ad } from '../components/Ad';
 import HomeHero from '../components/HomeHero.astro';
 import { Plugs } from '../components/Plugs.tsx';
 import ToolCard from '../components/ToolCard.astro';
@@ -29,13 +30,13 @@ import RootLayout from '../layouts/RootLayout.astro';
         <ToolCard tool={tankPerformanceTool} />
       </Flex>
 
-      <!-- {
-        !exempt && (
+      {
+        (
           <Flex justify="center">
-            <AdMidSectionResponsive />
+            <Ad client:only="react" />
           </Flex>
         )
-      } -->
+      }
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard tool={sessionTool} />