feat: ad placements

packages/website/src/components/Ad.tsx

@@ -1,14 +1,13 @@
 import { Box, type BoxProps } from '@radix-ui/themes';
-import { uniqueId } from 'lodash-es';
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 
-type AdProps = BoxProps & {};
-
-export function Ad({ ...props }: AdProps) {
-  const id = useRef(uniqueId('ad-'));
+type AdProps = BoxProps & {
+  id: string;
+};
 
+export function Ad({ id, ...props }: AdProps) {
   useEffect(() => {
-    (window as any).nitroAds.createAd(id.current, {
+    (window as any).nitroAds.createAd(id, {
       refreshTime: 30,
       demo: import.meta.env.MODE === 'development',
       renderVisibleOnly: true,
@@ -22,5 +21,5 @@ export function Ad({ ...props }: AdProps) {
     });
   }, []);
 
-  return <Box id={id.current} width="100%" {...props} />;
+  return <Box id={id} width="100%" {...props} />;
 }

packages/website/src/components/HomeHero.astro

@@ -47,7 +47,7 @@ const isBranchNamed =
     position="relative"
     width="100%"
   >
-    <Flex direction="column" align="center" gap="1">
+    <Flex direction="column" align="center">
       <Heading size="9" weight="bold" align="center">
         <Flex
           align="center"
@@ -68,7 +68,7 @@ const isBranchNamed =
       {
         !isBranchNamed && (
           <Text color="gray" align="center" size="4">
-            Everything World of Tanks Blitz
+            By TrèsAbhi ❤️
           </Text>
         )
       }

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

@@ -10,7 +10,14 @@ import {
   type TankDefinition,
 } from '@blitzkit/core';
 import { useStore } from '@nanostores/react';
-import { Callout, Flex, Link, Text, type FlexProps } from '@radix-ui/themes';
+import {
+  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';
@@ -23,7 +30,7 @@ import {
   SORT_UNITS,
 } from '../../stores/tankopediaPersistent/constants';
 import { $tankopediaSort } from '../../stores/tankopediaSort';
-import { AdMidSectionResponsive } from '../AdMidSectionResponsive';
+import { Ad } from '../Ad';
 import { ExperimentIcon } from '../ExperimentIcon';
 import { FilterControl } from './components/FilterControl';
 import { NoResults } from './components/NoResults';
@@ -471,7 +478,9 @@ export const TankSearch = memo<TankSearchProps>(
                       !compact &&
                       (index + 16) % 32 === 0 &&
                       index !== tanks.length - 1 && (
-                        <AdMidSectionResponsive gridColumn="1 / -1" />
+                        <Box gridColumn="1 / -1">
+                          <Ad id={`ad-${index}`} />
+                        </Box>
                       )}
                   </Fragment>
                 ))}

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx

@@ -31,7 +31,6 @@ import { useEquipment } from '../../../../../hooks/useEquipment';
 import { useTankModelDefinition } from '../../../../../hooks/useTankModelDefinition';
 import { Duel } from '../../../../../stores/duel';
 import { TankopediaEphemeral } from '../../../../../stores/tankopediaEphemeral';
-import { Ad, AdType } from '../../../../Ad';
 import { Info } from './components/Info';
 import { InfoWithDelta } from './components/InfoWithDelta';
 
@@ -504,7 +503,8 @@ export function Characteristics() {
         </Flex>
       </Flex>
 
-      {!exempt && (
+      {/* AD TODO: */}
+      {/* {!exempt && (
         <Flex
           justify="center"
           display={{
@@ -514,7 +514,7 @@ export function Characteristics() {
         >
           <Ad type={AdType.MediumRectangleHorizontalPurple} />
         </Flex>
-      )}
+      )} */}
 
       <Flex direction="column" gap="8" style={{ flex: 1 }}>
         <Flex direction="column" gap="2">

packages/website/src/pages/index.astro

@@ -24,13 +24,7 @@ import RootLayout from '../layouts/RootLayout.astro';
     <Flex maxWidth="64rem" flexGrow="1" gap="4" direction="column">
       <ToolCard tool={tankopediaTool} />
 
-      {
-        (
-          <Flex justify="center">
-            <Ad client:only="react" />
-          </Flex>
-        )
-      }
+      <Ad client:only="react" id="ad-1" />
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         {/* <ToolCard tool={playerStatsTool} /> */}
@@ -41,34 +35,20 @@ import RootLayout from '../layouts/RootLayout.astro';
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard tool={sessionTool} />
         {/* <ToolCard tool={embedTool} /> */}
-        <!-- <ToolCard tool={ratingTool} /> -->
+        {/* <ToolCard tool={ratingTool} /> */}
         <ToolCard tool={discordTool} />
       </Flex>
 
-      <!-- {
-        !exempt && (
-          <Flex
-            justify="center"
-            display={{
-              initial: 'flex',
-              md: 'none',
-            }}
-          >
-            <AdMidSectionResponsive />
-          </Flex>
-        )
-      } -->
+      <Ad client:only="react" id="ad-2" />
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard tool={moreTool} />
         <Box flexGrow="1" />
       </Flex>
 
-      <!-- {!exempt && <AdMidSectionResponsive />} -->
+      <Heading align="center" mt="6">Other cool projects</Heading>
 
-      <Heading mt="6">Other cool projects</Heading>
-
-      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+      <Flex gap="4" mb="6" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard
           tool={{
             button: {