feat: less cls ads

packages/website/src/components/Ad.tsx

@@ -1,17 +1,45 @@
 import { Box, type BoxProps } from '@radix-ui/themes';
 import { useEffect } from 'react';
-import { useAdExempt } from '../hooks/useAdExempt';
+import type { Vector2Tuple } from 'three';
 
 export type AdProps = BoxProps & {
   id: string;
+  commonHeight: 250;
 };
 
-export function Ad({ id, ...props }: AdProps) {
+export enum MaxAdSize {
-  const exempt = useAdExempt();
+  Size728x90,
+  Size970x90,
+  Size970x250,
+  Size300x250,
+  Size336x280,
+  Size320x50,
+  Size320x100,
+  Size320x480,
+  Size160x600,
+  Size300x600,
+}
+
+const MAX_AD_SIZES: Record<MaxAdSize, Vector2Tuple> = {
+  [MaxAdSize.Size728x90]: [728, 90],
+  [MaxAdSize.Size970x90]: [970, 90],
+  [MaxAdSize.Size970x250]: [970, 250],
+  [MaxAdSize.Size300x250]: [300, 250],
+  [MaxAdSize.Size336x280]: [336, 280],
+  [MaxAdSize.Size320x50]: [320, 50],
+  [MaxAdSize.Size320x100]: [320, 100],
+  [MaxAdSize.Size320x480]: [320, 480],
+  [MaxAdSize.Size160x600]: [160, 600],
+  [MaxAdSize.Size300x600]: [300, 600],
+};
+
+export function Ad({ id, commonHeight, ...props }: AdProps) {
+  // const [width, height] =
+  //   maxAdSize === undefined
+  //     ? [undefined, undefined]
+  //     : MAX_AD_SIZES[maxAdSize].map((dimension) => `${dimension}px`);
 
   useEffect(() => {
-    if (exempt) return;
-
     (window as any).nitroAds.createAd(id, {
       refreshTime: 30,
       demo: import.meta.env.MODE === 'development',
@@ -24,9 +52,14 @@ export function Ad({ id, ...props }: AdProps) {
         position: 'top-right',
       },
     });
-  }, [exempt, id]);
+  }, [id]);
 
-  if (exempt) return null;
+  return (
-
+    <Box
-  return <Box id={id} width="100%" {...props} />;
+      id={id}
+      width="100%"
+      height={commonHeight ? `${commonHeight}px` : 'auto'}
+      {...props}
+    />
+  );
 }

packages/website/src/components/Plugs.tsx

@@ -1,14 +1,6 @@
 import { assertSecret, patreonLoginUrl } from '@blitzkit/core';
 import { ArrowRightIcon } from '@radix-ui/react-icons';
-import {
+import { Button, Code, Flex, Link, Separator, Text } from '@radix-ui/themes';
-  Badge,
-  Button,
-  Code,
-  Flex,
-  Link,
-  Separator,
-  Text,
-} from '@radix-ui/themes';
 import { useAdExempt } from '../hooks/useAdExempt';
 import { App } from '../stores/app';
 import { PatreonIcon } from './PatreonIcon';
@@ -38,16 +30,13 @@ function Content() {
         assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH) !== 'opentest' && (
           <>
             <Flex direction="column" gap="3" align="center">
-              <Flex align="center" gap="2">
+              <Text size="5">
-                <Badge color="green">NEW</Badge>
+                BlitzKit{' '}
-                <Text size="5">
+                <Code variant="outline" size="4" color="gray" highContrast>
-                  BlitzKit{' '}
+                  opentest
-                  <Code variant="outline" size="4" color="gray" highContrast>
+                </Code>{' '}
-                    opentest
+                is available now{' '}
-                  </Code>{' '}
+              </Text>
-                  is available now{' '}
-                </Text>
-              </Flex>
 
               <Link href="https://opentest.blitzkit.app/" target="_blank">
                 <Button color="green">

packages/website/src/components/TankSearch/index.tsx

@@ -10,14 +10,7 @@ import {
   type TankDefinition,
 } from '@blitzkit/core';
 import { useStore } from '@nanostores/react';
-import {
+import { Callout, Flex, Link, Text, type FlexProps } from '@radix-ui/themes';
-  Box,
-  Callout,
-  Flex,
-  Link,
-  Text,
-  type FlexProps,
-} from '@radix-ui/themes';
 import fuzzysort from 'fuzzysort';
 import { times } from 'lodash-es';
 import { Fragment, memo, useEffect, useMemo, useState } from 'react';
@@ -481,11 +474,12 @@ export const TankSearch = memo<TankSearchProps>(
                         !compact &&
                         hasAd &&
                         index !== tanks.length - 1 && (
-                          <Box gridColumn="1 / -1">
+                          <Flex gridColumn="1 / -1">
                             <Ad
+                              commonHeight={250}
                               id={`tankopedia-search-ad-${Math.floor(index / 32)}`}
                             />
-                          </Box>
+                          </Flex>
                         )}
                     </Fragment>
                   );

packages/website/src/hooks/useAdExempt.ts

@@ -5,7 +5,7 @@ let cache: Record<string, boolean | Promise<boolean>> = {};
 
 export function useAdExempt() {
   const patreon = App.use((state) => state.logins.patreon);
-  const [exempt, setExempt] = useState(true);
+  const [exempt, setExempt] = useState(false);
 
   useEffect(() => {
     (async () => {
@@ -21,9 +21,6 @@ export function useAdExempt() {
           if (!response.ok) return resolve(false);
 
           const json = await response.json();
-
-          console.log(json);
-
           const exempt = typeof json === 'boolean' && json;
 
           cache[patreon.token] = exempt;

packages/website/src/pages/index.astro

@@ -1,6 +1,6 @@
 ---
 import { Box, Flex, Heading } from '@radix-ui/themes';
-import { AdWithContext } from '../components/AdWithContext';
+import { Ad } from '../components/Ad.tsx';
 import HomeHero from '../components/HomeHero.astro';
 import { Plugs } from '../components/Plugs.tsx';
 import ToolCard from '../components/ToolCard.astro';
@@ -18,13 +18,15 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 <BaseLayout>
   <HomeHero />
 
-  <Plugs />
+  <Plugs client:idle />
 
   <Flex p="4" justify="center" gap="4">
     <Flex maxWidth="64rem" flexGrow="1" gap="4" direction="column">
       <ToolCard tool={tankopediaTool} />
 
-      <AdWithContext client:only="react" id="homepage-ad-1" />
+      <Flex justify="center">
+        <Ad client:idle id="homepage-ad-1" commonHeight={250} />
+      </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         {/* <ToolCard tool={playerStatsTool} /> */}
@@ -39,7 +41,9 @@ import BaseLayout from '../layouts/BaseLayout.astro';
         <ToolCard tool={discordTool} />
       </Flex>
 
-      <AdWithContext client:only="react" id="homepage-ad-2" />
+      <Flex justify="center">
+        <Ad client:idle id="homepage-ad-2" commonHeight={250} />
+      </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard tool={moreTool} />